Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Теги FORM, INPUT, атрибуты INPUT Теги SELECT, OPTION, TEXTAREA

Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru.Сегодня в рамках рубрики HTML для начинающих хочу поговорить о такой неотъемлемой составляющей любого сайта, как HTML формы. На каком бы движке не работал ваш сайт, на нем обязательно будут в том или ином виде использоваться HTML формы. Та же строка поиска по сайту создается с использованием тегов форм, а поиск-то на вашем сайте будет обязательно. Поэтому понимание того, как устроены и работают конструкции HTML форм, вам совсем не помешает для успешной работы над дизайном вашего сайта.

Так, с обоснованием необходимости изучения HTML форм я, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению возможных вариантов HTML форм. С помощью различных тегов (FORM, INPUT, SELECT, OPTION, TEXTAREA) и атрибутов HTML форм можно создавать разные элементы сайта, такие как форма поиска по сайту, форма подписки на E-mail рассылку или рассылку новостной ленты RSS вашего сайта. Примеры этих форм вы можете видеть в верхней правой части данного блога. С помощью HTML форм так же создаются различные голосования и опросы, формы для регистрации пользователей на сайте, формы обратной связи (отправки сообщений автору сайта) и многое другое.

HTML формы - общие сведения

По своей сути HTML формы представляют собой стандартные заготовки. Нам лишь нужно будет расположить код для вызова той или иной формы в любом удобном для этого месте шаблона сайта, указав с помощью тегов HTML форм (FORM, INPUT, SELECT, OPTION, TEXTAREA) и их атрибутов (TYPE, NAME, SIZE, VALUE и т.п.), как должна будет выглядеть создаваемая форма. Это может быть текстовое поле с кнопкой отправки введенного запроса(форма поиска), варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (форма обратной связи) и многое другое.

Например, в случае формы поиска, с помощью атрибута VALUE можно будет задать, что именно будет написано на кнопке, расположенной рядом с полем для ввода запроса. Данные, вводимые в HTML формах, должны быть в дальнейшем каким-то образом обработаны. Например, в случае формы обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться, что созданное им сообщение будет отправлено на E-mail автора сайта. Но реализовать такое с помощью только одного HTML, к сожалению, не возможно.

Для этих целей потребуется специальная программа (обработчик), которая после нажатия пользователем на кнопку отправки, возьмет все данные из формы обратной связи и отправит их на E-mail автору сайта. Какая именно программа будет это делать, вы должны будете указать сами с помощью атрибута ACTION. Обычно, программа обработчик, представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте ACTION тега FORM вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостера. Приведу в качестве примера HTML форму, которую я использую для подписки на RSS ленту моего блога посредством E-mail:

<div class="subscribetextbgpost">

      <form   action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input name="email" type="text" value="Введите Ваш e-mail" class="subscribe_textieldpost" onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}" />

        <input type="hidden" value="Ktonanovenkogoru" name="uri"/>
        <input type="hidden" value="<?php bloginfo('name'); ?>" name="title"/>
        <input type="hidden" name="loc" value="ru_RU"/>
        <input type="image" src="http://ktonanovenkogo.ru/wp-content/themes/Organic/images/b_subscribe.png"   value="Subscribe" class="subscribepost" />
      </form>
    </div>

Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа о работе с HTML формами.

Тег FORM и его обязательные и необязательные атрибуты

Любая HTML форма должна быть заключена в открывающий и закрывающий теги FORM. Это своеобразный контейнер для HTML формы. У тега FORM имеется ряд обязательных и необязательных атрибутов:

• NAME – уникальное имя для формы, которое нужно указывать если в файле, где вы вставляете код данной формы будет несколько форм
• ACTION – обязательный атрибут тега FORM, указывающий путь к скрипту, которому будут переданы данные из этой формы для дальнейшей обработки
• METHOD – с помощью этого атрибута вы можете изменить метод передачи данных из этой создаваемой формы скрипту файла обработчика. Если вы не укажете этот атрибут в теге FORM, то по умолчанию будет использоваться метод GET, который, собственно говоря, предназначен в основном для переменных и коротких сообщений и к тому же открытым способом, передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

