Скрытые управляющие элементы

Формы и их элементы

Для отправки информации сценарию используются формы:

Форма в HTML-документе реализуется тегом-контейнером FORM, в котором задаются все управляющие элементы - поля ввода, кнопки и т.д.

Имена элементам формы присваиваются через их атрибут NAME.

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

Пример простейшей формы:

<form action = “http://localhost/1.php” method = “GET”>

Имя: <input type=text name=user_name><br>

<input type=submit name=”go” value=”Передать”>

</form>

Так как используется метод GET, то в строке адреса браузера отобразится передаваемая информация:

http://localhost/1.php?user_name=Петр

Типы управляющих элементов:

Кнопки — задаются с помощью элемента INPUT.

Различают:

  1. кнопки отправки — при нажатии на них осуществляют отправку формы серверу;

Кнопка отправки служит для отправки сценарию введенных в форму значений. Синтаксис тега INPUT при этом таков:

<input type=submit

name = go

value=Передать

>

  1. кнопки сброса — при их нажатии устанавливают управляющие элементы в первоначальные значения;

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

<input type=reset

value=”СБРОС”

>

Независимые переключатели (переключатели с независимой фиксацией)

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

Реализовать эго можно с помощью тега INPUT. Для этого необходимо в качестве значения атрибута type указать checkbox:

<input type= checkbox

name = имя

value=значение

[checked]

> Переключатель

Переключатель может быть по умолчанию либо включен, либо выключен. Чтобы переключатель был по умолчанию включен, необходимо для него указать атрибут checked.

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

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

if (isset(<имя>))

Зависимые переключатели (переключатели с зависимой фиксацией)

Задаются элементом INPUT и представляют собой переключатели «вкл\выкл». Если несколько зависимых переключателей имеют одинаковые имена» то они являются взаимоисключающими. Это значит, что если одна из них ставится в положение «вкл», то все остальные автоматически - в положение «выкл». Именно это и является преимуществом их использования.

<input type= radio

name = sex

value=man

[checked]

> Мужчина

<input type= radio

name = sex

value=frau

> Женщина

Меню

Реализуется с помощью элементов SELECT, и OPTION. Меню предоставляют пользователю список возможных вариантов выбора.

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

Атрибут name определяет имя параметра, который будет передан сценарию. Если атрибут size равен 1, то список будет выпадающим. В противном случае список будет занимать n строк и будет «оснащен» полосой прокрутки. Значение, выбранное в списке по умолчанию, можно указать с помощью атрибута selected для соответствующего тега option. В приведенном примере месяц по умолчанию - Май.

<select nane=monat size=1> <option value=01>Январь</option> <option value=02>Февраль</option> <option value=03>Mapт</option> <option value=04>Anpeль</option> <option vaiue=05 selected >Май</option> <option vaiue=06>Июнь</option> <option vaiue=07>Июль</option> <option vaIue=08>Август</option> <option value=09>Cентябрь</option> <option value=10>Октябрь</option> <option value=11>Ноябрь</option> <option value=12>Декабрь</option> / select>  
<select nane=monat size=5> <option value=01>Январь</option> <option value=02>Февраль</option> <option value=03>Mapт</option> <option value=04>Anpeль</option> <option vaiue=05 selected >Май</option> <option vaiue=06>Июнь</option> <option vaiue=07>Июль</option> <option vaIue=08>Август</option> <option value=09>Cентябрь</option> <option value=10>Октябрь</option> <option value=11>Ноябрь</option> <option value=12>Декабрь</option> / select>  

С помощью тега SELECT можно создавать и списки множественного выбора. В таких списках можно выбрать не одно, а сразу несколько значений. Чтобы сделать список с множественным выбором, необходимо для тега SELECT указать атрибут multiple.

Если пользователь выберет несколько вариантов сценарию будут переданы параметры в форме:

Имя=значение&имя=значение&имя=значение…

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

<select nane=monat[] size=5 multiple>

foreach ($monat as $key=>$value)

echo “$key = $value <br>”;

<select nane=monat[] size=5 multiple> <option value=01>Январь</option> <option value=02>Февраль</option> <option value=03>MapT</option> <option value=04>Anpeль</option> <option vaiue=05 selected >Май</option> <option vaiue=06>Июнь</option> <option vaiue=07>Июль</option> <option vaIue=08>Август</option> <option value=09>Cентябрь</option> <option value=10>Октябрь</option> <option value=11>Ноябрь</option> <option value=12>Декабрь</option> / select>

Ввод текста

Реализуется элементами INPUT, если вводится одна строка, и элементами TEXTAREA - если несколько строк. В обоих случаях введенный текст становится текущим значением управляющего элемента.

<input type=text

name=Odna_str

value=*.*

size=25

maxlen=30

>

Данный тег создает поле ввода с максимально допустимой длиной текста maxlen и размером в size знакомест. Если задаy атрибут value, то в поле будет изначально отображаться указанная строка. Эти атрибуты не обязательны. В атрибуте name задается имя поля ввода.

<textarea type=text name=имя параметра cols=20 rows=2 wrap=Virtual >Текст по умолчанию </textarea>   <textarea type=text name=имя параметра cols=20 rows=5 wrap=Physical >Текст по умолчанию </textarea> <textarea type=text name=имя параметра cols=20 rows=3 wrap=none >Текст по умолчанию </textarea>  

Параметры cols и rows необязательные, но ихжелательно указывать. Первый из них задает количество символов в строке, а второй — количество строк в области. Атрибут wrap определяет, как будет выглядеть текст в поле ввода:

Virtual — справа от текстового поля выводится полоска прокрутки

Вводимый пользователем текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши Enter.

Physical — этот тип зависит от браузера и в разных браузерах может вести себя по-разному.

None — текст выглядит в поле в том виде, в которой пользовател ь его вводит. Если текст не умещается в одну строку, появляется горизонтальная полоска прокрутки.

Ввод пароля

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

Не рекомендуется устанавливать значение value (значение по умолчанию) из соображений безопасности. Хотя в окне браузера данное значение не отображается, но при просмотре исходного HTML-кода, пароль будет виден.

<input type=password

name=имя_параметра

[value=значение]

[size=размер]

[maxlen=длина]

>

Выбор файлов

Позволяет вместе с формой отправлять выбранные файлы, реализуется HTML-элементом INPUT.

<input type=file

name=имя

[value=имя файла]

>

Скрытые управляющие элементы

Создаются управляющим элементом INPUT.



Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: