Главная » Все про HTML » Что такое html формы и как их создавать? Урок – 10

Что такое html формы и как их создавать? Урок – 10

2014-01-25 / Вр:22:19 / просмотров: 7149

Сегодня ни один сайт не может обойтись без форм. Да, именно без форм. Потому что, используя знания html формы, можно сделать на сайте форму обратной связи, заказов, формы для отправки комментариев, отзывов и т. д.

Вот вам несколько примеров, как выглядит html форма на сайтах:

Здесь будьте внимательны, это важно!!!
html форма – это всего лишь поле или каркас, созданные на html, куда пользователь будет вводить информацию или сообщение. Но форма не будет работать без обработчика, прописанного небольшим кодом на языке php. Обработчики не сложно написать самому, но можно также скачать их в интернете.

Итак, учимся создавать html формы.

Приступим.
HTML форма состоит из главного контейнера или коробки, внутри которой размещаются все остальные элементы формы.
<form> - открываем контейнер для формы
</form> - закрываем контейнер для формы

Пример:

<form>
<!-- здесь будут различные элементы формы -->
</form>

Размещается форма между тегами <body> </body>.
Теперь рассмотрим атрибуты для формы.

Атрибуты для тега form

NAME – имя формы. Имя формы должно быть уникальным и используется когда на одном сайте несколько форм.
ACTION – это обязательный атрибут, который указывает путь к обработчику формы.
METHOD – способ отправки. Если стоит значение POST, это значит, что данные передаются в скрытом виде, если стоит значение GET (по умолчанию), это значит, что данные передаются в открытом виде через браузерную строку.
Я думаю, вам не стоит сейчас зацикливаться на атрибуте METHOD с его значениями POST и GET. На практике при изучении языков обработки данных вы сами все поймете.

Итак, пример, как выглядит тег form с атрибутами:

<form name="forma" method="post" action="obrabotchik-forma.php">
<!-- здесь будут различные элементы формы -->
</form>

Элементы формы

Текстовое поле
Текстовое поле предназначено для простого ввода небольшого текста. Обычно используется для ввода имени, фамилии, ввода пароля, электронной почты, адреса сайта. Задается тегом input.
Атрибуты тега input:
name - имя элемента
type - тип элемента (для текста – text, для ввода пароля – password)
size - размер текстового поля формы
maxlength – этот параметр указывает максимальное количество ввода символов в поле формы. Если не прописать этот параметр, тогда число символов можно будет вводить в поле неограниченно раз.
value – этот параметр не обязателен, служит текстовой подсказкой для пользователя. Текстовая подсказка будет отображаться прямо в текстовом поле. Например «Введите текст». Если этот атрибут не написать, то текстовое поле будет пустым.

Пример:

<form name="forma" method="post" action="obrabotchik-forma.php">
Введите ФИО: <br>
<input ENGINE="text" name="fio" size="20" maxlength="50" value="Введите текст">
<br>
Введите пароль: <br>
<input type="password" name ="pass" size="20" maxlength="6">
</form>

Результат:

Что такое html формы и как их создавать?

Переключатели (радиопереключатель)

Благодаря переключателю пользователь может сделать один выбор из нескольких вариантов ответов. Вот, например, пользователь может выбрать, в каком формате он хотел бы получить видео урок или указать женский или мужской пол и т.д.
Укажите в атрибуте type значение «radio» (type="radio").

Пример

<form name="forma" method="post" action="obrabotchik-forma.php">
<p> Какой диск вы хотите получить?</p>
<p>
<input type="radio" name="disc" value="cd" checked>
CD<br>
<input type="radio" name="disc" value="dvd">
DVD
</p>
</form>

Результат:

Переключатели (радиопереключатель)

Если вы хотите, чтобы радиокнопка была отмечена при загрузке страницы, пропишите дополнительный атрибут checked (включен), так, как у меня на примере выше.

Внимание: в радиопереключателе атрибут value обязательный.

Флажки или чекбокс (checkbox)

С помощью флажка пользователь может выбрать несколько вариантов ответа.
Укажите в атрибуте type значение «checkbox» (type="checkbox").

Пример:

<form name="forma" method="post" action="obrabotchik-forma.php">
<p>Какие уроки языка вы хотите видеть на диске?</p>
<input type="checkbox" name="english" value="yes" checked>
Уроки английского <br>
<input type="checkbox" name="french" value="yes">
Уроки французкого<br>
<input type="checkbox" name="german" value="yes" checked >
Уроки нимецкого
</form>

Результат:

Флажки или чекбокс (checkbox)

Если вы хотите, чтобы чекбокс был отмечен при загрузке страницы, пропишите дополнительный атрибут checked (включен), так, как у меня на примере выше.

Внимание: в чекбокс атрибут value не обязательный.

Выпадающий список

Выпадающий список выводится тегом <SELECT></SELECT>.
Каждый новый пункт у выпадающего списка выводится при помощи тега <OPTION>.
Name – это имя всего списка. Задается только для тега <SELECT>.
Value – задается для каждого пункта списка для тега <OPTION>.

Пример:

<form name="forma" method="post" action="obrabotchik-forma.php">
<p>Выберите способ доставки:</p>
<p>
<select name="dostavka">
<option value="ne-srochnaya"> Не срочная </option>
<option value="srochnaya"> Срочная </option>
<option value="kurierom"> Курьером </option>
</select>
</p>
</form>

Результат:

Выпадающий список

Большое многострочное текстовое поле

Для больших текстовых полей используют тег <textarea> </textarea>.
textarea имеет такие атрибуты:
name – имя поля
cols – ширина поля
rows – высота поля

