Вторник, 08.07.2025, 06:12

Элементы форм: Флажки (checkbox)

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

Флажок создается следующим образом.

<input type=checkbox параметры>

Параметры поля перечислены в таблице.

ПараметрОписание
name=...

Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.

value=...Значение поля определяет, что будет отправлено на сервер при поставленной галочке.
align=...Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений.
checkedЕсли этот параметр стоит, то галочка в поле будет добавлена автоматически.

Пример. Использование флажков

<html>
<head>
<body>

<form action="/cgi-bin/handler.cgi">
<b>С какими операционными системамы вы знакомы?</b><br>
<input type=checkbox name=option1 value=a1 checked>Windows 95/98<br>
<input type=checkbox name=option2 value=a2>Windows 2000<br>
<input type=checkbox name=option3 value=a3>System X<br> 
<input type=checkbox name=option4 value=a4>Linux<br> 
<input type=checkbox name=option5 value=a5>X3-DOS
</form>

</body>
</html>

В результате получим следующее.

С какими операционными системами вы знакомы?
 Windows 95/98
 Windows 2000
 System X
 Linux
 X3-DOS

Элементы форм: Переключатели (radiobutton)

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

Переключатели создаются следующим образом.

<input type=radio name=имя параметры>
<input type=radio name=имя параметры>

Параметры поля перечислены в таблице.

ПараметрОписание
name=...

Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.

value=...Значение поля определяет, что будет отправлено на сервер.
align=...Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений.
checkedУстанавливает элемент выбранный по умолчанию.

Имя поля для всех элементов группы должно быть одинаковым.

Пример. Использование переключателей

<html>
<head>
<body>

<form action="/cgi-bin/handler.cgi">
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b><br>
<input type=radio name=answer value=a1>Офицерский состав<br>
<input type=radio name=answer value=a2>Операционная система<br>
<input type=radio name=answer value=a3>Большой полосатый мух
</form>

</body>
</html>

В результате получим следующее.

Как по вашему мнению расшифровывается аббревиатура "ОС"?
 Офицерский состав
 Операционная система
 Большой полосатый мух

Элементы форм: Поле со списком

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

Поле со списком создается следующим образом.

<select параметры>
<option параметры>Выбор 1</option>
<option>Выбор 2</option>
<option>Выбор 3</option> 
</select>

Теги select и option имеет следующие параметры.

Параметр selectОписание
name=...

Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать список.

size=...Количество видимых строк. По умолчанию одна строка.
multipleЭтот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift.
Параметр optionОписание
selectedВидимое поле по умолчанию.
value=...Значение определяет, что будет отправлено на сервер при выбранном пункте списка.

Пример. Поле со списком

<html>
<head>
<body>

<form action="/cgi-bin/handler.cgi">
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b>
<select name=OS>
<option>Офицерский состав</option>
<option>Операционная система</option>
<option>Большой полосатый мух</option>
</select> 
</form>

</body>
</html>

В результате получим следующее.

Как по вашему мнению расшифровывается аббревиатура "ОС"?

Элементы форм: Скрытое поле

Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать. Цель создания скрытых полей – в передаче технической информации на сервер. В большинстве случаев это необходимо для передачи данных формы от страницы к странице.

Синтаксис создания скрытого поля.

<input type=hidden name=... value=...>

name - имя поля, которое позволяет программе идентифицировать его.
value - значение поля определяет какая информация будет отправлена на сервер.

Пример. Использование скрытого поля

<html>
<head>
<body>

<form action="/cgi-bin/handler.cgi" method=POST>

<b>Напишите любимое слово (никакие данные не будут передаваться на сервер!):</b><br>
<input type=text size=25>
<input type=hidden name=UserName value=Vasya>
<input type=hidden name=password value=pupkin>

</form>

</body>
</html>



Напишите любимое слово (никакие данные не будут передаваться на сервер!):

В примере скрытые поля никак не показываются, но когда форма отправляется на сервер, скрытые поля передаются вместе с ней.

Объявления











Создать бесплатный сайт с uCoz