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

Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru.Сегодня в рамках рубрики HTML для чайников хочу поговорить о такой неотъемлемой составляющей любого сайта, как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться HTML формы созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit. Ну, и еще можно добавить к этому элементы Html Form для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.

Та же строка поиска по сайту создается с использованием Html тегов форм, а поиск-то на вашем сайте будет обязательно. Поэтому понимание того, как устроены и работают элементы HTML форм, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении сайта будет не лишним.

Так, с обоснованием необходимости изучения кода HTML форм я, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов, созданных на основе тегов Form, Input, Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

С помощью различных тегов (Form, Input, Select, Option, Textarea) и атрибутов HTML форм (Checked, Value, Checkbox, Radio, Checkbox, Submit) можно создавать разные элементы сайта, такие как Html форма поиска по сайту, Form подписки на E-mail рассылку или рассылку новостной ленты RSS вашего сайта.

Примеры этих форм вы можете видеть на страницах блога KtoNaNovenkogo.ru. С помощью HTML Form так же создаются различные голосования и опросы, формы для регистрации пользователей на сайте, формы обратной связи на Html (отправки сообщений автору сайта) и многое другое. Да, хочу еще напомнить вам, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования html цветов, трех видов списков на тегах ul, ol, li, dl и принципы создания Html таблиц на тегах Tr, Th, Td, Table.

HTML формы (Form) — Input, Button, Checked...

По своей сути HTML формы (Form) состоят из элементов, для создания который внутри основного контейнера из тегов Form вставляют различные теги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить Html код элементов для вызова той или иной формы (Form) в любом удобном для этого месте шаблона сайта (шаблоны Joomla, темы WordPress), указав с помощью тегов HTML форм (Form, Input, Select, Option, Textarea) и их атрибутов (Type, Name, Size, Value и т.п.), как должна будет выглядеть создаваемая форма.

Это может быть текстовое поле с кнопкой отправки введенного запроса(Html форма поиска), варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (Html Form обратной связи) и многое другое.

Например, в случае поиска, с помощью атрибута Html формы (Form) Value можно будет задать, что именно будет написано на кнопке, расположенной рядом с полем формы для ввода запроса. Данные, вводимые в HTML формах, должны быть в дальнейшем каким-то образом обработаны.

Например, в случае Html формы (Form) обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из Html Form на E-mail автора сайта. Но реализовать такое с помощью только одного HTML (Что такое Html, теги и валидатор W3C), к сожалению, не возможно.

Для этих целей потребуется специальная программа обработки Html форм (Form), которая после нажатия пользователем на кнопку отправки, возьмет все данные из Html Form обратной связи и отправит их на E-mail автору сайта. Какая именно программа Html Form будет это делать, вы должны будете указать сами с помощью атрибута Action.

Обычно, программа обработки Html форм, представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action Html тега Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера HTML форму (Form), которую я использую для подписки на 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 и Input для создания Html кнопок, чекбоксов и радиокнопок

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

1. Name – уникальное имя для формы, которое нужно указывать если в файле, где вы вставляете код Html Form будет несколько вебформ
2. Action – обязательный атрибут тега Form, указывающий путь к скрипту, которому будут переданы данные из этой Html формы для дальнейшей обработки
3. Method – с помощью этого атрибута вы можете изменить метод передачи данных из этой создаваемой Html Form скрипту файла обработчика. Если вы не укажете этот атрибут в теге Form, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений и к тому же открытым способом, передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные Html теги, позволяющие создавать разнообразные HTML формы (Form, Input, Button, Checked, Value, Checkbox, Radio, Checkbox, Submit). Самый универсальный тег для создания вебформ – Html тег Input. Внутри тега Input обязательно обычно прописывают атрибут Type>, который определяет, что именно будет из себя представлять HTML форма (Form), созданная с помощью тега Input.

C помощью Html тега Input и атрибута Type можно создавать следующие элементы:

