Разное

Html формы ввода: Тег | htmlbook.ru

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

HTML
<input атрибуты>
XHTML
<input атрибуты />

Атрибуты

accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey
Переход к элементу с помощью комбинации клавиш.
align
Определяет выравнивание изображения.
alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включает или отключает автозаполнение.
autofocus
Устанавливает фокус в поле формы.
border
Толщина рамки вокруг изображения.
checked
Предварительно активированный переключатель или флажок.
disabled
Блокирует доступ и изменение элемента.
form
Связывает поле с формой по её идентификатору.
formaction
Определяет адрес обработчика формы.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
Отменяет встроенную проверку данных на корректность.
formtarget
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
Указывает на список вариантов, которые можно выбирать при вводе текста.
max
Верхнее значение для ввода числа или даты.
maxlength
Максимальное количество символов разрешенных в тексте.
min
Нижнее значение для ввода числа или даты.
multiple
Позволяет загрузить несколько файлов одновременно.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
Устанавливает шаблон ввода.
placeholder
Выводит подсказывающий текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
step
Шаг приращения для числовых полей.
tabindex
Определяет порядок перехода между элементами с помощью клавиши Tab.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>
 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

Строчные элементыФормы

См. также

:read-write

  • Адрес электронной почты
  • Блокирование элементов форм
  • Ввод чисел
  • Веб-адрес
  • Выбор цвета
  • Загрузка файлов
  • Защита от дурака
  • Календарь
  • Кнопки
  • Однострочное текстовое поле
  • Отправка данных формы
  • Переключатели
  • Подсказывающий текст
  • Поле для пароля
  • Поле для поиска
  • Поле для телефона
  • Поле с изображением
  • Ползунок
  • Проверка технологий HTML5
  • Скрытое поле
  • Сумасшедшие формы
  • Флажки
  • Шаблон ввода данных

Атрибут type | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3. 24.015.0XHTML:1.01.1

Описание

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

HTML
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">
XHTML
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" />

Обязательный атрибут

Да

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

Табл. 1. Значения type
ТипОписаниеВид
buttonКнопка.
checkboxФлажки. Позволяют выбрать более одного варианта из предложенных. Пиво Чай Кофе
fileПоле для ввода имени файла, который пересылается на сервер.
hiddenСкрытое поле. Оно никак не отображается на веб-странице. 
imageПоле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
passwordОбычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radioПереключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. Пиво Чай Кофе
resetКнопка для возвращения данных формы в первоначальное значение.
submitКнопка для отправки данных формы на сервер.
textТекстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения, представленные в табл.  2.

Табл. 2. Значения type в HTML5
ТипОписание
colorВиджет для выбора цвета.
dateПоле для выбора календарной даты.
datetimeУказание даты и времени.
datetime-localУказание местной даты и времени.
emailДля адресов электронной почты.
numberВвод чисел.
rangeПолзунок для выбора чисел в указанном диапазоне.
searchПоле для поиска.
telДля телефонных номеров.
timeДля времени.
urlДля веб-адресов.
monthВыбор месяца.
weekВыбор недели.

Поддержка этих значений браузерами показана в табл. 3.

Табл. 3. Поддержка браузерами значений HTML5
ЗначениеInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
color21.
0+		11.01+
date5.0+10.62+5.0+5.0+
datetime5.0+10.62+5.0+5.0+
datetime-local5.0+10.62+5.0+5.0+
email10.05.0+10.62+5.0+4.0+2.3+3.1+
month5.0+10.62+5.0+5.0+
number10.06.0+10.62+5.0+2.3+4.0+
range10.05.0+10.62+5.0+23.0+5.0+
search10.05.0+11.01+5.0+4.0+4.0+
tel10.05.0+11.01+5.0+4.0+3.1+
time5. 0+10.62+5.0+5.0+
url10.05.0+10.62+5.0+4.0+2.3+3.1+
week5.0+10.62+5.0+5.0+

Значение по умолчанию

text

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>  
 
  <form action="input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="images/imgbutton.gif"></p>
  </form>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>   
  <form>
  <p>Введите число от 1 до 10</p>
  <p><input type="range" min="1" max="10"></p>
  </form>
 </body>
</html>

HTML-формы

❮ Назад Далее ❯

HTML-форма используется для сбора пользовательского ввода. Пользовательский ввод чаще всего отправляются на сервер для обработки.

Пример

Имя:

Фамилия:

Попробуйте сами »

Элемент

Элемент HTML используется для создать HTML-форму для пользовательского ввода:


.
элементы формы
.

Элемент

представляет собой контейнер для различных типов элементов ввода, такие как: текстовые поля, флажки, радио кнопки, кнопки отправки и т. д.

Все в этой главе рассматриваются различные элементы формы: HTML-элементы формы.

Элемент

Элемент HTML является наиболее используемый элемент формы.

Элемент может отображаться в много способов, в зависимости от тип атрибут.

Вот несколько примеров:

Тип Описание
Отображает однострочное поле ввода текста
<тип ввода = "радио"> Отображает переключатель (для выбора одного из множества вариантов)
Отображает флажок (для выбора нуля или более из множества вариантов)
Отображает кнопку отправки (для отправки формы)
<тип ввода = "кнопка"> Отображает нажимаемую кнопку

В этой главе рассматриваются все различные типы входов: Типы ввода HTML.

Текстовые поля

определяет однострочное поле ввода для ввод текста.

Пример

Форма с полями ввода текста:


 

 

 

 

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Имя:

Фамилия:

Примечание:

Сама форма не видна. Также обратите внимание, что ширина по умолчанию поля ввода составляет 20 символов.

Элемент

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *