Формы в HTML5
HTML-элементы, позволяющие создавать интерактивные формы
# 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"
Значение по умолчанию.
"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
Включает проверку орфографии в браузере.
Значение не нужно.