HTML-формы

Узнайте, как использовать формы в HTML и все теги элементов формы

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

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

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

Форма создается с использованиемformтег:

<form>
	...
</form>

По умолчанию формы отправляются с использованием метода GET HTTP. У этого есть свои недостатки, и обычно вы хотите использовать POST.

Вы можете настроить форму для использования POST при отправке с помощьюmethodатрибут:

<form method="POST">
	...
</form>

Форма отправляется с помощью GET или POST на тот же URL-адрес, где она находится.

Итак, если форма находится вhttps://flaviocopes.com/contactsстраницы, нажатие кнопки «отправить» отправит запрос на тот же URL.

В результате может ничего не произойти.

Вам нужно что-то на стороне сервера для обработки запроса, и обычно вы «слушаете» эти события отправки формы по выделенному URL-адресу.

Вы можете указать URL-адрес черезactionпараметр:

<form action="/new-contact" method="POST">
	...
</form>

Это приведет к тому, что браузер отправит данные формы с помощью POST в/new-contactURL того же происхождения.

Если источник (протокол + домен + порт) -https://flaviocopes.com(порт 80 по умолчанию), это означает, что данные формы будут отправлены наhttps://flaviocopes.com/new-contact.

Я говорил о данных. Какие данные?

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

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

Давайте познакомимся с каждым из них в следующем обзоре полей формы.

Вinputтег

Вinputfield - один из наиболее широко используемых элементов формы. Это также очень универсальный элемент, который может полностью изменить поведение в зависимости отtypeатрибут.

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

<input />

Эквивалентно использованию:

<input type="text" />

Как и в случае со всеми другими полями, которые следуют ниже, вам необходимо дать этому полю имя, чтобы его содержимое отправлялось на сервер при отправке формы:

<input type="text" name="username" />

ВplaceholderАтрибут используется для отображения текста светло-серым цветом, когда поле пусто. Полезно для подсказки пользователю, что набирать:

<input type="text" name="username" placeholder="Your username" />

Электронное письмо

С помощьюtype="email"будет проверять на стороне клиента (в браузере) электронное письмо на правильность (семантическую правильность, не гарантируя, что адрес электронной почты существует) перед отправкой.

<input type="email" name="email" placeholder="Your email" />

Пароль

С помощьюtype="password"заставит каждый введенный ключ отображаться как звездочка (*) или точка, что полезно для полей, содержащих пароль.

<input type="password" name="password" placeholder="Your password" />

Числа

Вы можете сделать так, чтобы элемент ввода принимал только числа:

<input type="number" name="age" placeholder="Your age" />

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

<input type="number" name="age" placeholder="Your age" min="18" max="110" />

Вstepатрибут помогает идентифицировать шаги между разными значениями. Например, принимает значение от 10 до 50 с шагом 5:

<input type="number" name="a-number"  min="10" max="50" step="5" />

Скрытое поле

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

<input type="hidden" name="some-hidden-field" value="some-value" />

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

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

Установка значения по умолчанию

Все эти поля принимают предопределенное значение. Если пользователь не изменит его, это будет значение, отправленное на сервер:

<input type="number" name="age" value="18" />

Если вы установите заполнитель, это значение появится, если пользователь очистит значение поля ввода:

<input type="number" name="age" placeholder="Your age" value="18" />

Отправить форму

Вtype="submit"Поле - это кнопка, которая после нажатия пользователем отправляет форму:

<input type="submit">

Вvalueатрибут устанавливает текст на кнопке, который, если он отсутствует, показывает текст «Отправить»:

<input type="submit" value="Click me">

Проверка формы

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

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

Посмотрим оба варианта.

Задайте поля по мере необходимости

Вrequiredатрибут поможет вам с проверкой. Если поле не задано, проверка на стороне клиента завершится неудачно, и браузер не отправит форму:

<input type="text" name="username" required />

Обеспечить соблюдение определенного формата

Я описалtype="email"поле выше. Он автоматически проверяет адрес электронной почты в соответствии с форматом, установленным в спецификации.

вtype="number"поле я упомянулminиmaxатрибут для ограничения значений, введенных в интервал.

Вы можете сделать больше.

Вы можете применить определенный формат к любому полю.

ВpatternАтрибут дает вам возможность установить регулярное выражение для проверки значения.

Я рекомендую прочитать свое Руководство по регулярным выражениям наflaviocopes.com/javascript-regular-expressions/.

pattern = «https: //.*»

<input type="text" name="username" pattern="[a-zA-Z]{8}" />

