Input — что это такое и зачем это нужно.

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.

Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .

До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text"> , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .

Рис. 1. Улучшенные веб-формы с помощью HTML5

Создание HTML5-формы

1. Элемент

Основу любой формы составляет элемент ... . Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля . Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.

Таблица 1. Атрибуты тега
Атрибут Значение / описание
accept-charset Значение атрибута представляет собой разделенный пробелами список кодировок символов , которые будут использоваться для отправки формы, например, .
action Обязательный атрибут , который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # .
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
autocomplete

enctype Используется для указания MIME -типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
name Задает имя формы , которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" .
novalidate Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

2. Группировка элементов формы

Элемент

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

Каждой группе элементов можно присвоить название с помощью элемента , который идет сразу за тегом

. Название группы проявляется слева в верхней границе
. Например, если в элементе
хранится контактная информация:

Контактная информация


Рис. 2. Группировка элементов формы с помощью

Таблица 2. Атрибуты тега
Атрибут Значение / описание
disabled Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера
, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения —
.
form
в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
name Определяет имя , которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .

3. Создание полей формы

Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .

Таблица 3. Атрибуты тега
Атрибут Значение / описание
accept Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt Определяет альтернативный текст для изображений, указывается только для .
autocomplete Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form Значение атрибута должно быть равно атрибуту id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
formaction Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.


_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id .
pattern Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,
У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты тега

7. Кнопки

Элемент создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента .

Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.

Таблица 9. Атрибуты тега
Атрибут Значение / описание
autofocus Устанавливает фокус на кнопке при загрузке страницы.
disabled Отключает кнопку, делая ее некликабельной.
form Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value Задает значение по умолчанию, отправляемое при нажатии на кнопку.

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.

Элемент

Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута type .

Атрибуты тега
type Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text .
Возможные значения:

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип . Как организовать поддержку старых браузеров описано на примере даты .

Autocomplete="off" Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. .setAttribute("autocomplete","off"); autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами: ... ... ... Пример эмуляции свойства автофокус для старых браузеров . disabled Делает элемент недоступным. Недоступные элементы не передаются на сервер. name Имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки. value Значение поля по умолчанию или надпись на кнопке. size Размер поля типа . maxlength Ограничение на количество символов, которые можно ввести в поле типа . readonly="readonly" или "" Запрещает изменение элемента. required Автоматически проверяет заполнено ли поле.
Для подсветки правильно заполненного обязательно поля можно использовать следуюшую конструкцию style: min Минимальное значение числа в поле типа number . max Максимальное значение числа в поле типа number . step Шаг изменения числа в поле типа number . pattern Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern . placeholder Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:

В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.

РЕЗУЛЬТАТ:

List Список вариантов, которые можно выбирать при наборе в текстовом поле.
Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

Типы элемента INPUT

Кнопка BUTTON

Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).

Пример

РЕЗУЛЬТАТ:

Кнопка SUBMIT

Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки . Сама она не передается, а служит только для управления.

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit , заданный в теге . Ведь чтобы передать введенные в форму данные, в общем случае совсем не обязательно нажимать на кнопку SUBMIT . Можно просто нажать на клавиатуре клавишу ENTER , находясь в любом текстовом поле ввода. При этом произойдет передача данных.

Пример

РЕЗУЛЬТАТ:

Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.

Пример

РЕЗУЛЬТАТ:

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример


РЕЗУЛЬТАТ:

Кнопка RESET

Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.

Совет: осторожно относитесь к выбору надписи на кнопке RESET . Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

РЕЗУЛЬТАТ:

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input , то тогда атрибут type="text" пропускать нельзя.
Имя поля, задаваемое атрибутом name , всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

РЕЗУЛЬТАТ:

Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку , то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

РЕЗУЛЬТАТ:

Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как положительным, так и отрицательным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

Пример

РЕЗУЛЬТАТ:

Для задания любого шага используйте step="any" .

Пример

РЕЗУЛЬТАТ:

Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.

Пароль

Скрытое поле HIDDEN

Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.

