Введение §

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

• action задаёт URL, адрес для отправки формы;
• method задаёт метод отправки формы.

Пример:

<form action="https://echo.htmlacademy.ru/courses" method="get">  поля формы  
</form

Для отправки формы обычно используют методы #get или #post. Если не указать атрбибут method, то будет использован get.

Метод #get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса.

Метод #post посылает данные в теле#HTTP-запрос и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна.

Текстовое поле ввода §

Большинство полей форм создаётся с помощью одиночного тега #input. У этого тега два обязательных атрибута:

• type задаёт тип поля;
• name задаёт имя поля.

От типа поля зависит то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Данный тип используется по умолчанию.

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

Идентификатор и значение по умолчанию §

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

Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. При нажатии на такие подписи активируется связанное поле. Также идентификаторы используют в JavaScript для работы с полями.

Идентификатор не передаётся на сервер. Лучше использовать идентификаторы, отличающиеся от имени поля.

Атрибут value задаёт значение поля ввода по умолчанию.

Подпись для поля ввода §

Парный тег #label создаёт подпись к полю формы.

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

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег label, вот так:

<label>  
  Подпись input type="text" name="username"  
</label

При оборачивании текста в тег label он визуально никак не меняется.

Связь подписи и поля по id §

Можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

1. Добавляем к полю ввода идентификатор с помощью атрибута id;
2. Оборачиваем текст подписи в тег label;
3. Добавляем тегу label атрибут for;
4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for="user-field-id">Имя пользователя</label>  
...  
много-много других тегов  
...  
<input id="user-field-id" type="text" name="username"/>

Поле ввода пароля §

Чтобы сделать поле для ввода пароля, в котором текст будет отображаться «звёздочками», нужно изменить значение атрибута type на password.

Кнопка отправки формы §

Кнопка для отправки формы создаётся с помощью тега #input c типом submit.

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

Многострочное поле ввода §

Многострочное текстовое поле создаётся с помощью парного тега #textarea. У него есть атрибуты name и id, аналогичные атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует. Текст, расположенный между открывающим и закрывающим тегом textarea является значением по умолчанию.

Валидация формы §

Валидация форм – предупреждение и проверка некорректного ввода:

1. #required (обязательный ввод)
2. min и max значение, которое может использоваться полузнков, выбора цифр и т.д
3. pattern (шаблон, которому должны соответствовать вводимые данные)

PLACEHOLDER §

Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an input element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the input with its hint.

With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use aria-describedby to read the hint after the input’s label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

HTML: §

<label for="first-name">Your phone number:/ <label/>
<br>
<input type="tel"
       name="phone"
       minLength="9" maxLength="9"
       placeholder="It must be 9 digits"/>

CSS §

input {
    margin-top: 0.5rem;
}
 
input::placeholder {
    font-weight: bold;
    opacity: .5;
    color: red;
}