Html input text атрибуты. Многострочный текст, атрибуты текстовых элементов. Label — для чего нужен этот Html тэг в форме

Приветствую вас, уважаемые читатели блога сайт. Сегодня я хочу поговорить о такой , как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.

Зачем нужны и как работают формы на современных сайтах

Та же строка поиска по сайту () создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.

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

Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, трех ) и .

По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.

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

Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.

Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (), к сожалению, не возможно.

Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.

Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:

" name="title">

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

Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

Любая форма должна быть заключена в открывающий и закрывающий тэги Form . Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST , предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input . Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

C помощью Input и Type можно создавать следующие элементы:

1. однострочные текстовые поля (Type="Text")
2. поля для ввода пароля (Type="Password")
3. чекбоксы (Type="Checkbox")
4. радиокнопки (Type="Radio")
5. скрытые поля (Type="Hidden")
6. обычные кнопки (Type="Button")
7. кнопки для отправки данных в обработчик (Type="Submit")
8. кнопки для приведения вебформы к исходному состоянию (Type="Reset")
9. поля для загрузки файлов на сервер (Type="File)
10. кнопки с изображением (Type="Image")

Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.

Примеры форм, созданных на Input с различными значениями для Type

Другие атрибуты тэга Input и примеры их использования

Рассмотрим, для чего нужны остальные атрибуты:

1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

Теперь давайте рассмотрим все примеры формы с Input . Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:

Введите Ваш E-mail:

Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):

Вам нравится ресурс KtoNanNovenkogo.ru?

Да?
Нет?

Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).

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

Рассмотрим пример создание вебформы с чекбоксами (Checkbox):

Какой движок(и) сайта вы предпочитаете?

WordPress
Joomla
SMF

Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).

Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

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

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

Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.

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

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

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

Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.

Открывающий тег Form в таком случае должен выглядеть примерно так:

Select и Option — тэги выпадающих списков

Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.

Получается примерно так:

Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов , которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.

1. Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь.
2. Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
   1. Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.
   2. Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже
3. Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.

Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.

При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.

Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).

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

Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift можно выделить несколько пунктов одновременно.

Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).

Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:

Label Select SelectED сайт Legend

Атрибуты тега Option

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

Для создания группы из пунктов выпадающего списка нужно заключить их в открывающий и закрывающий теги формы Optgroup, а в открывающем тэге Optgroup прописать атрибут Label, в качестве параметра которого нужно будет ввести желаемое название группы.

Например так:

Label Select
SelectED сайт Legend

Textarea — создание текстового поля в форме

Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается оно с помощью парного Html тега Textarea. Причем, в нем можно переносить текст на новую строку и он будет передаваться на сервер с учетом сделанных переносов.

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

Что вы можете сообщить о себе?

Вместе с Textarea можно использовать следующие атрибуты:

1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

Label — для чего нужен этот Html тэг в форме

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

В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:

Label
Select
SelectED

Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити .

Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:

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

Fieldset и Legend — разбиваем форму на части

Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.

Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.

Вот пример создания групп с помощью Fieldset и Legend:

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Списки в Html коде - теги UL, OL, LI и DL
MailTo - что это и как в Html создать ссылку для отправки Емейла
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах

Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута 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 , при этом для разделения адресов используется запятая (,)

Пример

E-mail:

Наиболее используемым элементом форм несомненно является . С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML 5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type , все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом задается атрибутом name , а его значение по умолчанию можно указать в value .