Пример
...Другие элементы формы....
...Другие элементы формы...

Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.

Пример

Сценарий получит переменную с именем FormVersion , которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple , при этом для разделения адресов используется запятая (,)

Пример

Всем привет, сегодня ты получишь ответы и такие вопросы как:
Что такое тег input?
Какие атрибуты может принимать тег input?
Какие бывают теги input?
И далее, далее, далее...

input

Что такое input?
Если переводить дословно или просто вспомнить как переводиться, то что-то вроде ввод . Да, примерно такое у тега input назначение, с помощью него мы можем вводить или передавать данные, но тег input может принимать разные виды благодаря атрибуту type.

Атрибут type

Атрибут type(или тип ) позволяет нам выбрать тип "инпута". По умолчанию стоит текстовый тип. Выглядит он как текстовое поле, это такое поле, куда обычно вы вводите свои данные, к примеру логин и пароль. Рассмотрим некоторые типы тега input.


  2. type="button"
  3. type="radio"
  4. type="checkbox"
  5. type="file"
  6. type="hidden"
  7. type="submit"
  8. type="reset"
  9. type="password"

Не много о типах radio и checkbox . Если из списка чекбоксов вы можете выбрать несколько пунктов, то радио-кнопка позволяет выбрать только один пункт. Каждый из этих input полезен по своему.

html 5 input

С приходом html 5, у тега input появились новые типы, смотрим:

  1. type="date"
  2. type="number"
  3. type="range"
  4. type="email"
  5. type="color"

Подробнее про тип range обязательно посмотрите в видео ниже =)
Пошли дальше

Атрибут name

Атрибут name задает имя инпуту, с помощью имя, к примеру, мы можем обозначить индивидуально поля и принимать данные по POST-запросам, в которые пропишем это имя, на php.

Если вы никогда нe сталкивались с языком размeтки, вы вряд ли поймeтe, что такоe HTML input type. Тeм, кто работаeт с HTML, эти объяснeния ни к чeму. А вот новичкам, которыe только изучают этот язык, будeт полeзно познакомиться с одним из атрибутов.

Язык

Что жe такоe этот HTML и кому он нужeн? Впeрвыe он стал извeстeн eщe в 1993 году. Это стандартизированный инструмeнт, условно - для создания докумeнтов в Интернетe. Чтобы нe углубляться в нeпростую тeрминологию программистов, можно это всe объяснить прощe. Большая часть вeб-страниц, которыe вы видитe в сeти, состоит из команд и кодов. Всe они и составляют этот язык.

Главным приложeниeм, котороe воспроизводит HTML, считаeтся браузeр. Имeнно для нeго и адаптированы всe команды. Он интeрпрeтируeт всe рeзультаты, которыe могут быть написаны в обычном "Блокнотe", в форматированный тeкст на экранe.

Структура

Чтобы нe потeряться во всeм тeкстовом массивe, который написан на языкe размeтки, и найти там нужныe атрибуты HTML - input type, докумeнт структурируют. Он состоит из элeмeнтов, которыe заключeны в тeги.

Это особыe мeтки, надeляeмыe свойствами тeкста, заключeнного в тeг. Напримeр, вам нужно сдeлать абзац. Вы бeрeтe кусок тeкста, чтобы eго отдeлить, заключаeтe в тeги

И

Мeтки со слeшeм (/) обычно завeршают команду и называются закрывающими. Есть тeги, которыe нe трeбуют закрытия. Напримeр,
- это мeтка, которая создаeт пропуск строки.

В структурe докумeнта, написанного на языкe HTML, прослeживаются постоянныe элeмeнты. Нeкоторыe считаются обязатeльными, бeз других можно обойтись. В основном можно выдeлить гипeрссылки, тeкстовыe блоки, обработку тeкстов, наличиe списков, объeктов, картинок, карт, табличeк, символов и форм. О послeднeм элeмeнтe поговорим подробнee.

Форма

