Создание форм в HTML

Формы дают возможность пользователям вводить информацию. Здесь следует заметить, что html–формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это всe–таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.

В HTML форма задается тегами < FORM> < /FORM>. Все остальные элементы формы располагаются между этими тегами.

У тега < FORM > есть несколько параметров:

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

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

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

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

Текстовое поле:

< INPUT> – простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Параметры текстового поля:

name – имя элемента,

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

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

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

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

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

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

Пример: < html> < head> < title> < /title> < /head> < body>   < form name=" form2" > < input type=" text" name=" text2" size=" 20" maxlength=" 50" value=" Форма" > < /form>   < /body> < /html> Результат:

Текстовое поле для ввода пароля:

Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра – type=" password"

 

Пример: < html> < head> < title> < /title> < /head> < body>   < form name=" form2" > Введите пароль: < br> < input type=" password" name=" text2" size=" 20" maxlength=" 50" > < /form>   < /body> < /html> Результат:

 

Флажки:

< INPUT> – задается все тем же тегом, причем один тег задает один флажок. Нужно четыре флажка, придется четыре раза писать input.

 

Параметры:

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

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

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

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

Пример: < html> < head> < title> < /title> < /head> < body> < form name=" form2" > Сколько вам лет: < br> < input type=" checkbox" name=" age1" value=" 18" checked> 18 лет < input type=" checkbox" name=" age2" value=" 19 " > 19 лет < input type=" checkbox" name=" age3" value=" 20 " > 20 лет < input type=" checkbox" name=" age4" value=" 21 " > 21 год < /form> < /body> < /html> Результат:

Переключатели:

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

Пример: < html> < head> < title> < /title> < /head> < body> < form name=" form2" > Укажите ваш пол: < br> < input type=" radio" name=" sex" value=" man" checked> мужской < input type=" radio" name=" sex" value=" woman" > женский < /form> < /body> < /html> Результат:

Кнопки:

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

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

Ее параметры:

type=" submit" – тип кнопки

name – имя кнопки

value – надпись на кнопке

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

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

name – имя кнопки

src – адрес картинки для кнопки

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

type=" reset" – тип кнопки очищения

name – имя кнопки

value – надпись на кнопке

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

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

name – имя кнопки

value – надпись на кнопке

onclick – указывает, что делать при щелчке по кнопке