Вредоносное ПО (malware) - это назойливые или опасные программы,...
Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт. До этого все мои публикации были посвящены основным элементам языка, способам создания различных объектов контента, их форматированию, структурированию и т.д. Освоив предыдущие темы, вы уже можете создать достаточно хороший сайт. Однако он будет неполноценным без сегодняшней темы: «Создание форм в html».
Данный раздел в языке очень важен. Поэтому уделите его изучению особое внимание, иначе созданный вами веб-ресурс нельзя будет выпустить в продакшн. Таким образом, после прочтения статьи вы узнаете, для чего нужно использовать формы, с помощью каких тегов они создаются, а также сможете опробовать конкретные примеры на практике. Приступим же!
Что такое форма и как она функционирует
Форма – это один из важнейших объектов , который предназначен для обмена информационными данными между сервером и пользователем.
Проще говоря, если вы хотите создать интернет-магазин с возможностью заказа продукции на сайте, запрашивать на веб-ресурсе регистрацию и работать с аккаунтами или обеспечить клиентам обратную связь с менеджерами компании, то вам никак не обойтись без форм.
Форма задается при помощи специального элемента языка html .
Замечу, что документ с кодом может содержать в себе несколько объявлений тега , однако на сервер для обработки данных может быть отправлен всего лишь один запрос. Именно поэтому информация, которая вводиться пользователем в отведенные для этого поля и относится к разным формам, не должна быть зависимой. Также, не допускается делать формы вложенными одна в другую.
Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Может сейчас и не сильно понятно, что и как взаимодействует в этой небольшой программе, однако гарантирую, что после прочтения всей статьи вы сможете создавать приложения в разы сложнее.
Отправляем данные на сторону сервера
Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit .
Код такого метода выглядит вот так:
При запуске представленной строки в отобразиться кнопка с надписью: «Отправить».
Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.
После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».
За имя отвечает параметр атрибута type тега , а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action элемента .
Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.
Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.
Теперь я хотел бы остановиться и подробнее рассказать об элементе . Если объяснять простым языком, то нужен для создания текстовых полей, переключателей, разнообразных кнопок, скрытых полей, флажков и других объектов.
Тег не обязательно задавать в паре с , однако если необходимо обработать пользовательские записи или занести их, например, в базу данных, то без контейнера не обойтись.
Основными атрибутами данного элемента языка гипертекстовой разметки являются:
- Text – создает текстовое поле;
- Submit – создает кнопку для отправки данных на сервер;
- Image – отвечает за кнопку с картинкой;
- Reset – устанавливает кнопку для очистки формы;
- Password – задает текстовое поле специально для паролей;
- Checkbox – отвечает за поля с флажками;
- Radio – отвечает за поля с выбором одного элемента;
- Button – создает кнопку;
- Hidden – используется для скрытых полей;
- File – задает поле, отвечающее за отправку файлов.
Способы передачи информации
Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post . Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.
Post | Get | |
Размер передаваемых документов | Ограничиваются серверной стороной. | Максимум – 4 Кб. |
Способ отображения отправленной информации | Доступна только при просмотре через браузерные расширения или другие специальные программные продукты. | Сразу же доступна всем. |
Использование закладок | Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес). | Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время. |
Кэширование | Исходя из предыдущего пункта все запросы на одной странице. | Каждую страницу можно кэшировать отдельно. |
Предназначение | Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев. | Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений. |
Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе используют предусмотренный параметр method (например, method="post" ).
Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post .
Введите свои персональные данные!
Например, для ввода даты предусмотрены переключатели числа каждого из параметров (дня, месяца и года), а также для удобства выпадающая панель с самим календарем.
Создание панели регистрации
Основные теги и атрибуты были рассмотрены. Именно поэтому настало время для создания полноценной формы регистрации с использованием стилевой разметки css и проверкой вводимых данных. Конечно посмотреть серверную работу с ними нам не удастся, но дизайн и важные детали мы предусмотрим.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Советую вам сохранить данный код программы в документе с расширением.html и кодировкой utf-8, и открыть последний в окне браузера. Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением. Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута autofocus .
Начните заполнять поля, оставив одно без изменений, и нажмите кнопку «Зарегистрироваться». Как вы уже заметили, форма не будет отправлена, так как у каждого элемента < input> указан атрибут required . Он устанавливает отмеченные поля обязательными для заполнения.
Еще одним интересным моментом является указание типа type="email" , который появился в . При использовании такого типа поля, введенная информация автоматически проверяется на корректность. В случае ошибок форма не отправляется на сервер.
Вот и подошла публикация к концу. В ней я постарался собрать максимальное количество важных и актуальных знаний, касающихся форм. Надеюсь она была вам полезной! Буду очень признателен, если вы вступите в ряды моих подписчиков и расскажете о блоге своим друзьям.
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 333 раз
Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы .
Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.
И в этой статье Вы научитесь создавать абсолютно любые .
Сначала создайте простейшую HTML-страницу
, в которую добавьте контейнер (тег А теперь займёмся формой. Форма начинается с тега , соответственно, заканчивается закрывающим тегом
. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега , чтобы Вам было понятнее назначение каждого из них: Здесь у нас начинается описание формы, у которой есть следующие атрибуты: 1) Атрибут "name
". Значение этого атрибута означает имя HTML формы
. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через JavaScript
. Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я НАСТОЯТЕЛЬНО
рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает. 2) Атрибут "action
". Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику
и находится в значении атрибута "action
". 3) Атрибут "method
". У него может быть одно из двух очень популярных значения: "post
" и "get
". Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода: а) http://mysite.ru/scipt/request.php
б) http://mysite.ru/script/request.php?a=7&b=Michael
В первом случае, пользователь не видит, что отправляет (метод "post
"), а во втором он реально видит имена переменных и их значения (метод "get
"). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО
чаще используют метод "post
", то есть скрытую отправку. Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму. Первое, что мы добавим - это текстовое поле. Добавляется текстовое поле с помощью тега
, а точнее с помощью атрибута этого тега "type
" со значением "text
". Также перед созданием текстового поля рекомендуется написать, что это за поле, например, "Ваше имя
". Внутри тега напишите такую строчку: Ваше имя: Опять же, давайте разберём атрибуты: 1) Атрибут "type
" отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута. 2) Атрибут "name
" отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname
. 3) Атрибут "value
" отвечает за значение этого поля по умолчанию. Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте!
) этот текст в редакторе, а потом посмотрите результат в браузере. Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за звёздочками
. Поэтому, перейдя на следующую строку (тег Ваш пароль: Как видите, теперь значением атрибута "type"
является "password
". Остальные атрибуты те же, что и для обычного текстового поля. Следующий элемент - это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код
. Выберите вариант: Тег означает начало выпадающего списка. Заканчивается список тегом
. Атрибут "name
" ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега . Значение атрибута "value
" означает, какой значение будет у переменной choice
(например, в JavaScript
), то есть либо choice = 1
, либо choice = 2
, либо choice = 3
. Сразу после окончания описания тега ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно. Теперь добавим текстовую область, используя тег : Напишите что-нибудь: Здесь мы с Вами создаём текстовую область высотой в 10
строк (значение атрибута "rows
") и шириной в 15
символов (значение атрибута "cols
"). Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше. Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков
", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега
, а, точнее, с помощью значения "radio
" атрибута "type
". Напишем такой HTML-код
: Выберите что-нибудь одно: Тут я остановлюсь на атрибуте "name
", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ
сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name
". Атрибут "value
" означает значение переменной "choiceradio
" (опять же, например, в JavaScript
). Сразу после описания тега
идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой. Ещё одним элементом формы являются переключатели (checkbox
). Создаются они опять же с помощью тега
. Напишем следующие строчки: Вы согласны с нашими правилами: Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms
" будет "yes
", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой. Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега
. Напишем так: Выберите файл для загрузки: Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы. Синтаксис тега Тег Пояснения к примеру
Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега Теперь рассмотрим подробно все атрибуты тега 1. Атрибут accept-charset="Кодировка"
- определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п. 2. Атрибут action="URL"
- адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма. 3. Атрибут autocomplete="on/off"
- задает или отключает автозаполнение формы. Может принимать два значения: 4. Атрибут enctype="параметр"
- задает способ кодирования данных. Может принимать следующие значения: 5. Атрибут method="POST/GET"
- задает метод отправки. Может принимать два значения: 6. Атрибут name="имя"
- задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт. 7. Атрибут novalidate
- отменяет встроенную проверку данных формы на корректность ввода. 8. Атрибут target="параметр"
- имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения: Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку. Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера.
Другими словами, формы используются для сбора информации введённой пользователями. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега Рассмотрим пример использования: В этом примере мы: В браузере оба варианта (метода) использования текстовых меток выглядят идентично: Давайте рассмотри пример использования: В данном примере мы указали для элемента с типом text
(однострочное текстовое поле) и типом password
(поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода. Результат нашего примера: Перед тем как перейти к изучению следующей темы пройдите практическое задание: Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно. Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек! HTML формы могут казаться простыми, но они необходимы для большинства веб-сайтов и приложений. В HTML4 типы полей ввода были ограничены следующим списком: К тому же: В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например: конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например указывает способ ввода. Наиболее полезные возможности: Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max. Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы. Список данных содержит набор подходящих значений для любого типа поля, например:
Если поддерживается datalist, браузер предоставляет список значений для автозаполнения, как только вы начинаете вводить данные в поле. Полный список обычно отображается при клике на стрелку, указывающую вниз (если таковая имеется). В отличие от стандартного выпадающего списка, пользователь может вводить произвольные значения в поле. Возможно указывать значения и текстовые пояснения к значениям, например: но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом: Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX. Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы. Запомните, что выставление полю атрибута disabled отключит валидацию этого поля. Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации Согласно спецификации , каждый элемент формы считается параграфом, и отделяется от остальных частей элементом
Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля. Что более важно - метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:
Не существует предписаний по оформлению элементов форм, которым должны следовать производители браузеров. Это сделано намерено: стандартный элемент формы для выбора дат, ориентированный на мышь, может быть слишком мал для пользователя мобильного устройства, так что производитель может сам позаботиться о создании альтернативной версии элемента формы для сенсорных интерфейсов. Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink. Для не поддерживаемых типов полей браузер откатится до стандартного поля ввода типа text, а не поддерживаемые атрибуты и их значения проигнорирует. Важно использовать правильный тип поля для ожидаемого типа вводимых данных. Может, это и очевидно, но будут ситуации, когда вам нужно будет воспользоваться простым текстовым полем. Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении. Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление. За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется... Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать: Валидация на стороне клиента никогда не была и не будет заменой валидации на стороне сервера. Валидация пользовательских данных на стороне сервера имеет большое значение. Валидация на стороне клиента - дополнительная полезная возможность. И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости. В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.
), напишем такой код:
Вариант 1
Вариант 2
Вариант 3
Кнопка один
Кнопка два
Кнопка три
А это будет текстовое поле. Например сюда можно вводить логин
А это будет большое текстовое поле. Например сюда можно ввести информацию о себе
После всего перечисленного будет кнопка ОК
После нажатия кнопки ОК, страница просто обновится, т.к. мы
не прописали параметр action
Атрибуты и свойства тега
Подсказка для полей ввода
Password: type =
"password"
name =
"password"
placeholder =
"Введите ваш пароль"
>
Вопросы и задачи по теме
Дополнительные типы полей
Тип
Описание
email
ввод email-адреса
tel
ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены
url
ввод URL
search
поле поиска с разрывами строк автоматически удаляется
number
число с плавающей точкой
range
элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date
ввод дня, месяца и года
datetime
ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local
ввод даты и времени без временной зоны
month
ввод месяца и года без временной зоны
week
ввод номера недели без временной зоны
time
ввод времени без временной зоны
color
выбор цвета
Атрибуты полей ввода
Атрибут
Описание
name
имя поля ввода
value
изначальное значение
checked
делает флажок или переключатель выбранным
maxlength
Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea
minlength
Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования - pattern=".{3,}", что проверит на наличие минимум трех символов во вводимой строке
placeholder
ненавязчивая подсказка внутри поля
autofocus
устанавливает фокус на указанный элемент (видимый) при загрузке страницы
required
указывает, что в поле должно быть введено значение (не пустое поле)
pattern
проверяет значение на соответствие регулярному выражению
min
минимальное разрешенное значение (числовое и дата)
max
максимальное разрешенное значение (числовое и дата)
step
шаг изменения значения. Например, input type="number" min="10" max="19" step="2" разрешит только значения 10, 12, 14, 16 или 18
autocomplete
указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения
inputmode
size
размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS
rows
Количество текстовых строк (только для textarea)
cols
количество рядов символов (только для textarea)
list
ссылается на список опций
spellcheck
установить в true или false, чтобы включить/отключить проверку привописания для поля
form
идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы
formaction
указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений)
formmethod
задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений)
formenctype
указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений)
formtarget
указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений)
readonly
значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено
disabled
отключает поле ввода - нет валидации, и данные не будут отправлены
Списки данных
Отключение валидации
Поля вывода
Разделение и подпись полей
Элементы управления не стандартизированы
Поддержка браузерами
Всегда используйте правильный тип!
Валидация на серверной стороне