Работа с формами
Форма (англ. form) в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Синтаксически форма в HTML задаётся с помощью элемента form
Тег form парный: обязательно наличие открывающего и закрывающего тегов. Внутри тега form можно располагаться поля для ввода текста, кнопки, ссылки и другие элементы.
У тега form есть несколько параметров:
- name - атрибут, который содержит название формы. Желательно указывать всегда, так как при добавлении ещё одной формы на страницу обработчик может некорректно сработать. Его обязательно следует указать, если в HTML документе присутствуют несколько форм.
- method - это атрибут, который отвечает за метод отправки формы к обработчику. Используется два метода передачи данных - GET и POST, в форме же обычно используют второй метод.
- action - это атрибут, указывающий на месторасположение и название обрабатываемого форму скрипта. То есть в форме указывается путь и название файла, который обработает полученные данные. Если значение не будет указано или будет указан символ #, то обработчиком будет служить эта же страница с формой.
- enctype - в данном атрибуте указывается способ кодирования данных при их отправке на сервер после файла-обработчика. Как правило, данный атрибут корректно работает и по умолчанию, но если же нужно загрузить файлы, например, изображения, то необходимо в качестве значения атрибута указать multipart/form-data. В таком случае данные не будут кодироваться.
Начнём с создания Текстового поля :
<form name="vashaforma"> <input type="text" name="text1" size="20" maxlength="50" value="Введите ваше ФИО"> </form>
Продолжим создание Текстовое поле для ввода пароля :
<form name="vashaforma"> <input type= "password" name="text1" size="20" maxlength="50" > <input type="text" name="text1" size="20" maxlength="50" value="введите ваш пароль" readonly> </form>
Рассмотрим создание Флажков:
<form name="vashaforma"> На факультете математики и информатики 3 направления подготовки , к какому из направлений вы принадлежите? <br> <input type="checkbox" name="lan1" value="m" checked>математика <input type="checkbox" name="lan2" value="pm"> прикладная математика <input type="checkbox" name="lan3" value="pmi"> прикладная математика и информатика </form>
Создание Переключателей:
<form name="vashaforma"> Вы математик :<br> <input type="radio" name="sex" value="man" checked>Да <input type="radio" name="sex" value="woman"> Нет </form>
Создание Кнопок :
Существует четыре вида кнопок:
submit - кнопка отправки содержимого формы web-серверу.
image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки.
reset - кнопка, позволяющая восстановить все значения по умолчанию в форме.
button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет.
onclick - указывает, что делать при щелчке по кнопке.
Если на форме несколько кнопок, то они должны иметь разные названия.
Пример :
<form name="vashaforma"> <input type="submit" name="submit" value="Отправить"> <input type="reset" name="reset" value="Очистить"> <input type="button" name="button" value="Отправить"> </form>
Поле для файлов
Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.
Пример:
Раскрывающиеся списки
Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задются и те, и другие с помощью двойного тега select, внутри которых располагаются элементы значений, заданных тегом option.
<form name="forma1"> В каком году вы поступили на наш факультет: <select name="language" size="1"> <option selected value="2000">2000 <option value="2001">2001 <option value="2002">2002 <option value="2003">2003 <option value="2004">2004 <option value="2005">2005 <option value="2006">2006 <option value="2007">2007 <option value="2008">2008 <option value="2009">2009 <option value="2010">2010 <option value="2011">2011 <option value="2012">2012 <option value="2013">2013 <option value="2014">2014 <option value="2015">2015 <option value="2016">2016 </select><br><br> На какое направление подготовки :<br> <select name="time" size="3"> <option selected value="1"> математика <option value="2">прикладная математика <option value="3">прикладная математика и информатика </select><br><br> </form>
Обобщив наши знания мы можем создать форму студента ФМиИ :
<html> <head> <title>Заголовок документа</title> </head> <body> <form name="forma1"> <table border="0" cellspacing="5" cellpadding="5"> <caption>Форма регистрации студента ФМиИ</caption> <tr> <td align="right" valign="top">Имя</td> <td><input type="text" name="name" size="25"></td> </tr> <tr> <td align="right" valign="top">Фамилия</td> <td><input type="text" name="name" size="25"></td> </tr> <tr> <td align="right" valign="top">e-mail</td> <td><input type="text" name="e-mail" size="25"></td> </tr> <tr><input type= "password" name="text1" size="20" maxlength="50" > </tr> <tr><input type="text" name="text1" size="20" maxlength="50" value="введите ваш пароль" readonly> </tr> </tr> Вы математик : <input type="radio" name="sex" value="man" checked>Да <input type="radio" name="sex" value="woman"> Нет </tr> <tr> В каком году вы поступили на наш факультет: <select name="language" size="1"> <option selected value="2000">2000 <option value="2001">2001 <option value="2002">2002 <option value="2003">2003 <option value="2004">2004 <option value="2005">2005 <option value="2006">2006 <option value="2007">2007 <option value="2008">2008 <option value="2009">2009 <option value="2010">2010 <option value="2011">2011 <option value="2012">2012 <option value="2013">2013 <option value="2014">2014 <option value="2015">2015 <option value="2016">2016 </select><br><br> На какое направление подготовки :<br> <select name="time" size="3"> <option selected value="1"> математика <option value="2">прикладная математика <option value="3">прикладная математика и информатика </select><br><br> </tr> <tr> <td align="right" valign="top">Ваши впечатления об обучении на Матфаке </td> <td> <textarea cols="30" rows="3" wrap="physical"> </textarea> </td> </tr> <tr> <td align="right" colspan="2"> <input type="submit" name="submit" value="Отправить"> <input type="reset" name="reset" value="Очистить"> </td> </tr> </table> </form> </body> </html>
Спасибо за просмотр урока !!!!