Формы в html

Веб-разработка • HTML • 07.11.2026 18:05:59 • 18 • 0

paulukevich


Содержание


  1. Создание простой формы
  2. Поля ввода input
  3. Поля для ввода чисел и даты
  4. Многострочное текстовое поле textarea
  5. Выпадающий список select
  6. Переключатели radio
  7. Флажки checkbox
  8. Проверка заполнения формы
  9. Кнопки формы
  10. Оформление формы с помощью CSS
  11. Атрибуты action и method
  12. Заключение

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

Для создания формы используется тег <form>. Внутри него размещаются поля ввода, переключатели, выпадающие списки и кнопки.


Создание простой формы


Рассмотрим пример формы с полем для ввода имени и кнопкой отправки.

<form onsubmit="event.preventDefault()">
    <label for="username">Ваше имя:</label>
    <input type="text" id="username" name="username">
    <button type="submit">Отправить</button>
</form>

Посмотреть пример


Пример кода



В данном примере тег <form> создаёт форму, <input> - поле ввода, а <button> - кнопку. Атрибут onsubmit отключает настоящую отправку данных в учебном примере.


Поля ввода input


Тег <input> позволяет создавать различные поля ввода. Их назначение определяется атрибутом type.

<form onsubmit="event.preventDefault()">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email">

    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password">

    <button type="submit">Продолжить</button>
</form>

Посмотреть пример


Пример кода



В примере используются три типа полей: text для обычного текста, email для электронной почты и password для скрытого ввода пароля.


Поля для ввода чисел и даты


С помощью атрибута type можно создавать поля для ввода чисел и выбора даты.

<form onsubmit="event.preventDefault()">
    <label for="quantity">Количество:</label>
    <input type="number" id="quantity"
           name="quantity" min="1" max="10">

    <label for="date">Дата:</label>
    <input type="date" id="date" name="date">

    <button type="submit">Выбрать</button>
</form>

Посмотреть пример


Пример кода



Атрибуты min и max задают допустимые границы числового значения. Поле с типом date позволяет выбрать дату с помощью интерфейса браузера.


Многострочное текстовое поле textarea


Для ввода большого количества текста используется тег <textarea>. Например, его можно применять в формах обратной связи.

<form onsubmit="event.preventDefault()">
    <label for="message">Сообщение:</label>

    <textarea id="message" name="message"
              rows="5" cols="35"
              placeholder="Введите сообщение"></textarea>

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

Посмотреть пример


Пример кода



Атрибут rows задаёт количество видимых строк, а cols - примерную ширину поля в символах. Атрибут placeholder отображает подсказку внутри поля.


Выпадающий список select


Тег <select> используется для создания выпадающего списка. Варианты выбора задаются с помощью тега <option>.

<form onsubmit="event.preventDefault()">
    <label for="city">Выберите город:</label>

    <select id="city" name="city">
        <option value="">Выберите вариант</option>
        <option value="riga">Рига</option>
        <option value="jurmala">Юрмала</option>
        <option value="liepaja">Лиепая</option>
    </select>

    <button type="submit">Выбрать</button>
</form>

Посмотреть пример


Пример кода



В данном примере пользователь может выбрать один из трёх городов. Атрибут value определяет значение, которое будет передано при отправке формы.


Переключатели radio


Переключатели позволяют выбрать один вариант из нескольких предложенных. Для их создания используется <input type="radio">.

<form onsubmit="event.preventDefault()">
    <fieldset>
        <legend>Выберите способ связи:</legend>

        <label>
            <input type="radio" name="contact"
                   value="email" checked>
            E-mail
        </label>

        <label>
            <input type="radio" name="contact"
                   value="phone">
            Телефон
        </label>
    </fieldset>

    <button type="submit">Продолжить</button>
</form>

Посмотреть пример


Пример кода



Чтобы переключатели принадлежали одной группе, им необходимо задать одинаковое значение атрибута name. Атрибут checked устанавливает выбранный вариант по умолчанию.


