"ВОКРУГ САЙТА" www.vokrug-saita.ru

как создать сайт самостоятельно

Главная Рассылка Секрет Автор сайта

УРОКИ 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 не исчерпывается, о нём можно ещё говорить и говорить... Однако, я считаю, что лучше узнать основы и научиться их досконально применять на практике, чем стараться ухватить информации по максимуму, но толком ничего не уметь. Базовых знаний, изложенных здесь, достаточно, чтобы создавать сайты, - а ведь именно это Вам и было нужно, не так ли?

Теперь нужно просто совершенствоваться в применении полученных знаний.

Успехов.

P. S. На самом деле, я намерен продолжать выкладывать уроки по HTML, и если Вы хотите быть в курсе всех обновлений, подпишитесь на рассылку "Вокруг Сайта ".

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

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

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



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

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


Узнать подробней о рассылке "Вокруг Сайта" >>






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



Карта
rss
Карта