Для чего нужны формы и как они действуют
Форма это то, с помощью чего пользователь передаёт данные, или какую либо информацию на сервер, где она перерабатывается должным образом. Формы бывают разные на вид. Вот так выглядит форма аккаунта в гугле и форма входа на почтовый ящик на mail.ru
Принцип работы формы не сложен. Пользователь приходит на страничку, заполняет поля формы, нажимает определённую кнопку. После этого форма берёт данные из полей и отправляет их в назначенное место (на сервер). Формы размещаются между тегами
<FORM> </FORM>
Html-документ может хранить в себе несколько форм, но они не должны находится друг в друге, то есть вот такая запись <form> <form></form></form> не функционирует.
Тэг <form>может иметь вот такие параметры (атрибуты) :
| action | без этого атрибута форма работать не будет, так как он определяет какой файл будет обрабатывать данные, переданные формой. |
| method | определяет каким образом данные будут передаваться файлу обработчику. Возможны 3 варианта передачи, но я опишу 2 основных, method=post или method=get. Если метод не обозначен, то по умолчанию берётся get. Что лучше использовать get или post? Спросите вы. Для передачи паролей и логинов конечно целесообразней использовать post, потому что метод get передаёт данные из формы прикрепляя их к URL и это выглядит так: http://www.domen-name.ru/login.pl?nick=sashik&psw=4y4hgght Часть ссылки до знака ? это сам URL, а после это часть запроса. В части запроса есть переменная nick которая содержит логин (sashik) и переменная psw в ней содержится сам пароль(4y4gght). Кроме того, если использовать метод get, аргументы передаваемые серверу запишутся в файл отчёт на сервере, а это не желательно с точки зрения безопасности. |
| enctype | определяет каким образом передаваемые данные будут закодированы. Если ваша форма содержит файловое поле, используйте метод POST. В этом случае нужно установить значение атрибута enctype в multipart/form-data. |
***
Для внесения информации в форму используют тэг <INPUT>Это поле для введения информации и в форме их может быть несколько. Каждый элемент <INPUT> должен иметь атрибут name=имя, определяющий имя данного поля (идентификатор). Так же нужен атрибут type. Он определяет вид поля для введения. А вот какие могут быть значения у атрибута type:
| type=text | Определяет окно для ввода текста. Может содержать дополнительные атрибуты size=цифра(ширина окна ввода в символах) и maxlength=цифра(максимальная число вводимых символов) <input type=text size=20 name=user value="создать самому"> |
| type=password | Аналогичен предыдущему, с той лишь разницей что в окошке при вводе текста будут высвечиваться звёздочки. |
| type=radio | Определяет радиокнопку. Может содержать атрибут checked , который показывает что кнопка отмечена. Из группы таких кнопок отмеченной может быть только одна.
Да Нет Может быть |
| type=checkbox | Аналог предыдущему с тем различием, что вместо кружочка будет квадратик и из несколькои можно будет отметить галочкой все.
Бюстгалтеры Трусы семейные Партянки |
| type=hidden | Определяет пустое окно. Полезен если нужно просто передать какое либо значение. |
| type=submit | Определяет кнопку при нажатии на которую начинается передача данных.
<input type=submit value="войти"> |
| type=reset | При нажатии очищаются все поля формы.
<input type=reset value="сброс" > |
***
Тег <TEXTAREA> создаёт многострочное текстовое поле.Типа такого-
Может иметь такие атрибуты:
| name | имя, под которым содержимое будет передано обработчику. |
| rows | устанавливает высоту. |
| cols | устанавливает ширину. |
***
Тег <SELECT> используется в форме для создания списка, в котором пользователь может сделать свой выбор.
Тег <OPTION> определяет элемент выбора в форме. Атрибур selected означает выбранный элемент. Используется вместе с предидущим.
| Код | Вид |
| <select name="имя">
<option value="option_1" selected>выбор1 <option value="option_2">выбор2 <option value="option_3">выбор3 </select> | |
| Если в первой строчке, добавить атрибут multiple, то в окошке с меню будут видны все пункты |
***
Элемент <BUTTON> позволяет создать кнопку, способную выполнить действие, определённое своими атрибутами. Кроме того, этот тег позволяет вывести графическое изображение. Этот элемент может быть использован как в теле формы, так и за её пределами.
***
Элемент <FIELDSET> используется для тематической группировки элементов управления.
***
Элемент <HTMLAREA> создаёт многострочное текстовое поле, допускающее ввод информации. Этот тег аналогичен тегу <TEXTAREA>. Основное отличие тега <HTMLAREA> состоит в том, что он был разработан для ввода текста в формате HTML.
***
Элемент <LABEL> ассоциирует какую-то информацию с элементом управления, т.е. поясняет какую роль он выполняет.
***
Тег <LEGEND> позволяет вставить легенду (пояснительный видимый текст) в элемент <FIELDSET>.
***
Тег <OPTGROUP> используется для логической группировки элементов выбора в форме.