Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
<input type=reset value="Очистить">
</p>
</form>
</body>
</html>
Значение кнопки RESET никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать параметр value, на кнопке по умолчанию будет добавлен текст «Сброс» или «Reset».
Переключатели
Переключатели используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
<input type="radio" name="имя" параметры>
Параметры переключателей перечислены в табл. 8.1.
Табл. 8.1. Параметры переключателей | |
Параметр | Описание |
checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним. |
name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. |
value | Задает, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем. |
Создание группы переключателей показано в примере 8.1.
Пример 8.1. Создание переключателей
<html>
<body>
<form action="handler. php">
<b>Какое у вас состояние разума?</b><br>
<input name="dzen" type="radio" value="nedzen"> Не дзен<br>
<input name="dzen" type="radio" value="dzen"> Дзен<br>
<input name="dzen" type="radio" value="pdzen"> Полный дзен
<p><input type="submit" value="Выбрать"></p>
</form>
</body>
</html>
В результате получим следующее.
Какое у вас состояние разума?
Не дзенДзенПолный дзен
Заметьте, что в данном примере параметр name для всех переключателей един, именно в таком случае браузер будет понимать, что переключатели связаны между собой и помечать только один пункт из предложенных. Значение параметра value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
Флажки
Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.
<input type="checkbox" параметры>
Параметры флажков перечислены в табл. 9.1.
Табл. 9.1. Параметры флажков | |
Параметр | Описание |
checked | Предварительное выделение флажка. |
name | Имя флажка для его идентификации обработчиком формы. |
value | Задает, какое значение будет отправлено на сервер. |
Использование флажков показано в примере 9.1.
Пример 9.1. Создание флажков
<html>
<body>
<form action="handler. php">
<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
<p><input type="submit" value="Выбрать"></p>
</form> </body></html>
В результате получим следующее.
С какими операционными системами вы знакомы?
Windows 95/98
Windows 2000System XLinuxX3-DOS
Поле со списком
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако это является и недостатком, ведь пользователю сразу не виден весь выбор.
Поле со списком создается следующим образом.
<select параметры>
<option параметры>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>
Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.
|
|
Список множественного выбора | Раскрывающийся список |
Параметры тега <SELECT>
Рассмотрим параметры тега <SELECT>, с помощью которых можно изменять вид и представление списка.
MULTIPLE
Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается в «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.
|
|
Параметр size отсутствует | Параметр size равен 1 |
Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.
В примере 10.1 показано создание списка множественного выбора.
Пример 10.1. Список множественного выбора
<html>
<body>
<form action="handler. php">
<select name="select" size="3" multiple>
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить">
</form>
</body>
</html>
NAME
Определяет уникальное имя элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
SIZE
Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.
Параметры тега <OPTION>
Тег <OPTION> также имеет параметры, влияющие на вид списка, они представлены далее.
SELECTED
Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.
VALUE
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается параметром name тега <SELECT>, а значение – параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.
Создание списка показано в примере 10.2.
Пример 10.2. Использование списка
<html>
<body>
<form action="handler. php">
<b>Выбери персонажа</b><br>
<select name="hero">
<option value="s1">Чебурашка</option>
<option value="s2" selected>Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s3">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить">
</form>
</body>
</html>
В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.
Выбери персонажа
Группирование элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <OPTGROUP>. Он представляет собой контейнер, внутри которого располагаются теги <OPTION> объединенные в одну группу. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется параметр label, как показано в примере 10.3.
Пример 10.3. Группирование элементов списка
<html><body>
<form action="handler. php">
<select>
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup><optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select>
<p><input type="submit" value="Отправить"></p>
</form></body></html>
Результат данного примера показан ниже.
Скрытое поле
Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать. Цель создания скрытых полей – в передаче технической информации на сервер. В большинстве случаев это необходимо для передачи данных формы от страницы к странице.
Синтаксис создания скрытого поля.
<input type="hidden" параметры>
Параметры перечислены в табл. 11.1.
Табл. 11.1. Параметры скрытого поля | |
Параметр | Описание |
name | Имя поля для его идентификации обработчиком формы. |
value | Значение поля, определяющее, какая информация будет отправлена на сервер. |
Пример использования скрытых полей приведен в примере 11.1.
Пример 11.1. Использование скрытого поля
<html>
<body>
<form action="handler. php" method="POST">
<b>Напишите любимое слово (никакие данные не будут передаваться
на сервер!):</b><br>
<input type="text" size="25" name="word">
<input type="hidden" name=UserName value="Vasya">
<input type="hidden" name="password" value="pupkin"><br>
<input type="submit" value="Отправить">
</form> </body></html>
В данном примере показано создание двух скрытых полей, одно из них носит имя UserName и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в параметре action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.
Поле с изображением
Поле с изображением аналогично по действию кнопке SUBMIT, но представляет собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной параметром action тега <FORM>.
Изображение в форме создается следующим образом.
<input type="image" параметры>
Параметры перечислены в табл. 12.1.
Табл. 12.1. Параметры поля с изображением | |
Параметр | Описание |
align | Определяет выравнивание изображения. |
alt | Альтернативный текст для кнопки с изображением. |
border | Толщина рамки вокруг изображения в пикселах. |
name | Имя поля для обращения к нему из скриптов или для получения значения обработчиком формы. |
Хотя по своему назначению указанное поле похоже на кнопку SUBMIT, его параметры совпадают с параметрами тега <IMG>, который добавляет изображение на веб-страницу.
В примере 12.1 показано использование поля с изображением.
Пример 12.1. Кнопка с изображением
<html><body>
<form action="handler. php">
<b>Введите ваше имя:</b><br>
<input type="text" size="35">
<input type="image" src="/images/imgbutton. gif"
width="91" height="25" align="middle"
alt="Отправить форму на сервер">
</form> </body></html>
Результат данного примера показан ниже.
Введите ваше имя:
Перед использованием указанного поля требуется подготовить изображение в графическом редакторе.
Поле с изображением
Для того чтобы можно было отправить на сервер файл, используется специальное поле. Такой элемент формы отображается как текстовое поле, рядом с которой располагается кнопка Обзор (Browse... для английской версии Netscape или Choose в браузере Opera). При нажатии на эту кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
<input type="file" параметры>
Параметры перечислены в табл. 13.1.
Табл. 13.1. Параметры поля для отправки файла | |
Параметр | Описание |
size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. |
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. |
name | Имя поля, используется для его идентификации обработчиком формы. |
Создание поля для отправки файла показано в примере 13.1.
Пример 13.1. Создание поля для отправки файла
<html>
<body>
<form enctype="multipart/form-data" method="POST">
<b>Укажите файл для отправки на сервер:</b><br>
<input type="file" size="30"><br>
<input type="submit" value="Отправить">
</form> </body></html>
Результат данного примера показан ниже.
Укажите файл для отправки на сервер:
Параметр формы enctype="multipart/form-data" нужен для корректной передачи файла. Если его не указать, будет передан лишь путь к файлу.
Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью метода POST, как показано в примере.
Переход между полями с помощью табуляции
При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится утомительно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша <Tab>, которая позволяет быстро переключать фокус с одного поля на другое. Параметр tabindex определяет последовательность перехода между полями при нажатии на <Tab>.
Замечание
Фокусом называется активность поля, иными словами, поле доступно для того, чтобы в него вводили информацию или использовали какое другое действие. Например, кнопки, флажки, переключатели можно активизировать с помощью пробела.
Следующие поля формы (теги) могут иметь параметр tabindex: <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>. В качестве значения принимается число, которое представляет собой шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т. д. В примере 14.1 показано применение параметра tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т. е. сверху вниз.
Пример 14.1. Использование параметра tabindex
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body>
<form name="bio" method="POST" action="handler. php">
<table width="100%" cellspacing="0" cellpadding="4">
<tr valign="top">
<td width="50%">Ваше имя:<br>
<input name="name" type="text" tabindex="1" size="30">
</td>
<td>Фамилия:<br>
<input name="lastname" type="text" tabindex="3" size="30">
</td>
</tr>
<tr valign="top">
<td>Телефон:<br>
<input name="tel" type="text" tabindex="2" size="30">
</td>
<td>Пол:<br>
<select name="gender" tabindex="4">
<option selected>Мужской</option>
<option>Женский</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Результат примера показан ниже. Обратите внимание, что с помощью табуляции фокус вначале получает поле, где надо ввести имя, а затем поле для ввода телефона.
Начало формы
Ваше имя: | Фамилия: |
Телефон: | Пол: |
Конец формы
Применение тега LABEL
Тег <LABEL> связывает текст с определенным элементом формы. Такая связь необходима, чтобы изменять значение переключателей и флажков при нажатии курсором мыши на текст. Кроме того, с помощью тега <LABEL> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Для связывания элемента формы и текста в теге <LABEL> используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого атрибутом id (пример 15.1).
Пример 15.1. Синтаксис тега <LABEL>
<html>
<body>
<form>
<input type="radio" name="psi" id="radio1">
<label for="radio1">Импритинг</label><br>
<input type="radio" name="psi" id="radio2">
<label for="radio2">Реимпритинг</label>
</form>
</body>
</html>
Результат данного примера показан ниже.
Импритинг Реимпритинг
Обязательно требуется, чтобы имя идентификатора (id) и значение параметра for совпадали. Именно в этом случае и осуществляется связь между текстом и элементом формы. Причем, не имеет значение, насколько близко они располагаются между собой на веб-странице. При нажатии на текст в окне браузера происходит переход к элементу формы. Исключением является браузер Opera, который игнорирует эту особенность, и переход при активизации текста не реализовывает.
Чтобы понять, в чем же удобство применения тега <LABEL>, рассмотрим пример, где в форму добавлены два флажка. Описание к одному флажку будет задано как обычный текст, а ко второму – с использованием <LABEL> (пример 15.2).
Пример 15.2. Использование тега <LABEL>
<html>
<body>
<form>
<input type="checkbox" id="t1"> Поставьте галочку<br>
<input type="checkbox" id="t2">
<label for="t2">
Нажмите на этот текст, чтобы поставить галочку
</label>
</form>
</body>
</html>
Результат данного примера показан ниже.
Поставьте галочкуНажмите на этот текст, чтобы поставить галочку
В первой строке, чтобы активизировать флажок, надо щелкнуть на него самого. Во второй строке активным элементом является и текст, при нажатии на который курсором мыши, можно устанавливать или снимать галочку. Вот и вся разница.
Польза от применения тега <LABEL> не особенно велика, но следует учитывать, что в операционных системах активация переключателей и флажков происходит при щелчке по тексту возле них. А следовательно, такой подход более привычен и понятен пользователям сайтов.
Горячие клавиши
Для управления переключателем и флажком с помощью клавиатуру применяется параметр accesskey тега <LABEL>. Для него необходимо указать символ, который в сочетании с клавишей <Alt> будет активизировать элемент. В примере 15.3 показано, как для переключателя задается горячая клавиша.
Пример 15.3. Использование параметра accesskey
<html>
<body>
<form>
<input type="checkbox" id="t1">
<label for="t1" accesskey="q">
Нажмите <Alt>+<q>, чтобы активировать переключатель
</label>
</form>
</body>
</html>
Результат данного примера показан ниже.
Нажмите <Alt>+<q>, чтобы активировать переключатель
Учтите, что параметр accesskey корректно работает только в браузере Internet Explorer. Кроме того, некоторые горячие клавиши уже используются браузером для своих целей.
Разделение формы на группы
При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход, который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку (пример 16.1).
Пример 16.1. Использование тега <FIELDSET>
<html>
<body><form><fieldset>
<b>Работа со временем</b><br>
<input type="checkbox" value="t1">
Создание пунктуальности (никогда не будете никуда опаздывать).<br>
<input type="checkbox" value="t2">
Излечение от пунктуальности (никогда никуда не будете торопиться).
<br>
<input type="checkbox" value="t3"> Изменение восприятия времени.
</fieldset>
</form></body></html>
Результат выполнения данного примера показан ниже.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 |
