Формы в html

html

Содержание:



Основным элементом для создания форм в HTML служит тег Form, а самая простейшая форма имеет два текстовых поля и кнопку. Ничего сложного в создании такой формы нет, а мы будем использовать её в качестве рабочего примера:

создание формы в html

Стоит отметить, что более сложные формы могут также иметь текстовые области — расширенные текстовые поля; чекбоксы — переключатели, где галочкой отмечается согласие со значением пункта; радио-кнопки, которые служат для выбора одного из предложенных вариантов. Рассмотрим эти элементы ниже.

Если научиться делать простую форму, то и сложную сделать будет не намного труднее — разница будет заключаться в нескольких добавочных строчках.

Вот так будет выглядеть каркас нашей формы:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" name="Любое" target="_blank">
...
</form>

Его нужно рассмотреть отдельно, потому что тег Form имеет два обязательных атрибута, которые должны присутствовать в любой форме:

  1. action — адрес обработчика данных формы. Это может быть локальный скрипт на вашем сайте, а в данном примере — это URL сервиса рассылок.
  2. method — определяет метод запроса данных: «post» — закрытая передача данных через запрос браузера, он наиболее распространённый. Метод «get» подразумевает открытую передачу данных через адресную строку браузера и используется реже.
  3. name — необязательный атрибут, который задаёт название формы. Актуально при использовании нескольких форм, или, если имя формы необходимо для работы определённого скрипта.
  4. target — необязательный атрибут, при значении «_blank» загружает URL обработчика данных в новой вкладке браузера.

Создание элементов формы

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

Нам же для создания двух текстовых полей понадобятся два тега Input со значением «text» атрибута type. А для создания кнопки — парный тег Button, где у атрибута type — значение «submit», которое будет отправлять данные обработчику:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" target="_blank">
<input type="text" name="field_name_first" placeholder="Ваше Имя"> <input type="text" name="field_email" placeholder="Ваш E-mail"> <button type="submit" name="lead_subscribe">Получить бесплатно!</button>
</form>

Вот что означают атрибуты тега Input в нашей форме:

  1. type — значение «text» означает текстовое поле. Значение «password» - текстовое поле для ввода пароля с отображением звездочек; «range» — ползунок; «reset» — кнопка сброса и др. (подробнее: Справочник HTML — Input).
  2. name — имя полей.
  3. placeholder — видимый текст в поле формы, при наведении фокуса — исчезает. Как вариант: атрибут value — значение по умолчанию, при сбросе пользователем введённых данных — восстанавливается первоначальная текстовая надпись.

Вот как будет выглядеть готовая форма, если её поместить в контейнер Div и выравнять по центру:





Читайте инструкцию о том, как сделать красивую форму подписки для JustClick и Smartresponder — с лёгким кодом, используя стили CSS.

Чекбоксы и кнопки

Для создания чекбоксов и радио-кнопок также используется тег Input, разница только в значениях атрибута type:

                
<form action="URL" method="post">
<input type="checkbox" name="box" value="1">Поставьте галочку, если согласны
<input type="radio" name="radiobutton" value="1">Красный <input type="radio" name="radiobutton" value="2">Жёлтый <input type="radio" name="radiobutton" value="3">Зелёный
</form>

Имена (значения атрибута name) у тегов произвольные, но для радио-кнопок одной группы они должны совпадать. Визуальный результат:

Поставьте галочку, если согласны

Красный Жёлтый Зелёный


Атрибуты name и value не являются обязательными, а используются при обработке данных формы с помощью скриптов, к примеру, это может быть JavaScript.

Осталось узнать о двух тегах, которые используются для создания сложных форм: Textarea и Select.

Текстовая область

Чтобы сделать текстовую область, куда допустимо ввести текст из нескольких строк с сохранением переносов, используем тег Textarea:

                
<form action="URL" method="post">
<textarea rows="5" cols="30">Ваша биография</textarea>
</form>

Атрибуты rows и cols являются обязательными для версий ниже HTML5 и задают число строк и их общую длину. Получаем следующую текстовую область, которая может вмещать 5 строк по 30 символов в каждой:



Создание выпадающего списка

Для создания выпадающего списка используем тег Select, а для его отдельных элементов тег Option:

                
<form action="URL" method="post">
<select name="forscript"> <option value="1">Элемент 1</option> <option value="2">Элемент 2</option> <option value="3">Элемент 3</option> <option value="4">Элемент 4</option> </select>
</form>

Атрибуты обоих тегов не обязательны. Однако, атрибут value — задает значение для пары «Имя=Значение» отправляемого обработчику (например: JavaScript), а имя — это значение атрибута name тега Select. Таким образом, значение переменной forscript будет forscript=1 или forscript=2 и т.д.

Получаем выпадающий список из 4-х элементов:



Содержание: