ГРУППА КУРСА
|
Главная >
Учебник HTML >
Типы тега inputТег <input> имеет много разных типов. Тип устанавливается с помощью атрибута type. В зависимости от типа, тег input выглядит по-разному. Использование некоторых атрибутов тоже зависит от типа. В этой теме мы рассмотрим основные типы <input>. Текстовое полеЭто однострочное поле для ввода текста. type="text" Это тип, установленный по умолчанию. Если по каким-то причинам тип указан неправильно, то будет применён именно этот тип. Для примера создадим форму и добавим в неё текстовое поле. При добавлении этого типа <input>, атрибут type можно не указывать. +
Напомню, что атрибут name содержит имя элемента формы, которое отправляется на сервер вместе с значением, введённым пользователем. ПарольЭто текстовое поле для ввода пароля. Символы в этом поле отображаются в виде точек, чтобы никто не мог видеть текст, введённый пользователем. type="password" Добавим это поле в форму. Тег <input> - это строчный элемент. Чтобы каждый тег input находился на отдельной строке, их можно разделить тэгами <br>.
Посмотрите, как выглядит текст, введённый в это поле ФайлЭто поле для оправки файла на сервер. Оно имеет кнопку "Обзор", чтобы можно было найти и указать нужный файл на диске. type="file" Добавим это поле в форму:
Этот тип имеет атрибут accept, который позволяет отправлять файлы только определённого формата. Атрибут может принимать значения: accept="audio/*" - звуковые файлы accept="video/*" - видео файлы accept="image/*" - изображения accept=MIME-тип Существует атрибут multiple, который позволяет отправить сразу несколько файлов. Добавим эти атрибуты тегу <input>.
Теперь в окне, которое появляется при нажатии кнопки "Обзор", можно выбрать несколько файлов, но только изображения. КнопкаЭтот тип редко используется в формах, отправляемых на сервер. Чаще он применяется для скриптов. type="button" Атрибут value содержит текст, который отображается на кнопке. Добавим кнопку на страницу:
ЧекбоксЧекбокс позволяет пользователю сделать выбор из предложенных вариантов. Это делается с помощью флажков, которые можно устанавливать и снимать. Пользователь может выбрать один или несколько вариантов или не выбрать ни один. type="checkbox" Чекбокс имеет маленький размер и на него неудобно нажимать. Поэтому тег <input> обычно располагается внутри тега <label>вместе с пояснением. Пример:
Атрибут name - это имя элемента формы, так же как у других типов. А атрибут value - это значение, которое отправляется на сервер вместе с именем. Из тех чекбоксов, которые выбрал пользователь, имя и значение отправляются на сервер. Если пользователь выбрал несколько вариантов, то на сервер отправляется несколько параметров. Как нужно устанавливать имена и значения, будет рассмотрено в учебнике PHP. Если каким-то вариантам указан атрибут checked, то эти варианты выбраны по умолчанию. Радио-кнопкаРадио-кнопка очень похожа по смыслу на чекбокс. Она отличается тем, что пользователь может выбрать только один вариант из предложенных. type="radio" Атрибут name должен быть одинаковым у всех тегов input. Именно одинаковое название объединяет радио-кнопки в группу, из которой можно выбрать только один вариант.
Скрытое полеСкрытое поле - это элемент формы, который не отображается на странице. type="hidden" Значение, которое отправляется на сервер, содержится в атрибуте value. Оно может быть изменено при помощи скриптов. Добавим этот элемент в форму:
Кнопка отправкиПри нажатии на кнопку отправки, все данные из формы отправляются на сервер. type="submit" Атрибут value содержит текст, который отображается на кнопке. Добавим кнопку отправки в форму:
ИзображениеЭтот тип работает также, как кнопка отправки. При нажатии на него, данные из формы отправляются на сервер. Только вместо кнопки на странице находится изображение. type="image" В атрибуте src указывается путь к файлу изображения.
Другие типыВ HTML5 есть ещё несколько новых типов тэга <input>. Но они плохо реализованы во многих браузерах и редко используюются. Поэтому я кратко перечислю их. type="email" - поле для указания электронной почты type="url" - поле для URL-адреса type="tel" - поле для указания телефона type="search" - поле для поиска type="color" - выбор цвета type="number" - поле для вода чисел type="range" - ползунок для выбора чисел type="time" - указание времени type="date" - указание даты type="datetime" - указание даты и времени type="datetime-local" - указание локальной даты и времени type="week" - указание недели type="month" - указание месяца Другие атрибуты тега inputТег <input> имеет много других атрибутов, которые используются в зависимости от типа. Назову основные: Атрибут autocomplete устанавливает автоматическое заполнение поля для ввода при возвращении на страницу. Если пользователь заполнил поле для ввода и отправил форму, а затем вернулся на страницу, то в поле будет содержаться введёный ранее текст. Значение атрибуту устанавливать не нужно. Работает не во всех браузерах. Атрибут autofocus устанавливает, что элемент должен быть в фокусе после загрузки страницы. Значение можно не указывать. Атрибут size определяет длинну поля для ввода. Значение указывается в символах. При этом нужно писать только число в кавычках. Невозможно сделать поле для ввода очень которким. Если указать слишком маленькое значение, то поле всё равно будет не меньше опредеённой длинны. В каждом браузера она разная. Атрибут maxlength устанавливает максимальное число символов, которое можно ввести в поле для ввода. Атрибуты max и min применяются к типам, в которых можно указать число или дату. Они определяют максимальное и минимальное значения, которые можно ввести. Атрибут placeholder устанавливает описание поля для ввода. Описание находится в самом поле, когда оно пустое. Оно изчезает, когда пользователь начинает вводить значение. |