наверх





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

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

Все перечисленные вверху элементы доступны лишь в одном теге — <input>.

<input>


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

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

name


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

<input name="name"> <br>
<input name="lastName">


type


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

size


Это размер текстового поля, то есть когда type указан как text. Атрибут указывает ширину поля.

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

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

text


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

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


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

password


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

submit


Данное значение определяется как кнопка, по нажатию которой выполняется какой-либо сценарий. В основном используется как отправка данных к обработчику.

reset


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

radio


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

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


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

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

checkbox


Чекбокс работает по такому же принципу, как и радиокнопка. То есть, здесь так же нужно указывать для одного вопроса одно и то же значение в атрибуте name. Та же ситуация и с атрибутом value. Главное отличие в том, что в чекбоксе можно выбрать несколько вариантов ответа, ну и в самом оформление. Записывается чекбокс следующим образом:

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


Давайте разберем, как сделать, что бы у пользователя сразу уже стоял выбор ответа. Делается это при помощи одиночного атрибута checked. Так как этот атрибут одиночный, то прописывать значения ему не надо. Надо лишь добавить его в элемент <input>. Например:

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


Если вы поэкспериментировали, то скорее всего увидели, что, например, создав чекбокс, высвечивается просто квадрат или кружок. Что бы было рядом с радиокнопкой или чекбоксом слово и пользователю было понятно что из чего выбирать, нужно перед или после элемента написать это самое слово. Пример:

<label><input type="checkbox" name="razdel" value="games"> Игры</label>


Для удобства пользователя, можно заключить слово с чекбоксом в тег <label>, который отвечает за то, что при клике на слово "Игры" будет помечен указанный вами элемент (чекбокс или радиокнопка) в пределах тега.

Пример использования изученных элементов:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="opros" method="post" action="opros.php">
Нравится ли вам сайт?<br>
<label><input type="radio" name="vopros" value="yes"> Да</label><br>
<label><input type="radio" name="vopros" value="no"> Нет</label><br>
<label><input type="radio" name="vopros" value="xz" checked> Трудно ответить</label><br>
<br>
Какие разделы вы хотите увидеть?<br>
<label><input type="checkbox" name="razdel" value="games"> Игры</label><br>
<label><input type="checkbox" name="razdel" value="soft"> Программы</label><br>
<label><input type="checkbox" name="razdel" value="themes"> Темы</label><br>
<br><br> Ваш комментарий: <br>
<input type="text" name="comment">
<br>
<input type="submit" value="Отправить"> <input type="reset" value="Очистить">
</form>
</body>
</html>


Конечный результат можно просмотреть на данной демо-странице.





Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.