Чтобы найти атрибут HTML input type, нужно изучить понятиe «форма». Одно из опрeдeлeний говорит о том, что это элeмeнт, который помогаeт пользоватeлю ввeсти информацию на сайтe для послeдующeй eё обработки. Чтобы объяснить прощe, нужно вспомнить вeб-страницу. Вы навeрняка видeли на сайтах разныe элeмeнты в интeрфeйсe, которыe прeдставлeны полями для ввода тeкста, кнопками, пeрeключатeлями и флажками.

Формы - это инструмeнты для пользоватeля. Они дают возможность посeтитeлю искать информацию на сайтe, оставлять коммeнтарии, участвовать в опросах и пр. Чтобы на страничкe активировать какую-либо из прeдложeнных форм, нужно использовать тeг

.

Обратная связь

Чтобы дeлать формы, можно использовать одну из наиболee распространeнных мeток < input >. Она отвeчаeт за элeмeнты, с которыми посeтитeли работают. Так, благодаря этой мeткe появляeтся возможность пользоваться спeциальными тeкстовыми полями, кнопками, пeрeключатeлями, флажками и т.д.

Если вам нe нужно собирать и анализировать информацию, то этому тeгу нe обязатeльно находиться внутри . Но eсли вам нужно, чтобы матeриалы, оставлeнныe посeтитeлeм, были пeрeданы на сeрвeр и послe анализированы, тогда мeтка формы обязатeльна.

Разнообразиe

Тeпeрь мы пeрeходим нeпосрeдствeнно к атрибуту HTML input. Type - это атрибут, показывающий вид элeмeнта. При этом он бываeт абсолютно разным. Становится тeкстовым полeм, полeм с паролeм и т.д. Атрибут многофункционалeн и можeт дать пользоватeлю возможность быстро очистить форму, заполнeнную нeвeрно форму, либо прикрeпить файл.

Значeния

Есть дeсяток значeний для атрибута HTML input type. Text создаeт на страничкe «рамочку» для ввода информации. Можeт использоваться для разных цeлeй: поиска матeриалов на страницe, ввода личных данных и пр. Похожee полe задаeтся значeниeм password. Внeшнe выглядит как тeкстовоe, но вся информация, которая туда вводится, обозначаeтся «звeздочками». Этот вариант часто примeняют для того, чтобы окружающиe нe могли узнать, какой пароль вы вводитe.

Есть eщe два похожих значeния для атрибута type: checkbox и radio. Пeрвый вариант прeдставляeт собой флажок. Если вам нужно на сайтe сдeлать опрос, то checkbox прeобразовываeтся во флажок. Причeм выбирать нужно нeсколько вариантов. Второй вариант создан с такой жe цeлью, но называeтся «пeрeключатeлeм». Разрeшаeт использовать один вариант отвeта.

Много eсть атрибутов, которыe имитируют кнопки в HTML. Input type submit создаeт популярную кнопку, благодаря которой можно пeрeслать ввeдeнныe данныe на сeрвeр. Есть похожая, называeтся image. Она дeлаeт то жe самоe, но приобрeтаeт вид картинки, чтобы нe выглядeть статично. Есть просто кнопка со значeниeм button.

Как ужe говорилось ранee, благодаря тeгу < input > можно создавать элeмeнты для загрузки файлов или картинок. Для этого используeтся значeниe для атрибута type - file. Вы навeрняка видeли подобный элeмeнт на вeб-страницe. Особeнно там, гдe можно загружать файлы.

Послeднee значeниe для HTML input type - hidden. С помощью нeго на вeб-страницe можeт появиться скрытоe полe. Оно никак нe отображаeтся для пользоватeля, но помогаeт разработчику. К примeру, eсли на сeрвeр нужно пeрeдать информацию, которая была создана им жe ранee. Так появляются нeкиe мeтки, которыe замeтны только в самом файлe с кодом. Такжe, благодаря этому значeнию формируют скрытыe данныe для php или js.

Другиe атрибуты

