Формы HTML

HTML-форма используется для сбора различных типов ввода пользователей, тег <form> поддерживается всеми браузерами. Определение и использование тег <form> используется для создания HTML-формы для ввода пользователя. Форма может содержать элементы ввода, такие как текстовые поля, флажки, радио-кнопки, кнопки отправки и т.д.

Онлайн-пример

Создание поля ввода текста
Этот пример демонстрирует, как создать текстовое поле в HTML-странице. Пользователь может写入 текст в текстовое поле.

Создание поля ввода пароля
Этот пример демонстрирует, как создать поле пароля в HTML.

Формы HTML

Форма - это область, содержащая элементы формы.

Элементы формы позволяют пользователям вводить данные в форму, например: текстовые поля (textarea), выпадающие списки, радио-кнопки (radio-buttons), флажки (checkboxes) и т.д.

Форма устанавливается с помощью тега <form>:

<form>
.
Элемент input
.
</form>

HTML-форма - элементы ввода

Чаще всего используются теги формы <input>.

Тип ввода определяется свойством типа (type). Наиболее часто используемые типы ввода следующие:

Текстовые поля (Text Fields)

Текстовое поле через тег <input type="text"> используется для ввода текста, чисел и других данных в форме.

<form action="/run/demo-form.php"> 　　
Имя:<input type="text" name="firstname" size="20"/><br/>Фамилия:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Подтвердить"/> </form>

Браузер отображает следующим образом:

Внимание:Форма本身 не видна. В большинстве браузеров по умолчанию ширина текстового поля составляет 20 символов.

Поле пароля

Поле пароля определяет тег<input type="password">:

<form action="/run/demo-form.php"> 　　
Пароль:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

Эффект отображения в браузере будет следующим:

Внимание:Поле пароля не отображается в открытом тексте,而是 заменяется на звездочки или точки.

Переключатели (Radio Buttons)

<input type="radio"> элемент определяет опцию выбора одной из опций в форме.

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Мужской<br/><input type="radio" name="sex" value="female"/>Женский<input type="submit" value="Submit"/> </form>

Эффект отображения в браузере будет следующим:

Флажки (Checkboxes)

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

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>У меня есть велосипед<br/><input type="checkbox" name="vehicle" value="Car"/>У меня есть машина<input type="submit" value="Submit"/> </form>

Эффект отображения в браузере будет следующим:

Кнопка отправки (Submit Button)

<input type="submit"> определяет кнопку отправки.

Когда пользователь нажимает кнопку подтверждения, содержимое формы передается в другой файл. Атрибут действия формы определяет имя файла цели. Этот файл, определенный атрибутом действия, обычно обрабатывает полученные данные.

<form name="input" action="/run/demo-form.php" method="get">
Имя пользователя: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Эффект отображения в браузере будет следующим:

Если вы введите несколько букв в текстовом поле上方 и нажмите кнопку подтверждения, данные будут отправлены на страницу "html_form_action.php". Эта страница покажет результат ввода.

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

Радио-кнопки (Radio buttons)
Этот пример демонстрирует, как создать радио-кнопки в HTML.

Флажки (Checkboxes)
Этот пример демонстрирует, как создать флажки в HTML. Пользователь может选中 или снять флажки.

Простой список для выбора
Этот пример демонстрирует, как создать простой список для выбора в HTML-странице. Список для выбора является опциональным.

Предварительно выбранный выпадающий список
Этот пример демонстрирует, как создать простый выпадающий список с предварительно выбранным значением.

Текстовое поле (Textarea)
Этот пример демонстрирует, как создать текстовое поле (многострочный ввод текста). Пользователь может写入 текст в текстовое поле. Количество символов, которые можно ввести, не ограничено.

Создание кнопки
Этот пример демонстрирует, как создать кнопку. Вы можете настроить текст на кнопке.

Пример формы

Форма с рамкой
Этот пример демонстрирует, как нарисовать рамку вокруг данных с заголовком.

Форма с полями ввода и кнопкой подтверждения
Этот пример демонстрирует, как добавить форму на страницу. Эта форма содержит два поля ввода и кнопку подтверждения.

Форма с флажками
Эта форма содержит два флажка и кнопку подтверждения.

Форма с радио-кнопками
Эта форма содержит два радио-кнопки и кнопку подтверждения.

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

Теги форм HTML

New: новые теги HTML5