Переключатели или радиокнопки

⇐ ПредыдущаяСтр 5 из 36Следующая ⇒

Значение type=" radio" определяет радиокнопку или переключатель. Если в группе таких элементов несколько, они являются взаимоисключающими, то есть если выбрать одну радиокнопку, то все остальные становятся неактивными. Чтобы несколько переключателей образовывали группу, они должны иметь общее имя. При отправке данных формы пересылается только значение включенного переключателя. Атрибут checked укажет, что данный элемент будет выбран по умолчанию при загрузке страницы.

Пример.

< р> Какую из приведенных операционных систем вы используете? < /р>

< input type=" radio" name=" os" value=" Windows" /> Windows

< input type=" radio" name=" os" value=" Linux" /> Linux

< input type=" radio" name=" os" value=" Macintosh" checked=" checked" /> Macintosh

Кнопки

· Значение type=" submit" определяет кнопку отправки, которая используется для отправки данных формы агенту, выполняющему обработку. При нажатии кнопки отправки данные формы немедленно отсылаются на сервер для обработки.Атрибут value=" текст" служит для задания надписи на кнопке.

Пример.

< input type=" submit" value=" Send" />

· Значение type=" reset" определяет кнопку сброса. Кнопка reset (сброс) восстанавливает исходные значения для всех элементов управления формы или задает для них значения по умолчанию. Можно изменить надпись на кнопке, добавив свой собственный текст в атрибут value.

Пример.

< input type=" reset" value=" Restart" />

· Можно создать настраиваемую кнопку для управления клиентскими скриптами (JavaScript), для чего нужно задать для элемента input тип button (input type = " button" ). Такая кнопка не имеет заранее заданной функции, действие для нее можно настраивать при помощи языка скриптов.

Пример.

< input type=" button" value=" Push Me! " />

· Можно использовать для кнопки отправки формы свое изображение, для этого используют значение type = " image". Щелчок мышью по изображению отправляет данные формы на сервер, добавляя к ним координаты курсора мыши. Для графических кнопок рекомендуется также использовать альтернативный текст (при помощи атрибута alt).Адрес изображения следует задавать с помощью атрибута src.

Для такой кнопки можно применять атрибуты height и width, определяющие, соответственно, определяет высоту и ширину элемента в пикселях.

Пример.

< input type=" image" src=" graphics/sendme.gif" alt=" Send me" width=" 100" height=" 100" >

Если кнопка имеет типtype=" submit" или type=" image", то в ней можно использовать следующие атрибуты:

formaction - указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction переопределяет атрибут action элемента < form>.

formenctype – определяет, каким способом будут кодироваться данные формы при их отправке на сервер. Может использоваться только совместно с атрибутом method=" post" элемента < form>. Возможные значения:

· application/x-www-form-urlencoded - значение по умолчанию: все символы кодируются перед отправкой - пробелы преобразуются в символ " + ", а специальные символы в значения ASCII.

· multipart/form-data - символы не кодируются. Используется для элементов < input>, у которых в атрибуте type установлено значение " file".

· text/plain - пробелы преобразуются в символ " +", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.

Атрибут formenctype переопределяет атрибут enctype элемента < form>.

formmethod - определяет http метод для отправки данных на указанный URL.

· get - данные формы добавляются в конце URL-адреса: URL-адрес? имя=значение? имя=значение (значение по умолчанию).

· post - отправляет данные формы, как HTTP после транзакции.

Атрибут formmethod переопределяет атрибут method элемента < form>.

formtarget - определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы:

· _blank - открывает документ в новом окне или вкладке.

· _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).

· _parent - открывает документ в родительском фрейме.

· _top - открывает документ во всю ширину окна.

· имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.

Атрибут formtarget переопределяет атрибут target элемента < form>.

Выбор файла

Значение type=" file" позволяет пользователям отправлять внешние файлы при отправке формы. Этот элемент включает текстовое поле и кнопку Browse (Обзор), которая позволяет выбирать файлы на локальном компьютере. При использовании элемента input типа file нужно указать атрибут enctype=" multipart/form-data" в элементе form.

Пример:

< form enctype=" multipart/form-data" >

< p> Send this file with my form information: < /p>

< input type=" file" size=" 28" />

< /form>

Для поля выбора файла могут использоваться атрибуты:

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

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

· audio/* - принимаются все звуковые файлы.

· video/* - принимаются все видео файлы.

· image/* - принимаются все файлы изображений.

· MIME_тип - принимается допустимый MIME-тип без параметров.

Пример:

< form action=" demo_form.php" >

< input type=" file" name=" pic" accept=" image/*" multiple> < /form>

Выбор цвета

Если необходимо отобразить диалоговое окно выбора цвета (см. рис. 10), код будет выглядеть следующим образом:

< input type=" color" name=" my_color" >

Рисунок 10 - Пример применения элемента формы color

Календарь и время

Если нужно отобразить диалоговое окно календаря (см. рис. 11), используют значение type=" date".

< input type=" date" name=" new_day" >

Рисунок 11 - Применение элемента формы date

Если нужно отобразить календарь с локальным временем (рис. 12), используют type=" datetime-local"

< input type=" datetime-local" name=" local_time" >

Рисунок 12 - Применение элемента формы datetime-local

Если нужно задать значение времени (рис. 13), удобно использовать элемент input со значением type=" time":

< input type=" time" name=" local_time" >

Рисунок 13 - Применение элемента формы time

Поля с проверкой

Для создания поля с проверкой адреса электронной почты (рис. 14), можно задать тип поля " email". Атрибут multiple указывает, что пользователь может ввести более одного значения.

< input type=" email" name=" my_e_mail" multiple >

Рисунок 14 - Применение элемента формы email

Для проверки URL-адреса используется тип " url", как показано на рисунке 15:

< input type=" url" name=" site_name" >

Рисунок 15 - Применение элемента формы url

Если нужно отобразить поле для ввода чисел в заданном диапазоне, используйте тип " number" (рис. 16). Для ограничения значений задаваемых полем чисел используются атрибуты min и max.

< input type=" number" name=" quantity" min=" 1" max=" 5" >

Рисунок 16 - Применение элемента формы number

Ползунок

Для отображения ползунка, используется тип " range" (см. рис. 17). Кроме задания диапазона значений с помощью атрибутов min и max, можно также задать шаг атрибутом " step":

< input type=" range" min=" 0" max=" 10" step=" 2" value=" 6" >

Рисунок 17 - Применение элемента формы range

⇐ Предыдущая 1 2 3 456 7 8 9 10 Следующая ⇒