Тэг input со значением атрибута type checkbox.

< form id = "search" method = "get" >

< label for = "s" > Search < / label >

< input type = "search" id = "s" name = "s" / >

< input type = "submit" value = "Search" / >

< / form >

< label for = "email" > My email address is < / label >

< input type = "email" id = "email" name = "email" / >

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 ) {

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

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

Упомянутые атрибуты 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 добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте <a href="/ios/kak-avtomaticheski-dobavit-atribut-alt-v-tegi-img-vashego-bloga-na-wordpress-tam-gde/">атрибут title</a>). А установив булев атрибут 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><b>HTML-формы </b> являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.</p> <p>Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.</p> <p>Для получения и обработки данных форм используются языки веб-программирования, такие как <b>PHP </b>, <b>Perl </b>.</p> <p>До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text"> , <input type="password"> , завершающихся кнопкой <input type="submit"> . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали <a href="/tele2/chto-takoe-signatura-chto-oznachaet-slovo-signatura-signature-v-javascript/">применения JavaScript</a> для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.</p> <p><b>HTML5-формы </b> решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет <b>CSS3 </b>.</p> <img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/html5_form.png' align="left" height="696" width="660" loading=lazy> Рис. 1. Улучшенные веб-формы с помощью HTML5 <h2>Создание HTML5-формы</h2> <i> </i><h3>1. Элемент <form></h3> <p>Основу любой формы составляет элемент <form>...</form> . Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – <b>поля </b>. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.</p> <table class="t3"> Таблица 1. Атрибуты тега <form> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> accept-charset </td> <td>Значение атрибута представляет собой разделенный пробелами <b>список кодировок символов </b>, которые будут использоваться для отправки формы, например, <form accept-charset="ISO-8859-1"> . </td> </tr><tr><td> action </td> <td><b>Обязательный атрибут </b>, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.<br> В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для <a href="/ios/php-self-v-atribute-formy-action-sozdaem-formu-obratnoi-svyazi-na-php/">атрибута action</a> можно указать значение # .<br> Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:<br> <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> </td> </tr><tr><td> autocomplete </td> <td><br><br></td> </tr><tr><td> enctype </td> <td>Используется для указания <b>MIME </b>-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .<br> application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .<br> multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.<br> text/plain — указывает на то, что передается обычный (не html) текст. </td> </tr><tr><td> method </td> <td>Задает способ передачи данных формы.<br> Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете <a href="/news/nadezhnye-zhestkie-diski-dlya-kompyutera-interfeis-scsi-bolshaya/">больших объемов</a> информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.<br> Метод post применяется для пересылки данных больших объемов, а также <a href="/mts/kak-osushchestvlyaetsya-zashchita-konfidencialnoi-informacii-na-predpriyatii/">конфиденциальной информации</a> и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.<br> <form action="action.php" enctype="multipart/form-data" method="post"></form> </td> </tr><tr><td> name </td> <td>Задает <b>имя формы </b>, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" . </td> </tr><tr><td> novalidate </td> <td>Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения </td> </tr><tr><td> target </td> <td>Указывает окно, в которое будет направлена информация:<br> _blank — новое окно<br> _self — тот же фрейм<br> _parent — родительский фрейм (если он существует, если нет — то в текущий)<br> _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. </td> </tr></table><h3>2. Группировка элементов формы</h3> <p>Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.</p> <p>Каждой группе элементов можно присвоить название с помощью элемента <legend> , который идет сразу за тегом <fieldset> . Название группы проявляется слева в верхней границе <fieldset> . Например, если в элементе <fieldset> хранится контактная информация:</p><p> <form> <fieldset> <legend><a href="/android/chto-takoe-profil-v-vkontakte-hochu-chtob-mo-imya-i-familiya-byli-s-malenkoi/">Контактная информация</a></legend> <p><label for="name">Имя <em>*</em></label><input type="text" id="name"></p> <p><label for="email">E-mail</label><input type="email" id="email"></p> </fieldset> <p><input type="submit" value="Отправить"></p> </form> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' align="left" width="100%" loading=lazy> Рис. 2. Группировка элементов формы с помощью <fieldset> </p><table class="t3"> Таблица 2. Атрибуты тега <fieldset> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> disabled </td> <td>Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset> , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled> . </td> </tr><tr><td> form </td> <td> <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. </td> </tr><tr><td> name </td> <td>Определяет <b>имя </b>, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id . </td> </tr></table><h3>3. Создание полей формы</h3> <p>Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.</p> <p>С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и <a href="/mobile-operators/cveta-raspolozhenie-elementov-fonovye-izobrazheniya-css-background-polnoe/">фоновое изображение</a>. Ширина поля задается свойством width .</p> <table class="t3"> Таблица 3. Атрибуты тега <input> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> accept </td> <td>Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file"> . Возможные значения:<br> file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc" <br> audio/* — разрешает загрузку аудиофайлов<br> video/* — разрешает загрузку видеофайлов<br> image/* — разрешает загрузку изображений<br> media_type — указывает на медиа-тип загружаемых файлов. </td> </tr><tr><td> alt </td> <td>Определяет <b>альтернативный текст </b> для изображений, указывается только для <input type="image"> . </td> </tr><tr><td> autocomplete </td> <td>Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:<br> on — означает, что поле не защищено, и его значение можно сохранять и извлекать,<br> off — отключает автозаполнение для полей форм. </td> </tr><tr><td> autofocus </td> <td>Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. </td> </tr><tr><td> checked </td> <td>Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" . </td> </tr><tr><td> disabled </td> <td></td> </tr><tr><td> form </td> <td>Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы. </td> </tr><tr><td> formaction </td> <td>Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы. </td> </tr><tr><td> formenctype </td> <td>Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:<br> application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)<br> multipart/form-data — символы не кодируются<br> text/plain — пробелы заменяются на символ + , а специальные символы не кодируются. </td> </tr><tr><td> formmethod </td> <td>Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:<br> get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение <br> post — данные формы отправляются в виде http-запроса. </td> </tr><tr><td> formnovalidate </td> <td>Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута. </td> </tr><tr><td> formtarget </td> <td>Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.<br><br><br> _parent – загружает ответ в родительский фрейм<br> _top – загружает ответ во весь экран<br> framename – загружает ответ во фрейм с указанным именем. </td> </tr><tr><td> height </td> <td>Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, <input type="image" src="img_submit.gif" height="50"> . Рекомендуется одновременно устанавливать как высоту, так и ширину поля. </td> </tr><tr><td> list </td> <td>Является ссылкой на элемент <datalist> , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. </td> </tr><tr><td> max </td> <td>Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week . </td> </tr><tr><td> maxlength </td> <td>Атрибут задает <a href="/tele2/kak-posmotret-podklyuchennyh-k-wifi-routeru-kak-posmotret-kto/">максимальное количество</a> символов, вводимых в поле. Значение по умолчанию 524288 символов. </td> </tr><tr><td> min </td> <td>Позволяет ограничить допустимый ввод числовых данных минимальным значением. </td> </tr><tr><td> multiple </td> <td>Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута. </td> </tr><tr><td> name </td> <td>Определяет имя, которое будет использоваться для доступа к элементу <form> , к примеру, в таблицах <a href="/megaphone/chistka-neispolzuemyh-stilei-css-ochistka-kodovoi-bazy-css/">стилей css</a>. Является аналогом атрибута id . </td> </tr><tr><td> pattern </td> <td>Позволяет определять с помощью <b><a href="/mts/javascript-regulyarnye-vyrazheniya-pamyatka-po-osnovam-regulyarnyh/">регулярного выражения</a> </b> синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в <a href="/android/recover-contacts-samsung-s4-with-a-broken-screen-of-successful-data-recovery-cases/">данном случае</a> — любые строчные буквы, число в <a href="/mobile-tips/skachat-kursy-knigi---nuzhny-li-figurnye-skobki-v-odnostrochnyh-operaciyah-v/">фигурных скобках</a> указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9. </td> </tr><tr><td> placeholder </td> <td>Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка). </td> </tr><tr><td> readonly </td> <td>Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. </td> </tr><tr><td> required </td> <td>Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. </td> </tr><tr><td> size </td> <td>Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password . </td> </tr><tr><td> src </td> <td>Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image"> . </td> </tr><tr><td> step </td> <td>Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг). </td> </tr><tr><td rowspan="21"> type </td> <td> button — создает кнопку.<br><input type="button" value="Кнопка"></td> </tr><tr><td> checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,<br><input type="checkbox" name="vehicle" value="Автомобиль">У меня есть автомобиль </td> </tr><tr><td> color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.<br><input type="color" name="color"></td> </tr><tr><td> date — позволяет вводить дату в формате дд.мм.гггг.<br> День рождения: <input type="date" name="birthday"></td> </tr><tr><td> datetime-local — позволяет вводить дату и время, разделенные прописной <a href="/beeline/translit-bsi-perevod-russkih-bukv-v-angliiskie-onlain/">английской буквой</a> Т по шаблону дд.мм.гггг чч:мм.<br> День рождения — день и время: <input type="datetime-local" name="birthday"></td> </tr><tr><td> email — браузеры, поддерживающие <a href="/ip-telephony/tema-sozdanie-arhiva-dannyh-atributy-faila-i-ego-obem/">данный атрибут</a>, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.<br> E-mail: <input type="email" name="email"></td> </tr><tr><td> file — позволяет загружать файлы с компьютера пользователя.<br> Выберите файл: <input type="file" name="img"></td> </tr><tr><td> hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию. </td> </tr><tr><td> image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.<br><input type="image" src="https://html5book.ru/wp-content/uploads/2015/04/webbutton.png" alt="Submit"></td> </tr><tr><td> month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.<br><input type="month"></td> </tr><tr><td> number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.<br> Укажите количество (от 1 до 5): <input type="number" name="quantity" min="1" max="5"></td> </tr><tr><td> password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, <a href="/mobile-operators/brauzer-s-lisichkoi-kak-nazyvaetsya-skachat-i-ustanovit-brauzer-mozilla-firefox/">установленные браузером</a> значки.<br> Введите пароль: <input type="password"></td> </tr><tr><td> radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.<br> Вегетарианец: <input type="radio"></td> </tr><tr><td> range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора <input type="range" min="1" max="10" value="3"></td> </tr><tr><td> reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.<br><input type="reset"></td> </tr><tr><td> search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.<br> Поиск: <input type="search" name="search"></td> </tr><tr><td> submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.<br><input type="submit" value="Отправить"></td> </tr><tr><td> text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.<br><input type="text"></td> </tr><tr><td> time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.<br> Укажите время: <input type="time"></td> </tr><tr><td> url — поле предназначено для указания URL-адресов.<br> Главная страница: <input type="url" name="homepage"></td> </tr><tr><td> week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.<br> Укажите неделю: <input type="week"></td> </tr><tr><td> value </td> <td>Определяет текст, отображаемый на кнопке, в поле или <a href="/news/kakie-osobennosti-proyavlyayutsya-sushchestvennymi-dlya-ocr-sistem-programma/">связанный текст</a>. Не указывается для полей типа file. </td> </tr><tr><td> width </td> <td>Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. </td> </tr></table><h3>4. Текстовые поля ввода</h3> <p>Элемент <textarea>... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Кошка

