Создание форм в html: Создание HTML форм

Содержание

Создание форм в html – от простого к сложному понятным языком

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

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

Что такое форма и как она функционирует

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

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

Форма задается при помощи специального элемента языка html <form>.

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

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

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Пример</title>
 </head>
 <body>
  <form>
   <p><input name="pas" type="password"><input type="submit"></p>
  </form>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример</title> </head> <body> <form> <p><input name=»pas» type=»password»><input type=»submit»></p> </form> </body> </html>

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

Отправляем данные на сторону сервера

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

Код такого метода выглядит вот так: <input type=»submit»>

При запуске представленной строки в браузере отобразиться кнопка с надписью: «Отправить».

Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.

После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».

За имя отвечает параметр атрибута type тега <input>, а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action элемента <form>.

Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.

Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.

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

Тег не обязательно задавать в паре с <form>, однако если необходимо обработать пользовательские записи или занести их, например, в базу данных, то без контейнера не обойтись.

Основными атрибутами данного элемента языка гипертекстовой разметки являются:

Text – создает текстовое поле;
Submit – создает кнопку для отправки данных на сервер;
Image – отвечает за кнопку с картинкой;
Reset – устанавливает кнопку для очистки формы;
Password – задает текстовое поле специально для паролей;
Checkbox – отвечает за поля с флажками;
Radio – отвечает за поля с выбором одного элемента;
Button – создает кнопку;
Hidden – используется для скрытых полей;
File – задает поле, отвечающее за отправку файлов.

Способы передачи информации

Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post. Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.

	Post	Get
Размер передаваемых документов	Ограничиваются серверной стороной.	Максимум – 4 Кб.
Способ отображения отправленной информации	Доступна только при просмотре через браузерные расширения или другие специальные программные продукты.	Сразу же доступна всем.
Использование закладок	Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес).	Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время.
Кэширование	Исходя из предыдущего пункта все запросы на одной странице.	Каждую страницу можно кэшировать отдельно.
Предназначение	Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев.	Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений.

Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе <form> используют предусмотренный параметр method (например, method=»post»).

Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Метод POST</title>
 </head>
 <body>
 <p>Введите свои персональные данные!</p>
  <form action="handler.php" method="post">
  <p><input name="name" value = "Имя">
<input name="fam" value = "Фамилия">
  <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> 
<input type="password" name="pass" value = "Пароль"> </p>
  <p><input type="submit"></p> 
</form>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Метод POST</title> </head> <body> <p>Введите свои персональные данные!</p> <form action=»handler.php» method=»post»> <p><input name=»name» value = «Имя»> <input name=»fam» value = «Фамилия»> <input type=»date» name=»calendar» value=»2016-06-11″ max=»2016-07-31″ min=»2016-06-01″> <input type=»password» name=»pass» value = «Пароль»> </p> <p><input type=»submit»></p> </form> </body> </html>

Запустите пример в браузере и оцените внешний вид каждого поля. В html очень удобно продумано задание типов полей, которые в свою очередь автоматически определяют, какие дополнительные элементы необходимы объектам.

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

Создание панели регистрации

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Регистрация</title>
  <style>
      body {
    background-color:#98FB98;
    background-attachment: fixed;    
   }
   form{
    background-color:#AEEEEE;
    Color: #006400;
   font-size:15px;
   } 
   h5 {
    color: red;
    text-align: center;
  }
   p {
    text-align: center;
  }
  input {
   Color: #006400;
   font-size:15px;
   border: 5px ridge #98FB98;
   background-color:#fff;
  }
  </style>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>Регистрация на сайте</legend>
   <h5> Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!</h5>
    <p>Имя: <input name="name" autofocus required ></p>
    <p>Фамилия: <input name="fam" required></p>
    <p>E-mail: <input type="email" required></p>
    <p>Пароль: <input type="password" name="pass" required></p>
    <p>Повтор пароля:<input type="password" name="pass" required></p>
    <p><input type="submit" value="Зарегистрироваться"></p>
   </fieldset>
  </form>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Регистрация</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h5 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>Регистрация на сайте</legend> <h5> Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!</h5> <p>Имя: <input name=»name» autofocus required ></p> <p>Фамилия: <input name=»fam» required></p> <p>E-mail: <input type=»email» required></p> <p>Пароль: <input type=»password» name=»pass» required></p> <p>Повтор пароля:<input type=»password» name=»pass» required></p> <p><input type=»submit» value=»Зарегистрироваться»></p> </fieldset> </form> </body> </html>

Советую вам сохранить данный код программы в документе с расширением .html и кодировкой utf-8, и открыть последний в окне браузера. Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением. Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута autofocus.

Начните заполнять поля, оставив одно без изменений, и нажмите кнопку «Зарегистрироваться». Как вы уже заметили, форма не будет отправлена, так как у каждого элемента <input> указан атрибут required. Он устанавливает отмеченные поля обязательными для заполнения.

Еще одним интересным моментом является указание типа type=»email», который появился в html 5. При использовании такого типа поля, введенная информация автоматически проверяется на корректность. В случае ошибок форма не отправляется на сервер.

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

Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 568 раз

Создание формы | htmlbook.ru

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

Сама форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:

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

Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).

Пример 1. Ошибочное использование форм

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input name="a"> <input type="submit"></p>
   <form action="handler.php">
    <p><input name="b"> <input type="submit"></p>
   </form>
  </form>
 </body>
</html>

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form> не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге <form> (пример 3).

Пример 3. Отправка формы по почте

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="mailto:[email protected]" enctype="text/plain">
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).

Рис. 1. Запуск приложения в Firefox

Рис. 2. Предупреждение Internet Explorer

Рис. 3. Выбор программы в Opera

улучшенные возможности, новые типы полей и атрибуты

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

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

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

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

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

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

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

1. Элемент <form>

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

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

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

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

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <p><label for="name">Имя <em>*</em></label><input type="text"></p>
    <p><label for="email">E-mail</label><input type="email"></p>
  </fieldset>
<p><input type="submit" value="Отправить"></p>
</form>

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

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

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

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

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

