Тег input применяется для создания различных полей ввода, то есть для возможности получения данных от посетителя сайта. Если данные предназначены для отправки на сервер, то input нужно помещать внутри тега формы – form.
Ниже приводится пример формы с вводом двух полей: Имя, фамилия. Тег label используется для вывода пояснительного текста перед полем:
<form action="action.php">
<label for="fname">Ваше имя:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
</form>Атрибуты и типы полей
У этого тега много атрибутов – около трех десятков. Основным из них является type. При присваивании этому атрибуту определенного значения задается тип поля, определяющего вид данных, введение которых ожидается со стороны посетителя сайта. Большинство остальных атрибутов тега input является дополнениями к type и допустимы к употреблению в зависимости от значения, которое он имеет.
Закрывающего тега нет.
Поля, определяемые с помощью атрибута, обладают самыми различными свойствами. Это могут быть:
- кнопки, запускающие различные скрипты, управляющие, например, сбросом вводимой информации или отправкой файла;
- области, предназначенные для ввода текста, чисел, календарной даты, недели месяца, времени;
- переключатели – из нескольких предлагаемых вариантов нужно выбрать один;
- наборы флажков, где можно отметить любое их количество.
Далее описаны значения, которые может принимать type. Следует иметь в виду, что каждое поле должно иметь атрибут name, установленный индивидуально. Это необходимо для реализации процесса передачи информации на сервер.
button – обычная кнопка
На страницу выводится кнопка, которую можно нажать с помощью кнопки мыши. К этому действию обычно привязывают выполнение какого-либо скрипта, написанного на JavaScript.
Со значением используется атрибут value – надпись на кнопке.
Форма записи:
<input type = "button" name = "mbutton" value = "Рассчитать">
submit – кнопка передачи данных
Имеет такой же внешний вид, как и предыдущая кнопка, и служит для отправки введенных в форме данных на сервер.
С этим значением работают атрибуты:
- value – надпись на кнопке;
- formaction – адрес файла, используемого для обработки вводимых данных;
- formenctype – способ кодировки отправляемой информации;
- formmethod – назначение HTTP-метода для отправляемой информации;
- formnovalidate – отсутствие проверки данных на корректность;
- formtarget – задание места появления ответа (текущее окно, вкладка, фрейм).
Форма записи:
<input type = “button” name = “mbutton” value = “Отправить”>
reset – кнопка сброса
Нажатие на кнопку сбрасывает введенные в форму данные.
Вместе с этим значением используется атрибут value.
Форма записи:
<input type = “reset” name = “mreset” value = “Очистить”>
checkbox – флажок
Выводится небольшое поле (как правило, в форме квадрата), имеющее два возможных состояния – отмечено (стоит пометка в виде галочки) или нет (пустое).
Используются атрибуты:
- value – пометка на флажке, передаваемая программе;
- checked – начальная установка.
Атрибут checked является логическим.
Обычно совместно с тегом input вводится тег label, предназначенный для введения названия поля.
Форма записи:
<input type = “checkbox” name = “mlabel” value = “yes”>
<label for = “mlabel”>Отметить</label>
radio – переключатель
Для выполнения функции переключателя требуется более одного тега input, имеющего атрибут type, установленный в radiо, при этом значение name у всех них должно быть одним и тем же. На экран выводится группа из нескольких окошек. Одновременно выбранным может быть только одно из них.
Аргументы:
- value – состояние элемента переключателя;
- checked – окошко, выбранное по умолчанию.
Форма записи:
<input type=”radio” id=”radio1″ name = “r” checked>
<label for = “radio1″>Автомобиль</label>
<input type=”radio” id=”radio2″ name = “r”>
<label for=”radio2″>Велосипед</label>
range – ползунок
С помощью ползунка в определенном диапазоне можно выбрать одно из значений, которое и будет передано.
Используемые атрибуты:
- max – минимальное значение;
- min – максимальное значение;
- step – шаг.
Форма записи:
<input type = “range” name “mrange” max = “0” min = “100” step = “1”>
text – поле для ввода текста
Поскольку передача текстовой информации является наиболее частым действием пользователя, то именно поле ввода текста установлено значением по умолчанию для type. Посетителю предлагается окно, в которое он может ввести текст с помощью клавиатуры. Ограничение: текст вводится в одну строку.
Атрибуты, которые можно использовать:
- value – начальное значение в поле;
- pattern – устанавливает шаблон ввода в виде регулярного выражения;
- maxlength – максимальная длина текста;
- size – ширина поля.
Форма записи:
<input type = “text” name = “mtext” maxlength = “200” size = “100”>
number – поле ввода чисел
Выводится поле для ввода только цифр, а также точек и запятых, служащих разделителями дробной и целой части числа. При вводе букв отправки данных не произойдет.
Атрибуты, которые можно использовать:
- value – начальное значение;
- max – максимальное значение;
- min – минимальное значение;
- step – шаг для изменения.
Форма записи:
<input type = “number” name = “mnumber” min = “0” max = “100” step = “1”>
password – поле ввода пароля
Предназначено для ввода пароля. Отличается от текстового поля лишь тем, что вводимая информация отображается в виде точек, количество которых соответствует числу символов.
Вместе с ним используются атрибуты:
- size – размер поля;
- maxlength – максимальная длина в символах;
- pattern –шаблон ввода.
Форма записи:
<input type = “password” name = “mpass” size = “50” pattern = “”>
- hidden – скрытое поле
Это поле предназначено для передачи служебной информации и не отображается на странице сайта. Его можно увидеть лишь в режиме просмотра HTML-разметки страницы. Наличие такого поля полезно, когда вмешательство пользователя в передаваемые данные нежелательно.
Используемый атрибут – value.
Форма записи:
<input type = “hidden” name “ххххх”value “ ”>
- file – отправка файла
В поле заносится название файла, который и отправляется при отправке формы.
Дополнительно используются атрибуты:
- accept – установка допустимого типа файла;
- multiple – позволяет загрузить несколько файлов одновременно.
Форма записи:
<input type = “file” name = “ххххх” accept = “ ” multiple >
- image – кнопка-картинка
Вместо кнопки используется картинка, нажав на которую, пользователь отправляет данные.
- src – адрес файла-изображения;
- alt – текст, появляющийся в случае затруднений с выводом на экран изображения;
- width – ширина картинки в пикселях;
- height – высота картинки в пикселях$
- align – выравнивание изображения относительно других элементов.
Форма записи:
<input type = “button” name = “ххххх” src = “ ” alt = “ ” width = “ ” height = “ ”>
- email – поле ввода адреса электронной почты
Предназначено для передачи адреса электронной почты. Это новое значение, появившееся в HTML5.
Чтобы сделать возможной отправку нескольких адресов, необходимо установить логический атрибут multiple. При вводе адреса разделяются запятой.
Атрибуты:
- size – размер окна;
- maxlength – максимальная длина в символах;
- pattern – шаблон ввода.
Форма записи:
<input type = “email” name = “ххххх” multiple>
С появлением HTML5 семейство полей атрибута type тега input пополнилось новыми значениями. У пользователя появились возможности ввести дату, время, URL-адрес, номера недели и телефона.