Флажки checkbox


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

<form onsubmit="event.preventDefault()">
    <fieldset>
        <legend>Интересующие темы:</legend>

        <label>
            <input type="checkbox" name="topics[]"
                   value="html"> HTML
        </label>

        <label>
            <input type="checkbox" name="topics[]"
                   value="css"> CSS
        </label>

        <label>
            <input type="checkbox" name="topics[]"
                   value="javascript"> JavaScript
        </label>
    </fieldset>

    <button type="submit">Сохранить</button>
</form>

Посмотреть пример


Пример кода



В отличие от переключателей radio, флажки checkbox позволяют выбрать сразу несколько значений. Запись topics[] удобна при обработке массива выбранных значений на PHP.


Проверка заполнения формы


HTML позволяет выполнять базовую проверку данных непосредственно в браузере. Для этого используются специальные атрибуты.

<form onsubmit="event.preventDefault();
    alert('Поля заполнены корректно!')">

    <label for="fullname">Имя:</label>
    <input type="text" id="fullname"
           name="fullname" minlength="2" required>

    <label for="email">E-mail:</label>
    <input type="email" id="email"
           name="email" required>

    <button type="submit">Проверить</button>
</form>

Посмотреть пример


Пример кода



Атрибут required делает поле обязательным для заполнения, minlength устанавливает минимальную длину текста, а type="email" включает базовую проверку формата электронной почты.

Следует учитывать, что проверка в браузере не заменяет проверку данных на сервере.


Кнопки формы


Для создания кнопок используется тег <button>. Атрибут type определяет назначение кнопки.

<form onsubmit="event.preventDefault();
    alert('Демонстрация отправки')">

    <label for="search">Поиск:</label>
    <input type="search" id="search" name="q">

    <button type="submit">Найти</button>
    <button type="reset">Очистить</button>

    <button type="button"
            onclick="alert('Обычная кнопка')">
        Подсказка
    </button>
</form>

Посмотреть пример


Пример кода



Кнопка с типом submit запускает отправку формы, reset возвращает поля к начальным значениям, а button используется для выполнения дополнительных действий, например с помощью JavaScript.


Оформление формы с помощью CSS


С помощью CSS можно изменить ширину полей, цвет границ, внутренние отступы и оформление кнопок.

<style>
.contact-form {
    max-width: 450px;
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
}

.contact-form button {
    padding: 10px 20px;
    background-color: #26734d;
    color: white;
    border: none;
    cursor: pointer;
}
</style>

<form class="contact-form"
      onsubmit="event.preventDefault()">

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

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Сообщение:</label>
    <textarea id="message" name="message"
              rows="5" required></textarea>

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

Посмотреть пример


Пример кода



В данном примере мы создали форму обратной связи и добавили оформление с помощью CSS. Для полей ввода задали ширину, отступы и границы, а для кнопки - цвет фона и текста.


Атрибуты action и method


Тег <form> поддерживает атрибуты, которые определяют способ отправки данных на сервер.

  • action - адрес обработчика формы.
  • method - HTTP-метод отправки данных.
  • name - имя поля, используемое при отправке.
  • id - уникальный идентификатор элемента.

Метод GET обычно применяется для поиска и фильтрации, а POST - для отправки данных, изменяющих состояние сервера.

Пример формы с методом POST:

<form action="contact.php" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">

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

Для обработки данных формы с помощью PHP необходимо создать серверный обработчик, например файл contact.php, и указать путь к нему в атрибуте action тега <form>. В обработчике можно получить отправленные данные через массив $_POST. Перед использованием данные необходимо проверить на сервере.


Заключение


В этой статье мы познакомились с HTML-формами, рассмотрели основные элементы ввода, переключатели, флажки, выпадающие списки и кнопки.

Также мы научились выполнять базовую проверку заполнения полей и оформлять формы с помощью CSS.

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


Обновлён: 07.11.2026 18:05:59

0 Комментарии
Написать комментарий
Загрузка

Категории

Теги