Работа с формами

Опубликовано вт, 05/09/2017 - 22:43 пользователем Балицкая Анастасия
Лекция: 
Использование HTML для верстки веб-страниц

Форма (англ. 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>

На факультете математики и информатики 3 направления подготовки , к какому из направлений вы принадлежите?

математика
прикладная математика
прикладная математика и информатика

Создание Переключателей:

<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 (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.
Пример:

<form name="vashaforma">
<input type="file" name="load" size="50"></form>

Раскрывающиеся списки
Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задются и те, и другие с помощью двойного тега 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>


Вы математик :
Да
Нет

В каком году вы поступили на наш факультет:



На какое направление подготовки :




Форма регистрации студента ФМиИ
Имя
Фамилия
e-mail
Ваши впечатления об обучении на Матфаке

Спасибо за просмотр урока !!!!