Всем привет!
В этом уроке речь пойдет о тегах html форм.
Формы HTML — это те поля, куда мы, например, вводим свои данные при регистрации на каком — либо сайте, форуме и т.д.
Предложу начать с примера, потом подробно его разберем и рассмотрим виды форм.
И так, начнем.
|
1 2 3 4 5 |
<form action="" method="get"> <input type="text" name="t1" maxlength="25" size="40" /> <input type="text" name="t2" maxlength="25" size="40" /> <input type="button" name="but" value="отправить данные" /> </form> |
Все формы начинаются с тега <form> и заканчиваются тегом </form>.
Далее, параметр action в теге указывает на адрес программы (скрипта), которая будет обрабатывать данные из нашей формы.
Параметр method указывает на способ передачи данных.
Есть два способа: GET и POST. GET:при передачи этим способом, данные добавятся в конец адрес сайта (URL), и мы их увидим в адресной строке.
Если будем передавать методом POST, то данные будут переданы скрыто от пользователя.
Тег <input> определяет как раз саму форму. Рассмотрим параметры тега <input>:
CHECKED — означает, что CHECKBOX или RADIOBUTTON будет выбран.
MAXLENGTH — определяет количество символов, которое пользователи могут ввести в поле ввода.
NAME — имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.
SIZE — определяет визуальный размер поля ввода на экране в символах.
VALUE — присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен)
TYPE — определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Поскольку параметр type определяет тип формы, то рассмотрим подробно его значения.
СНЕСKBOX — используется для выбора пользователем нескольких значений из предложенных.
Пример использования:
|
1 2 3 4 5 6 |
<form action="" method="get"> <input type="checkbox" name="ch1" checked="checked"/>Вариант 1 <input type="checkbox" name="ch2"/>Вариант 2 <input type="checkbox" name="ch3"/>Вариант 3 <input type="checkbox" name="ch4"/>Вариант 4 </form> |
RADIO — то же что и checkbox, но пользователь может выбрать только одно значение.
Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME.
Пример использования:
|
1 2 3 4 5 6 |
<form action="" "method="get"> <input type="radio" value="v1" name="ch1"/>Вариант 1 <input type="radio" value="v2" name="ch2"/>Вариант 2 <input type="radio" value="v3" name="ch3" checked="checked"/>Вариант 3 <input type="radio" value="v4" name="ch4"/>Вариант 4 </form> |
PASSWORD — то же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране (отображаются звездочки вместо символов).
RESET — данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
SUBMIT — данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы (action).
Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
TEXT — данный тип поля ввода описывает однострочное поле ввода. Это как раз те поля, которые используются для регистрации, ввода логина и пароля. Этот тип поля наиболее часто встречающийся.
SELECT — тег SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.
Тег SELECT имеет один или более параметр между стартовым тегом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора.
Пример использования:
|
1 2 3 4 5 6 7 8 |
<form action="" method="get"> <select name="n"> <option>Вариант 1</option> <option>Вариант 2</option> <option>Вариант 3</option> <option>Вариант 4</option> </select> </form> |
TEXTAREA — Тег (Обращаю внимание! Это именно тег, а не значение параметра type) используется для того, чтобы позволить пользователю вводить свободный текст.
Пример использования:
|
1 2 3 4 |
<form action="" method="get"> <textarea name="namm" rows="4" cols="30"> </textarea> </form> |
NAME — имя поля ввода
ROWS — высота поля ввода в символах
COLS — ширина поля ввода в символах
На этом выпуск посвященный HTML-тегам формы, завершим, если возникли вопросы, пишите.
Просьба присылать с вопросом ваш код того, что вы делаете.
Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ, и вам меньше объяснять в письме, что у вас не выходит.
Всегда Ваш, Андрей Бернацкий.
Комментарии (11)