Значение type	Описание
text	Значение по умолчанию. Элемент предназначен для ввода текстовой строки.
password	Элемент предназначен для ввода паролей. Все вводимые символы заменяются жирными точками.
button	Обычная кнопка, действие которой не определено (применяется для скриптования). Значение value отображается на кнопке.
reset	Кнопка очистки формы. При нажатии значения всех полей обнуляются.
submit	Кнопка отправки данных на сервер. Если такой кнопки нету (и нету варианта с изображением, см. ниже), то отправка формы осуществляется при нажатии на клавишу Enter , при условии, что в форме есть единственный элемент и фокус ввода установлен на нем.
image	Альтернативный вариант кнопки отправки данных в виде графического изображения, адрес которого указывается в атрибуте src , а альтернативный текст — в alt . Ширину и высоту изображения можно определить в атрибутах width и height . Значение value не отображается, но все равно отправляется на сервер.
hidden	Скрытое поле. В браузере не отображается, но также может содержать значения name и value , отправляемые на сервер. Применяется, когда необходимо передать информацию, не вводимую пользователем, но не подходит для сокрытия ее от него, поскольку передаваемое значение может быть легко просмотрено в исходном коде страницы.
checkbox	Флажок «вкл/выкл». Отображается в виде небольшой области с установленной или снятой «галочкой». Если элемент содержит булев атрибут checked="checked" , то она по умолчанию будет установлена.
radio	Переключатель, отображаемый в виде кружочка с жирной точкой (значение выбрано) или без нее (не выбрано). Значение по умолчанию определяется все тем же атрибутом checked="checked" . В отличие от других типов полей, в форме может быть несколько элементов с одинаковым name , однако выбран из них может быть только один. При выборе другого элемента с тем же именем, отметка с остальных автоматически снимается. Таким образом, сервер получает только значение value выбранного элемента . Можно создать несколько групп таких переключателей, задав элементам каждой из них свое имя.
file	Выбор файла. Отображается аналогично текстовому полю, но с добавленной справа кнопкой «Обзор». По нажатии на нее появляется диалоговое окно выбора файла. Можно ограничить допустимые MIME-типы загружаемых файлов, перечислив их через запятую в атрибуте accept . Также можно разрешить выбор нескольких файлов, указав булев атрибут multiple="multiple" . Однако с элементом выбора файла нельзя использовать атрибут value .

Ниже приведены значения атрибута type , введенные в стандарте HTML 5.

Значение type	Описание
search	Текстовое поле, предназначенное для ввода поискового запроса. Отличается от обычного текстового поля своим лексическим назначением. Некоторые браузеры отображают на нем дополнительную кнопку очистки поля.
email	Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но указав булев атрибут multiple="multiple" можно разрешить пользователю ввод нескольких адресов через запятую.
url	Текстовое поле для ввода абсолютного IRI .
tel	Поле для ввода телефонных номеров. В отличие от полей ввода почтовых адресов и URL, телефонный номер по умолчанию не проходит проверку при отправке данных, поскольку существует множество различных форматов телефонных номеров.
number	Поле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать значение.
range	Специальный элемент для выбора значения из заданного диапазона. Представляет собой ползунок, минимальное и максимальное значения которого задаются в атрибутах min и max соответственно, а шаг — в атрибуте step .
time	Элемент для ввода времени. Похож на поле для ввода чисел, но с разделением на часы и минуты.
date	Элемент для выбора даты, представляющий собой выпадающий григорианский календарь.
datetime-local	Комбинация двух предыдущих элементов для ввода даты и времени без учета часового пояса.
datetime	То же, что и предыдущий элемент, но с установленной временной зоной UTC .
week	Элемент для выбора недели. Визуально аналогичен элементу с type="date" , отличается лишь формат значения.
month	Элемент для выбора месяца. Визуально аналогичен элементу с type="date" , отличается лишь формат значения.
color	Специальный элемент для выбора цвета в формате RGB .

Упомянутые атрибуты min , max и step позволяют определить диапазон и шаг допустимых значений не только для элемента с типом range , но и в случае с number и всеми типами, связанными с выбором даты и времени, включая week и month . Конечно, значения этих атрибутов, как и атрибута value , должны быть в соответствующем формате, который легко увидеть на практике, добавив нужный элемент в документ.

Все текстовые поля с произвольной длиной значения поддерживают еще три атрибута — maxlength , позволяющий ограничить эту длину; size , в котором задается количество символов, визуально помещающихся в элемент (относительная ширина элемента); а также pattern , в котором можно указать регулярное выражение JavaScript, определяющее шаблон допустимых значений. Например, pattern="" означает, что в данном поле можно указать число от 0 до 9.

