MarkusFx (itPit)

Темная тема

Элементы форм ​

input ​

  • <input> - поле ввода;
    • type - тип вводимых данных;
      • text - текстовое поле;
      • email - поле для ввода email;
      • password - текстовое поле, но отображаются "звёздочки";
      • checkbox - флажок;
      • radio - радиокнопка (переключатель);
      • file - поле для выбора отправляемого файла;
        • multiple - выбор нескольких файлов;
        • accept - типы файлов доступных для выбора;
      • submit - кнопка отправки формы;
      • number - поле ввода числа;
        • min - минимальное значение;
        • max - максимальное значение;
        • step - шаг увеличения/уменьшения значения;
      • date - поле ввода даты;
      • time - поле ввода времени;
      • image - кнопка в виде изображения;
      • range - ползунок;
        • min - минимальное значение;
        • max - максимальное значение;
        • step - шаг увеличения/уменьшения значения;
      • color - поле выбора цвета;
    • name - имя поля (под этим именем оно будет отправлено на сервер);
    • value - значение поля;
    • maxlength - максимальное кол-во символов в поле;
    • placeholder - подсказка внутри поля;
    • readonly - поле доступно только для чтения;
    • required - поле обязательно для заполнения;
    • size - ширина поля;
    • disabled - блокировка поля (нельзя выбрать, ввести, отправить данные);

Например:

index.html
html
<!doctype html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <title>Моя первая страница</title>
    </head>
    <body>
        <p>text: <input type="text" value="test" /></p>
        <p>email: <input type="email" value="mail@mail.ru" /></p>
        <p>password: <input type="password" value="test" /></p>
        <p>file: <input type="file" /></p>
        <p>submit: <input type="submit" /></p>
        <p>number: <input type="number" value="300.33" /></p>
        <p>date: <input type="date" /></p>
        <p>checkbox_1: <input type="checkbox" checked /></p>
        <p>checkbox_2: <input type="checkbox" /></p>
        <p>radio_1: <input type="radio" name="myRadio" checked /></p>
        <p>radio_2: <input type="radio" name="myRadio" /></p>
    </body>
</html>

textarea ​

  • <textarea> - многострочное текстовое поле;
    • rows - кол-во строк;
    • cols - кол-во столбцов;

Например:

index.html
html
<textarea name="message" rows="6" cols="50">Текст...</textarea>

select ​

  • <select> - выпадающий список;
    • multiple - список с множественным выбором;
  • <option> - элементы списка;
    • value - значение;
    • selected - выбранный элемент по умолчанию;
    • disabled - запрет выбора определенного значения;
  • <optgroup> - группировка;

Например:

index.html
html
<p>
    <select>
        <option value="cat">Кот</option>
        <option value="dog" selected>Собака</option>
        <option value="fish" disabled>Рыба</option>
    </select>
</p>

<p>
    <label for="totem">Выбери тотемное животное (удерживаем Ctrl/Cmd): </label
    ><br />
    <select id="totem" multiple>
        <option value="cat">Кот</option>
        <option value="dog">Собака</option>
        <option value="fish">Рыба</option>
    </select>
</p>

<p>
    <select>
        <optgroup label="Смартфоны">
            <option value="iphone">iPhone</option>
            <option value="samsung">Samsung</option>
            <option value="LG">LG</option>
        </optgroup>
        <optgroup label="Игровые приставки">
            <option value="ps">PS</option>
            <option value="xbox">XBOX</option>
        </optgroup>
    </select>
</p>

label ​

  • <label> - подпись к полю;
    • for - указывает к какому полю относится подпись (совпадает с id тега <input>);

Например:

index.html
html
<label for="name">Имя:</label> <input type="text" id="name" name="name" />

Если в <input> добавить атрибут autofocus, то при нажатии на <label> будет происходить автофокус на полее ввода <input>.

button ​

  • <button> - кнопка;
    • type - тип кнопки;
      • submit - отправка формы;
      • reset - очистка (сброс) формы;
      • button - кнопка без действия;

Например:

index.html
html
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>
<button type="button">Кнопка без действия</button>

fieldset ​

  • <fieldset> - группировка полей;
    • <legend> - заголовок группы;

Например:

index.html
html
<fieldset>
    <legend>Личные данные</legend>
    <p>Имя: <input type="text" name="firstname" /></p>
    <p>Фамилия: <input type="text" name="lastname" /></p>
</fieldset>

datalist ​

  • <input> - поле ввода;
    • list - указатель на подсказки;
  • <datalist> - подсказки при вводе;

Например:

index.html
html
<input list="browsers" name="browser" />
<datalist id="browsers">
    <option value="Chrome"></option>
    <option value="Firefox"></option>
    <option value="Edge"></option>
</datalist>

output ​

  • <output> - вывод результата (обычно с JavaScript);

Например:

index.html
html
<form oninput="result.value = Number(a.value) + Number(b.value)">
    <input type="number" id="a" value="49" />
    +
    <input type="number" id="b" value="51" />
    =
    <output name="result" for="a b">100</output>
</form>

© 2023-2025, MarkusFx (itPit)