1. однострочные текстовые поля (Type="Text")
2. поля для ввода пароля (Type="Password")
3. чекбоксы (Type="Checkbox")
4. радиокнопки (Type="Radio")
5. скрытые поля (Type="Hidden")
6. обычные Html кнопки (Type="Button")
7. кнопки для отправки данных из Html формы в обработчик(Type="Submit")
8. Html кнопки для приведения вебформы к исходному состоянию (Type="Reset")
9. поля для загрузки файлов на сервер (Type="File)
10. кнопки Html форм с изображением (Type="Image")
.

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

Html тег Input для создания различных форм

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

1. Text – в этом случае, с помощью тега Input в Html форме будет создано поле для ввода текста
2. Password – с помощью тега Input будет создано поле для ввода текста, но при этом все вводимые в это поле значения будут закрываться звездочками
3. Radio – при таком значении параметра атрибута Type, с помощью тега Input будет создано в Html Form поле с радиокнопками. В этом случае активным может быть только один из переключателей. По аналогии с включением кнопок на старом радиоприемнике – нажатой может быть только одна клавиша, при нажатии на другую — та клавиша, что была до этого нажата, будет автоматически отщелкнута
4. Checkbox — созданное в этом случае поле HTML формы будет отличаться от поля радиокнопок тем, что можно будет активировать сразу несколько переключателей
5. Button — с помощью тега Input будет создана Html кнопка
6. Submit — с помощью тега Input будет создана кнопка для отправки данных из Html формы в файл обработчика
7. Image — появится поле с изображением (например, картинкой красивой кнопки), при нажатии на которое данные из Html формы будет отправлены в обработчик
8. Hidden — в этом случае создается скрытое поле невидимое на страницах сайта
9. File — в этом случае будет создано поле и кнопка в Html форме для выбора файла на своем компьютере для загрузки его на сервер
10. Reset — создаться кнопка в Html форме сброса для возврата всех данных формы в исходное состояние

Примеры 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">

Атрибуты Html тега Input

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

1. Name – в случае, если данные из создаваемой с помощью тега Input Html формы (Form) должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
2. Size — с помощью этого атрибута Html тега Input задается размер поля создаваемой формы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если атрибут Size не указан, то ширина поля Form будет принята по умолчанию равной 24 символам
3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью атрибута Maxlength можно задать это ограничение. Больше символов, чем будет указано в атрибуте Maxlength, вам ввести в Html форму не удастся
4. Value — с помощью этого атрибута тега Input можно задать, что именно будет написано по умолчанию в поле формы или же на кнопке отправки данных Html формы
5. Checked — это атрибут флаг, который можно вставить в теги Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данный радиокнопка или чекбокс будут активными при загрузке страницы с Html формой (в них уже будет стоять галочка)

Примеры HTML форм Form и Input (Button, Checked, Value, Checkbox, Checkbox, Submit

Теперь давайте рассмотрим все примеры 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 формы (Form) с радиокнопками (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>

Обратите внимание, что в этой Html форме (Form) два раза используется тег Input – по разу для создания каждого из двух радиокнопок. Причем, в каждом из этих тегов прописан Html атрибут Name с одинаковым значением (rezultat), а значение Html атрибута Value разное (YES и NO).

Это означает, что при обработке Html формы (Form), в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в атрибуте Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.

Рассмотрим пример создание HTML формы (Form) с чекбоксами (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>

Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Html атрибут Name служит для определения в файле обработчика, в каком именно проставлены флажки в чекбоксе,а атрибут Value — задает то значение, которое будет отослано в обработчик (если атрибут Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).

Продолжим тему создания и работы с HTML формами во второй части статьи — Select, Option, Textarea, Label, Fieldset, Legend.

Можете также посмотреть видео «Формы HTML»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Учебник Html
  • Что такое язык Html, валидатор W3C и Html тэги
  • Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Коды цвета в Html и CSS коде (RGB палитра)
  • Как в Html код вставить картинку и html ссылку
  • Img и обтекание картинки текстом
  • Гиперссылки (a, target blank, href, якоря)
  • Html список (UL, OL, DL и LI)
  • Html таблица (Tr, Th, Td, Table)
  • Html формы - теги Form и Input
• Справочник CSS для начинающих
  • CSS - что это такое
  • CSS селекторы
  • Font (Weight, Family, Size, Style)
  • Background в CSS (color, position, image, repeat, attachment)
  • Padding, margin и border
  • Height, width и overflow
  • Float и clear в CSS
  • Position (absolute, relative и fixed)
• Блочная Div верстка сайта в Html и CSS

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

Очень обяжете, если воспользуетесь этим блоком кнопок:

Рубрика : Html для чайников

Наверх