Формы

Формы предназначены для пересылки данных от пользователя к Web-серверу.

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

Формы создаются с помощью тега <form></form>, у него есть атрибуты, такие как action (позволяет прекрепить страницу, на которую будет отправляться информация с формы), method (определяет, как будут пересылаться данные от формы до Web-сервера. Он позволяет выбрать режимы post или get, есть еще soup, но он редко используется) и name (имя формы).

GET - данные формы пересылаются путем их добавления к URL-адресу после знака "?" в формате [имя пользователя]=[Значение параметра].

Пары параметр=значение отделяются друг от друга символом амперсанда ( & ). Например:

http://www.mysite.ru/file.php?pole1=login&pole2=Password

Все специальные символы, а также буквы, отличные от латинских (например, буквы русского языка), кодируются в формате %nn, а пробел заменяется знаком "+". Например, фраза "каталог сайтов" будет выглядеть следующим образом:

%EA%E)%E@%E)%EB%EE%E3+%F1%E0%E9%F2%EE%E2

Метод GET применяется, когда объем пересылаемых данных невелик, так как существует предел длины URL-адреса. Длина не может превышать 256 символов;

POST предназначен для перессылки данных большого объема, файлов и конфиденциальной информации (например, паролей).

enctype задает MIME-тип передаваемых данных. Может принимать два значения:

application/x-www-form-urlencoded - применяется по умолчанию:

<form action="http://www.mysite.ru/file.php" method="POST" enctype="application/x-www-form-urlencoded">

multipart/form-data - указывается при пересылке Web-серверу файлов:

<form action="http://www.mysite.ru/file.php" method="POST" enctype="multipart/form-data">

target указывает, куда будет помещен документ, являющийся результатом обработки данных формы Web-сервером. Параметр может содержать имя фрейма или одно из зарезервированных значений - _blank, _top, _self или _parent:

<form action="http://www.mysite.ru/file.php" method="POST" enctype="multipart/form-data" target="_blank">

<label></label> тег метка можно использовать для обозначения названий элементов формы, атрибут его for, этот атрибут позволяет имя элементы слепливаться, как бы…

Пример:

<label>Метка<input type=’text’></label>

Атрибут size позволяет увеличивать поле в размерах.

Maxlength максимальная длинна символово, которые мы можем вводить в поле.

Основной тег является <input>, он позволяет получать информацию от пользователя, его атрибуты type (тип ввода), name (имя переменной).

У type есть значение такие как:

Text – этот элемент выводит поле для ввода;

Password – поле ввода для пароля;

Radio – создает радио кнопки;

Радио кнопка, пишется так:

<input type=”radio” name=”sex” value=”men”>

Атрибут value отвечает за передачу информации, если эта радио кнопка будет активна то значение атрибута буде передаваться.

Так мы создали одну кнопку, но нам нужно как минимум две кнопки и главное чтобы они были связаны, как это сделать? А делается очень просто мы создаем такой же input, как на примере:

<input type=”radio” name=”sex” value=”women”>

Только меняем значение value и все, имя должно оставаться таким же.

Если вы хотите чтобы одна из кнопок была уже выбрана заранее, есть такой атрибут как checked переводится как отмеченный, просто пишем его в одном из input кнопки. Для версии html значение атрибута можно не указывать, а для xhtml оно обязательно пишется так checked=”checked”.

checkbox – флажок;

Можно выбрать сразу несколько, пример:

<input type=”checkbox” name=”ez”>

Атрибут value тут можно не вводить, так как мы так будем знать была нажата галочка или нет, для отображение сразу галочки, атрибут checked.

Кнопки. Существует 4 вида кнопок.

Button – кнопка:

<input type=”button” value=”кнопка” name=”but”>

Submit – кнопка, которая отправляет информацию формы;

Пишется она так:

<input type=”submit” name=”submit” value=”Отправить”>

Атрибут value тут служит для названия кнопки, т.е. на самой кнопке появится слово отправить. При нажатии кнопки мы обращаемся к обработчику формы, который уже обрабатывает наши данные, которые мы ввели, путь к обработчику пишется в теге form, атрибут action.

Reset – сбрасывает форму;

Кнопка очистки:

<input type=”reset” name=”reset” value=”Очистить”>

Кнопка картинка.

<input type=”image” src=”путь к картинке” name=”im”>

Эта кнопка работает так же как submit.

File – загрузить файл;

Hidden – не видимое поле. Скрытый элемент, значение которого отправляется вместе со всеми данными формы. Элемент не показывается пользователю, но позволяет хранить, например, данные из ппредыдущей формы (если пользователь последовательно заполняет несколько форм) или уникальное имя пользователя:

<input type="hidden">

Выпадающий список <select></select> и <option></option>.

С помощью тега <optgroup> можно объединить несколько пунктов в группу. Название группы указывает атрибут label:

<select name="select1">
	<optgroup label="Отечественные">
		<option value="1">ВАЗ</option>
		<option value="2">ГАЗ</option>
	</optgroup>
</select>

У него имеется атрибут name, size только тут этот атрибут задает значение сколько ячеек с данными будут визуально видимо для пользователя. По усолчанию мы можем выбрать только одно значение, но существует такой атрибут как multiple множественный выбор, которые позволят нам выбрать сразу несколько результатов. Как вы видите у нас по умолчанию активен первый элемент, но бывают ситуации, когда требуется чтобы был активен другой из списка – это делается с помощью атрибута selected. При отправке формы будет создан парметр с именем select, а значение его будет то поле, которое мы выбираем, но бывает такая ситуация, когда значение требуется другое, для этого служит атрибут value. Чтобы при нажатии названии фокус попадал на поле, нужно использовать for.

<textarea></textarea> отвечает за текстовое поле, атрибуты cols – это количества столбцов, rows – количество строк, так же есть атрибут name. Чтобы изначально поместить в текстовую область, что ни будь, например текст, размещаем его между тегами. Чтобы при нажатии названии фокус попадал на поле, нужно использовать for.

<fieldset></fieldset> - сбор полей, создает рамку. Чтобы озаглавить рамку нужно внутри этого тега написать еще один тег <legend></legend>

Пример:

<fieldset>
	<legend>Заголовок</legend>
	<p>Какая либо информация.</p>
</fieldset>

Блокировка

Для блокировки элементов формы существует такой атрибут как disabled.

Только для чтения, служит readonly.