Таблица 3. Атрибуты тега <input>
Атрибут	Значение / описание
`accept`	Определяет тип файла, разрешенных для отправки на сервер. Указывается только для `<input type="file">`. Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, `accept=".gif"`, `accept=".pdf"`, `accept=".doc"` `audio/` — разрешает загрузку аудиофайлов `video/` — разрешает загрузку видеофайлов `image/*` — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов.
`alt`	Определяет альтернативный текст для изображений, указывается только для `<input type="image">`.
`autocomplete`	Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: `on` — означает, что поле не защищено, и его значение можно сохранять и извлекать, `off` — отключает автозаполнение для полей форм.
`autofocus`	Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
`checked`	Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа `type="checkbox"` и `type="radio"`.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно атрибуту `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
`formaction`	Задает `url` файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа `type="submit"` и `type="image"`. Атрибут переопределяет значение атрибута `action` самой формы.
`formenctype`	Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута `enctype` формы. Задается только для полей типа `type="submit"` и `type="image"`. Варианты: `application/x-www-form-urlencoded` — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ `+`, специальные символы преобразуются в значения ASCII HEX) `multipart/form-data` — символы не кодируются `text/plain` — пробелы заменяются на символ `+`, а специальные символы не кодируются.
`formmethod`	Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа `type="submit"` и `type="image"`. Переопределяет значение атрибута `method` формы. Варианты: `get` — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: `URL?имя=значение&имя=значение` `post` — данные формы отправляются в виде http-запроса.
`formnovalidate`	Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута `novalidate` формы. Можно использовать без указания значения атрибута.
`formtarget`	Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа `type="submit"` и `type="image"`. Переопределяет значение атрибута `target` формы. `_blank` — загружает ответ в новое окно/вкладку `_self` — загружает ответ в то же окно (значение по умолчанию) `_parent` – загружает ответ в родительский фрейм `_top` – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем.
`height`	Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа `type="image"`, например, `<input type="image" src="img_submit.gif">`. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
`list`	Является ссылкой на элемент `<datalist>`, содержит его `id`.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
`max`	Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом `min`. Работает со следующими типами полей: `number`, `range`, `date`, `datetime`, `datetime-local`, `month`, `time` и `week`.
`maxlength`	Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
`min`	Позволяет ограничить допустимый ввод числовых данных минимальным значением.
`multiple`	Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
`name`	Определяет имя, которое будет использоваться для доступа к элементу `<form>`, к примеру, в таблицах стилей css. Является аналогом атрибута `id`.
`pattern`	Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, `pattern="[a-z]{3}-[0-9]{3}"` — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
`placeholder`	Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
`readonly`	Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
`size`	Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: `text`, `search`, `tel`, `url`, `email` и `password`.
`src`	Задает `url` изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля `<input type="image">`.
`step`	Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
`type`	`button` — создает кнопку.
	`checkbox` — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
	`color` — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
	`date` — позволяет вводить дату в формате дд.мм.гггг. День рождения:
	`datetime-local` — позволяет вводить дату и время, разделенные прописной английской буквой `Т` по шаблону дд.мм.гггг чч:мм. День рождения — день и время:
	`email` — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail:
	`file` — позволяет загружать файлы с компьютера пользователя. Выберите файл:
	`hidden` — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
	`image` — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
	`month` — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
	`number` — предназначено для ввода целочисленных значений. Его атрибуты `min`, `max` и `step` задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5):
	`password` — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль:
	`radio` — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец:
	`range` — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
	`reset` — создает кнопку, которая очищает поля формы от введенных пользователем данных.
	`search` — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск:
	`submit` — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
	`text` — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
	`time` — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время:
	`url` — поле предназначено для указания URL-адресов. Главная страница:
	`week` — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю:
`value`	Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
`width`	Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

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

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

Таблица 4. Атрибуты тега <textarea>
Атрибут	Значение / описание
`autofocus`	Устанавливает фокус на нужном начальном текстовом поле автоматически.
`cols`	Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно значению атрибута `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле.
`maxlength`	Значение атрибута задает максимальное число символов для ввода в поле.
`name`	Задает имя текстового поля.
`placeholder`	Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение.
`readonly`	Отключает возможность редактирования содержимого поля.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения.
`rows`	Указывает число, которое означает, сколько строк должно отображаться в текстовой области.
`wrap`	Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение `hard` сохраняет перенос, а значение `soft` не сохраняет. Если используется значение `hard`, то должно указываться значение атрибута `cols`.

5. Раскрывающийся список

Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.

Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.

Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.

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

Таблица 5. Атрибуты тега <select>
Атрибут	Значение / описание
`autofocus`	Устанавливает автоматический фокус на элементе при загрузке страницы.
`disabled`	Отключает раскрывающийся список.
`form`	Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
`multiple`	Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу `Ctrl`.
`name`	Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
`required`	Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
`size`	Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.

Таблица 6. Атрибуты тега <option>
Атрибут	Значение / описание
`disabled`	Делает недоступным для выбора элемент списка.
`label`	Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка.
`selected`	Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
`value`	Указывает значение, которое будет отправлено на сервер при отправке формы.

Таблица 7. Атрибуты тега <optgroup>
Атрибут	Значение / описание
`disabled`	Отключает данную группу элементов списка для выбора.
`label`	Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием.

6. Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>

<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>

Таблица 8. Атрибуты тега <label>
Атрибут	Значение / описание
`for`	Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющие надписи к следующим элементам формы: `<input>`, `<textarea>`, `<select>`. Значение атрибута содержит идентификатор поля формы.

7. Кнопки

Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.

Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.

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

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

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

Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.

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

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

Создание форм в HTML

Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы.

Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.

И в этой статье Вы научитесь создавать абсолютно любые формы в HTML.

Сначала создайте простейшую HTML-страницу, в которую добавьте контейнер (тег <div>), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.

А теперь займёмся формой. Форма начинается с тега <form>, соответственно, заканчивается закрывающим тегом </form>. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега <form>, чтобы Вам было понятнее назначение каждого из них:

<form name = "form1" action = "script/request.php" method = "post"> </form>

Здесь у нас начинается описание формы, у которой есть следующие атрибуты:

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«, то есть скрытую отправку.

Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму.

Первое, что мы добавим — это текстовое поле. Добавляется текстовое поле с помощью тега <input>, а точнее с помощью атрибута этого тега «type» со значением «text«. Также перед созданием текстового поля рекомендуется написать, что это за поле, например, «Ваше имя«. Внутри тега <form> напишите такую строчку:

Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя">

Опять же, давайте разберём атрибуты:

1) Атрибут «type» отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.

2) Атрибут «name» отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname.

3) Атрибут «value» отвечает за значение этого поля по умолчанию.

Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте!) этот текст в редакторе, а потом посмотрите результат в браузере.

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

Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль">

Как видите, теперь значением атрибута «type» является «password«. Остальные атрибуты те же, что и для обычного текстового поля.

Следующий элемент — это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код.

Выберите вариант: <select name = "choice"> <option value = "1">Вариант 1 <option value = "2">Вариант 2 <option value = "3">Вариант 3 </select>

Тег <select> означает начало выпадающего списка. Заканчивается список тегом </select>. Атрибут «name» ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега <option>. Значение атрибута «value» означает, какой значение будет у переменной choice (например, в JavaScript), то есть либо choice = 1, либо choice = 2, либо choice = 3. Сразу после окончания описания тега <option> ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.

Теперь добавим текстовую область, используя тег <textarea>:

Напишите что-нибудь: <br> <textarea name = "message" rows = "10" cols = "15">Сообщение</textarea>

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута «rows«) и шириной в 15 символов (значение атрибута «cols«).

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

Следующий элемент — это радио-кнопка. Радио-кнопка — это набор таких «кружочков«, из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега <input>, а, точнее, с помощью значения «radio» атрибута «type«. Напишем такой HTML-код:

Выберите что-нибудь одно: <input type = "radio" name = "choiceradio" value = "1">Вариант 1 <input type = "radio" name = "choiceradio" value = "2">Вариант 2 <input type = "radio" name = "choiceradio" value = "3">Вариант 3

Тут я остановлюсь на атрибуте «name«, потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута «name«. Атрибут «value» означает значение переменной «choiceradio» (опять же, например, в JavaScript). Сразу после описания тега <input> идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

Ещё одним элементом формы являются переключатели (checkbox). Создаются они опять же с помощью тега <input>. Напишем следующие строчки:

Вы согласны с нашими правилами: <input type = "checkbox" name = "terms" value = "yes">

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной «terms» будет «yes«, если не будет стоять, то значение этой переменной будет «», то есть пустой строкой.

Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега <input>. Напишем так:

Выберите файл для загрузки: <input type = "file" name = "path">

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

Теперь займёмся двумя последними элементами — это кнопки. Их две: обычная кнопка и кнопка «submit«. Начнём с обычной кнопки. Создаётся кнопка с помощью тега <input>. Например, так:

<input type = "button" name = "start" value = "Начать">

Значение атрибута «type» уже «button«, что сообщает браузеру, что это кнопка. Атрибут «name» — это имя кнопки, а значение атрибута «value» отвечает за текст на кнопке. Обрабатывать эту кнопку мы не будем, так как мы проходим не JavaScript, а основы HTML, но в будущем обязательно это сделаем.

И последний элемент — это кнопка «submit«, при нажатии на которую форма отправляется на обработку к файлу, указанному в атрибуте «action» тега <form>. Добавляется это кнопка так:

<input type = "submit" value = "Отправить">

Как видите, создать кнопку «submit» очень просто: для этого необходимо поставить значение «submit» атрибута «type» тега <input>. А атрибут «value» содержит текст, который пользователь увидит на кнопке.

Теперь, напоследок, советую посмотреть разницу между значениями «post» и «get» атрибута «method» тега <form>. Разницу можно увидеть в адресной строке при нажатии на кнопку «submit«.

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

<html> <head> </head> <body> <div align = "center"> <form name = "form1" action = "script/request.php" method = "get"> Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя"> <br> Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль"> <br> Выберите вариант: <select name = "choice"> <option value = "1">Вариант 1 <option value = "2">Вариант 2 <option value = "3">Вариант 3 </select> <br> Напишите что-нибудь: <br> <textarea name = "message" rows = "10" cols = "15">Сообщение</textarea> <br> Выберите что-нибудь одно: <input type = "radio" name = "choiceradio" value = "1">Вариант 1 <input type = "radio" name = "choiceradio" value = "2">Вариант 2 <input type = "radio" name = "choiceradio" value = "3">Вариант 3 <br> Вы согласны с нашими правилами: <input type = "checkbox" name = "terms" value = "yes"> <br> Выберите файл для загрузки: <input type = "file" name = "path"> <br> <input type = "button" name = "start" value = "Начать"> <br> <input type = "submit" value = "Отправить"> </form> </div> </body> </html>

Как видите, опять ничего сложного. Как видите, создать свой сайт — это совсем не сложно. Единственная проблема, как это всё запомнить? Ответ очень прост: практика, практика и ещё раз практика!

Всего доброго!

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 29.04.2010 10:46:27

Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Учебник HTML 5. Статья «Формы»

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

Синтаксически парный тег <form> определяет форму в HTML документе.
Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы, которые мы с Вами сейчас рассмотрим.

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

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации.
Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

Значение	Описание
button	Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox включено выключено	Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
color	Элемент управления для задания цвета (определяет палитру цветов).
date	Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-local	Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
email	Определяет поле для ввода адреса электронной почты.
file	Элемент управления, который позволяет пользователю выбрать файл.
hidden	Элемент управления, который определяет скрытое поле ввода.
image	Элемент управления, который определяет графическую кнопку «отправить форму» (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
month	Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
number	Элемент управления для ввода числа с плавающей точкой.
password	Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio выбрано не выбрано	Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
range	Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны: min = «0» max = «100» value = min + (max — min) / 2, или min (если max меньше чем min) step = «1»
reset	Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
search	Определяет однострочное текстовое поле для ввода строки поиска
submit	Определяет кнопку отправки формы
tel	Определяет элемент управления для ввода телефонного номера.
text	Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов). Это значение по умолчанию.
time	Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
url	Определяет поле для ввода абсолютного URL-адреса.
week	Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к
самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

checkbox (флаговая кнопка).
radio (радиокнопка).
submit (кнопкa отправки формы).
text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML формы</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.

Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = «checkbox»> и <input type = «radio»>, в противном случае он игнорируется.

Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Рис 32 HTML формы.

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

Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные.
Чтобы указать обработчик формы, необходимо использовать тег <form> совместно с атрибутом action:

<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница).
В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».

Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example.php"  method = "post">

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

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

Группировка данных формы

Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>).
Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Группировка данных формы</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Пожалуйста, представьтесь</legend>
				Имя: <input type =  "text" name = "firstname" value =  "Введите имя"> <br> <br>
				Фамилия: <input type =  "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
				Мужчина <input type =  "radio" name = "sex" value =  "male" checked>
				Женщина <input type =  "radio" name = "sex" value =  "female"><br> <br>
				<input type = "submit" name = "submit" value = "отправить">
			</fieldset>
		</form>
	</body>
</html>

В этом примере мы:

Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

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

Текстовая метка

Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

Внутри первой формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
- Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
Внутри второй формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Рис. 34 Использование текстовой метки (тег <label>).

Подсказка для полей ввода

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).

Атрибут может быть использован с полями данных следующих типов (атрибут type):

email (поле для адреса электронной почты).
password (поле с паролем, в котором скрываются символы).
search (текстовое поле для ввода строки поиска).
text (однострочное текстовое поле).
tel (поле для ввода номера телефона).
url (поле для ввода URL-адреса).

Давайте рассмотри пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута placeholder</title>
	</head>
	<body>
		<form>
			Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
			<button type = "submit">Далее</button>
		</form>
	</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Используя полученные знания составьте следующую форму оформления заказа:

Практическое задание № 22.

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

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

Работа с формами в html, создание основных элементов формы

Цель урока: Создание и работа с формами в html. Изучение основных элементов формы

Создание и работа с формами в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

<form action="file.php" method="post">
...
содержимое формы
...
</form>

<form action=»file.php» method=»post»>
…
содержимое формы
…
</form>

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

Атрибуты формы:

`action` (англ. «действие») Файл на сервере с кодом для отработки отосланных данных	`action="http://www.название.домен/имя программы"`
`enctype` (англ. «тип кодировки»)	text/plain (обычный текст) application/x-www-dorm-urlencoded (для метода Post отправки формы) multipart/form-data (для метода Post, если прикрепляются файлы)
`method` (метод отправки данных)	post get

В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post.

Элементы формы html

Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

Выпадающий список HTML

Рассмотрим пример добавления выпадающего списка:

<select name="book" size="1">
	<option value="asp">ASP</option>
	<option value="js">JavaScript</option>
	<option value="php">PHP</option>
	<option value="html" selected="selected">HTML</option>
</select>

<select name=»book» size=»1″>
<option value=»asp»>ASP</option>
<option value=»js»>JavaScript</option>
<option value=»php»>PHP</option>
<option value=»html» selected=»selected»>HTML</option>
</select>

Результат:

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

Атрибуты:

Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»
Атрибут value необходим для обработки элемента программистом. Поэтому его можно опустить.

Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

<select name="book" size="1">
	<optgroup label="Английские">
		<option value="asp">ASP</option>
		<option value="js">JavaScript</option>
		<option value="php">PHP</option>
		<option value="html" selected="selected">HTML</option>
	</optgroup>
	<optgroup label="Русские">
		<option value="asp_rus">ASP по-русски</option>
		<option value="js_rus">JavaScript по-русски</option>
	</optgroup>
</select>

<select name=»book» size=»1″>
<optgroup label=»Английские»>
<option value=»asp»>ASP</option>
<option value=»js»>JavaScript</option>
<option value=»php»>PHP</option>
<option value=»html» selected=»selected»>HTML</option>
</optgroup>
<optgroup label=»Русские»>
<option value=»asp_rus»>ASP по-русски</option>
<option value=»js_rus»>JavaScript по-русски</option>
</optgroup>
</select>

Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple. Но в таком случае и атрибут size следует установить в значение, большее, чем 1:

<select name="book" size="4" multiple="multiple">
...

<select name=»book» size=»4″ multiple=»multiple»>
…

Текстовая область в HTML

Для ввода большого фрагмента текста служит элемент текстовая область:

<textarea name="description" cols="30" rows="10">Текст</textarea>

<textarea name=»description» cols=»30″ rows=»10″>Текст</textarea>

Результат:

Атрибуты:

Ширина элемента зависит от атрибута cols, который указывает сколько символов помещается по горизонтали.
Атрибут rows определяет количество строк в элементе.
Атрибут name необходим для обработки элемента программистом. Поэтому его можно опустить.

Другие элементы

Обычная кнопка:

<input type="button" value="что-то сделать">

Элемент кнопка-изображение:

<input type="image" src="1.png">

Результат:

Элемент загрузка файла:

Для прикрепления файла к форме существует специальный элемент управления:

<input type="file" name="userfile" size="20">

Результат:

При его использовании значение кодировки формы (атрибут enctype у тега form) должен иметь значение multipart/form-data

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

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

<input type="hidden" name="uid" value="15362">

Дополнительные элементы и атрибуты

Label for:

Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

<input type="checkbox">
<label for="book1">ASP</label>

В примере создана надпись (тег label) для элемента checkbox. Привязка осуществляется через атрибут id, значение которого указано в атрибуте for надписи.

Результат:

Атрибут disabled:

Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

<input type="text" name="login" size="20" value="Логин" maxlength="25" disabled="disabled"><br>
<input type="checkbox" name="asp" value="yes">ASP<br>
<input type="checkbox" name="js" value="yes" checked="checked"  disabled="disabled">javascript<br>

<input type=»text» name=»login» size=»20″ value=»Логин» maxlength=»25″ disabled=»disabled»><br>
<input type=»checkbox» name=»asp» value=»yes»>ASP<br>
<input type=»checkbox» name=»js» value=»yes» checked=»checked» disabled=»disabled»>javascript<br>

Результат:

Атрибут readonly:

Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):

<input type="text" name="login" size="20" value="Логин" 
maxlength="25" readonly="readonly">

Результат:

Элемент fieldset:

Для визуального оформления группы объектов можно использовать элемент fieldset:

