Содержание

Тег | HTML справочник

HTML теги

Значение и применение

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

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

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

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

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

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации.

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

Элемент <form> может содержать один или более следующих элементов формы:

  • <input>
  • <textarea>
  • <button>
  • <datalist>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <legend>
  • <keygen>
  • <meter>
  • <output>
  • <progress>

Поддержка браузерами

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<form>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
acceptfile_typeНе поддерживается в HTML5.
Определяет разделенный запятыми список типов файлов, которые принимает сервер (который может быть представлен через загрузку файлов).
accept-charsetcharacter_setОпределяет кодировку, используемую в представленной форме (значением по умолчанию является зарезервированная строка «unknown»
, которая указывает, что кодировка соответствует кодировке документа, содержащего элемент <form>).
actionURLОпределяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу).
autocompleteon
off		Указывает может ли браузер автоматически заполнять элементы формы (по умолчанию — включен). Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее (если не отключено настройками браузера).
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		Определяет способ кодирования данных формы при их отправке.
Значение по умолчанию application/x-www-form-urlencoded.
methodget
post		Атрибут определяет какой метод HTTP (get или post) используется при передаче формы. Метод get используется по умолчанию.
nametextОпределяет имя формы, которое используется для идентификации (задает имя для формы).
novalidatenovalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится.
target_blank
_self
_parent
_top
framename		При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне.

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

<!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»>).

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

Пример использования HTML форм (элемент <form>).

Отличия HTML 4.01 от HTML 5

В HTML5 добавлены два новых атрибута: autocomplete и novalidate, атрибут accept был удалён.

Значение CSS по умолчанию

