Добрый день, уважаемые читатели wmbn.ru! Сегодня снова поговорим о HTML и CSS, и конкретно коснемся HTML форм. Кто имеет хоть какое-то понятие о HTML уже замечал, что на многих сайтах, а как минимум блогах, есть хоть одна такая форма. К примеру, если взять портал Rambler — та же форма входа в почту тоже использует HTML формы, с помощью которых посетитель может зайти на почту. Или его поисковая строка — это тоже HTML форма, которая позволяет ввести поисковый запрос. Один пример есть, но для наглядности можно привести еще несколько.

Создание HTML форм для сайта

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

Для чего нужны HTML формы для сайта и их польза

Давайте рассмотрим какую же пользу могут принести HTML формы сайту и пользователю. В первые формы появились в HTML версии 2.0, следовательно тогда их и начали использовать. Прежде всего они были созданы для того, чтобы пользователь мог спокойно отправить данные на сервер, а тот их в последствии обработать и передать обработанную информацию обратно к пользователю. Это гораздо удобнее, нежели писать в адресную строку запросы — к примеру без формы входа на сайт той же CMS/CMF Drupal пришлось бы писать запрос сначала на вход, затем отправлять логин и пароль, при этом тоже используя запросы. Да и не факт, что вас пустят в систему.

Форма входа в Drupal

Взять еще для примера администрирования базы данных — на многих учебниках, с помощью которых я изучал PHP+MySQL, все операции производились с помощью одной командной строки, и то же подключение к базе тоже использовало запросы — было не очень удобно администрировать таким способом всю базу.

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

Формы HTML в phpMyAdmin

В PHP тоже часто используются HTML формы, чтобы без лишних хлопот можно было передать данные на локальный сервер и получить результат на странице. Можно обойтись и без форм, к примеру если программа использует только заранее введенные переменные и данные. Это может быть та же программа Hello, World!, которая использует лишь вывод надписи, которая заранее записана в исходный код.

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

Теги для создания HTML формы — тег Input и Form

А теперь приступим к созданию самих HTML формы для сайта — создается она с помощью тега Form. Уже понятно из выше описанного текста — форма нужна для обмена данными между пользователем и сервером (локальным или удаленным). Форма является как бы блоком, в который помещаются различные элементы:

<from>
...
</form>

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

  • Action — указывается путь до скрипта (программы), которая будет обрабатывать все данные, переданные с помощью HTML формы. Чаще всего ссылка ведет на сторонний файл с расширением *.php (скрипт написан на языке PHP) — это очень удобно, когда используется разделение шаблона от программ-скриптов;
  • Name — имя для формы, оно должно быть уникальными не повторяться с другими элементами формы, чтобы избежать ошибок. Причина тому — имя будет далее использоваться в скрипте, в котором недопустимо повторение переменной, поэтому следует использовать имя такое, чтобы было понятно назначение формы, но при этом не переборщить с символами. Для примера форма отправки сообщений может называться formSendMessage — пусть и немного длинновато, но уже понятно, что это HTML форма для отправки сообщений, а слова можно выделять помощью больших букв;
  • Method — метод передачи данных от формы к серверу. Основные методы передачи данных это Get и Post, которые можно заметить, если открыть исходный код страницы любого сайта. Отличие Gep от Post в методе передачи данных — есл используется метод Get, то после отправки данных через HTML форму в адресной строке появится текст запроса. Если же используется метод Post, то данные скрываются от пользователя. Еще метод Post передает гораздо больший объем данных, нежели Get, который можно заметить, если ввести в поисковую строку запрос;

Получаем дополненную форму:

<from action="script.php" method="post" name="formSendMessage">
...
</form>

Используя данную форму, информация будет передана в файл script.php методом post. Если использовать визуальный редактор, то HTML форму можно создать, нажав лишь на одну кнопку, но в ней так же нужно указывать файл для обработки и имя формы — остальные данные выбираются из выпадающего списка. Тут же можно выбрать дополнительные параметры, как encoding (кодирование) и Target Frame (на какой странице откроется результат выполнения HTML формы).

Создание формы в HTML редакторе

Тег Input используется для добавления в форму элементов, типа текстовой области, выпадающих списков и т.д. Определяется что добавить с помощью атрибута type=, а имя присваивается точно так же, как и форме — с помощью Name.

Добавление элементов в форму — тег Input type=

Приступим к добавлению различных элементов в HTML форму с помощью тега Input. С помощью него на сайт добавляются различные текстовые поля, типы списков и прочие элементы формы. Определяет что добавить на сайт атрибут type, которые имеет свои параметры:

  • Button — произвольная кнопка на HTML;
  • Reset — тоже тип кнопки, только у него уже есть одно назначение — сброс введенных данных в форму;
  • Submit — с помощью данной кнопки отправляются данные в файл. Можно обойтись и без нее, однако для удобства ее все же используют; В Google как то читал, что они хотели отказаться от кнопки поиска, оставив лишь строку — этакий живой поиск. Однако для меня такая затея показалась бы запутанной, т.к. по привычке после ввода запроса в строку жму клавишу Enter или чаще всего на кнопку поиска;
  • Text — простая текстовая строка, в которую не введешь целы комментарий, а только имя, адрес иди еще что-то;
  • Password — та же текстовая строка, только она закрывает введенные символы. Обычно ее используют для ввода паролей (Password), но в чистом виде ее не используют, т.к. данные передаются в открытом виде;
  • Hidden — невидимое поле, в котором можно хранить скрытую информацию;
  • Checkbox — элемент HTML формы, с помощью которого можно выбирать несколько элементов, помечая их флажками;
  • Radio — так называемая радио кнопка, с помощью которой помечается для выбора только один пункт;
  • File — используется для загрузки файлов на сервер;
  • Image — добавляется кнопка с фоновым изображением;

Из всего списка чаще всего я замечал только элементы Button, Submit, Text, Password, Checkbox и File. Реже всего попадалась радио кнопка, однако в операционной системе ее можно заметить чаще всего. Для примера добавим кнопки для сайта в HTML форму, задав для них необходимые параметры:

<form method="post" action="script.php" name="threeButtons">
<input name="Button" value="Кнопка" type="button">
<input name="Submit" value="Отправить" type="submit">
<input name="Reset" value="Сбросить" type="reset">
</form>

HTML формы сайта - кнопки

Для кнопок тоже задаются имена name, а также описание (value), с помощью которого на кнопке появится своя надпись. Ну и в конце задается тип кнопки — простая кнопка (button), отправка запроса из HTML формы (submit) и сброс данных (reset). Так же создадим текстовые поля:

<form method="post" action="script.php" name="threeText">
<input name="Text" value="Текстовая область">
<input name="Password" value="Пароль" type="password">
<input name="Hidden" value="Спрятанное сообщение" type="hidden">
</form>

HTML формы сайта - текст

Для них так же есть атрибут Value и если указать для него какую-нибудь надпись, то она появится в форме — в текстовой форме в виде простого текста, в пароле — звездочки, точки и т.д. Что касается Radio и Checkbox, то просто задав атрибут Value, надпись рядом с элементом не появится. Для этого нужно использовать немного другой способ:

<form method="post" action="script.php" name="radiocheck">
<input name="Radio" value="Радио кнопка" type="radio">Радио кнопка<br>
<input name="CheckBox" value="Выборка" type="checkbox">Check Box<br>
</form>

HTML формы сайта - радио кнопка и выборка

Как видно из кода, для элементов задаются те же параметры, что и для предыдущих, только чтобы указать название кнопки, надпись располагают вне тега Input. Такими же методами устанавливается на сайт форма для загрузки файлов и кнопка с фоном, только для нее нужно добавить src=»1.png», где 1.png это фоновая картинка.

Select, Option и Textarea — элементы HTML формы

Кроме стандартных элементов HTML форм, есть те, для которых не требуется тег input и, соответственно, указание типа элемента. Давайте опять вернемся к форме комментариев — как я уже сказал, данные о пользователе вводятся в строку, созданную с помощью тега input. А вот отзыв уже не создается с помощью тега input и типа text, такая форма добавляется с помощью HTMl тега textarea:

<form method="post" action="script.php" name="textarea">
<textarea cols="5" rows="5" name="textarea">Текстовая область</textarea>
</form>

HTML формы сайта - текстовая область

Для текстового поля задается длина и ширина (cols и rows), однако в браузерах можно растягивать данную форму, но начальные значения задать стоит, так как они будут использоваться для первоначального вывода текстовой формы. Кроме этого для текстового поля можно задать еще два параметра — Readonly и Disabled. Readonly (readonly=»readonly») предназначен для того, чтобы пользователь не смог изменить текст внутри формы. Если же задать Disabled (disabled=»disabled»), то запись в HTML форме так же не будет доступна для редактирования, но к этому она еще и будет подсвечена блеклым цветом как неактивная.

Option и Select — HTML теги, предназначенные для создания выпадающих списков, которые тоже можно встретить на различных сайтах, причем очень часто. Взять хотя бы тот же mail.ru — в нем для выбора почтового ящика (расположения) используется такая форма.

В PHP я использовал данный элемент HTMl формы, чтобы создать готовые цвета. можно сделать вывод — Select и Option (выпадающие списки) нужны для выбора данных, при этом не требуя от пользователя вводить никаких слов. Полезно, если человек не знает зачем нужна форма и какие параметры в нее вводить — в списке есть уже готовые данные, которые осталось только выбрать. Вот самый простой пример кода выпадающего списка:

<select name="Select">
<option>Список 1</option>
<option>Список 2</option>
</select>

Можно его усложнить, добавив пункт Value к элементам списка:

<select name="Select">
<option value="Список1">Список 1</option>
<option value="Список2">Список 2</option>
</select>

HTML формы сайта - выпадающий список

Как видно, название для элемента задается точно также, как и для Checkbox и Radio. Выпадающий список можно сделать просто списком с прокруткой, добавив атрибут size=»» в тег select. После этого в списке будет отображаться столько записей, сколько указано в атрибуте size.

HTML формы сайта - список

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

На этом можно закончить запись, писать каждый тег уже не тот век, лично я уже давно использую визуальные редакторы, чтобы создать страничку с использованием HTML форм. Так же для освоения HTML такой подход к обучению тоже кстати — пусть немного не по теме, но изучая SQL я часто использовал phpMyAdmiin, который генерировал запросы в виде кода и выдавал их. С редактором тоже самое — виден результат работы и его исходный код, который возможно и не написан на клавиатуре, а сгенерирован самой программой. Если же нет времени возиться с HTML кодом для вставки формы на сайт или блог WordPress, то можно воспользоваться WYSIWYG редактором.

Ну а для тех, кому нравится интернет радио, особенно для жителей Украины, мы рекомендуем посетить http://radio.b2blab.com.ua/

Комментариев: 5

  1. West Blogger

    Хех, честно говоря никогда бы и не стал заморачиваться с изучением форм :) Представляю какого было древним вебмастерам :)

  2. Orcinus Orca

    West Blogger, нет тут никаких заморочек. Всё очень даже легко и доступно. Проблема была только разобрать пришедшую инфу.

  3. Сергей

    И вправду в CSS намного все это легче, а это конечно же для древних вебмастеров!

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>