Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






HTML. Работа с формами






 

1. Форма – это элемент HTML, позволяющий передавать информацию на web-сервер, где информация будет обработана. С помощью форм организуются тесты, голосования, опросы. Заметим, что html-формы сами по себе позволяют только организовывать ввод информацию. Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.

Форма задается тегами < form> < /form>. Все остальные элементы формы располагаются между этими тегами. Тег < form> может иметь несколько параметров:

· name - имя формы. Необходимо, если на странице несколько форм.

· action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем.

· method - определяет способ отправки информации.

· target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.

2. Рассмотрим элементы, располагающиеся в форме. Начнем с текстового поля. Оно задается тегом < input>. Пример использования.

Исходный код Вид в браузере
< form name=" forma1" > < input type=" text" name=" t1" size=" 20" maxlength=" 50" value=" Введите текст" > < /form> Начало формы   Конец формы

Параметры тестового поля:

· name - имя элемента,

· type - тип элемента (в данном случае - text),

· size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,

· maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,

· value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.

· disabled - блокирует поле от любых изменений,

· readonly - делает поле доступным только для чтения.

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

Исходный код Вид в браузере
< form name=" forma1" > < input type=" text" name=" text1" size=" 20" maxlength=" 50" value=" неактивное поле" disabled> < input type=" text" name=" text1" size=" 20" maxlength=" 50" value=" только для чтения" readonly> < /form> Начало формы   Конец формы

3. Текстовое поле для ввода пароля. Представляет собой текстовое поле с тем отличием, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Используется при вводе паролей. От текстового поля отличается только параметром type=" password".

Пример.

Исходный код Вид в браузере
< form name=" forma1" > Введите пароль: < br> < input type=" password" name=" text1" size=" 20" maxlength=" 50" > < /form> Начало формы Введите пароль: Конец формы

3. Флажки. Начнем с примера.

Начало формы

Ваши любимые предметы:
Математика Литература Физическая культура

Конец формы

Флажки задаются тегом < input>, причем один тег задает один флажок. Поэтому чтобы задать три флажка, надо три раза писать input. Для задания указанного выбора необходимо задать следующий код. < form name=" forma1" >
Ваши любимые предметы: < br>
< input type=" checkbox" checked> Математика
< input type=" checkbox" > Литература
< input type=" checkbox" > Физическая культура
< /form>

Рассмотрим параметры тега < input>:

· type - тип элемента (в данном случае - checkbox),

· name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,

· value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь,

· checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

4. Переключатели. В отличии от флажков, здесь можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type=" radio", все остальные такие же, как у флажков.

Пример.

< form name=" forma1" > Укажите ваш пол: < br> < input type=" radio" name=" sex" value=" man" checked> мужской < input type=" radio" name=" sex" value=" woman" > женский < /form> Результат Начало формы Укажите ваш пол: мужской женский Конец формы

5. Кнопки. Существует четыре типа кнопок:

· submit - кнопка отправки содержимого формы web-серверу. Ее параметры:

· type=" submit" - тип кнопки,

· name - имя кнопки,

· value - надпись на кнопке.

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

· type=" image" - тип графической кнопки,

· name - имя кнопки,

· src - адрес картинки для кнопки.

· reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:

· type=" reset" - тип кнопки очищения,

· name - имя кнопки,

· value - надпись на кнопке.

· button - произвольная кнопка, ее действия назначаются вами с использованием языков программирования, т.е. сама она делать ничего не умеет. Ее параметры:

· type=" button" - тип произвольной кнопки,

· name - имя кнопки,

· value - надпись на кнопке.

· onclick - обработчик события - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

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

< form name=" forma1" > < input type=" submit" name=" submit" value=" Отправить" > < input type=" image" name=" button_img" src=" button.gif" > < input type=" reset" name=" reset" value=" Очистить" > < input type=" button" name=" button" value=" Отправить" > < /form> Результат Начало формы   Конец формы

Кнопки можно задавать и при помощи тегов < button> < /button>. Возможности у таких кнопок несколько, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

· type - тип кнопки, может принимать значения:

· reset - кнопка очистки формы,

· submit - кнопка отправки данных,

· button - кнопка произвольного действия.

· name - имя кнопки,

· value - надпись на кнопке.


Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.009 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал