Формы в html
Форма - это инструмент для отправки куда-либо (на сервер) введённой информации с компьютера пользователя.
Форма начинается с тега <form> и заканчивается закрывающим тегом </form>. Тег <form> может включать в себя следующие атрибуты:
- action. Указывает тот URL-адрес, куда будут отправлены данные, переданные из формы. По URL-адресу обычно находится программа, которая обрабатывает данные. Также вместо URL можно указать электронный адрес, например:
action="mailto:123@mail.ru"
В этом случае, данные из формы отправятся на электронный адрес 123@mail.ru. - enctype. Используется для указания метода кодирования данных, передаваемых на сервер. Может иметь 3 значения:
- text/plain. Используется для передачи данных по электронной почте.
- multipart/form-data. Используется для передачи файлов на сервер со своего компьютера.
- enctype="application/x-www-form-urlencoded. Применяется во всех остальных случаях. Является методом кодирования по умолчанию.
- method. Определяет метод передачи введённой информации. Может иметь 2 значения:
- get. Является значением по умолчанию. Передаваемые этим методом данные будут передаваться через графу URL-адреса и будут видимыми для глаз человека, который находится в момент передачи рядом с монитором. Информация находится вместе с адресом в одной графе и отделяется от него знаком "?". Используется для небольших объёмов информации.
- post. Этим методом обычно передаются большие объёмы информации. Данные не выводятся в адресную строку браузера, как в предыдущем случае.
- name. Имя формы. Не является обязательным атрибутом.
После тега <form> обычно следуют различные элементы пользовательского интерфейса. Практически все они начинаются с тега <input>. С его помощью создаются кнопки, поля ввода данных и различные переключатели. Тег <input> содержит обязательный атрибут <type>, с помощью которого задаётся тип элемента. Также этот тег может содержать другие атрибуты, но рассмотрим всё на примере:
<html>
<head>
<title>Пример формы</title>
</head>
<body bgcolor=teal>
<H2>Форма для написания небольшого ознакомительного письма (личные данные у нас не сохраняются).</H2>
<form action="test.php" method=post>
Здравствуйте, меня зовут<br>
<input type=text value='Энди' size=25 name=name><br><br>
<input type=checkbox value='не' checked name=fleg> А это флажок в виде маленького квадратика<br><br>
Я веду<br>
<select name=life>
<option value='активный' selected>активный</option>
<option value='тупой'>тупой</option>
<option value='весёлый'>весёлый</option>
<option value='приятный'>приятный</option>
<option value='ленивый'>ленивый</option>
</select>
образ жизни.<br><br>
Также я зареген в контакте, вот кстати мой пароль
<input type=password name=parol><br><br>
Расскажу немного о себе<br>
<textarea name=about cols=30 rows=10 wrap=virtual></textarea><br><br>
<input type=file name=filename> Если набрать такой элемент формы, то с домашнего компьютера пользователи смогут загружать файлы на сервер<br><br>
<fieldset>
<legend>Я люблю музыку в стиле</legend>
<input type=radio value='гранж' name=music>гранж<br>
<input type=radio value='рэп' name=music>рэп<br>
<input type=radio value='рок' name=music>рок<br>
<input type=radio value='хаус' name=music>хаус<br>
<input type=radio value='транс' name=music>транс<br>
<input type=radio value='альтернатива' name=music>альтернатива<br>
</fieldset><br><br>
<input type=submit value='Отправить'>
<input type=reset value='Отменить'><br><br>
<input type=image src=Bufori.jpg><br><br>
Если нажать на машинку, то письмо отправится тоже.
</form>
</body>
</html>
Результат выполнения, расположенного выше html-файла смотри здесь. Соответственно, та веб-страница, на которой много элементов формы, есть результат выполнения нашего текста, а следующая страница (появляющаяся после оправки формы) - это результат простенького сценария, написанного на php. Далее дадим комментарии к находящемуся выше примеру:
- <form action="test.php" method=post>. Как вы уже догадываетесь, с этой строчки начинается сама форма. Запись action="test.php" обозначает, что данные из формы передадутся программе test.php. Затем она (программа) эти данные обработает и выдаст результат в виде веб-страницы. Данные будут переданы методом post, это видно из записи method=post.
- <input type=text value='Энди' size=25 name=name>. С тега <input> начинаются практически все элементы формы и этот элемент не является исключением. С помощью атрибута type определяется тип формы. type=text обозначает, что этот элемент формы будет текстовым полем для ввода данных (высота поля равна одной строке). Атрибут value задаёт надпись, которая будет находиться в текстовом поле по умолчанию (вместо неё можно написать свою). Атрибут size определяет длину поля (в нашем случае 25 символов). С помощью атрибута name задаётся имя или название элемента формы. Значения атрибутов type и name здесь указываются без кавычек, так как содержат всего одно слово на английском языке. Если бы слова было два, то значения этих элементов были бы указаны в кавычках. Значение атрибута value указывается в кавычках, так как там находится слово на русском языке, хоть и одно.
- <input type=checkbox value='не' checked name=fleg>. type=checkbox обозначает тип формы - флажок в виде маленького квадратика. value='не' - если флажок помечен галочкой, то результатом этого будет слово не, если галочка отсутствует, то значение этого элемента будет пустым. Атрибут checked указывает на то, что флажок помечен галочкой.
- <select name=life>
<option value='активный' selected>активный</option>
<option value='тупой'>тупой</option>
<option value='весёлый'>весёлый</option>
<option value='приятный'>приятный</option>
<option value='ленивый'>ленивый</option>
</select>
Во-первых, этот элемент формы не начинается с тега <input>.<select name=life> создаёт открывающийся список c названием life. Для тега <select> существуют дополнительные атрибуты.- align=left|right|center. Выравнивание элемента по левому краю|центру|правому краю.
- multiple. Позволяет из списка выбрать несколько элементов.
- size. Задаёт количество видимых элементов списка, до нажатия на стрелочку, по умолчанию size=1.
- <input type=password name=parol>. Здесь создаётся текстовое поле для ввода пароля. Текст, набранный на клавиатуре, будет отображаться в виде точек.
- <textarea name=about cols=30 rows=10 wrap=virtual></textarea>. Тег <textarea> задаёт большое текстовое поле для ввода информации. Атрибут cols задаёт ширину текстового поля (измеряется в количестве символов одной строки), а rows задаёт высоту поля (количество строк). С помощью элемента wrap устанавливается пренос элементов на следующую строку. Ниже запишем значения для атрибута wrap.
- wrap=virtual. Указывает, что текст в поле формы будет автоматически переноситься на другую строку при печатании с клавиатуры, однако, данные из формы передадуться программе-обработчику или по электронной почте в виде одной большой строки (без переносов).
- wrap=physical. Текст будет переноситься на другую строку не только в поле формы при наборе его с клавиатуры, но и придёт на удалённый сервер в том же виде.
- wrap=off. Текст не будет автоматически переноситься на следующую строку формы (будет переносится только в том случае, если пользователь будет сам его переносить нажатием клавиши ENTER). Также текст отправиться на сервер в том виде, в каком был набран с клавиатуры (со всеми пробелами и переносами строки).
- <input type=file name=filename>. Таким образом задаётся форма для загрузки данных на сервер.
- <fieldset>...</fieldset>. Всё, что находится между этими тегами, обводится в рамку (ипользуется только для форм!!!).
- <legend>...</legend>. Всё, что находится между этими тегами, является заголовком рамки.
- <input type=radio value='гранж' name=music>гранж<br>
<input type=radio value='рэп' name=music>рэп<br>
<input type=radio value='рок' name=music>рок<br>
<input type=radio value='хаус' name=music>хаус<br>
<input type=radio value='транс' name=music>транс<br>
<input type=radio value='альтернатива' name=music>альтернатива<br>
Это группа радиокнопок. У всех этих радиокнопок одинаковое имя (название). Это означает, что из всех вариантов радиокнопок можно выбрать только одну, значение (value) которой будет передано на указанный URL-адрес. Как и в элементе формы checkbox, здесь тоже можно указать атрибут checked. - <input type=submit value='Отправить'>. Этот элемент создаёт кнопку для отправки данных. В атрибуте value указывается то, что будет написано на самой кнопке.
- <input type=reset value='Отменить'>. Этот элемент формы создаёт кнопку для отмены отправки данных на сервер и удаления всей написанной пользователем информации в форме.
- <input type=image src=Bufori.jpg>. Создаётся кнопка для отправки данных в виде рисунка, где src - путь к рисунку.
- </form>. Этим тегом форма закрывается.
2011 год.