Прочие поля

Загрузка файлов

Вы можете загружать файлы с локального компьютера и отправлять их на сервер, используяtype="file"элемент ввода:

<input type="file" name="secret-documents">

Вы можете прикрепить несколько файлов:

<input type="file" name="secret-documents" multiple>

Вы можете указать один или несколько разрешенных типов файлов, используяacceptатрибут. Это принимает изображения:

<input type="file" name="secret-documents" accept="image/*">

Вы можете использовать определенный тип MIME, напримерapplication/jsonили установите расширение файла, например.pdf. Или установите несколько расширений файлов, например:

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">

Кнопки

Вtype="button"поля ввода могут использоваться для добавления в форму дополнительных кнопок, которые не являются кнопками отправки:

<input type="button" value="Click me">

Они используются для программных действий с использованием JavaScript.

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

<input type="reset">

Радио-кнопки

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

Название происходит от старых автомобильных радиоприемников с таким интерфейсом.

Вы определяете наборtype="radio"входы, все с одинаковымиnameатрибут и разныеvalueатрибут:

<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">

После отправки формыcolorсвойство data будет иметь одно единственное значение.

Всегда проверяется один элемент. По умолчанию отмечен первый пункт.

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

Флажки

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

Вы определяете наборtype="checkbox"входы, все с одинаковымиnameатрибут и разныеvalueатрибут:

<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">

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

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

Дата и время

У нас есть несколько типов ввода для приема значений даты.

Вtype="date"поле ввода позволяет пользователю ввести дату и при необходимости показывает средство выбора даты:

<input type="date" name="birthday">

Вtype="time"поле ввода позволяет пользователю ввести время и, при необходимости, показывает окно выбора времени:

<input type="time" name="time-to-pickup">

Вtype="month"поле ввода позволяет пользователю ввести месяц и год:

<input type="month" name="choose-release-month">

Вtype="week"поле ввода позволяет пользователю ввести неделю и год:

<input type="week" name="choose-week">

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

Вtype="datetime-local"поле позволяет выбрать дату и время.

<input type="datetime-local" name="date-and-time">

Вот страница для их всех:https://codepen.io/flaviocopes/pen/ZdWQPm

Палитра цветов

Вы можете позволить пользователям выбирать цвет, используяtype="color"элемент:

<input type="color" name="car-color">

Вы устанавливаете значение по умолчанию, используяvalueатрибут:

<input type="color" name="car-color" value="#000000">

Браузер позаботится о том, чтобы показать пользователю палитру цветов.

Классифицировать

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

<input type="range" name="age" min="0" max="100" value="30">

Вы можете указать необязательный шаг:

<input type="range" name="age" min="0" max="100" value="30" step="10">

телефон

Вtype="tel"поле ввода используется для ввода номера телефона:

<input type="tel" name="telephone-number">

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

Укажитеpatternатрибут для дополнительной проверки:

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">

URL

Вtype="url"поле используется для ввода URL.

<input type="url" name="website">

Вы можете проверить это, используяpatternатрибут:

<input type="url" name="website"  pattern="https://.*">

Вtextareaтег

ВtextareaЭлемент позволяет пользователям вводить многострочный текст. В сравнении сinput, требуется конечный тег:

<textarea></textarea>

Вы можете установить размеры с помощью CSS, но также с помощьюrowsиcolsатрибуты:

<textarea rows="20" cols="10"></textarea>

Как и в случае с другими тегами формы,nameатрибут определяет имя в данных, отправляемых на сервер:

<textarea name="article"></textarea>

Вselectтег

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

Пользователь может выбрать один из доступных вариантов.

Каждый вариант создается с помощьюoptionтег. Вы добавляете имя для выбора и значение для каждой опции:

<select name="color">
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>

Вы можете отключить опцию:

<select name="color">
	<option value="red" disabled>Red</option>
	<option value="yellow">Yellow</option>
</select>

У вас может быть один пустой вариант:

<select name="color">
	<option value="">None</option>
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>

Параметры можно сгруппировать с помощьюoptgroupтег. Каждая группа опций имеетlabelатрибут:

<select name="color">
	<optgroup label="Primary">
		<option value="red">Red</option>
		<option value="yellow">Yellow</option>
		<option value="blue">Blue</option>
	</optgroup>
	<optgroup label="Others">
		<option value="green">Green</option>
		<option value="pink">Pink</option>
	</optgroup>
</select>

Скачать мою бесплатнуюСправочник по HTML


Дополнительные руководства по HTML:


Tech Wiki Online!