7. Кнопки

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

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type , например, .

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

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

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

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

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

Новые типы элемента

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

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

В HTML5 из этого поведения извлекается польза. А именно, в элемент было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле нового типа email :

Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:

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

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

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

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

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

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

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

Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.

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

Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки - минимум два символа:

Тип email поддерживает атрибут multiple , который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.

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

URL-адреса

Тип url применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.

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

Поля поиска

Тип search применяется для полей поиска. Они обычно предназначены для ввода ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может быть поиск по всему Интернету (как в Google), поиск по одной странице или же специальная поисковая процедура, которая исследует каталог информации. В любом случае поле поиска выглядит и ведет себя почти точно так же, как и обычное текстовое поле.

В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.

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

Телефонные номера

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

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

Числа

В HTML5 определяются два числовых типа данных. Тип number предназначен для обычных чисел.

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

Возраст*

Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов min и max . В следующем коде представлен пример ограничения возраста разумным диапазоном:

Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута step , который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.

Атрибут step также влияет на работу кнопок поля со счетчиком:

Ползунки

Другим числовым типом HTML5 является range . Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:

Возраст*

Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:

Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.

Дата и время

В HTML5 определяется несколько типов данных, связанных со временем. Браузеры, которые поддерживают типы дат, могут выводить удобный выпадающий календарь, в котором пользователь может выбрать требуемую дату и/или время. Это не только устраняет неопределенность относительно правильного формата даты, но также запрещает случайно (или нарочно) установить несуществующую дату. Интеллектуальные браузеры могут делать еще больше, например поддерживать интеграцию с персональным календарем.

