Web-программирование. Обработка HTML-форм (стр. 2 из 8)
<html>
<head>
<title>Тег input и способы его использования</title>
</head>
<body>
<form action=hello.php>
Текстовое поле ввода имени (login): <input type=text name=”login” value=””<br>
Поле ввода пароля (password): <input type=password name=”password” value=””<br>
Скрытое поле hid <input type=”hidden” name=”hid” value=”Hidden Field”<br>
<hr>
<input type=”checkbox” name=”varl” value=”Bapmнт 1”
checked>Bapиaнт 1 (по умолчанию)
<input type=”checkbox” name=”var2” value=”Bapиант 2”>Вариант 2<br>
<input type=”submit” name=”go” vа1ue = “Передать “ ><br>
<input type=”reset” vа1ue = “Очистить форму” ><br>
</form>
</body>
</html>
В окне браузера форма выглядит следующим образом:
1.3.5. Зависимые переключатели
Если в форме присутствует несколько одноименных зависимых переключателей типа radio, то включен из них может быть только один. При выборе одного переключателя все одноименные зависимые переключатели автоматически выключаются. В качестве имени переключателей воспринимается значение атрибута name.
Листинг radio_1.html. Форма с зависимыми переключателями
<html>
<head>
<title>Зависимые переключатели</title>
</head>
<body>
<form action=»http://localhost/sex.php» method=»post”>
<input type=radio
name=sex
value=male
checked
>
Мужчина
<input type=radio
name-sex
value=female
>
Женщина
<input type=submit
name=go
value=Передать
>
</form>
</body>
</html>
В окне браузера форма выглядит следующим образом:
Первый переключатель (со значениемmale) активен по умолчанию (установлен атрибут checked). Как только пользователь нажмет кнопку Передать, сценарию sex.php будет передан параметр sex (атрибут name обоих переключателей) со значениемmale. Если же пользователь выберет другой вариант (female), сценарию будет передано значение параметра sex.
Тег INPUT позволяет создавать поле выбора файла для отправки. При этом формат тега таков:
<inputtype=file
name=имя
[vа1ue=имяфайла] >
1.3.7. Кнопка отправки формы
Кнопка отправки служит для отправки сценарию введенных в форму значений. Синтаксис тега INPUT таков:
<input type=submit
[name=go]
value=Передать
Атрибут value определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если же атрибут name для кнопки будет указан, то дополнительно к данным формы будет отправлена пара имя=значение от самой кнопки. Рекомендуется обязательно указывать этот атрибут.
Кнопки reset сбрасывает форму — устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки облегчает очистку формы, если были введены неправильные параметры:
<input type=reset
value=C6poc>
1.3.9. Кнопка отправки с индивидуальным рисунком
Можно использовать рисунок для отправки данных. При щелчке на этом рисунке произойдет то же, что и при нажатии на кнопку submit. Однако, кроме этого, сценарию будут переданы координаты места произведения щелчка на рисунке. Координаты будут переданы в формате: имя. х=коор_Х, имя. у=коор_У:
<input type=image
name=имя
src=рисунок>
Листинг cnopka_image.html. Кнопка отправки с рисунком
<html>
<head>
<title>Кнопка отправки с рисунком</title>
</head>
<body>
<form action=”http://localhost/hello.php” method=”POST”>
<hr>
Текстовое поле txt <input type=”text” name=”txt”<br>
<hr>
Поле ввода пароля pswd <input type=”password” name=”pswd”<br>
<hr>
Скрытое поле hid <input type=”hidden” name=”hid” value=”Hidden Field”<br>
<hr>
<input type=”checkbox” name=”varl” value=”Bapmнт 1”
checked>Bapиaнт 1 (по умолчанию)
<input type=”checkbox” name=”var2” value=”Bapиант 2”>Вариант 2
<hr>
<input type=”image”
name=”sub”
src=”image.png”>
<hr>
<input tupe “reset” value=”Очистить форму”>
</form>
</body>
</html>
В окне браузера форма выглядит следующим образом:
Когда пользователь щёлкает в каком-либо месте изображения, соответствующая форма передаётся на сервер с двумя дополнительными переменными: sub_x и sub_y. Они содержат координаты щелчка.
1.4. Ввод многострочного текста. Тег TEXTAREA
В HTML многострочное поле ввода реализуется с помощью тега TEXTAREA. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько. Формат тега TEXTAREA таков:
<textarea
name=имя
[со1s=ширина в символах]
[rows=высота в символах]
wrap=тип_переноса
>Текст по умолчанию </textarea>
Необязательные параметры cols и rows желательно указывать. Первый из них задает количество символов в строке, а второй — количество строк в области. Атрибут wrap определяет, как будет выглядеть текст в поле ввода:
● Virtual — справа от текстового поля выводится полоска прокрутки.
Вводимый пользователем текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши Enter.
● Physical — этот тип зависит от браузера и в разных браузерах может вести себя по-разному.
● None — текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не умещается в одну строку, появляется горизонтальная полоска прокрутки.
Стоит заметить, что наиболее удобным является тип Virtual.
Внешний вид поля:
<textarea
name=”t_area”
со1s=”20”
rows=»5»
wrap=»virtual»
>Текст по умолчанию
</textarea>
Листинг textarea.html. Форма с многострочным текстом
<html>
<head>
<title>Многострочный текст</title>
</head>
<body>
<form action=”http://localhost/form.php” method=”POST”>
<hr>
<textarea
name=”t_area”
со1s=»20»
rows=»5»
wrap=»virtual»
>Текст по умолчанию
</textarea>
<hr>
<input tupe “submit” name=”go” value=”Передать”>
<input tupe “reset” value=”Очистить форму”>
</form>
</body>
</html>
В окне браузера форма выглядит следующим образом:
1.5. Списки выбора. Тег SELECT
1.5.1. Списки с единственным выбором
Список выбора позволяет выбрать один вариант из множества. Можно было бы использовать зависимые переключатели radio, но это не рационально. Например, если нужно, чтобы пользователь выбрал месяц, то один список будет занимать намного меньше места в окне браузера, чем целых двенадцать переключателей radio. Пример списка выбора, реализованного с помощью тега SELECT:
Листинг spisoc_1.html. Форма списка с единственным выбором
<html>
<head>
<title>Список с единственным выбором</title>
</head>
<body>
<select name=month size=l>
<option value=01 >Январь</option>
<option value=02>Февраль</option>
<option value=03>Mapт</option>
<option value=04>Апрель</option>
<option value=05 selected >Maй</option>
<option value=06>Июнь </option>
<option value=07>Июль</option>
<option value=08>Август </option>
<option value=09>Ceнтябрь</option>
<option value=10>Oктябрь</option>
<option value=11>Hоябрь</option>
<option value=12>Декабрь</option>
</select>
</body>
</html>
В окне браузера форма выглядит следующим образом:
Варианты выбора задаются с помощью тегов option. При отправке формы сценарию будет отослано значение value выбранного элемента списка.
Атрибут name определяет имя параметра, который будет передан сценарию. Если атрибут size равен 1, то список будет выпадающим. В противном случае список будет занимать n строк и будет «оснащен» полосой прокрутки. Значение, выбранное в списке по умолчанию, можно указать с помощью атрибута selected для соответствующего тега option. В приведенном примере месяц по умолчанию — Май.
Атрибут value является необязательным. Если его не указать, то будет передана строка, заключенная в тег option. В нашем случае сценарию будет передан параметр month=Cентябрь (если value не указан).
1.5.2. Списки множественного выбора
С помощью тега SELECT можно создавать и списки множественного выбора. В таких списках можно выбрать не одно, а сразу несколько значений. Чтобы сделать список с множественным выбором, необходимо для тега SELECT указать атрибут multiple. Если пользователь выберет несколько вариантов, то сценарию будут переданы параметры в форме: