Форма

элемент, предназначенный для сбора и отправки данных

Роль форм

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

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

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

<form>

определяет область сбора данных и параметры их отправки

<form action="/search" method="GET">
    <input type="text" name="query" placeholder="Введите запрос">
    <button type="submit">Искать</button>
</form>

<form action="/login" method="POST">
    <input type="text" name="username" placeholder="Логин">
    <input type="password" name="password" placeholder="Пароль">
    <button type="submit">Войти</button>
</form>
                        

action

указывает URL, на который отправляются данные.

method

определяет способ передачи данных (GET или POST).

• GET – данные передаются через URL (используется для поиска, фильтров).
• POST – данные передаются скрыто в теле запроса (используется для логинов, регистрации).

autocomplete

включает (on) или выключает (off) автозаполнение.

Элементы ввода данных

<input>

отвечает за ввод данных

Возможные значения type

• text – обычное текстовое поле
• password – поле для ввода пароля (звёздочки вместо символов)
• email – поле для ввода email (проверяет корректность)
• number – поле для числового ввода (со стрелками)
• date – выбор даты через календарь
• checkbox – флажки для выбора нескольких вариантов
• radio – переключатели для выбора одного варианта
• file – загрузка файла
• submit – кнопка отправки формы
• reset – кнопка сброса формы

<textarea>

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

<textarea rows="4" cols="50" placeholder="Введите сообщение"></textarea>
                        

Подписи к полям

Тег <label> улучшает доступность формы, связывая текстовую подпись с полем ввода

<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">
                        

Кнопки управления

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

submit

Используется для отправки данных формы

                        <button type="submit">Отправить</button>
                        

Кнопки управления

Кнопка сброса данных

reset

Очищает все поля формы

<button type="reset">Сбросить</button>
                        

<form action="/submit" method="POST">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Отправить</button>
    <button type="reset">Очистить</button>
</form>
 
                        

Выпадающие списки

Одиночный или множественный выбор

select

создаёт выпадающий список

<label for="city">Выберите город:</label>
<select id="city" name="city">
    <option value="moscow">Омск</option>
    <option value="spb">Санкт-Петербург</option>
    <option value="kazan">Москва</option>
</select>
                        

Основные атрибуты

определение элементов списка

<option>

задаёт вариант в списке

Основные атрибуты

• value – значение, передающееся на сервер
• selected – делает этот вариант выбранным по умолчанию
• disabled – делает вариант недоступным для выбора

<select name="language">
    <option value="html">HTML</option>
    <option value="css" selected>CSS</option>
    <option value="js" disabled>JavaScript (недоступно)</option>
</select>
                        

Группировка элементов списка

<optgroup>

объединение связанных опций в группы

<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="car">
    <optgroup label="Германия">
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="Япония">
        <option value="toyota">Toyota</option>
        <option value="honda">Honda</option>
    </optgroup>
</select>
                        

Группировка полей

Когда форма содержит несколько связанных полей, их удобно группировать с помощью <fieldset>

<fieldset>
    <legend>Контактные данные</legend>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
</fieldset>
                        

заголовок для группы полей

<legend>

размещается внутри <fieldset> и задаёт заголовок группы

<fieldset>
    <legend>Личные данные</legend>
    <label for="fname">Имя:</label>
    <input type="text" id="fname" name="fname">
    
    <label for="lname">Фамилия:</label>
    <input type="text" id="lname" name="lname">
</fieldset>
                        

расположения полей формы

Для гибкого расположения полей формы можно использовать <div> , <p> и другие блоки

    

        Логин:
        
    
    

        Пароль:
        
    

                        

Атрибуты данных формы

• name - Имя поля, используемое при отправке данных на сервер
• id - Уникальный идентификатор элемента
• value - Начальное значение элемента формы
• placeholder - Текст-подсказка внутри поля ввода
• required - Обязательное поле для заполнения
• readonly - Поле доступно только для чтения
• disabled - Поле отключено (не отправляется с формой)

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

                                    <input pattern="\+7\d{10}" placeholder="+7XXXXXXXXXX" required type="tel" id="phone" name="phone" >
                                

                                    <input type="number" id="age" name="age" min="18" max="60" step="5" required />
                                

состояния элементов

Формы могут менять свой стиль в зависимости от состояния элементов и это можно реализовать с помощью псевдоклассов

• :focus - Стилизация элемента при фокусе (когда пользователь вводит данные)
• :hover - Стилизация элемента при наведении курсора
• :disabled - Стилизация отключенных элементов
• :checked - Стилизация отмеченных чекбоксов и радиокнопок

button:hover {
    background-color: #0056b3;
}
                        

Самостоятельно