Тег INPUT - создание текстового поля, поля для ввода пароля, разнообразных кнопок, радиопереключателей, флажков и т.д.

Рассмотрим остальные теги, позволяющие создавать разнообразные HTML формы. Самый универсальный тег для создания HTML форм – тег INPUT. Внутри тега INPUT обязательно обычно прописывают атрибут TYPE, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью тега INPUT. C помощью тега INPUT и атрибута TYPE можно создавать следующие HTML формы:

• однострочные текстовые поля (TYPE="TEXT")
• поля для ввода пароля (TYPE="PASSWORD")
• флажки (TYPE="CHECKBOX")
• радиопереключатели (TYPE="RADIO")
• скрытые поля (TYPE="HIDDEN")
• обычные кнопки (TYPE="BUTTON")
• кнопки для отправки данных из формы в обработчик(TYPE="SUBMIT")
• кнопки для приведения формы к исходному состоянию (TYPE="RESET")
• поля для загрузки файлов на сервер (TYPE="FILE)
• кнопки с изображением (TYPE="IMAGE")

.

Тег INPUT не имеет закрывающего тега. Что именно будет представлять из себя HTML форма, созданная с помощью тега INPUT, целиком и полностью зависит от параметра, указанного в атрибуте TYPE. Если атрибут TYPE в теге INPUT не указан, то по умолчанию будет создано текстовое поле.

Возможные значения атрибута TYPE тега INPUT для создания различных HTML форм

Атрибут TYPE тега INPUT может иметь следующие значения параметров:

• TEXT – в этом случае, с помощью тега INPUT будет создано поле для ввода текста
• PASSWORD – с помощью тега INPUT будет создано поле для ввода текста, но при этом все вводимые в это поле значения будут закрываться звездочками
• RADIO – при таком значении параметра атрибута TYPE, с помощью тега INPUT будет создано поле с радиопереключателями. В этом случае активным может быть только один из переключателей. По аналогии с включением кнопок на старом радиоприемнике – нажатой может быть только одна клавиша, при нажатии на другую - та клавиша, что была до этого нажата, будет автоматически отщелкнута
• CHECKBOX - созданное в этом случае поле HTML формы будет отличаться от поля радиопереключателей тем, что можно будет активировать сразу несколько переключателей
• BUTTON - с помощью тега INPUT будет создана кнопка
• SUBMIT - с помощью тега INPUT будет создана кнопка для отправки данных из формы в файл обработчика
• IMAGE - появится поле с изображением (например, картинкой красивой кнопки), при нажатии на которое данные из формы будет отправлены в обработчик
• HIDDEN - в этом случае создается скрытое поле невидимое на страницах сайта
• FILE - в этом случае будет создано поле и кнопка для выбора файла на своем компьютере для загрузки его на сервер
• RESET - создаться кнопка сброса для возврата всех данных формы в исходное состояние

Примеры HTML форм, созданных с помощью тега INPUT с различными параметрами атрибута TYPE

<input type="text" name="ktonanovenkogoru">

<input type="password" name="ktonanovenkogoru">

<input type="button" value="Подписаться" name="ktonanovenkogoru">

<input type="submit" value="Подписаться" name="ktonanovenkogoru">

<input width="91" type="image" height="25" border="0" src="003.png" name="ktonanovenkogoru">

<input type="radio" value="j" name="ktonanovenkogoru">
      Joomla <br>
      <input type="radio" value="w" name="ktonanovenkogoru" checked>
      WordPress<br>
      <input type="radio" value="s" name="ktonanovenkogoru">
      SMF

<input type="checkbox" value="yes" name="ktonanovenkogoru3">
      Joomla <br>
      <input type="checkbox" value="yes" name="ktonanovenkogoru4" checked>
      WordPress <br>
      <input type="checkbox" value="yes" name="ktonanovenkogoru5">
      SMF 

<input type="file" name="ktonanovenkogoru">

<input type="hidden" name="ktonanovenkogoru">

<input type="reset" name="ktonanovenkogoruru">

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

Рассмотрим, для чего нужны остальные атрибуты тега INPUT:

• NAME – в случае, если данные из создаваемой с помощью тега INPUT формы должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута NAME. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
• SIZE - с помощью этого атрибута тега INPUT задается размер поля создаваемой формы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если атрибут SIZE не указан, то ширина поля формы будет принята по умолчанию равной 24 символам
• MAXLENGTH - по умолчанию количество символов, которое можно будет ввести в форму, не ограничено, но с помощью атрибута MAXLENGTH можно задать это ограничение. Больше символов, чем будет указано в атрибуте MAXLENGTH, вам ввести в форму не удастся
• VALUE - с помощью этого атрибута тега INPUT можно задать, что именно будет написано по умолчанию в поле формы или же на кнопке отправки данных формы
• CHECKED - это атрибут флаг, который можно вставить в теги INPUT для радиопреключателей (radio) или же для флажков (checkbox). В этом случае данный радиопереключатель или флажок будут активными при загрузке страницы с формой (в них уже будет стоять галочка)

Примеры HTML формы для ввода текста, а так же форм с радиопреключателями и флажками, созданные с помощью тега INPUT

Теперь давайте рассмотрим все варианты создания HTML формы с помощью тега INPUT. Внешний вид текстовой формы похож на вид формы для ввода пароля, поэтому рассмотрим только вариант создания HTML формы для ввода текста (TEXT), например, адреса электронной почты:

<form name="ktonanovenkogoru" method="post" action="script_obrabotchika.php">
Введите Ваш E-mail:<br>
<input type="text" value="Ваш E-mail" name ="e-mail" maxlength="10>
</form>

Теперь давайте рассмотрим создание HTML формы с радиопереключателями (RADIO):

<form name="rad" method="post" action="script_obrabotchika.php">
<p>Вам нравится ресурс KtoNanNovenkogo.ru?</p>
<p>
<input name="rezultat" type="radio" value="yes" checked>
Да?<br>
<input name="rezultat" type="radio" value="no">
Нет? </p></form>

Обратите внимание, что в этой форме два раза используется тег INPUT – по разу для создания каждого из двух радиопереключателей. Причем, в каждом из этих тегов прописан атрибут NAME с одинаковым значением (rezultat), а значение атрибута VALUE разное (YES и NO). Это означает, что в обработчик, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в атрибуте NAME, но значение этой переменной будет зависить от того, какой именно переключатель был выбран.

Рассмотрим пример создание HTML формы с флажками (CHECKBOX):

<form name="ktonanovenkogoru" method="post" action="obrabotchik.php">
<p>Какой движок(и) сайта вы предпочитаете?</p>
<input type="checkbox" name="wp" value="yes" checked>
WordPress <br>
<input type="checkbox" name="joom" value="yes">
Joomla <br>
<input type="checkbox" name="smf" value="yes">
SMF
</form>

Флажки отличаются от радиопереключателей возможностью выбрать сразу несколько вариантов. Атрибут NAME служит для определения в файле обработчика, в каком именно проставлены флажки,а атрибут VALUE - задает то значение, которое будет отослано в обработчик (если атрибут VALUE задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным флажком).

Продолжим тему создания и работы с HTML формами во второй части статьи.

Вы так же можете ознакомиться с другими статьями из рубрики HTML для начинающих и материалами рубрики Верстка, HTML, CSS, PHP, MySql.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Теги FORM, INPUT, атрибуты INPUT Теги SELECT, OPTION, TEXTAREA