Элемент поддерживает атрибут autocomplete , аналогичный атрибуту формы. Значения on и off позволяют включить и, соответственно, отключить функцию автозаполнения поля браузером. По умолчанию атрибут считается установленным в on .

Многострочный текст, атрибуты текстовых элементов

Вообще говоря, элемент не поддерживает перенос строки, а значит не позволяет вводить многострочный текст. Для этих целей существует специальный тег , имя которого также задается атрибутом name . Его относительные размеры могут быть определены в атрибутах rows и cols , обозначающими число видимых строк и символов в строке соответственно. Содержимое <textarea> хранится не в атрибуте value , а между открывающим и закрывающим тегами. Как и в <input /> , максимальная длина значения может быть задана атрибутом maxlength .</p><p> <textarea rows="4" cols="20" name="myText"> Тут можно расположить большой многострочный текст…

Если текст не помещается в строку , то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap . Установленный в значение hard , он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft , при котором символы переноса строки не добавляются.</p> <p>Оба элемента <input /> и <textarea> поддерживают булев атрибут readonly="readonly" , который устанавливает их в режим «только чтение», запрещая редактирование содержимого. Кроме того, в HTML 5 появилась возможность с помощью атрибута placeholder добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте атрибут title). А установив булев атрибут required="required" , вы сообщите браузеру, что поле должно быть обязательно заполнено, чтобы форма могла быть отправлена на сервер.</p> <h3>Альтернативная кнопка, перегрузка атрибутов формы</h3> <p>Исторически так сложилось, что кнопки можно добавлять не только тегом <input /> , но и с помощью элемента <button> . В целом, он повторяет ту часть функциональности <input /> , которая касается кнопок. Так значением атрибута type могут быть reset , submit и button , отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег <button> тем, что он парный, и надпись на кнопке определяется не в атрибуте value , а в содержимом элемента.</p><p> <button type="submit" formtarget="newtarget.cgi">Нажми меня</button> Кпопка отправки данных, будь это <input /> или <button> , позволяет переопределить некоторые атрибуты формы (элемента <form>), к которой они относятся. Это атрибуты action , enctype , method , novalidate и target , а их «кнопочные» аналоги соответственно formaction , formenctype , formmethod , formnovalidate и formtarget . </p><h3>Выбор из списка</h3> <p>Для организации выпадающих списков используют структуру, состоящую из элемента <select> , внутри которого размещаются дочерние <option> , представляющие варианты выбора.</p><p> <select name="food"> <option value="pie">Пирог</option> <option value="bread" selected="selected">Хлеб</option> <option value="cookie" label="Печенье"></option> </select> </p><h2>7 комментариев</h2> Спасибо Вам за такие познавательные ресурсы. Спасибо большое! без примеров что-то не интересно и не познавательно... Супер!!! спасибо Подскажите, есть у TYPE еще какое-то значение, чтобы получить отдельно выбор месяца и отдельно выбор года как на этой картинке https://raw.githubusercontent.com/puzankov/markup_hw/master/lesson2/forms_hw.png <p>Увы. <input type="month" /> сочетает в одном элементе выбор года и месяца. Однако, для выбора года вполне сойдет type="number", для выбора месяца - <select>.</p> "связать его с несколькими формами одновременно. Для этого необходимо в атрибуте form указать через пробел идентификаторы этих форм."<p>Есть форма с кнопкой (сабмит) и отдельно textarea.<br>Попытался связать их через атрибут form.<br>Все нормально, НО при нажатии на сабмит текст не передается на сервер.<br>В чем соль? </p> Атрибут datetime, вроде убрали, он браузерами больше не поддерживается, только datetime-local. <p><i><b>От автора: </b> вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле. </i></p> <p>В нашей форме регистрации используется 4 из 10 типов, которые вы все знаете: checkbox, text, password и submit. Ниже приведен полный список доступных в HTML5 типов поля input:</p> <p>В спецификации HTML5 говорится про еще 9 дополнительных типов, с помощью которых можно создавать специфичные UI-элементы, а также проводить нативную валидацию данных:</p> <p>В HTML5.1 и WHATWG HTML Living Standard включены еще четыре типа, связанных с датой, три из которых довольно хорошо поддерживаются в современных браузерах:</p> <p>datetime (не поддерживается ни в одном браузере)</p> <p>Давайте детально разберем каждый новый тип, а также посмотрим, как их можно использовать.</p> <h3>Search</h3> <p>Тип инпута search (type=”search”) – это поисковое поле, однострочный инпут для ввода одной или более поисковых фраз. Из спецификации:</p> <p>«Разница между текстовым типом и типом поиска чисто стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, поисковой тип приведет input в соответствие со стилями платформы.»</p> <p>Множество браузеров стилизуют поисковые поля под манер браузерных или поисковых блоков операционной системы. Chrome, Safari, Opera и IE добавили функцию удаления текста по клику на иконку «х», которая появляется, как только начинается ввод текста (см. на Рисунке 4.5). В Chrome и Opera также очищаются поля даты/времени, а IE11 добавляет иконку «х» почти ко всем типам, в том числе и к текстовым.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2017/179/1.jpg' height="39" width="220" loading=lazy></p> <p><i>Рисунок 4.5. поле типа search стилизовано под поисковые поля операционной системы </i></p> <p>На устройствах кампании Apple поисковые поля имеют скругленные углы по умолчанию в Chrome, Safari и Opera, что дублирует внешний вид поисковых полей в самой операционной системе. На планшетах с динамической клавиатурой кнопка «Перейти» отображается в виде иконки поиска или слова «искать». Все зависит от устройства. Если добавить нестандартный атрибут, то в Chrome и Opera появится иконка лупы.</p> <p>Можно по-старому использовать type=”text”, однако новый тип search – это визуальная подсказка пользователям, куда им нужно нажать, чтобы найти сайт. Кроме того, новый тип очень похож на стандартные поля поиска, к которым привыкли пользователи. На сайте The HTML5 Herald нет поиска, но он мог быть таким:</p> <p><form id="search" method="get"> <label for="s">Search</label> <input type="search" id="s" name="s"/> <input type="submit" value="Search"/> </form></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< form id = "search" method = "get" > </p><p>< label for = "s" > Search < / label > </p><p>< input type = "search" id = "s" name = "s" / > </p><p>< input type = "submit" value = "Search" / > </p><p>< / form > </p> </td> </tr></table><p>В браузерах без поддержки тип search отображается в виде обычного текстового поля, поэтому нет причин не использовать его там, где это подходит.</p> <h3>Email адреса</h3> <p>Не удивительно, но тип email (type=”email”) используется для установки одного или нескольких email адресов. Он поддерживает Булев атрибут multiple, с помощью которого через запятую (с пробелом) можно указать несколько адресов.</p> <p>Давайте изменим нашу форму, поставим type=”email” на поля с электронной почтой:</p> <p><label for="email">My email address is</label> <input type="email" id="email" name="email"/></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label for = "email" > My email address is < / label > </p><p>< input type = "email" id = "email" name = "email" / > </p> </td> </tr></table><p>Если поменять тип с text на email, не произойдет никаких визуальных изменений. Input все так же выглядит, как обычное текстовое поле. Однако они отличаются.</p> <p>Изменения можно посмотреть на сенсорном устройстве. Когда поле email получает фокус, на большинстве сенсорных устройств (например, iPad или Android телефон с Chromium) отобразится клавиатура, оптимизированная для ввода адреса электронной почты. На клавиатуре появится символ @, точка, пробел, но не будет запятой, как показано на Рисунке 4.6.</p> <p><img src='https://i1.wp.com/webformyself.com/wp-content/uploads/2017/179/2.jpg' align="center" height="272" width="328" loading=lazy></p> <p><i>Рисунок 4.6. поле типа email с пользовательской клавиатурой на устройстве под управлением iOS </i></p> <p>В браузерах Firefox, Chrome, Opera и Internet Explorer 10 при неправильном вводе почты выскакивает сообщение об ошибке. Это происходит, когда вы пытаетесь отправить форму с текстом, который не распознался как один или несколько адресов. Стандартное сообщение об ошибке показано на Рисунке 4.7.</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2017/179/3.jpg' align="center" width="100%" loading=lazy></p> <p><i>Рисунок 4.7. сообщение об ошибке о неправильном вводе адреса электронной почты в браузере Opera (слева) и Firefox (справа) </i></p> <h3>Заметка: пользовательские сообщения о проверке</h3> <p>Не нравится стандартное сообщение об ошибке в браузере? Установите свое с помощью.setCustomValidity(errorMsg). SetCustomValidity принимает лишь один параметр – сообщение об ошибке. Если установлено свое сообщение о проверке, то после правильного ввода необходимо очистить строку с сообщением (значение false), чтобы форма отправилась:</p> <p>function setErrorMessages(formControl) { var validityState_object = formControl.validity; if (validityState_object.valueMissing) { formControl.setCustomValidity("Please set an age (required)"); } else if (validityState_object.rangeUnderflow) { formControl.setCustomValidity("You\"re too young"); } else if (validityState_object.rangeOverflow) { formControl.setCustomValidity("You\"re too old"); } else if (validityState_object.stepMismatch) { formControl.setCustomValidity("Counting half birthdays?"); } else { //если ввод валидный, должно быть false, или будет ошибка formControl.setCustomValidity(""); } }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>function setErrorMessages (formControl ) { </p><p>var validityState_object = formControl . validity ; </p><p>if (validityState_object . valueMissing ) { </p><p>formControl . setCustomValidity (<span>"Please set an age (required)" </span>) ; </p><p>} else if (validityState_object . rangeUnderflow ) { </p><p>formControl . setCustomValidity ("You\"re too young" ) ; </p><p>} else if (validityState_object . rangeOverflow ) { </p><p>formControl . setCustomValidity ("You\"re too old" ) ; </p><p>} else if (validityState_object . stepMismatch ) { </p> <p>Новые типы элемента <input></p><p>Одной из странных особенностей HTML-форм является использование одного элемента с расплывчатым названием <input> для создания разнообразных элементов управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента управления зависит от атрибута <b>type </b> элемента <input>.</p> <p>Если браузеру встречается неизвестный тип элемента <input>, веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:</p> <p> <input type="text"> <input type="странный-тип-input"> <input></p> <p>В HTML5 из этого поведения извлекается польза. А именно, в элемент <input> было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле <input> нового типа <b>email </b>:</p> <p> <input id="email" type="email"><br></p> <p>Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента <input> (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:</p> <ul><p>Предложить услуги редактирования. Например, интеллектуальный браузер может предоставить способ выбрать адрес электронной почты из адресной книги и вставить его в поле адреса.</p> <p>Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.</p> <p>Выполнять проверку. Браузеры могут выполнять более сложные проверки после того, как пользователь нажмет кнопку для отправки данных.</p> </ul><p>Спецификация HTML5 не предоставляет разработчикам браузеров никаких наставлений по первому пункту. Браузеры свободны управлять отображением и редактированием разных типов данных любым имеющим смысл способом, и разные браузеры могут добавлять различные небольшие удобства.</p> <p>Но более важными являются возможности проверки и исключения ошибок. Как абсолютный минимум, браузер с поддержкой HTML5-форм должен не допустить отправки формы, содержащей данные, которые нарушают правила типов данных. Поэтому, если браузер не может предотвратить ошибки непосредственно при вводе (согласно второму пункту вышеприведенного списка), он должен выполнить их проверку, когда пользователь попытается отправить форму (согласно третьему пункту).</p> <p>К сожалению, не все современные браузеры удовлетворяют этим требованиям. Некоторые распознают новые типы данных и предоставляют кое-какие возможности редактирования, но не проверки. Многие браузеры понимают один тип данных, но не другой. Особенно проблемные в этом отношении мобильные браузеры - они предоставляют некоторые удобства редактирования, но никаких возможностей проверки.</p> <p>В таблице ниже приведены новые типы данных и уровень полной поддержки основными браузерами. Полная поддержка означает, что в случае нарушения типа данных форма не отправляется.</p> <table class="new_table" border="2" cellpadding="15"> Поддержка новых типов данных основными браузерами <tr><td><b>Тип данных </b> </td> <td>IE </td> <td>Firefox </td> <td>Chrome </td> <td>Safari </td> <td>Opera </td> <td>Safari iOS </td> <td>Android </td> </tr><tr><td><i>email </i> </td> <td>- </td> <td>4 </td> <td>10 </td> <td>5 </td> <td>10.6 </td> <td>- </td> <td>- </td> </tr><tr><td><i>url </i> </td> <td>- </td> <td>4 </td> <td>10 </td> <td>5 </td> <td>10.6 </td> <td>- </td> <td>- </td> </tr><tr><td><i>search </i> (без проверки) </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td><i>tel </i> (без проверки) </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td><i>number </i> </td> <td>- </td> <td>- </td> <td>10 </td> <td>5 </td> <td>- </td> <td>- </td> <td>- </td> </tr><tr><td><i>range </i> </td> <td>- </td> <td>- </td> <td>6 </td> <td>5 </td> <td>11 </td> <td>- </td> <td>- </td> </tr><tr><td><i>datetime, date, month, week, time </i> </td> <td>- </td> <td>- </td> <td>10 </td> <td>- </td> <td>11 </td> <td>- </td> <td>- </td> </tr><tr><td><i>color </i> </td> <td>- </td> <td>- </td> <td>- </td> <td>- </td> <td>11 </td> <td>- </td> <td>- </td> </tr></table><p>Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.</p> <h2>Адреса электронной почты</h2> <p>Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки - минимум два символа:</p> <p>Тип email поддерживает атрибут <b>multiple </b>, который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.</p> <p>Не забывайте, что пустые значения проходят проверку. Чтобы не допустить пустого поля адреса, в его элемент нужно вставить атрибут required.</p> <h2>URL-адреса</h2> <p>Тип <b>url </b> применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.</p> <p>Некоторые браузеры также предлагают возможные варианты URL в выпадающем списке, которые обычно взяты из журнала недавно посещенных браузером страниц.</p> <h2>Поля поиска</h2> <p>Тип <b>search </b> применяется для полей поиска. Они обычно предназначены для ввода ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может быть поиск по всему Интернету (как в Google), поиск по одной странице или же специальная поисковая процедура, которая исследует каталог информации. В любом случае поле поиска выглядит и ведет себя почти точно так же, как и обычное текстовое поле.</p> <p>В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.</p> <p>За исключением этих незначительных различий, поле поиска является ничем иным, как обычным текстовым полем. Основная разница заключается в семантике. Иными словами, тип данных search используется для того, чтобы сделать ясным название поля для браузеров и вспомогательных программ для пользователей с ограниченными возможностями. Они могут направлять посетителей в требуемое место страницы или предоставлять другие, более интеллектуальные услуги - возможно в будущем.</p> <h2>Телефонные номера</h2> <p>Тип данных <b>tel </b> применяется с целью обозначения полей для ввода телефонных номеров, которые могут быть представлены в самых разных форматах. В одних случаях используются только цифры, в других применяются пробелы, тире, знак "плюс" и круглые скобки. Возможно, это отсутствие единого формата и есть причина того, что стандарт HTML5 не требует от браузеров выполнения проверки телефонных номеров. Вместе с тем, не понятно, почему поле типа tel не отклоняет по крайней мере, буквы.</p> <p>В настоящее время единственная польза от применения поля типа tel состоит в предоставлении специализированной виртуальной клавиатуры для ввода телефонных номеров на мобильных браузерах, которая содержит цифры, но не буквы.</p> <h2>Числа</h2> <p>В HTML5 определяются два числовых типа данных. Тип <b>number </b> предназначен для обычных чисел.</p> <p>Этот тип данных имеет очевидный потенциал. Обычные текстовые поля принимают буквально все: цифры, буквы, пробелы, знаки пунктуации и т.п. По этой причине одна из самых распространенных задач проверки - убедиться, что значение является числом в определенном диапазоне. Но при вводе данных в поле типа number браузер автоматически игнорирует все символы, кроме цифр. Далее показан пример кода для создания поля этого типа:</p> <p> <label for="age">Возраст<i>*</i></label> <input id="age" type="number"><br></p> <p>Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов <b>min </b> и <b>max </b>. В следующем коде представлен пример ограничения возраста разумным диапазоном:</p> <p> <input id="age" type="number" min="18" max="120"><br></p> <p>Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута <b>step </b>, который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.</p> <p> <input id="age" type="number" min="18" max="120" step="0.1"><br></p> <p>Атрибут step также влияет на работу кнопок поля со счетчиком:</p> <h2>Ползунки</h2> <p>Другим числовым типом HTML5 является <b>range </b>. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:</p> <p> <label for="age">Возраст<i>*</i></label> <input id="age" type="range" min="0" max="120" value="30"><br></p> <p>Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:</p> <p>Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.</p> <h2>Дата и время</h2> <p>В HTML5 определяется несколько типов данных, связанных со временем. Браузеры, которые поддерживают типы дат, могут выводить удобный выпадающий календарь, в котором пользователь может выбрать требуемую дату и/или время. Это не только устраняет неопределенность относительно правильного формата даты, но также запрещает случайно (или нарочно) установить несуществующую дату. Интеллектуальные браузеры могут делать еще больше, например поддерживать интеграцию с персональным календарем.</p> <p>Ниже показан пример использования дат:</p> <p> <label for="age">Дата рождения<i>*</i></label> <input id="age" type="date" min="1920-01-01" max="2000-01-01"><br></p> <p><img src='https://i2.wp.com/professorweb.ru/my/html/html5/level2/files/img46032.jpg' height="218" width="272" loading=lazy></p> <p>В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:</p> <p>Браузеры, которые поддерживают типы данных для дат и времени, также поддерживают атрибуты min и max для них, что позволяет устанавливать минимальные и максимальные даты при условии использования правильного формата даты. Это продемонстрировано в примере выше.</p> <h2>Цвет</h2> <p>Тип данных color применяется для полей, предназначенных для ввода цвета. Тип данных color - это интересная, хотя редко используемая второстепенная возможность, позволяющая посетителю веб-страницы выбирать цвет из выпадающей палитры, похожей на палитру графического редактора:</p> <p> <fieldset> <legend>Выберите любимый цвет</legend> <label for="mycolor">Цвет</label> <input id="mycolor" type="color"><br> </fieldset></p> <p><img src='https://i2.wp.com/professorweb.ru/my/html/html5/level2/files/img46033.jpg' width="100%" loading=lazy></p> <h2>Несколько необычных атрибутов элемента <input></h2> <p>Стандарт HTML5 признает еще несколько атрибутов, используемых для управления браузером при заполнении форм. Не все эти атрибуты поддерживаются всеми браузерами. Тем не менее, с ними хорошо экспериментировать:</p> <b>Атрибут spellcheck </b> <p>Некоторые браузеры пытаются заполнить пробелы в знаниях правописания пользователя, проверяя орфографию вводимого текста. Очевидная проблема с этой услугой заключается в том, что не весь текст состоит из настоящих слов, и роспись волнистых красных подчеркиваний может очень быстро начать действовать пользователю на нервы. Чтобы браузер не проверял орфографию текста в поле, присвойте атрибуту spellcheck значение false, а для проверки - значение true.</p> <p>По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.</p> <p><img src='https://i1.wp.com/professorweb.ru/my/html/html5/level2/files/img46034.jpg' width="100%" loading=lazy></p> <p> <textarea id="comments" oninput="validateComments(this)" spellcheck="false">

Атрибут autocomplete

Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно - как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет;) или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

Атрибуты autocorrect и autocapitalize

Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone

Атрибут multiple

Веб-разработчики использовали атрибут multiple с элементом для создания списков с множественным выбором с незапамятных времен. Но сейчас они могут использовать этот атрибут с определенными типами элемента , включая тип file (для закачивания файлов) и email. В браузере, поддерживающем этот атрибут, пользователь может выбрать сразу несколько файлов закачивания на сервер или вставить несколько адресов электронной почты в одно поле.