<fieldset>
<legend>Книги</legend>
<input type="checkbox" value="html">HTML<br>
<input type="checkbox" value="asp">ASP<br>
<input type="checkbox" value="js">javaScript<br>
</fieldset>

<fieldset>
<legend>Книги</legend>
<input type=»checkbox» value=»html»>HTML<br>
<input type=»checkbox» value=»asp»>ASP<br>
<input type=»checkbox» value=»js»>javaScript<br>
</fieldset>

Результат:

Атрибут tabindex:

Можно задать очередность передвижения по элементам клавишей TAB:

<элемент tabindex="1">

<элемент tabindex=»1″>

Элемент будет первым в очереди переходов.

Задание: Необходимо создать анкету web-разработчика согласно изображению. Элементы располагать в табличном виде

Полное руководство по элементам HTML-формы

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.

Введение

HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.

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

Элемент Form

Элемент Form (<form></form>) оборачивает все элементы внутри HTML-формы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
      
      </form>
    </body>
</html>

Атрибуты:

action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
Method – это HTTP метод, который используется браузером для отправки формы.
Возможные значения: POST или GET. POST – отправляет данные формы на сервер.
GET – данные отправляются внутри URL, параметры разделяются знаком «?».

Примечание: Нельзя создать форму внутри формы. То есть использование элемента <form> внутри другого элемента <form> недопустимо.

Элемент Input

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
      </form>
    </body>
</html>

В примере выше над тегом input были добавлены три атрибута.

type

Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.

Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.

id

Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.

name

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

placeholder

Атрибут подсказывает пользователю, что именно необходимо ввести в поле ввода HTML-формы. Исчезает, как только пользователь начинает печатать в поле.

Примечание: Использование разных значений в атрибуте type выводит разный результат:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
      </form>
    </body>
</html>

Элементы input без placeholder:

Элементы input с placeholder:

Элемент textarea

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

Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.

Атрибуты:

id – см. <input/>.
name – см. <input/>.
cols – задает видимую ширину текстовой области.
rows – задает видимое количество строк в текстовой области.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <textarea name="student_bio"></textarea>
      </form>
    </body>
</html>

Примечание: В большинстве браузеров можно изменять размер элемента.

Элемент button

Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.

В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.

Атрибуты:

type=”reset” – при нажатии очищает все данные формы.
type=”button” – в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
        
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
          
          <textarea name="student_bio"></textarea>
          
          <button type="submit">Submit</button>
        
      </form>
    </body>
</html>

Элемент label

Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.

Каждую строку HTML-формы можно отметить элементом label.

Наиболее популярным атрибутом label является for.

Атрибуты:

for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: если навести мышкой на метку (название строки), то активируется поле ввода, связанное с данной меткой Это стандартное поведение элемента.

Меню select

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

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

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

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul>, которому необходимы элементы <li>.

Атрибуты:

name – см. <input/>.
<option> – вариант выбора из меню select. Использует атрибут value.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
          </select>
          
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Для формы выбора курса также задается элемент label. Кроме того, списки можно упорядочить по логическим группам. Для этих целей используется элемент <optgroup>.

Атрибуты:

label: – название группы опций (вариантов). В примере ниже варианты выбора делятся на две группы с меткой Engineering (Проектирование) и Management (Управление).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science</option>
              <option value="electrical_engineering">Electrical</option>
              <option value="mechanical_engineering">Mechanical</option> 
              <option value="chemical_engineering">Chemical</option>
              <option value="civil_engineering">Civil</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology</option>
              <option value="marketing_management">Marketing</option>
              <option value="business_administration">Business</option>     
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:

name – см. <input/>.
value – определение значений заданных вариантов.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: Внутри одной группы радиокнопок атрибут name должен быть одинаковым.

Чекбоксы

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

Атрибуты:

name – см. <input/>.
value – определение значений заданных вариантов.
checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).

<input type="checkbox" checked value="abhishek" name="user_name" />

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент <label> вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          
          <h3>Your basic info</h3>
          
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>
          
          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

          <label>Interests:</label>
          <input type="checkbox" value="interest_engineering" name="user_interest"><label for="engineering">Engineering</label><br>
          <input type="checkbox" value="interest_business" name="user_interest"><label for="business">Business</label><br>
          <input type="checkbox" value="interest_law" name="user_interest"><label for="law">Law</label>
        
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Отличия чекбоксов от радиокнопок HTML-формы

Чекбокс может существовать сам по себе. Радикнопки появляются только в качестве группы (минимум 2 кнопки).
В отличие от радиокнопки выбор чекбокса не является обязательным.

Конечный результат

В статье было представлено пошаговое руководство по созданию HTML-формы. Не старайтесь запомнить все и сразу – ни один разработчик не сможет назвать каждый атрибут или элемент. Гораздо важнее научиться ориентироваться в документации.

Вы можете добавить в эти примеры CSS и создать собственные формы.

Перевод статьи Abhishek Jakhar: A step-by-step guide to getting started with HTML forms

HTML-форм

HTML-форма используется для сбора пользовательского ввода. Пользовательский ввод
чаще всего отправляется на сервер для обработки.

Элемент

Элемент HTML

используется для
создать HTML-форму для ввода данных пользователем:

.
элементы формы
.

Элемент

— это контейнер для различных типов элементов ввода,
такие как: текстовые поля, флажки, радио
кнопки, кнопки отправки и т. д.

Все
в этой главе рассматриваются различные элементы формы:
Элементы HTML-формы.

Элемент

Элемент HTML является самым
использованный элемент формы.

Элемент может отображаться в
много способов, в зависимости от типа
атрибут.

Вот несколько примеров:

Тип	Описание
	Отображает однострочное поле ввода текста
	Отображает переключатель (для выбора одного из множества вариантов)
	Отображает флажок (для выбора нуля или более из множества вариантов)
	Отображает кнопку отправки (для отправки формы)
	Отображает кнопку, на которую можно нажать

В этой главе рассматриваются все различные типы входов:
Типы ввода HTML.

Текстовые поля

определяет однострочное поле ввода для
ввод текста.

Пример

Форма с полями для ввода текста:

Имя:

Последний
имя:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Примечание: Сама форма не видна.Также обратите внимание, что ширина по умолчанию
поля ввода составляет 20 символов.

