Как создать HTML форму

Пример HTML формы

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

HTML теги, определяющие HTML формы

Создаем сайты и отдельные страницы в сети интернет для общения с посетителями.

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

Содержание страницы

  1. Пример HTML формы | Входим в систему
  2. Пример HTML формы | Комментарии на сайте
  3. Пример HTML формы | Выпадающий список
  4. Пример HTML формы | Список с прокруткой
  5. Пример HTML формы | Переключатели, кнопки
  6. Пример HTML формы | Радиобутоны, файлы
  7. Пример HTML формы | Область fieldset

Пример HTML формы | Вход в систему

Логин:

Пароль:

Запомнить

Код:

<title>Один из возможных вариантов HTML формы</title>
</head>
<body>
<form name="f1" method="get" action="enter_data.php">
<input name="link" type="hidden" value="index.php" />
Логин: <br />
<input name="login" type="text" size="25" maxlength="30" value="Вася" /> <br />
Пароль: <br />
<input name="pd" type="password" size="25" maxlength="30" value="" /> <br />
<input name="remember" type="checkbox" value="yes" /> Запомнить <br />
<input type="submit" name="enter" value="Вход" />
</form>
</body>
</html>

Теги, атрибуты и значения

Пример HTML формы | Комментарии на сайте

Имя

E-mail

Код:

<title>Пример HTML формы</title>
</head>
<body>
<form action="http://ab-w.net/comments.php" method="post" name="commentform" id="commentform">
<p><input type="text" name="author" id="author" value="" size="25" />
<small> Имя</small>
</p>
<p><input type="text" name="email" id="email" value="" size="25" />
<small> Mail</small>
</p>
<p><textarea name="comment" id="comment" cols="48" rows="8"> </textarea>
</p>
<p><input name="submit" type="submit" id="submit" value="Отправить" />
</p>
</form>
</body>
</html>

Теги, атрибуты и значения

Если между <textarea> </textarea> поместить текст, он будет показан внутри поля как пример, который легко удалить.

Пример HTML формы | Выпадающий список

Код:

<title>HTML формы</title>
</head>
<body>
<form action="http://ab-w.net/info.php" method="post" name="drop_down_box">
<select name="menu" size="1">
<option value="first">Первая позиция</option>
<option selected="selected" value="second">Вторая позиция</option>
<option value="third">Третья позиция</option>
<option value="fourth">Четвертая позиция</option>
</select>
</form>

Теги, атрибуты и значения

Пример HTML формы | Список с полосой прокрутки

Увеличив значение атрибута size="", мы получим список с полосой прокрутки:

Код:

<title>HTML формы</title>
</head>
<body>
<form action="http://ab-w.net/info.php" method="post" name="drop_down_box">
<select name="menu" size="3" multiple="multiple">
<option value="first">Первая позиция</option>
<option selected="selected" value="second">Вторая позиция</option>
<option value="third">Третья позиция</option>
<option value="fourth">Четвертая позиция</option>
</select>
</form>

Для этого варианта применим флажок multiple="multiple", который делает возможным выбор нескольких позиций. Его отсутствие разрешает выбрать только один пункт.

Пример HTML формы | Переключатели, кнопки

Самолет
Поезд
Автомобиль
Автобус

Код:

<title>HTML формы</title>
</head>
<body>
<form name="travel" action="http://ab-w.net/info.php" method="get">
<input type="checkbox" name="transport" value="airplane" checked="checked" /> Самолет<br />
<input type="checkbox" name="transport" value="train" /> Поезд<br />
<input type="checkbox" name="transport" value="car" /> Автомобиль<br />
<input type="checkbox" name="transport" value="bus" /> Автобус<br />
<input type="submit" value="OK" />
<input type="reset" value="Reset" />
</form>

Атрибуты и значения

Смотрите дополнительно: тег <input />.

Пример HTML формы | Радиобутоны, прикрепить файл

Пол:
М
Ж
Прикрепить файл:

Код:

<title>HTML формы</title>
</head>
<body>
<form name="male_female" action="" method="post">
Пол:<br />
<input type="radio" name="Sex" value="Мужской" checked="checked" /> М<br />
<input type="radio" name="Sex" value="Женский" /> Ж<br />
Прикрепить файл:<br />
<input name="send_f" type="file" size="30" maxlength="60" />
</form>

Пример HTML формы | fieldset

Коротко о себе:

Молодой человек
Девушка
Дата рождения
Семейное положение
Социальный статус
Местожительство

Код:

<title>HTML формы</title>
</head>
<body>
<form action="">
<fieldset>
<legend>
Коротко о себе:
</legend>
<input type="radio" name="Sex" value="Мужской" checked="checked" />
<small>Молодой человек</small><br />
<input type="radio" name="Sex" value="Женский" /> <small>Девушка</small><br />
<input type="text" size="20" /> <small>Дата рождения</small><br />
<input type="text" size="20" /> <small>Семейное положение</small><br />
<input type="text" size="20" /> <small>Социальный статус</small><br />
<input type="text" size="20" /> <small>Местожительство</small><br />
<input type="submit" value="Отправить" />
</fieldset>
</form>

Чтобы научиться создавать полноценные web-сайты с работающими формами, необходимы знания в области программирования на PHP.

Дополнительно смотрите: обработка HTML формы на PHP

Дата публикации: Октябрь 2009 | Обновление: Июнь 2014

Урок 20. Бегущая строка   Пример HTML формы   Урок 22. Музыка на сайте

    Сохранить в сервисы и закладки