form {
display: block;
margin-top: 0;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Формы. Теги форм

Формы есть на всех сайтах, которые предоставляют возможность поиска по сайту или имеют страницу (блок) «Контакты». Создаются формы с помощью тега <form> и ряда тегов <input>, которые имеют разный атрибут type, и в зависимости от него отвечают за разные поля ввода или другие элементы (радиокнопки, флажки).

Рассмотрим, как формируются поля форм и как можно использовать плагин Emmet для ускорения набора кода форм в вашем редакторе кода.

Тег form

Итак, основной тег <form> — является блочным (имеет свойство display: block). Закрывающий тег обязателен. Размещать внутри тега <form> можно любые другие html-теги, которые, как правило, служат для форматирования полей формы и их  заголовков.

Основными атрибутами являются action=»путь к php-файлу» и method=»get|post»:

Emmet abbr: form <form action=»contact.php»></form> Emmet abbr: form:get <form action=»» method=»get»></form> Emmet abbr: form:post <form action=»» method=»post»></form>

1

2

3

4

5

6

7

8

Emmet abbr: form

   <form action=»contact.php»></form>

 

Emmet abbr: form:get

    <form action=»» method=»get»></form>

 

Emmet abbr: form:post

    <form action=»» method=»post»></form>

В атрибуте action должен быть записан абсолютный или относительный путь к файлу, как правило серверного скрипта, например, php или asp, который будет обрабатывать значения полей, отправленных формой.

Метод get или post определяет, каким образом будут отправлены данные. Метод

GET (get) отправляет данные, записывая их в адресной строке браузера. Длина такой строки невелика, поэтому большие сообщения или изображение таким способом отправить не удастся. Метод POST (post) отправляет данные скрытым способом + позволяет передать достаточно весомые данные (сообщение, изображение, zip-архив). Размер передаваемой информации зависит от настроек сервера. Обычно это от 2 до 16 Мб.

Текстовые поля и их разновидности

Вы наверняка сталкивались с заполнением полей с подписью Имя (Логин), Email, Пароль и, возможно загружали что-либо с помощью кнопки «Обзор» в текстовом поле. Все они формируются с помощью тега <input>. Рассмотрим для них аббревиатуры Emmet:

Emmet abbr: input <input type=»text» /> Emmet abbr: inp <input type=»text» name=»» /> Emmet abbr: input:text, input:t ( аналогично inp) <input type=»text» name=»» /> Emmet abbr: input:hidden, input:h (аналог [type=hidden]) <input type=»hidden» name=»» /> Emmet abbr: input:search (аналог inp[type=search]) <input type=»search» name=»» /> Emmet abbr: input:email (аналог inp[type=email]) <input type=»email» name=»» /> Emmet abbr: input:url (аналог inp[type=url]) <input type=»url» name=»» /> Emmet abbr: input:password, input:p (аналог inp[type=password]) <input type=»password» name=»» /> Emmet abbr: input:file, input:f (аналог inp[type=file]) <input type=»file» name=»» />

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

Emmet abbr: input

    <input type=»text» />

 

Emmet abbr: inp

    <input type=»text» name=»» />

 

Emmet abbr: input:text, input:t ( аналогично  inp)

    <input type=»text» name=»» />

 

Emmet abbr: input:hidden, input:h (аналог [type=hidden])

 

    <input type=»hidden» name=»» />

 

Emmet abbr: input:search  (аналог inp[type=search])

    <input type=»search» name=»» />

 

Emmet abbr: input:email (аналог inp[type=email])

    <input type=»email» name=»» />

 

Emmet abbr: input:url (аналог inp[type=url])

    <input type=»url» name=»» />

 

Emmet abbr: input:password, input:p (аналог inp[type=password])

    <input type=»password» name=»» />

 

Emmet abbr: input:file, input:f  (аналог inp[type=file])

    <input type=»file» name=»» />

Среди перечисленных полей большинство относится к спецификации HTML4. HTML5 ввел такие поля, как search, url, email соответственно для полей, предназначенных для поиска информации, ввода адреса сайта или email-a.

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

Желательно еще добавлять в  поле атрибут required, т.е. обязательный, для того чтобы это поле было заполнено пользователем.

Теги кнопок

Кнопки, как правило, завершают любую форму. Добавляются в форму с помощью тега <input>. Они бывают нескольких типов (атрибут type):

  • submit — отправляет форму на сервер. Пожалуй, главная кнопка в форме.
  • reset — очищает поля формы до значений по умолчанию. Сейчас используется все реже и реже.
  • button — обычная кнопка, с которой, как правило, связан код на JavaScript.
  • image — аналог кнопки submit, но с атрибутом src=»путь к файлу изображения», который позволяет указать картинку, которая будет заменять кнопку. Был очень актуален до CSS3, т.к. позволял сделать кнопку-изображение с закругленными краями и градиентом. Сейчас используется редко, т.к. возможности CSS3 уже позволяют сделать очень многое с помощью правил форматирования.

Также вы можете использовать тег <button>, который в обычном виде является аналогом тега <input type=»button»>, но может также иметь свой атрибут type=»submit» | «reset» | «image», соответствующие аналогичным в теге <input>.

Рассмотрим применение Emmet для вставки тегов кнопок:

Аббревиатуры Emmet для кнопок

Emmet abbr: input:submit, input:s <input type=»submit» value=»» /> Emmet abbr: input:reset (аналог input:button[type=reset]) <input type=»reset» value=»» /> Emmet abbr: input:button, input:b <input type=»button» value=»» /> Emmet abbr: input:image, input:i <input type=»image» src=»» alt=»» /> Emmet abbr: button:submit, button:s, btn:s (аналог button[type=submit]) <button type=»submit»></button> Emmet abbr: button:reset, button:r, btn:r (аналог button[type=reset]) <button type=»reset»></button> Emmet abbr: button:disabled, button:d, btn:d (аналог button[disabled. ]) <button disabled=»disabled»></button>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Emmet abbr: input:submit, input:s

    <input type=»submit» value=»» />

 

Emmet abbr: input:reset (аналог input:button[type=reset])

    <input type=»reset» value=»» />

 

Emmet abbr: input:button, input:b

    <input type=»button» value=»» />

 

Emmet abbr: input:image, input:i

    <input type=»image» src=»» alt=»» />

 

Emmet abbr: button:submit, button:s, btn:s (аналог button[type=submit])

    <button type=»submit»></button>

 

Emmet abbr: button:reset, button:r, btn:r (аналог button[type=reset])

    <button type=»reset»></button>

 

Emmet abbr: button:disabled, button:d, btn:d (аналог button[disabled. ])

    <button disabled=»disabled»></button>

Флажки (checkboxes)

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

Русский

Украинский

Белорусский

Английский

Немецкий

Французский

Для оформления флажков часто используются теги label. Поскольку элемент типа checkbox  также является одним из вариантов тега input, то текст, который размещен рядом с флажком, как бы к нему не относится. А тег label позволяет указать принадлежность текста инпуту — для этого в label записывается атрибут for cо значением в виде id соответствующего <input type=»checkbox»>. С одной стороны, тег label при клике на тексте позволяет выделить соответствующий флажок, с другой — label помогают в форматировании внешнего вида текста. Для них часто задают margin, padding, font-family, color и др. css-свойства.

Обратите внимание, как в разметке использованы теги input и label, а также на css-правила для label в тегах <style>:

checkboxes

<style> .form-line { margin-bottom: 10px; } label { display: inline-block; vertical-align: top; margin-left: 10px; } </style> <form name=»langForm»> <div> <input type=»checkbox» name=»lang1″ value=»ru» checked> <label for=»lang1″>Русский</label> </div> <div> <input type=»checkbox» name=»lang2″ value=»ua» checked> <label for=»lang2″>Украинский</label> </div> <div> <input type=»checkbox» name=»lang3″ value=»by»> <label for=»lang3″>Белорусский</label> </div> <div> <input type=»checkbox» name=»lang4″ value=»en»> <label for=»lang4″>Английский</label> </div> <div> <input type=»checkbox» name=»lang5″ value=»gr»> <label for=»lang5″>Немецкий</label> </div> <div> <input type=»checkbox» name=»lang6″ value=»fr»> <label for=»lang6″>Французский</label> </div> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<style>

    . form-line {

        margin-bottom: 10px;

    }

    label {

        display: inline-block;

        vertical-align: top;

        margin-left: 10px;

    }

</style>

<form name=»langForm»>

<div>

    <input type=»checkbox» name=»lang1″ value=»ru» checked>

    <label for=»lang1″>Русский</label>

</div>

<div>

    <input type=»checkbox» name=»lang2″ value=»ua» checked>

    <label for=»lang2″>Украинский</label>

</div>

<div>

 

    <input type=»checkbox» name=»lang3″ value=»by»>

    <label for=»lang3″>Белорусский</label>

</div>

<div>

    <input type=»checkbox» name=»lang4″ value=»en»>

    <label for=»lang4″>Английский</label>

</div>

<div>

    <input type=»checkbox» name=»lang5″ value=»gr»>

    <label for=»lang5″>Немецкий</label>

</div>

<div>

    <input type=»checkbox» name=»lang6″ value=»fr»>

    <label for=»lang6″>Французский</label>

</div>

</form>

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

<input type=»checkbox» name=»lang1″ value=»ru» checked> <label for=»lang1″>Русский</label>

<input type=»checkbox» name=»lang1″ value=»ru» checked>

<label for=»lang1″>Русский</label>

Emmet аббревиатуры для checkbox и label:
Emmet для checkbox

input:checkbox, input:c <input type=»checkbox» name=»|»> label <label for=»|»></label>

input:checkbox, input:c

<input type=»checkbox» name=»|»>

 

label

<label for=»|»></label>

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

Переключатели или радио-кнопки (radio)

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

Работаю постоянно

Работа временная или сезонная

Не работаю

Сижу дома с ребенком

Учусь

Отличие переключателей от флажков заключается не только во внешнем виде.

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

Группа переключателей radio

<form name=»jobForm»> <div> <input type=»radio» name=»job»> <label for=»job1″>Работаю постоянно</label> </div> <div> <input type=»radio» name=»job»> <label for=»job2″>Работа временная или сезонная</label> </div> <div> <input type=»radio» name=»job»> <label for=»job3″>Не работаю</label> </div> <div> <input type=»radio» name=»job»> <label for=»job4″>Сижу дома с ребенком</label> </div> <div> <input type=»radio» name=»job»> <label for=»job5″>Учусь</label> </div> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<form name=»jobForm»>

    <div>

        <input type=»radio» name=»job»>

        <label for=»job1″>Работаю постоянно</label>

    </div>

    <div>

        <input type=»radio» name=»job»>

        <label for=»job2″>Работа временная или сезонная</label>

    </div>

    <div>

        <input type=»radio» name=»job»>

        <label for=»job3″>Не работаю</label>

    </div>

    <div>

        <input type=»radio» name=»job»>

        <label for=»job4″>Сижу дома с ребенком</label>

    </div>

    <div>

        <input type=»radio» name=»job»>

        <label for=»job5″>Учусь</label>

    </div>

</form>

Обратите внимание, что у всех <input type=»radio»> атрибут name=»job», а вот id разные, т. к. они связаны с тегом label.

Emmet аббревиатуры для radio:
Emmet для radio

input:radio, input:r, inp[type=radio] <input type=»radio» name=»|»>

input:radio, input:r, inp[type=radio]

 

<input type=»radio» name=»|»>

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

form[name=»jobForm»]>.form-line*5>input:r[name=job][id=»job$»]+label[for=»job$»]

form[name=»jobForm»]>.form-line*5>input:r[name=job][id=»job$»]+label[for=»job$»]

Скопируйте аббревиатуру и нажмите клавишу Tab в самом конце (без пробела), чтобы ее раскрыть.

Пример оформления радио-кнопок с анимацией при переключении:

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen. 18892

 

Просмотров: 856

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

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

Тег HTML

используется для создания формы.

Тег

Форма по сути является контейнером для ввода.

Следующий код показывает базовую структуру формы:

<форма>

Здесь находятся элементы ввода

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

  • Атрибут действия указывает на серверную часть нашей веб-страницы, которая обрабатывает отправку формы
  • Атрибут метода используется для загрузки данных. Наиболее часто используемые атрибуты — это методы GET и POST
    • .

Примечание. Форма не будет работать, пока не будет создана серверная часть.

Элемент

HTML является основным элементом формы. Он может отображаться разными способами, в зависимости от его атрибутов.

Существует несколько типов входов. Вот некоторые из важных: 

Тип ввода Текст

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

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

Тип ввода Пароль

определяет поле пароля.

Это даст следующий результат:

Тип ввода Отправить

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

Это приведет к следующему результату.

Тип входа Радио

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

Это даст следующий результат:

Флажок типа ввода

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

Это даст следующий результат:

Элемент