Теги html. 3 Формы

13 May 2023, by Goodman. Last update at 13 May 2023

3. Формы

Типы ввода данных

EMAIL

email - проверет валидность email.

Пример:

<form>
  <input type=email>
</form>

URL

url - проверка на правельность ввода адреса (url).

Пример:

<form>
  <input type=url>
</form>

DATE

date - валидность вводимой даты.

Пример:

<form>
<input type=date>
</form>

TIME

time - валидность вводимого времени.

Пример:

<form>
  <input type=time>
</form>

DATETIME

datetime - валидность вводимого времени и даты.

Пример:

<form>
  <input type=datetime>
</form>

MONTH

month - валидность вводимого месяца. В зафисимости от локации может изменять название месяцев.

Пример:

<form>
  <input type=month>
</form>

WEEK

week - валидность номера недели .

Пример:

<form>
<input type=week>
</form>

***

#### NUMBER

**number** - валидность на числовые символы.

*Пример*:

```html
<form>
  <input type=number>
</form>

RANGE

range - отображается в виде ползунка.

Пример:

<form>
  <input type=range min="10" max="100">
</form>

SEARCH

search - используется для поискового окна.

Пример:

<form>
  <input type=search>
</form>

TEL

tel - используется для телефонных номеров.

Пример:

<form>
  <input type=tel>
</form>

COLOR

color - позволяет ввести значение цвета.

Пример:

<form>
  <input type=color>
</form>

LIST

list - позволяет использовать новый метод данных.

Пример:

<input type=text list=test>
    <datalist id=test>
        <option label=X value=X>
        <option label=Z value=Z>
    </datalist>

AUTOFOCUS

autofocus - фокусировка на определенном элементе. Используется один на страницу.

Пример:

<form>
  <input type=text autofocus>
</form>

PLACEHOLDER

placeholder - Подсказка в форме. Исчезает при установке фокаса на поле.

Пример:

<form>
  <input type=text placeholder="Any text">
</form>

TITLE

title - Подсказка при наведении мыши на поле.

Пример:

<form>
  <input type=text title="Accept">
</form>

REQUIRED

required - проверяет что поле не должно быть пустым.

Пример:

<form>
  <input type=email required>
</form>

MULTIPLE

multiple - означает что может быть несколько элементов.

Пример:

<form>
  <input type=file multiple>
</form>

PATTERN

pattern - позволяет создавать шаблоны для проверки вводимых данных.

Пример:

<form>
  <input type=text pattern="[0-9][A-Z]{2}" placeholder="9WW">
</form>

AUTOCOMPLETE

autocomplete - регулирует афтозаполнение для форм.

Пример:

<form>
  <input type="email" name="email" autocomplete="off">
</form>

MIN и MAX

min и max - задает диапазон вводимых данных.

Пример:

<form>
  <input type=date min="2016-06-12" max="2016-06-20">
</form>

STEP

step - шаг вводимых данных.

Пример:

<form>
  <input type=number min="0" max="10" step="2">
</form>