Элемент

Обратите внимание на использование элемента в
пример выше.

Тег определяет метку для многих
элементы формы.

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

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

Атрибут для тега должен
быть равным id атрибуту
элемент, чтобы связать их вместе.

Кнопки радио

определяет переключатель.

Радиокнопки позволяют пользователю выбрать ОДИН из ограниченного числа вариантов.

Пример

Форма с переключателями:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Мужской
Женский
Другое

Флажки

определяет флажок .

Флажки позволяют пользователю выбрать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

Пример

Форма с флажками:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

У меня велосипед
У меня машина
У меня лодка

Кнопка отправки

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

Обработчик формы обычно представляет собой файл на сервере со сценарием для обработки.
входные данные.

Обработчик формы указан в действии формы
атрибут.

Пример

Форма с кнопкой отправки:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Атрибут имени для

Обратите внимание, что каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, значение поля ввода не будет отправлено вообще.

Пример

В этом примере не будет отправлено значение поля ввода «Имя»:

Попробуй сам »

Упражнения HTML

HTML-элементов формы

В этой главе описаны все различные элементы формы HTML.

Элементы HTML

Элемент HTML

может содержать один или несколько из следующих элементов формы:

<вход>
<метка>
<выбрать>
</code> </li> <li> <code> <кнопка> </code> </li> <li> <code><br /> <fieldset> </code> </li> <li> <code> <легенда> </code> </li> <li> <code> <datalist> </code> </li> <li> <code> <выход> </code> </li> <li> <code> <опция> </code> </li> <li> <code> <optgroup> </code> </li> </ul> <hr/> <h3><span class="ez-toc-section" id="i-37"> Элемент <input> </span></h3> <p> Одним из наиболее часто используемых элементов формы является элемент <code> <input> </code>.</p> <p> Элемент <code> <input> </code> может отображаться несколькими способами, в зависимости от типа <code> </code><br /> атрибут. </p> <h4><span class="ez-toc-section" id="i-38"> Пример </span></h4> <p> <label for = "fname"> Имя: </label> <br /> <input type = "text" name = "fname"> </p> <p>Попробуй сам »</p> <p> Все разные значения типа <code> </code><br /> атрибуты рассматриваются в следующей главе:<br /> Типы ввода HTML. </p> <hr/> <h3><span class="ez-toc-section" id="i-39"> Элемент <label> </span></h3> <p> Элемент <code> <label> </code> определяет метку для<br /> несколько<br /> элементы формы.</p> <p> Элемент <code> <label> </code> полезен для<br /> пользователи программ чтения с экрана, потому что программа чтения с экрана прочитает этикетку вслух, когда<br /> пользователь фокусируется на элементе ввода. </p> <p> Элемент <code> <label> </code> также помогает пользователям, у которых<br /> сложность нажатия на очень маленькие области (например, переключатели или флажки)<br /> — потому что, когда пользователь щелкает текст в элементе <code> <label> </code>, он переключается<br /> переключатель / флажок.</p> <p> Атрибут <code> для </code> тега <code> <label> </code> должен<br /> быть равным <code> id </code> атрибуту <code> <input> </code><br /> элемент, чтобы связать их вместе. </p> <hr/> <h3><span class="ez-toc-section" id="i-40"> Элемент <select> </span></h3> <p> Элемент <code> <select> </code> определяет раскрывающийся список: </p> <h4><span class="ez-toc-section" id="i-41"> Пример </span></h4> <p> <label for = "cars"> Выберите автомобиль: </label> <br /> <select name = "cars"> <br /><option value = "volvo"> Volvo </option><br /><option value = "saab"> Saab </option><br /><option value = "fiat"> Fiat </option><br /><option value = "audi"> Audi </option><br /> </select> </p> <p>Попробуй сам »</p> <p> Элементы <code><option> </code> определяют параметр, который может быть<br /> выбрано.</p> <p> По умолчанию выбран первый элемент в раскрывающемся списке. </p> <p> Чтобы определить предварительно выбранный вариант, добавьте атрибут <code> selected </code><br /> к опциону: </p> <h4><span class="ez-toc-section" id="i-42"> Видимые значения: </span></h4> <p> Используйте атрибут </code> размер <code>, чтобы указать количество видимых значений: </p> <h4><span class="ez-toc-section" id="i-43"> Пример </span></h4> <p> <label for = "cars"> Выберите автомобиль: </label> <br /> <select name = "cars" size = "3"> <br /><option value = "volvo"> Volvo </option><br /><option value = "saab"> Saab </option><br /><option value = "fiat"> Fiat </option><br /><option value = "audi"> Audi </option><br /> </select> </p> <p>Попробуй сам "</p> <h4><span class="ez-toc-section" id="i-44"> Разрешить множественный выбор: </span></h4> <p> Используйте атрибут <code> multiple </code>, чтобы позволить пользователю выбрать более одного значения: </p> <h4><span class="ez-toc-section" id="i-45"> Пример </span></h4> <p> <label for = "cars"> Выберите автомобиль: </label> <br /> <select name = "cars" size = "4" <strong> </strong> несколько> <br /><option value = "volvo"> Volvo </option><br /><option value = "saab"> Saab </option><br /><option value = "fiat"> Fiat </option><br /><option value = "audi"> Audi </option><br /> </select> </p> <p>Попробуй сам "</p> <hr/> <h3><span class="ez-toc-section" id="i-46"> Элемент <textarea> </span></h3> <p> Элемент <code> <textarea> </code> определяет многострочное поле ввода (текстовую область): </p> <h4><span class="ez-toc-section" id="i-47"> Пример </span></h4> <p> <textarea name = "message" rows = "10" cols = "30"> <br /> Кот играл в саду.<br /> Попробуй сам " Атрибут строк определяет видимое количество строк в текстовая область. Атрибут cols определяет видимую ширину текста. площадь. Вот как HTML-код выше будет отображаться в браузере: Кот играл в саду. Вы также можете определить размер текстовой области с помощью CSS: Пример <br /> Кот играл в саду.<br /> Попробуй сам " Элемент Элемент Попробуй сам " Вот как HTML-код выше будет отображаться в браузере: Нажми на меня! Примечание: Всегда указывайте атрибут type для элемента кнопки.Различные браузеры могут использовать разные типы по умолчанию для элемента кнопки. Элементы и Элемент
используется для группировки связанных данных в форме. Элемент определяет заголовок для
элемент. Пример Personalia: Первый имя: Фамилия: Попробуй сам " Вот как HTML-код выше будет отображаться в браузере: Элемент Элемент определяет список предопределенных опций для элемента . Пользователи будут видеть раскрывающийся список предварительно определенных параметров при вводе данных.
Атрибут списка элемента должен ссылаться на id атрибут элемента .
Пример
Попробуй сам " Элемент Элемент представляет результат вычисления (например, выполняется по сценарию). Пример Выполните вычисление и покажите результат в элементе : oninput = "x.value = parseInt (a.value) + parseInt (b.value)"> 0 100 + = Попробуй сам " Упражнения HTML Элементы HTML-формы Тег Описание <форма> Определяет HTML-форму для пользовательского ввода <вход> Определяет элемент управления вводом </td> <td> Определяет многострочный элемент управления вводом (текстовая область) </td> </tr> <tr> <td> <метка> </td> <td> Определяет метку для элемента <input> </td> </tr> <tr> <td> <fieldset> </td> <td> Группирует связанные элементы в форме </td> </tr> <tr> <td> <легенда> </td> <td> Определяет заголовок для элемента </p> <fieldset> </td> </tr> <tr> <td> <выбрать> </td> <td> Определяет раскрывающийся список </td> </tr> <tr> <td> <optgroup> </td> <td> Определяет группу связанных параметров в раскрывающемся списке </td> </tr> <tr> <td> <опция> </td> <td> Определяет параметр в раскрывающемся списке </td> </tr> <tr> <td> <кнопка> </td> <td> Определяет кнопку, на которую можно нажать </td> </tr> <tr> <td> <datalist> </td> <td> Задает список предопределенных параметров для элементов управления вводом </td> </tr> <tr> <td> <выход> </td> <td> Определяет результат вычисления </td> </tr> </table> <p>.</p> <h2><span class="ez-toc-section" id="i-57"> Ваша первая форма - Изучите веб-разработку </span></h2> <p> В первой статье нашей серии вы познакомитесь с вашим первым опытом создания веб-формы, включая проектирование простой формы, ее реализацию с использованием правильных элементов управления HTML-формы и других элементов HTML, добавление очень простых стилей с помощью CSS и описание того, как данные отправляются на сервер. Мы более подробно рассмотрим каждую из этих подтем позже в этом модуле. </p> <table> <tbody> <tr> <th scope="row"> Предварительные требования: </th> <td> Базовая компьютерная грамотность и базовое понимание HTML.</td> </tr> <tr> <th scope="row"> Цель: </th> <td> Ознакомиться с тем, что такое веб-формы, для чего они используются, как их проектировать, а также с основными элементами HTML, которые вам понадобятся в простых случаях. </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-58"> Что такое веб-формы? </span></h3> <p> <strong> Веб-формы </strong> - одна из основных точек взаимодействия между пользователем и веб-сайтом или приложением. Формы позволяют пользователям вводить данные, которые обычно отправляются на веб-сервер для обработки и хранения (см. Отправка данных формы далее в модуле) или используются на стороне клиента для немедленного обновления интерфейса каким-либо образом (например, добавление другой элемент в список, или показать или скрыть функцию пользовательского интерфейса).</p> <p> HTML веб-формы <strong> </strong> состоит из одного или нескольких элементов управления формой <strong> </strong> (иногда называемых виджетами <strong> </strong>), а также некоторых дополнительных элементов, помогающих структурировать форму в целом - их часто называют формами <strong> HTML </strong>. Элементы управления могут быть однострочными или многострочными текстовыми полями, раскрывающимися списками, кнопками, флажками или переключателями и в основном создаются с использованием элемента <code> <input> </code>, хотя есть и другие элементы, о которых стоит узнать.</p> <p> Элементы управления формой </p> <p> также могут быть запрограммированы для принудительного ввода определенных форматов или значений (<strong> проверка формы </strong>) и в сочетании с текстовыми метками, которые описывают их цель как для зрячих, так и для слепых пользователей. </p> <h3><span class="ez-toc-section" id="i-59"> Создание вашей формы </span></h3> <p> Прежде чем начинать код, всегда лучше сделать шаг назад и подумать о своей форме. Создание быстрого макета поможет вам определить правильный набор данных, который вы хотите попросить ввести пользователя. С точки зрения пользовательского опыта (UX) важно помнить, что чем больше ваша форма, тем больше вы рискуете расстроить людей и потерять пользователей.Будьте просты и сосредоточьтесь: запрашивайте только те данные, которые вам абсолютно необходимы. </p> <p> Разработка форм - важный шаг при создании сайта или приложения. В задачу данной статьи не входит рассмотрение пользовательского опыта форм, но если вы хотите углубиться в эту тему, вам следует прочитать следующие статьи: </p> <p> В этой статье мы создадим простую контактную форму. Сделаем набросок. </p> </p> <p> Наша форма будет содержать три текстовых поля и одну кнопку.Мы просим пользователя указать его имя, адрес электронной почты и сообщение, которое он хочет отправить. Нажатие кнопки отправит их данные на веб-сервер. </p> <h3><span class="ez-toc-section" id="_HTML-10"> Активное обучение: реализация нашей формы HTML </span></h3> <p> Хорошо, давайте приступим к созданию HTML для нашей формы. Мы будем использовать следующие элементы HTML: <code> </p> <form> </code>, <code> <label> </code>, <code> <input> </code>, <code> <textarea> </code> и <code> <button> </code>. </p> <p> Прежде чем идти дальше, сделайте локальную копию нашего простого HTML-шаблона - вы введете здесь HTML-код своей формы.</p> <h4><span class="ez-toc-section" id="i-60"> Элемент <code> </p> <form> </code> </span></h4> <p> Все формы начинаются с элемента <code> </p> <form> </code>, например: </p><pre> <form action = "/ my-handle-form-page" method = "post"> </form> </pre><p> Этот элемент формально определяет форму. Это элемент контейнера, подобный элементу <code> </p> <section> </code> или <code> </p> <footer> </code>, но специально для содержания форм; он также поддерживает некоторые специфические атрибуты для настройки поведения формы.Все его атрибуты являются необязательными, но стандартная практика - всегда устанавливать как минимум атрибуты <code> action </code> и <code> method </code>: </p> <ul> <li> Атрибут <code> action </code> определяет местоположение (URL), куда должны быть отправлены собранные данные формы при их отправке. </li> <li> Атрибут <code> method </code> определяет, с каким методом HTTP отправлять данные (обычно <code> получают </code> или <code> post </code>). </li> </ul> <p> <strong> Примечание </strong>: Позже мы рассмотрим, как эти атрибуты работают, в нашей статье «Данные формы отправки».</p> <p> А пока добавьте указанный выше элемент <code> </p> <form> </code> в свой HTML <code> <body> </code>. </p> <h4><span class="ez-toc-section" id="i-61"> <code> <label> </code>, <code> <input> </code> и <code> <textarea> </code> элементов </span></h4> <p> Наша контактная форма не сложна: часть ввода данных содержит три текстовых поля, каждому из которых соответствует <code> <label> </code>: </p> <p> С точки зрения HTML-кода для реализации этих виджетов формы нам понадобится что-то вроде следующего: </p><pre dir="rtl"> <form action = "/ my-handle-form-page" method = "post"> <ul> <li> <label for = "name"> Имя: </label> <input type = "text" name = "user_name"> </li> <li> <label for = "mail"> Электронная почта: </label> <input type = "email" name = "user_email"> </li> <li> <label for = "msg"> Сообщение: </label> <textarea name = "user_message"> Обновите код формы, чтобы он выглядел, как показано выше. Элементы предназначены для удобной структурирования нашего кода и упрощения стилизации (см. Далее в статье). Для удобства использования и доступности мы включили явную метку для каждого элемента управления формы. Обратите внимание на использование атрибута для во всех элементах , который принимает в качестве своего значения id элемента управления формы, с которым он связан - именно так вы связываете элемент управления формы с его меткой. В этом есть большое преимущество - он связывает метку с элементом управления формы, позволяя пользователям мыши, трекпада и сенсорных устройств щелкать метку для активации соответствующего элемента управления, а также предоставляет доступное имя для чтения с экрана. своим пользователям.Более подробную информацию о метках форм вы найдете в разделе Как структурировать веб-форму. В элементе наиболее важным атрибутом является атрибут типа . Этот атрибут чрезвычайно важен, поскольку он определяет способ появления и поведения элемента . Вы найдете больше об этом в статье Основные элементы управления собственными формами позже. В нашем простом примере мы используем значение для первого ввода - значение по умолчанию для этого атрибута.Он представляет собой простое однострочное текстовое поле, в которое можно вводить любой текст. Для второго ввода мы используем значение , которое определяет однострочное текстовое поле, которое принимает только правильно сформированный адрес электронной почты. Это превращает базовое текстовое поле в своего рода «интеллектуальное» поле, которое будет выполнять некоторые проверки достоверности данных, введенных пользователем. Это также приводит к появлению более подходящей раскладки клавиатуры для ввода адресов электронной почты (например, с символом @ по умолчанию) на устройствах с динамической клавиатурой, таких как смартфоны.Вы узнаете больше о проверке формы позже в статье о проверке формы на стороне клиента. И последнее, но не менее важное: обратите внимание на синтаксис и . Это одна из странностей HTML. Тег является пустым элементом, что означает, что ему не нужен закрывающий тег. </code> не является пустым элементом, это означает, что он должен быть закрыт соответствующим конечным тегом. Это влияет на конкретную особенность форм: способ определения значения по умолчанию.Чтобы определить значение по умолчанию для элемента <code> <input> </code>, вы должны использовать атрибут <code> value </code> следующим образом: </p><pre> <input type = "text" value = "по умолчанию этот элемент заполнен этим текстом"> </pre><p> С другой стороны, если вы хотите определить значение по умолчанию для <code> <textarea> </code>, вы помещаете его между открывающим и закрывающим тегами элемента <code> <textarea> </code>, например: </p><pre> <textarea> по умолчанию этот элемент заполнен этим текстом Элемент Разметка нашей формы почти завершена; нам просто нужно добавить кнопку, позволяющую пользователю отправлять или «отправлять» свои данные после того, как они заполнили форму.Это делается с помощью элемента Элемент

