Тег form

Last updated 4 months ago

Тег form

Что это такое?

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

Где они используются?

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

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

Как их использовать в коде?

Ну и самая интересная часть: как их использовать в коде?

Добавить форму в HTML код при помощи тега <form>.
Он является блочным элементом. Закрывающий тег обязателен. Форма будет содержать данные только из тех полей ввода, которая находятся внутри тега <form> (то есть между открывающим и закрывающим тегами).
- action - содержит адрес, на который будут отправлены все данные внутри формы
- method - GET или POST (пока что с методами разбираться не нужно)
Добавить поля ввода и прочие вспомогательные элементы внутрь тега <form>.
Добавить кнопку для выполнения действия (отправки формы, когда все данные были заполнены).
Кнопки можно дабавить двумя способами:
<input type="button" value="Button">
<button>Button</button>
Button
В зависимости от назначения кнопки бывают разных типов. Ниже самые основные:
- Submit - предназанчена для отправки данных на сервер, при ее нажатии происходит перезагрузка страницы
<input type="submit">
- Reset - предназначена для очистки введенной в полях формы информации. Если в поле ввода ниже ввести какой-то текст, при нажатии кнопки Reset он будет удален. Все остальные поля в форме также будут очищены.
<input type="reset">

Поля ввода внутри формы

Существует несколько основных типов полей ввода. Ниже представлены самые часто используемые из них.

Поле для ввода текста.
Чтобы создать такое поле, используется тег <input> с атрибутом type="text". Атрибут type указывает какого вида информацию можно будет ввести в данное поле. Другие часто используемые значения атрибута type при создании поля для ввод текста включают password (поле для ввода пароля - введенный текст будет автоматом зашифрован), tel (телефон), number (число, в такое поле нельзя будет ввести текст), email (адрес электроной почты).
Ниже приведен пример создания формы с разными полями для ввода текста:
```
<form action="">
  <label><input type="text">Текст</label>
  <label><input type="password">Пароль</label>
  <label><input type="tel">Телефон</label>
  <label><input type="number">Число</label>
  <label><input type="email">email</label>
</form>
```
И вот как это будет выглядеть в браузере:
ТекстПарольТелефонЧислоemail
Примечание
Обратите внимание, что при использовании тега "input" закрывающий тег не ставится.
Поле для ввода многострочного текста.
По сути это то же самое, что и поле для ввода обычного текста, но в данном поле можно ввести несколько строк (нажав клавишу Enter при ввыоде текста). Для создания используется тег <textarea>. Закрывающий тег обязателен.
```
<form action="">
  <textarea></textarea>
</form>
```
Вот как будет выглядеть такое поле в браузере:
Флажок.
Создать один или несколько флажков можно с помощью того же тега input с атрибутом типа checkbox - <input type="checkbox">. Ниже представлен небольшой пример создания нескольких флажков. При создании нескольких флажков пользователь может отметить все из них.
```
<form action="">
  <label><input type="checkbox">У меня есть машина</label>
  <label><input type="checkbox">У меня есть мотоцикл</label>
  <label><input type="checkbox">У меня есть велосипед</label>
</form>
```
У меня есть машина У меня есть мотоцикл У меня есть велосипед
Примечание
Обратите внимание, что тег "input" находится внутри тега "label". "label" - это вспомогательный тег, который позволяет добавить какой-то текст рядом с полем ввода. При использовании "label" вместе с "input" типа "checkbox", галочка будет отмечаться не только при нажатии на сам флаг, но и при нажатии на текст рядом с ним.
Переключатели.
Переключатели похожи на кнопки флажки за одним исключением - в группе переключателей пользователь может выбрать только какое-то одно значение. Создаются переключатели с помощью <input type="radio">.
```
<form action="">
  <label><input name="age" type="radio">До 18 лет</label>
  <label><input name="age" type="radio">18-25 лет</label>
  <label><input name="age" type="radio">26-35 лет</label>
  <label><input name="age" type="radio">Более 35 лет</label>
</form>
```
Выберите ваш возраст: До 18 лет 18-25 лет 26-35 лет Более 35 лет
В данном случае атрибут name у переключателя позволяет объединить несколько из них в одну группу. Если пользователь выбирает какой-то переключатель, все остальные переключатели с таким же атрибутом name будут автоматически выключены.
Выпадающее меню.
Выпадающее меню позволяет выбарть одну из опций в выпадающем списке. Создать выпадающее меню можно с помощью тега <select>. Внутри данного тега могут быть размещены несколько тегов <option> - каждый из них будет являться одним из элементов выпадающего списка.
```
<form action="">
  <select>
    <option>Январь</option>
    <option>Февраль</option>
    <option>Март</option>
    <option>Апрель</option>
    <option>Май</option>
    <option>Июнь</option>
    <option>Июль</option>
    <option>Август</option>
    <option>Сентябрь</option>
    <option>Октябрь</option>
    <option>Ноябрь</option>
    <option>Декабрь</option>
  </select>
<form action="">
```
Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь
Поле для загрузки файла.
Такое поле создается с помощью <input type="file">. Браузер автоматом создаст кнопку, по нажатию на которую откроется проводник, где можно будет выбрать, какой файл вы хотите загрузить.
```
<form action="">
  <input type="file">
</form>>
```

Как правильно организовать элементы внутри формы?

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

<label> - содержит подписи для формы, включает в себя текст, описывающий поля к которым он относится.

<label>
  <input type="radio" name="day" value="Friday" checked> Пятница
</label>
<label>
  <input type="radio" name="day" value="Saturday"> Суббота
</label>
<label>
  <input type="radio" name="day" value="Sunday"> Воскресенье
</label>

Пятница Суббота Воскресенье

<fieldset> - подобно тегу <section> группирует поля формы в отдельные разделы, является блочным элементом.

<fieldset>
  <label>
    Имя пользователя
    <input type="text" name="username">
  </label>
  <label>
    Пароль
    <input type="text" name="password">
  </label>
</fieldset>

Имя пользователя Пароль

<legend> - работает исключительно в паре с <fieldset>. Является его заголовком.

<fieldset>
  <legend>Вход в систему</legend>
  <label>
    Имя пользователя
    <input type="text" name="username">
  </label>
  <label>
    Пароль
    <input type="text" name="password">
  </label>
</fieldset>

Вход в системуИмя пользователя Пароль

Как задать стили формам?

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

В ссылках ниже вы найдете примеры стилизации форм:

PreviousСеммантика в HTML5 NextGIT