Формы в HTML

Формы в HTML. Формы являются неотъемлемой частью любого веб сайта. С помощью форм осуществляется процесс регистрации, авторизации на сайте, и не только. Формы позволяют осуществлять процесс обмена данными между пользователем (посетителем) веб ресурса и самим ресурсом.

Примерами использования форм на сайте являются формы входа/регистрации, поиска по сайту, отправки сообщения, опросы.

Формы в HTML могут состоять из текстовых полей, текстовых областей, флажков, переключателей, раскрывающихся списков и кнопок. Все это — элементы формы. Каждый из элементов служит для передачи какого либо значения ресурсу.

Тег FORM

Для создания формы на странице используется парный тег <FORM>. Все что находится внутри данного тега будет являться формой. Но находиться в данном теге могут не только теги определяющие элементы формы, в нем так же могут присутствовать любые другие теги, которые не будут передавать информацию сайту, они будут использоваться исключительно для придания форме нужного дизайна.

Пример создания формы

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Первая форма</title>
  </head>
  <body>
   <form method='get' action=''>
       <h4>Это наша форма</h4>
       <div>Тут располагаются элементы формы</div>
   </form>
  </body>
</html>

Атрибуты тега FORM

Атрибут method — данный атрибут позволяет указать в каком виде данные с формы будут передаваться на сайт. Существует два вида передачи данных с формы:

Метод GET — позволяет передавать данные через адресную строку сайта.
Метод POST — передает данные в заголовке запроса к веб-странице.

Атрибут action — данный атрибут позволяет указать в какой файл (на какую страницу) передавать данные с формы. По умолчанию если оставить данный атрибут пустым, как в примере, то данные с формы будут передаваться на ту же страницу на которой находится пользователь, и после отправки формы пользователь останется на данной странице. Данные с формы можно отправить на любую страницу сайта для их дальнейшей обработки. Данный атрибут необходимо всегда указывать, даже если вы передаете данные на ту же страницу.

Элементы форм

Практически все элементы на форме создаются с помощью тега INPUT. Какой именно атрибут формы будет создан определяется атрибутом TYPE данного одиночного тега.

Синтаксис тега INPUT

<input type='значение' />

Атрибуты тега INPUT

Атрибут NAME — значение этого атрибута будет определять имя переменной, в которую будет передаваться значение выбранное или введенное в данном элементе формы.

Атрибут VALUE — значение данного атрибута будет определять само значение, которое будет передано формой в переменной указанной в атрибуте name.

Атрибут READONLY — данный атрибут со значением readonly, будет запрещать пользователю изменять значение по умолчанию, указанное в теге. В данном случае значение можно будет изменить только использую JavaScript.

Атрибут DISABLED -данный атрибут позволяет заблокировать содержимое элемента формы не только для изменения пользователем но и при отправке формы. Элемент с данным атрибутом и значением атрибута disabled окрашивается в серый цвет.

Значения Атрибута TYPE

text — создает элемент «Текстовое поле»

radio — создает элемент переключателя.

checkbox — создает элемент формы переключателя с возможностью выбора нескольких значений.

submit — создает на форме кнопку отправки форму в обработчик указанный в атрибуте action для тега form.

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

password — создает на форме текстовое поле для ввода пароля, автоматически заменяет все символы введенные пользователем на звездочки.

Другие элементы формы

Многостраничный текст

Тег <TEXTAREA> предназначен для создания на форме текстовой области, позволяющей вводить несколько строк текста. Данные поля используются для добавления комментариев, постов в блоге и т.д. Между тегов <textarea> </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если данного текста нет, то поле будет выведено пустое.

Синтаксис тегаTEXTAREA

<textarea атрибут=»значение»>

текст

</textarea>

раскрывающийся список

Тег <SELECT> позволяет создавать списки с одинарным или множественным выбором.

Синтаксис тега SELECT

<select name=’form_select’>

<option value=’1′>Первый элемент списка</option>

<option value=’2′>Второй элемент списка</option>

<option value=’3′>Третий элемент списка</option>

</select>

Атрибут NAME тега SELECT определяет имя переменной в которой будет передано значение элемента формы, при отправке в обработчик. Атрибут VALUE тега OPTION определяет само значение передаваемое формой.

Лабораторная работа ФОРМЫ в HTML