Ниже показан пример использования дат:

Дата рождения*

В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:

Браузеры, которые поддерживают типы данных для дат и времени, также поддерживают атрибуты min и max для них, что позволяет устанавливать минимальные и максимальные даты при условии использования правильного формата даты. Это продемонстрировано в примере выше.

Цвет

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

Несколько необычных атрибутов элемента

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

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

По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.

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

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

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

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

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

Не все браузеры поддерживают типы, добавленные в 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 , при этом для разделения адресов используется запятая (,)

Пример

• 2023-08-11 00:06:59
  SQL запрос INSERT INTO — наполнить базу данных информацией

  Всем привет! В данной статье речь пойдет о том, как можно добавлять данные в таблицу в Microsoft SQL Server, если Вы уже хоть немного знакомы с языком T-SQL, то наверно поняли, что сейчас мы будем разговаривать об инструкции INSERT, а также о том,...

  IP-телефония
• 2023-08-11 00:06:59
  Обозначение клавиш на клавиатуре

  Привет всем читателям блога. Скажите друзья, задумывались ли вы, какой большой функционал таит в себе клавиатура? Большинство людей даже не подозревает, что с её помощью можно выполнять действия, которые могут облегчить и . Не печально ли, что...

  Мегафон
• 2023-08-10 00:09:21
  Как изменить разрешение экрана

  В современном мире все стремительно меняется. Фотоаппараты всех моделей, от самых дешевых «мыльниц» до профессиональных «зеркалок», умеют снимать видеоролики качества HD. Такое видео возможно и для дорогих моделей мобильных телефонов. Стандарты...

  Мобильные операторы