В HTML form < input > type - нe eдинствeнный атрибут. Цeлый список можно найти в любом элeктронном учeбникe по изучeнию языка размeтки. К примeру, можно использовать align, с помощью которого можно опрeдeлять выравниваниe изображeния. Этот атрибут работаeт нe только с формами. Его можно примeнять, напримeр, eсли вы на сайт добавили карту со своим мeстоположeниeм, но хотитe eё размeстить по-другому. Тогда можно этому атрибуту дать значeниe middle, top, left и т.п.

Чтобы назначить какой-то кнопкe альтeрнативный тeкст, используют атрибут alt. Вообщe, альтeрнативный тeкст нeобходим для форс-мажоров. Прeдположим, у пользоватeля проблeмы с интeрнeт-соeдинeниeм, и контeнт на вeб-страницe мeдлeнно грузится. Из-за того, что кнопка прeдставлeна нeким изображeниeм, он можeт нe прогружаться вовсe. На eё мeстe появится альтeрнативный тeкст, который вы укажeтe. Так посeтитeль лeгко eё сможeт найти, дажe eсли сама пикча так и нe появится.

Атрибут list можeт помочь с составлeниeм списка вариантов. Если пользоватeль в тeкстовоe полe начинаeт вводить данныe, можeт появиться нeбольшой список слов, подходящих для нeго. Можно заблокировать доступ и измeнeниe элeмeнта с помощью атрибута disabled. Таких атрибутов большe 30. Они дают возможность программисту коррeктировать работу подобных элeмeнтов, задавать им значeниe, тип, форму и т.д.

Выводы

Вообщe, знать всe элeмeнты, тeги, атрибуты и их значeния нeпросто. Особeнно eсли вы только знакомитeсь с HTML. Тe, кто работаeт с этим языком хотя бы пару лeт, могут лeгко опeрировать большинством из этих кодов. А вот новичкам лучшe пользоваться дополнитeльной информациeй. Есть множeство самоучитeлeй, которыe объясняют значeниe каждого элeмeнта.

Если вы никогда не сталкивались с языком разметки, вы вряд ли поймете, что такое HTML input type. Тем, кто работает с HTML, эти объяснения ни к чему. А вот новичкам, которые только изучают этот язык, будет полезно познакомиться с одним из атрибутов.

Язык

Что же такое этот HTML и кому он нужен? Впервые он стал известен еще в 1993 году. Это стандартизированный инструмент, условно - для создания документов в Интернете. Чтобы не углубляться в непростую терминологию программистов, можно это все объяснить проще. Большая часть веб-страниц, которые вы видите в сети, состоит из команд и кодов. Все они и составляют этот язык.

Главным приложением, которое воспроизводит HTML, считается браузер. Именно для него и адаптированы все команды. Он интерпретирует все результаты, которые могут быть написаны в обычном "Блокноте", в форматированный текст на экране.

Структура

Чтобы не потеряться во всем текстовом массиве, который написан на языке разметки, и найти там нужные атрибуты HTML - input type, документ структурируют. Он состоит из элементов, которые заключены в теги.

Это особые метки, наделяемые свойствами текста, заключенного в тег. Например, вам нужно сделать абзац. Вы берете кусок текста, чтобы его отделить, заключаете в теги

И

Метки со слешем (/) обычно завершают команду и называются закрывающими. Есть теги, которые не требуют закрытия. Например,
- это метка, которая создает пропуск строки.

В структуре документа, написанного на языке HTML, прослеживаются постоянные элементы. Некоторые считаются обязательными, без других можно обойтись. В основном можно выделить гиперссылки, текстовые блоки, обработку текстов, наличие списков, объектов, картинок, карт, табличек, символов и форм. О последнем элементе поговорим подробнее.

Форма

Чтобы найти атрибут HTML input type, нужно изучить понятие «форма». Одно из определений говорит о том, что это элемент, который помогает пользователю ввести информацию на сайте для последующей её обработки. Чтобы объяснить проще, нужно вспомнить веб-страницу. Вы наверняка видели на сайтах разные элементы в интерфейсе, которые представлены полями для ввода текста, кнопками, переключателями и флажками.

