Урок 10. Форма и элементы: флажок, радиокнопка, поле

В прошлом уроке мы изучили понятие формы. Её основная задача - объединить формы ввода данных определённого типа. Например, форма может объединить данные анкеты, теста и тд. В этом уроке мы научимся делать сами поля ввода!

За заполнение формы отвечает специальный тег <input>, у него есть атрибут type, который позволяет создать определённые заполняемые поля: текстовые поля, радиокнопки, флажки, списки, кнопки. Повторяю, все перечисленные вверху элементы доступны лишь в одном теге — <input>.

Тег <input> в HTML

<input> - это одиночный тег, с помощью которого можно создавать определённые элементы документа (текстовые поля, радиокнопки, флажки, списки, кнопки), которые предназначены для заполнения прямо на html-странице.

Ниже пример работы <input> в HTML

Демонстрация Скачать исходники

У тега <input> имеется несколько очень важных значений атрибутов.

name - атрибут, который следует всегда задавать для элемента, чтобы обработчик (скрипт) понимал, input с каким именем он обрабатывает.

<input name="name"> 
<input name="FirstName">

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

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

size - атрибут, указывающий размер для текстового поля, когда type указан как text. Указанные данные воспринимаются как ширина поля.

Тег <input&amp;gt имеет много других атрибутов, например, id (уникальный идентификатор поля, нужен, например, при работе с JavaScript), value (рассмотрим ниже). В статье я указал все основные атрибуты и значения, которых вполне достаточно для работы с полями input.

Атрибут type для input

Теперь давайте подробнее разберем атрибут type и его значения:

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

<input type="text" name="Идентификатор в глазах обработчика" value="Значение по умолчанию">

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

password - превращает input в поле для заполнения пароля. Отличие от text заключается в том, что вводимые данные будут отображаться как звёздочки, а после заполнения всей формы браузер будет понимать, что в этом поле пароль и будет спрашивать, нужно ли его сохранить.

submit - подобное значение атрибута type определяет input как кнопку, при нажатии которой будет прорабатываться определённый сценарий (что такое сценарий вы узнаете позже, изучив языки PHP и JavaScript). Кнопка используется для того, чтобы отправить данные из форм к обработчику, написанному, например, на вышеуказанных языках. Есть и другие, но указал самые популярные.

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

<input type="reset" value="Очистить">

radio - Данное значение создает радиокнопку, то есть переключатель. Используется, как правило, для значений с небольшим количеством вариантов. Например, выбрать пол, интервал с возрастом и тп. выглядит следующим образом:

<input type="radio" name="Идентификатор в глазах обработчика, например, возраст, пол" value="Значение, которое будет отправлено">

У атрибута type задано значение radio - это радиокнопка. В значение value записывается та фраза или слово, которое вы хотите получить, если кто-то выбрал определенную радиокнопку и отправил данные.



Бывают и другие случаи, когда пользователю нужно выбрать несколько вариантов ответа. В этом случае используется уже не радиокнопка (принимает только один вариант), а флажок или чекбокс.

checkbox - это поле, которое работает так же как и радиокнопка. С разницей лишь в том, что можно выделить несколько чекбоксов в качестве вариантов ответа. Также как и с радиокнопкой, если к вопросу принадлежат несколько чекбоксов, то у них атрибут name должен быть соответственно одинаково заполнен. В value соответственно будет указано значение выбранного поля.

<input type="checkbox"  name="Идентификатор в глазах обработчика" value="Значение, которое будет отправлено">

Особенности работы полей input

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

Как сделать так, чтобы у пользователя сразу был выбран ответ (чекбокс или радиокнопка)?
Для этого существует одиночный атрибут checked. Его нужно указать в конце тега input. Так как атрибут одиночный, то значений у него никаких нет. Надо лишь добавить его в элемент input. Например, как в записи ниже:

<input type="radio" name="answer" value="yes" checked>

Как сделать так, чтобы напротив чекбокса или радиокнопки был виден текст, поясняющий данный выбор?
Для этого перед и после радиокнопки или чекбокса пишем тег <label>. А само пояснение вставляем также внутри тега. Рассмотрим пример:

<label><input type="checkbox" name="document" value="yes">Я прочитал соглашение</label>

Соответственно указываете в теге label, открывающем и закрывающем, сам чекбокс и нужные слова. И внимание! Даже если пользователь нажмёт на слово, то чекбокс всё равно будет выделен.

Пример использования полей input в HTML

Код HTML

<html>
  <head>
    <title>Пример использования полей input в HTML</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<form name="anketa" method="post" action="#">
<div>Нравится ли Вам данный сайт?
<p><label><input type="radio" name="vopros" value="yes"> Да</label></p>
<p><label><input type="radio" name="vopros" value="no"> Нет</label></p>
<p><label><input type="radio" name="vopros" value="none" checked> Трудно ответить</label></p>
</div>
<div>
Какие уроки интереснее всего?
<p><label><input type="checkbox" name="lessons" value="HTML">HTML</label></p>
<p><label><input type="checkbox" name="lessons" value="CSS">CSS</label></p>
<p><label><input type="checkbox" name="lessons" value="PHP">PHP</label></p>
</div>
<div>
Текстовой блок: 
<input type="text" name="comment">
</div>
<div>
<input type="submit" value="Отправить"> <input type="reset" value="Очистить">
</div>
</form>
</body>
</html>

Демонстрация Скачать исходники

Спасибо за внимание!