Интерактивные формы на Web-страницах

<div> </div> - блочный элемент, с помощью которого можно создавать блоки с нужными стилями CSS. Содержимым тега div может быть любой элемент HTML: абзац, изображение, ссылка...
<form> </form> - контейнер для формы
<input type="text" name="Имя" size=30> - текстовое поле длиной 30 символов
<br /> - перевод строки
<input type="radio" name="group" value="студент"> (ученик, учитель или другое) - группа переключателей. Значение value - уникально.
<input type="checkbox" name="group" value="e-mail"> - группа флажков. Значение value - уникально для каждого флажка
<select> </select> - раскрывающийся список
<option> - элемент раскрывающегося списка
<textarea> </textarea> - текстовая область с атрибутами:
name="Ваши предложения" - имя текстовой области
rows=4 - число строк текстовой области
cols=30 - число символов в строке текстовой области
<input type="submit" value="Отправить"> - кнопка
<form action="mailto:username@server.ru method="post" enctype="text/plain"> - адрес электронной почты с указанием метода и формы передачи данных

Задание

1. Откройте в папке своего сайта с помощью текстового редактора KWrite, Gedit или Блокнот файл anketa.html
2. Внесите изменения в текст для создания анкеты, содержащей текстовые поля, переключатели (радиокнопки), флажки, раскрывающийся список, текстовую область и кнопку для отправки данных из формы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Анкета</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>
<body>
<h1>Анкета</h1>
<form action="myfile.php" method="post">
<div>Пожалуйста, введите ваше имя:</div>
<div><input name="ФИО" size="30" type="text" /></div>
<div>E-mail:</div>
<div><input name="e-mail" size="30" type="text" /></div>
<div>Укажите, к какой группе пользователей вы себя относите:</div>
<div><input name="group" value="Учащийся" type="radio" />Учащийся</div>
<div><input name="group" value="Студент" type="radio" />Студент</div>
<div><input name="group" value="Учитель" type="radio" />Учитель</div>
<div>Какие из сервисов Интернета вы используете наиболее часто:</div>
<div><input name="group" value="WWW" type="checkbox" />WWW</div>
<div><input name="group" value="e-mail" type="checkbox" />e-mail</div>
<div><input name="group" value="FTP" type="checkbox" />FTP</div>
<div>Какой браузер вы используете наиболее часто:</div>
<div><select><option selected="selected"> Internet Explorer</option>
<option>SeaMonkey</option>
<option>Opera</option>
<option>Mozilla</option></select></div>
</form>
<div>Какую еще информацию вы хотели бы видеть на сайте</div>
<div><textarea name="Ваши предложения" rows="4" cols="43"></textarea></div>
<form action="mailto:lsosch@mail.ru" enctype="text/plain">
<div><input value="Отправить" type="submit" /></div>
</form>
</body>
</html> (Показать) (Показать главную страницу)

[Назад] [Оглавление] [Далее]