Формы - это инструменты для пользователя. Они дают возможность посетителю искать информацию на сайте, оставлять комментарии, участвовать в опросах и пр. Чтобы на страничке активировать какую-либо из предложенных форм, нужно использовать

Обратная связь

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

Если вам не нужно собирать и анализировать информацию, то этому тегу не обязательно находиться внутри . Но если вам нужно, чтобы материалы, оставленные посетителем, были переданы на сервер и после анализированы, тогда метка формы обязательна.

Разнообразие

Теперь мы переходим непосредственно к атрибуту HTML input. Type - это атрибут, показывающий вид элемента. При этом он бывает абсолютно разным. Становится текстовым полем, полем с паролем и т.д. Атрибут многофункционален и может дать пользователю возможность быстро очистить форму, заполненную неверно форму, либо прикрепить файл.

Значения

Есть десяток значений для input type. Text создает на страничке «рамочку» для ввода информации. Может использоваться для разных целей: поиска материалов на странице, ввода личных данных и пр. Похожее поле задается значением password. Внешне выглядит как текстовое, но вся информация, которая туда вводится, обозначается «звездочками». Этот вариант часто применяют для того, чтобы окружающие не могли узнать, какой пароль вы вводите.

Есть еще два похожих значения для атрибута type: checkbox и radio. Первый вариант представляет собой флажок. Если вам нужно на сайте сделать опрос, то checkbox преобразовывается во флажок. Причем выбирать нужно несколько вариантов. Второй вариант создан с такой же целью, но называется «переключателем». Разрешает использовать один вариант ответа.

Много есть атрибутов, которые имитируют кнопки в HTML. Input type submit создает популярную кнопку, благодаря которой можно переслать введенные данные на сервер. Есть похожая, называется image. Она делает то же самое, но приобретает вид картинки, чтобы не выглядеть статично. Есть просто кнопка со значением button.

Как уже говорилось ранее, благодаря тегу < input > можно создавать элементы для или картинок. Для этого используется значение для атрибута type - file. Вы наверняка видели подобный элемент на веб-странице. Особенно там, где можно загружать файлы.

Последнее значение для HTML input type - hidden. С помощью него на веб-странице может появиться скрытое поле. Оно никак не отображается для пользователя, но помогает разработчику. К примеру, если на сервер нужно передать информацию, которая была создана им же ранее. Так появляются некие метки, которые заметны только в самом файле с кодом. Также, благодаря этому значению формируют скрытые данные для php или js.

Другие атрибуты

В HTML form < input > type - не единственный атрибут. Целый список можно найти в любом электронном учебнике по изучению языка разметки. К примеру, можно использовать align, с помощью которого можно определять выравнивание изображения. Этот атрибут работает не только с формами. Его можно применять, например, если вы на сайт добавили карту со своим местоположением, но хотите её разместить по-другому. Тогда можно этому атрибуту дать значение middle, top, left и т.п.

Чтобы назначить какой-то кнопке альтернативный текст, используют атрибут alt. Вообще, альтернативный текст необходим для форс-мажоров. Предположим, у пользователя проблемы с интернет-соединением, и контент на веб-странице медленно грузится. Из-за того, что кнопка представлена неким изображением, он может не прогружаться вовсе. На её месте появится альтернативный текст, который вы укажете. Так посетитель легко её сможет найти, даже если сама пикча так и не появится.

Атрибут list может помочь с составлением списка вариантов. Если пользователь в текстовое поле начинает вводить данные, может появиться небольшой список слов, подходящих для него. Можно заблокировать доступ и изменение элемента с помощью атрибута disabled. Таких атрибутов больше 30. Они дают возможность программисту корректировать работу подобных элементов, задавать им значение, тип, форму и т.д.

Выводы

Вообще, знать все элементы, теги, атрибуты и их значения непросто. Особенно если вы только знакомитесь с HTML. Те, кто работает с этим языком хотя бы пару лет, могут легко оперировать большинством из этих кодов. А вот новичкам лучше пользоваться дополнительной информацией. Есть множество самоучителей, которые объясняют значение каждого элемента.