Создание форм в html: Создание HTML форм

Создание форм в html – от простого к сложному понятным языком

Что такое форма и как она функционирует

Отправляем данные на сторону сервера

Способы передачи информации

Создание панели регистрации

Создание формы | htmlbook.ru

улучшенные возможности, новые типы полей и атрибуты

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

1. Элемент <form>

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

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

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

5. Раскрывающийся список

6. Надписи к полям формы

7. Кнопки

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

Создание форм в HTML

Учебник HTML 5. Статья «Формы»

Группировка данных формы

Текстовая метка

Подсказка для полей ввода

Вопросы и задачи по теме

Работа с формами в html, создание основных элементов формы

Создание и работа с формами в html

Элементы формы html

Выпадающий список HTML

Текстовая область в HTML

Другие элементы

Дополнительные элементы и атрибуты

Полное руководство по элементам HTML-формы

Введение

Элемент Form

Атрибуты:

Элемент Input

type

id

name

placeholder

Элемент textarea

Атрибуты:

Элемент button

Атрибуты:

Элемент label

Атрибуты:

Меню select

Атрибуты:

Атрибуты:

Радиокнопки

Атрибуты:

Чекбоксы

Атрибуты:

Отличия чекбоксов от радиокнопок HTML-формы

Конечный результат

HTML-форм

Элемент

Элемент

Текстовые поля

Пример

Элемент

Кнопки радио

Пример

Флажки

Пример

Кнопка отправки

Пример

Атрибут имени для

Пример

Упражнения HTML

HTML-элементов формы

Элементы HTML

Пример

Элемент

Пример

Элементы и

Пример

Элемент

Пример

Элемент

Пример

Элементы
и

`Пример`

`Элемент`