Формы в HTML5

HTML-элементы, позволяющие создавать интерактивные формы

# button

Определяет кнопку на которую можно нажимать.

Пример: Скопировать

<button>
  Отправить форму
</button>

name

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

"submit_button"

Значение имени должно быть уникальным в контексте тега <form>.

Оно может содержать только буквенно-цифровые символы a-z A-Z 0-9 и некоторые специальные символы, такие как - _… но без пробела.

value

Значение, отправляемое на сервер при отправке формы.

"Hello"

Сервер получит значение Hello.

type

Определяет тип кнопки.

"submit"

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

"reset"

Кнопка сбрасывает данные в форме.

disabled

Отключает кнопку.

Значение не нужно.

autofocus

Ставит фокус на этой кнопке когда страница будет загружена.

Значение не нужно.

# fieldset

Определяет группу элементов управления в форме.

Пример: Скопировать

Подпишитесь на рассылку
<form action="/subscribe" method="post">
  <fieldset>
    <legend>Подпишитесь на рассылку</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>

disabled

Отключает элементы управления, содержащиеся в наборе полей.

Значение не нужно.

# form

Определяет интерактивную форму с элементами управления.

Пример: Скопировать








<form action="/signup" method="post">
  <p>
    <label>Заголовок</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>Имя</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Фамилия</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>Email</label><br>
    <input type="email" name="email" required>
  </p>
  <p>
    <label>Телефон</label><br>
    <input type="tel" name="phone">
  </p>
  <p>
    <label>Пароль</label><br>
    <input type="password" name="password">
  </p>
  <p>
    <label>Страна</label><br>
    <select>
      <option>Китай</option>
      <option>Индия</option>
      <option>США</option>
      <option>Индонезия</option>
      <option>Бразилия</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      Я согласен с <a href="/terms">исловиями использования</a>
    </label>
  </p>
  <p>
    <button>Зарегистрироваться</button>
    <button type="reset">Сбросить форму</button>
  </p>
</form>

action

Определяет, на какой URL-адрес отправляется информация формы при отправке.

"/contact"

Вы можете использовать относительный адрес URL.

"https://htmlwiki.ru/contact"

Вы можете использовать абсолютный адрес URL.

method

Определяет метод HTTP, используемый при отправке формы.

"post"

Информация формы отправляется на сервер как часть тела запроса.

"get"

Информация формы отправляется на сервер как часть параметров URL: /contact?first_name=Alex&last_name=Smith.

name

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

"sign_up_form"

Значение имени должно быть уникальным в контексте всей веб-страницы.

Оно может содержать только буквенно-цифровые символы a-z A-Z 0-9 и некоторые специальные символы, такие как - _… но без пробела.

autocomplete

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

"off"

Браузер отключит функции автозаполнения. Однако это можно переопределить для каждого элемента управления отдельно.

"on"

Браузер включит функции автозаполнения. Однако это можно переопределить для каждого элемента управления отдельно.

Попробуйте поставить "on" в этом поле. Оно покажет ранее введенные адреса электронной почты.

target

Определяет в какой вкладке или окне будет открыта ссылка.

"_blank"

Открыть в новой вкладке.

"_self"

Открыть в текущей вкладке.

"_parent"

Открыть в родительском (на уровень выше) контексте браузера, или _self если родительского контекста нет.

"_top"

Открыть в самом верхнем контексте браузера, или _self если такого контекста нет.

enctype

Определяет MIME тип информации отправляемой на сервер. Работает только с методом post.

"application/x-www-form-urlencoded"

Default.

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

"text/plain"

Для обычного текста.

"multipart/form-data"

Нужно при использовании <input type="file"> тега.

novalidate

Сообщает браузеру не проверять форму при отправке.

Значение не нужно.

# input

Определяет интерактивный элемент управления в веб-форме.

Пример: Скопировать

<input type="text" name="first_name" placeholder="e.g. Vasya">

type

Определяет тип ввода формы.

Обязателен.

"text"

Простой однострочный ввод текста, который принимает любой тип символов

"email"

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

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

"number"

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

На мобильных устройствах отображается цифровая клавиатура.

"checkbox"

Флажок-переключатель, который может находиться только в одном из двух состояний: установлен или снят. Значение отправляется формой только в том случае, если флажок установлен.

Вы можете обернуть флажок в метку, чтобы увеличить область клика.

<label>
  <input type="checkbox">
  Я принимаю правила и условия
</label>

Обратите внимание, как щелчок по тексту переключает флажок.

"radio"

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

Вы связываете переключатели через одинаковое значение name:

<label>
  <input type="radio" name="newsletter" value="yes">
  Да
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  Нет
</label>

Обратите внимание, как щелчок по одному отменяет выбор другого.

"submit"

Кнопка Submit, которая срабатывает при нажатии на нее или при нажатии Enter на любом поле.

name

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

Обязателен.

"first_name"

Значение имени должно быть уникальным в контексте контейнера <form>.

Оно может содержать только буквенно-цифровые символы a-z A-Z 0-9 и некоторые специальные символы, такие как - _… но без пробела.

placeholder

Определяет невыбираемый текст-заполнитель (подсказка), который появляется только тогда, когда поле пустое..

"e.g. vasya@gmail.com"

Вы можете подсказать пользователю что нужно вводить в это поле.

Лучшим решением будет использовать тег label чтобы описать поле, а атрибут placeholder использовать чтобы привести пример заполненного поля:

<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. vasya@gmail.com">
</form>

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

required

Сообщает браузеру, что это поле обязательно. Если оставить его пустым, появится предупреждение.

Значение не нужно.

Вам просто нужно добавить атрибут required без значения:

<form>
  <input type="text" required>
</form>

Браузер должен показать предупреждение, если вы попытаетесь отправить форму с пустым полем.

disabled

Отключает поле.

Значение не нужно.

# legend

Определяет заголовок для содержимого родителя.

Пример: Скопировать

Подписаться на рассылку
<form action="/subscribe" method="post">
  <fieldset>
    <legend>Подписаться на рассылку</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>

# textarea

Определяет многострочное текстовое поле в веб-форме.

name

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

Обязателен.

"message"

Значение имени должно быть уникальным в контексте тега <form>.

Оно может содержать только буквенно-цифровые символы a-z A-Z 0-9 и некоторые специальные символы, такие как - _… но без пробела.

autocomplete

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

"off"

Браузер отключит функции автозаполнения..

"on"

Браузер включит функции автозаполнения.

minlength

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

"15"

Вы можете использовать целые числа.

maxlength

Определяет максимально допустимое количество символов.

"140"

Вы можете использовать целые числа.

placeholder

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

"Привет, меня зовут Вася"

Вы можете подсказать пользователю что нужно вводить.

cols

Определяет количество столбцов.

"40"

Вы можете использовать целые числа.

rows

Определяет количество строк.

"5"

Вы можете использовать целые числа.

wrap

Определяет способ переноса текста.

"hard"

Текст всегда будет переноситься в зависимости от значения cols.

"soft"

Текст будет переноситься только при необходимости.

disabled

Отключает текстовое поле.

Значение не нужно.

required

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

Значение не нужно.

autofocus

Устанавливает фокус на текстовую область при загрузке веб-страницы.

Значение не нужно.

readonly

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

Значение не нужно.

spellcheck

Включает проверку орфографии в браузере.

Значение не нужно.