Формы в html для сайта — теги form, input и их атрибуты

Здравствуйте, уважаемые читатели! Переходим к рассмотрению тегов form и input, которые определяют формы в html для сайта, а также их атрибутов. Какой бы тематики и наполнения не был ваш ресурс, на нем обязательно будут встречаться html формы в том или ином виде: текстовые поля, выпадающие меню, различные кнопки или переключатели. Мы уже рассматривали общее понятие тегов, из совокупности которых состоит html документ, в одной из предыдущих статей. Для полного овладения материалом необходимо еще дать определение атрибута тега.

Атрибут - это уточняющий элемент, который расширяет возможности отдельных тегов. Каждому атрибуту может быть присвоено значение. Самый яркий пример - непарный тег img, с помощью которого можно вставить html картинки на сайт, а также его атрибуты, о которых я писал тут. Кроме того, существуют обязательные и необязательные атрибуты. Пока, возможно, это сложновато, но в процессе изучения материала все темные пятна будут потихоньку исчезать, уверяю вас.

Но продолжим. Вообще,  содержание, описывающее любую html форму для сайта, заключается между открывающим и закрывающим тегами form. Эта конструкция является контейнером, который может включать в себя другие теги, например textarea и input с соответствующими атрибутами. С помощью этих инструментов, например, можно создать форму обратной связи на вашем сайте. Пользователь, после введения своего имени и e-mail, нажимает на кнопку и отправляет сообщение. Однако реализовать такое только с помощью средств html не представляется возможным.

Для этого используется специальная программа обработки форм (обработчик), которая и выполняет непосредственно отправку. Это программа обычно реализуется в виде скрипта, написанного на языке php. Поэтому в атрибуте action тега form нужно прописать путь до этого скрипта, находящийся на сервере хостинга. Итак, для примера представлю фрагмент html документа, который описывает форму обратной связи на моем сайте:

Как видите, в качестве скрипта, реализующего отправку сообщения пользователя, здесь представлен файл mail.php. И указан путь до него в этом отрывке документа с помощью атрибута action.

Формы html, создаваемые с помощью тегов form и input

Как я уже отмечал выше, любая html форма заключается между открывающим и закрывающим тегами form, который является контейнером, содержащим другие теги. Form имеет ряд атрибутов (обязательных и необязательных), позволяющих выполнять следующие функции:

action - путь (url) до документа, содержащего скрипт исполнения, пример на выше расположенном скриншоте. Обязательный атрибут. В качестве значения используется абсолютный или относительный путь к файлу на сервере.

method - c помощью этого атрибута обеспечивается способ передачи данных. Собственно, этих способов всего два: GET и POST. Метод GET является наиболее распространенным и используется для небольших сообщений посредством адресной строки браузера. Тогда как POST предназначен для отправки большего объема данных формы скрипту закрытым способом.

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

Конечно, это не все атрибуты, я просто указал несколько для того, чтобы ухватить общую суть их применения. Теперь рассмотрим тег input, который является самым распространенным элементом html формы и который не имеет закрывающего тега, можете убедиться в этом, посмотрев на скриншот, расположенный выше. Основной атрибут -  type, он является обязательным и определяет вид формы на сайте или блоге. С помощью тега input и его атрибута type (в зависимости от его значения) можно создавать самые разнообразные элементы html форм:

  1. Текстовое поле (text)
  2. Поля для ввода паролей (password)
  3. Переключатели (radio)
  4. Флажок (checkbox) или чекбокс
  5. Скрытое поле (hidden)
  6. Кнопка (button)
  7. Кнопка для отправки формы (submit)
  8. Кнопка для очистки формы (reset)
  9. Поле для отправки файла (file)
  10. Кнопка с изображением (image)

Если значение атрибута тега type не будет указано, то по умолчанию будет создано текстовое поле. Теперь я приведу примеры форм html, созданных с помощью различных значений атрибута type тега input:

TEXT Текстовое поле для ввода символов
<input type="text" name="goldbusinessnet" />
PASSWORD Текстовое поле, где символы показываются звездочками. Предназначено для скрытия вводимого пароля.
<input type="password" name="goldbusinessnet" />
RADIO Переключатели. Обычно используются при необходимости выбора одного варианта из предложенных ABC
<input type="radio" name="goldbusinessnet" value="A" />A
<input type="radio" name="goldbusinessnet" value="B" checked="checked" />B
<input type="radio" name="goldbusinessnet" value="C" />C
CHECKBOX Чекбоксы. Позволяют выбрать несколько вариантов из предложенных ABC
<input type="checkbox" name="goldbusinessnet" value="A" checked="checked" />A
<input type="checkbox" name="goldbusinessnet" value="B" checked="checked" />B
<input type="checkbox" name="goldbusinessnet" value="C" />C
HIDDEN Скрытое поле, которое не отображается
<input type="hidden" name="goldbusinessnet" />
BUTTON Простая кнопка
<input type="button" name="goldbusinessnet" value="Выбрать" />
SUBMIT Кнопка, которая служит для отправки данных
<input type="submit" name="goldbusinessnet" />
RESET Кнопка для возврата данных к первоначальному значению
<input type="reset" name="goldbusinessnet" />
FILE Кнопка выбора файла для последующей загрузки его на сервер
<input type="file" name="goldbusinessnet" />
IMAGE Поле с изображением. При нажатии данные будут отправлены на сервер
<input type="image" name="goldbusinessnet" src="http://goldbusinessnet.com/images/knopka.jpg" />

Тег input имеет еще обширный список различных атрибутов. Но сейчас рассматривать их не будем, моя цель была познакомить вас с алгоритмом использования различных значений атрибута type и тега form  для создания разнообразных html форм на сайте. Естественно, в последующих публикациях продолжу описание основных тегов языка гипертекстовой разметки, поэтому не забывайте подписываться на обновление блога через RSS-ленту или посредством e-mail. В заключение посмотрите для закрепления один из уроков Евгения Попова о создании контактной формы:

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

2 отзыва

  1. Витольд

    Если автор пишет правду, не лжет сам себе - то само явление текста уже оправдано. Благодарю!

  2. Донат

    Cпасибо. А вверху или внизу не столь важно, ведь хороший блог и на пятой полосе прочтут.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.