Перейти к основному содержимому

Формы

Контейнер формы​

<form action="https://some-url.ru" method="post | get" autocomplete>
  <!-- Набор полей 1 -->
  <fieldset>
    <!-- Название для набора полей -->
    <legend><label for="field-1">Группа полей 1</label></legend>

    <!-- Контейнер поля-1 -->
    <div class="form-group">
      <!-- лейбл -->
      <label for="field-1">Field-1 title</label>

      <!-- само поле -->
      <input
        id="field-1"
        type="text"
        name="field-1"
        placeholder="Something1"
        tabindex="1"
        required
      />
    </div>

    <!-- Контейнер поля-2 -->
    <div class="form-group">
      <label for="field-2">Field-2 title</label>
      <input
        id="field-2"
        type="text"
        name="field-2"
        placeholder="Something2"
        tabindex="2"
      />
    </div>
  </fieldset>

  <!-- Набор полей 2 -->
  <fieldset>
    <legend><label for="field-2">Группа полей 2</label></legend>
    ...
  </fieldset>

  <!-- Набор полей 3 -->
  <fieldset>
    <legend><label for="field-3">Группа полей 3</label></legend>
    ...
  </fieldset>

  <!-- Кнопки действий формы -->
  <button type="reset">Сбросить</button>
  <button type="submit">Отправить</button>
</form>
 
 

Текстовые поля​

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

<input type="text" patern="[А-Яа-яЁё]" /> - Простое текстовое поле
<input type="number" /> - Цифровое поле <input type="password" /> - Поле пароля
<input type="email" /> - Поле email <input type="url" /> - Поле url
<input
  type="tel"
  placeholder="+7-XXX-XXX-XXXX"
  patern="+7-[0-9]{3}-[0-9]{3}-[0-9]{4}"
/>
- Поле телефона <input type="search" /> - Поле поиска <input type="color" /> -
Цвет <input type="file" /> - Загрузить файл в браузер
<textarea rows="10" cols="45"></textarea> - Текстовое поле
         

Списки​

select​

<label for="year-id">Год рождения:</label>

<select name="year" id="year-id" value="1981">
  <!-- optgroup - Группировка опшинов -->
  <optgroup label="80-е">
    <option value="1981">1981 год</option>
    <!-- default checked equal to select value -->
    <option value="1982">1982 год</option>
    <option value="1983">1983 год</option>
  </optgroup>
  <optgroup label="90-е">
    <option value="1991">1991 год</option>
    <option value="1992">1992 год</option>
    <option value="1993">1993 год</option>
  </optgroup>
</select>
 

datalist​

Как select, только можно вводить значения которых нет в option. Селект с поиском.

<label for="education-input">Ваше образование</label>&nbsp;
<input type="text" list="education" name="education" id="education-input" />

<!-- Связь через id -->
<datalist id="education">
  <option value="Среднее неполное"></option>
  <option value="Среднее"></option>
  <option value="Средне-специальное"></option>
  <option value="Высшее неполное"></option>
  <option value="Высшее(бакалавр)"></option>
  <option value="Высшее" selected="selected"></option>
  <option value="Высшее(магистр)"></option>
</datalist>
 

Checkbox и radio​

<!-- Checkbox -->
<input type="checkbox" name="moscow" id="moscow-id" value="1" />
<label for="moscow-id">Я являюсь гражданином РФ</label>

<!-- Radio -->
<h3>Ваш возраст:</h3>
<label>
  <input type="radio" name="age" value="0-17" />
  <span>0-17</span>
</label>
<label>
  <input type="radio" name="age" value="18-35" />
  <span>18-35</span>
</label>
<label>
  <input type="radio" name="age" value="35-60" />
  <span>35-60</span>
</label>
<label>
  <input type="radio" name="age" value="over60" disabled />
  <span>более 60 (disabled)</span>
</label>
 

Ваш возраст:

   

Дата и время​

<input type="date" min="1980-01-01" max="2145-01-08" value="2022-01-01" /> -
Полная дата <input type="month" /> - Выбор месяца <input type="week" /> - Выбор
недели
   

Кнопки​

<!-- Можно использовать button -->
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>

<!-- Преимущество, что button может иметь вложенный контент -->
<button type="submit">
  <img src="../pict/phone.png" width="35" alt="button-img" />
</button>

<!-- Можно использовать input с type -->
<input type="submit" value="Отправить" />
<input type="reset" value="Сбросить" />

<!-- image работает как submit, только еще отправляет доп. поля (x и y), координаты клика по картинке -->
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

button​

input​

Range, <meter> и <progress>​

range, <meter> и <progress> похожие по смыслу тэги. Показывают шкалу с индикацией.

Используется для отображения прогресса завершённости задачи. Изменение значения происходит через JavaScript.

range - интерактивный ползунок, можно задавать значение.

<meter> - используется для вывода значения в некотором известном диапазоне. Применяется преимущественно для отображения числовых значений (например, количества результатов поиска, объёма жидкости, давления и др).

<progress> - показывает прогресс состояния (например, загрузка фото).

<h3>Range</h3>
<input id="range_id" type="range" value="10" step="0.1" />

<!-- Вывод значений (через JS) -->
<output name="result" for="range_id">0</output>

<h3>Температура воды</h3>
<meter value="0" max="100" low="10" high="60">Низкая</meter>
<meter value="30" max="100" low="10" high="60">Нормальная</meter>
<meter value="80" max="100" low="10" high="60">Горячая</meter>
<meter value="100" max="100">Кипяток</meter>

<h3>Загрузка фото</h3>
<progress max="100" value="25">
  Загружено на <span id="value">25</span>%
</progress>

Range


Температура воды

Низкая Нормальная Горячая Кипяток 

Загрузка фото

Загружено на 25%

JS-атрибуты​

  • onclick - клик
  • onsubmit - отправка формы
  • oninput - ввод значения

Pattern​

Для нативной валидации полей.

pattern