Пример:

<form name="forma" method="post" action="obrabotchik-forma.php">
Введите адрес для доставки:<br>
<textarea name="adres" cols="30" rows="10"></textarea>
</form>

Результат:

Большое многострочное текстовое поле

Поле для файлов

Есть возможность отправлять файл прямо с браузера при помощи атрибута type со значением «file» (type=" file").

Пример:

<form name="forma" method="post" action="obrabotchik-forma.php">
<input type="file" name="load" size="50">
</form>

Результат:

Кнопка отправки

Существует четыре вида кнопок:

submit – кнопка отправки
Значение:
type="submit" - тип кнопки

name - имя кнопки
value - надпись на кнопке

Image – графическая кнопка
Значение:
type="image" - тип кнопки

name - имя кнопки
src – адрес картинки для кнопки.

reset – кнопка сброса
Значение:
type="reset" - тип кнопки

name - имя кнопки
value - надпись на кнопке

button – произвольная кнопка
Значение:
type="button" - тип кнопки

name - имя кнопки
value - надпись на кнопке
onclick - указывает, что делать при нажатии на кнопку.

Пример четырех кнопок:

<input type="submit" name="submit" value="Отправить">
<input type="image" name="button_img" src="button_img.gif">
<input type="reset" name="reset" value="Очистить">
<input type="button" name="button" value="Отправить">

Для закрепления материала вот еще один пример:

<form name="forma" method="post" action="obrabotchik-forma.php">
<input type="submit" value="Сделать заказ">
<input type="reset" value="Отмена">
</form>

Результат:

Можно сделать вот такую симпатичную кнопочку:

Для этого достаточно использовать вот такой код:

<form name="forma" method="post" action="obrabotchik-forma.php">
<button name="submit" type="submit">
<img src="mail-knopka.gif" align="absmiddle">
<font size="4"> Отправить </font>
</button>
</form>

Я думаю, нужно уже заканчивать этот урок, а то у вас, наверняка, уже болит голова от потока информации. :?:

И напоследок закрепим сегодняшний урок примером готового кода «формы заказа».

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Форма заказа</title>
</head>
<body>
<form name="primer6" method="post" action="obrabotchik-forma.php">
<p>
Введите ФИО:<br>
<input type="text" name="fio" >
</p>
<p>
Введите пароль:<br>
<input type="password" name="pass">
</p>
<p> Какой диск вы хотите получить? </p>
<p>
<input name="disc" type="radio" value="CD" checked>
CD<br>
<input name="disc" type="radio" value="DVD">
DVD
</p>
<p> Какие обучающие курсы вы хотите видеть на диске? </p>
<p>
<input type="checkbox" name="photoshop" value ="Да" checked>
Курсы по Фотошопу
<br>
<input type="checkbox" name="dreamweaver" value ="Да">
Курсы по Adobe Dreamweaver
<br>
<input type="checkbox" name="php" value ="Да">
Курсы по PHP
</p>
<p>Выберите способ доставки:</p>
<p>
<select name="dostavka" size="1">
<option selected> Срочная </option>
<option > Не срочная </option>
<option > Курьером </option>
</select>
</p>
<p> Введите адрес для доставки:<br>
<textarea name="adress" cols="45" rows="5"></textarea>
</p>
<p>
<input type="submit" value="Сделать заказ" width="20">
<input type="reset" value="Отмена ">
</p>
</form>
</body>
</html>

Сохраните как forma.html.

Результат:

формы заказа

Код обработчика:

<?php
if (isset($_POST['fio'])) {$fio = $_POST['fio'];}
if (isset($_POST['pass'])) {$pass = $_POST['pass'];}
if (isset($_POST['disc'])) {$disc = $_POST['disc'];}
if (isset($_POST['photoshop'])) {$photoshop = $_POST['photoshop'];}
if (isset($_POST['dreamweaver'])) {$dreamweaver = $_POST['dreamweaver'];}
if (isset($_POST['php'])) {$php = $_POST['php'];}
if (isset($_POST['dostavka'])) {$dostavka = $_POST['dostavka'];}
if (isset($_POST['adress'])) {$adress = $_POST['adress'];}

if (!isset($photoshop)) {$photoshop="НЕТ";}
if (!isset($dreamweaver)) {$dreamweaver="НЕТ";}
if (!isset($php)) {$php="НЕТ";}

$text = "<h2>Сведения о заказе клиента :</h2>";
$text .= "<strong>Ф.И.О заказчика</strong> - $fio<br> <strong>Пароль :</strong> $pass <br>";
$text .= "<strong>Тип диска</strong> - $disc<br><br>";
$text .= "<strong>Хочет чтоб на диске были следующие курсы:</strong><br>";
$text .= "<strong>Курсы по Фотошопу</strong> - $photoshop<br><strong>Курсы по Adobe Dreameaver</strong>-$dreamweaver<br><strong>Курсы по PHP </strong> - $php<br><br>";
$text .= "<strong>Выбрал способ доставки</strong> - $dostavka<br>";
$text .= "<strong>В качестве домашнего адреса указал:</strong> $adress";

if (mail ('test-bloggood@rambler.ru', 'Тема письма', $text, "MIME-Version: 1.0\r\nContent-type: text/html; charset=windows-1251 \r\nFrom: My site <no-reply@site.com>")) echo 'Письмо отправлено!';
else echo 'Произошел коллапс!';
?>

В строке №23 укажите вашу электронную почту.

Сохраните обработчик как obrabotchik-forma.php.

Обработчик «obrabotchik-forma.php» и файл «forma.html» разместите рядом.

формы заказа