УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 13. Формы в HTML

Формы на страницах сайта применяются очень часто: для добавления комментариев к статьям, для опросов, для подписки на рассылки, для регистрации на сайте, для оформления заказов и т. д. и т. п. То есть, создавать форму – умении полезное, этим и займёмся.

Вообще-то, у любой формы есть как бы две стороны: явная и скрытая. Явная – это сам внешний вид формы, то, что мы видим на web-странице, куда вводим данные при регистрации, подписке на рассылки и пр.

Однако ни одна форма не будет работать сама по себе – для обработки данных из формы нужна программа (скрипт). Скрипты пишутся на каком-либо из языков программирования. Чаще всего – на php.  Но бывает, что и на других языках. Другие языки я рассматривать не буду, хотя бы потому, что сам пользуюсь только php…

Чтобы узнать, как написать некоторые скрипты для обработки форм, обращайтесь к Урокам php. Здесь же рассмотрим только создание формы – то, что относится к HTML.

Создадим на нашей странице форму для добавления комментариев. Вот такую:

Ваше имя:

Ваш e-mail:

Текст комментария:

Откройте в текстовом редакторе файл index.html. Форму разместим ниже списка пород собак, то есть, в средней ячейке нижней строки (новый код выделен зелёным).

Листинг 13.1.

..... <ul>
<li>пудель
<li>чау-чау
<li>французский бульдог
<li>карликовый пинчер
<li>пекинес
<li>японский хин
<li>мальтийская болонка
</ul>
<form name="form1" method="post" action="имя_файла-обработчика_формы.расширение">
<p>Ваше имя:<br>
<input type="text" name="переменная_имя">
</p>
<p>Ваш e-mail:<br>
<input type="text" name="переменная_адрес">
</p>
<p>Текст комментария:<br>
<textarea name="переменная_текст" cols="30" rows="6"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Добавить комментарий">
</p>
</form>

</font>
<p align="center"><a href="#начало_страницы">К началу страницы</a></p>
</td>
……

Сохраните результат и посмотрите в браузере: на странице должна появится форма, как на этой странице выше.

Рассмотрим теперь всё, что записали, по порядку.

Форма всегда начинается тегом <form> и заканчивается закрывающим тегом </form>. Между этими тегами находятся другие теги, с помощью которых задаются текстовые поля, кнопки и прочие элементы формы.

Тег <form> имеет следующие обязательные атрибуты и значения:

name="form1" - имя формы. Оно нужно для того, чтобы отличать одну форму от других, если на странице сайта несколько форм. В нашем случае имя формы form1.

method="post" - метод, с помощью которого происходит передача данных из формы в программу-обработчик (это в курсе по PHP);

action="имя_файла-обработчика_формы.расширение" - имя файла, в котором находится программа-обработчик формы, но и это к курсу HTML не относится.

Далее в форме два текстовых поля. Они задаются так:

<input type="text" name="переменная_имя">

Здесь:

type="text" - тип поля, в данном случае значение text означает, что поле для текстовой информации, то есть, текстовое;

name="переменная_имя" - вместо "переменная_имя" пишется название переменной, которая будет передаваться для обработки формы программе-обработчику. Но об этом в курсе по php.

Для создания большого текстового поля, как правило, используемого для добавления комментариев или вообще больших объёмов текста, применяют парный тег <textarea> </textarea> вместе с некоторыми атрибутами, например, как в нашем примере:

<textarea name="переменная_тест" cols="30" rows="6"></textarea>

Здесь:

name="переменная_тест" - переменная для программы-обработчика (за разъяснениями - в курс по PHP);

cols="30" - ширина текстового поля;

rows="6" - высота текстового поля.

После текстовых полей располагается кнопка, нажатием на которую происходит запуск программы, которая обрабатывает форму. Кнопка создаётся так:

<input type="submit" name="Submit" value="Добавить комментарий">

Здесь:

type="submit" - указывается на тип элемента формы, в данном случае, что это кнопка;

name="Submit" - эта информация для программы-обработчика;

value="Добавить комментарий" - то, что написано на кнопке.

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

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

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

Со времени их написания появилась новая версия HTML - HTML5. Поэтому и рекомендую скачать бесплатно видеоуроки по HTML, в которых вы найдёте много нового, соответствующего новым стандартам сайтостроения. И дальше - нужно просто совершенствоваться в применении полученных знаний.

Успехов.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:


Комментарий добавил(а): andy
15-02-2012
02 час. 01 мин.

Комментарий:
super


Комментарий добавил(а): Андрей Чернобай
15-02-2012
11 час. 16 мин.

Комментарий:
Рад, что Вам понравилось. В рассылке Вы найдёте ещё более суперские уроки, поэтому, если не подписаны, подпишитесь: ссылка - http://vokrug-saita.ru/subscribe_pages/subscribe_vs.php

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта