Главная страница   /   12.1. Создание простой формы (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

12.1. Создание простой формы

Чтобы создать форму, необходимы три элемента: form, input и button. В листинге 12-1 показан HTML документ, который содержит простую форму.

Листинг 12-1: Простая HTML форма
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form method="post" action="http://titan:8080/form">
		<input name="fave" />
		<button>Submit Vote</button>
	</form>
</body>
</html>

На рисунке 12-1 вы можете увидеть, как это отображается в браузере.

Рисунок 12-1: Отображение простой формы в браузере

Эта форма настолько проста, что не особо полезна, но после того как мы рассмотрим каждый из трех основных элементов, вы сможете добавлять в форму нужные элементы и сделаете ее более значимой и полезной.

Определение формы

Отправной точкой является элемент form, который обозначает наличие формы на HTML странице. В таблице 12-2 представлен элемент form.

Таблица 12-2: Элемент form
Элемент form
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы. Но элемент form не может быть потомком другого элемента form
Локальные атрибуты action, method, enctype, name, accept-charset, novalidate, target, autocomplete
Содержание Потоковый контент (но, в частности, элементы label и input)
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Атрибуты novalidate и autocomplete являются новыми в HTML5
Соглашение по стилям form { display: block; margin-top: 0em; }

Я к этому вернусь и покажу вам, как использовать атрибуты для настройки элемента form, далее в этой главе. На данный момент достаточно знать, что элемент form говорит браузеру, что он имеет дело с HTML формой.

Вторым важным элементом является input, который позволяет собирать данные, вводимые пользователем. Вы можете видеть на рисунке 12-1, что элемент input показан в браузере как простое текстовое поле, в которое пользователь может ввести данные. Это самый простой тип элемента input, но вы увидите, что есть много вариантов того, как собирать данные, вводимые пользователем (в том числе с использованием некоторых интересных новых дополнений в HTML5). Я объясню это в главе 13. В таблице 12-3 представлен элемент input.

Таблица 12-3: Элемент input
Элемент input
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовые элементы
Локальные атрибуты name, disabled, form, type и другие атрибуты, основанные на значении атрибута type
Содержание Нет
Стиль тегов Тег пустого элемента
Новый в HTML5 Нет, но есть некоторые новые типы элемента input, которые доступны благодаря атрибуту type. (Для информации см. главу 13)
Изменения в HTML5 В HTML5 появились новые значения атрибута type, и есть несколько новых атрибутов, которые используются с конкретным значением атрибута type
Соглашение по стилям Нет. Представление этого элемента определяется атрибутом type

Есть 29 атрибутов, которые могут быть применены к элементу input, в зависимости от значения атрибута type. Я покажу эти атрибуты и объясню, как они используются, когда мы рассмотрим различные способы сбора данных от пользователя в главе 13.

Совет

Для сбора данных от пользователя можно использовать другие элементы, а не только input. Я объясню и покажу это в главе 14.

Последний элемент в нашем примере – это button. Вам необходимо предоставить пользователю некоторое средство, чтобы он мог указать браузеру, что все данные были введены, и что браузер должен отправить данные на сервер. Элемент button является наиболее часто используемым способом для совершения данного действия (хотя, как вы увидите в главе 13, для этого можно использовать еще один механизм). В таблице 12-4 представлен элемент button.

Таблица 12-4: Элемент button
Элемент button
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовые элементы
Локальные атрибуты name, disabled, form, type, value, autofocus и другие атрибуты, основанные на значении атрибута type
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Есть новые атрибуты, которые используются в зависимости от конкретного значения атрибута type. (Для информации см. раздел «Использование элемента button»).
Соглашение по стилям Нет

Элемент button является универсальным элементом, и я объясню, как он может использоваться в разделе «Использование элемента button» далее в этой главе. При использовании внутри элемента form и без каких-либо атрибутов элемент button говорит браузеру, что он должен отправить данные, полученные от пользователя, на сервер.

Отслеживание данных формы

Нам нужен сервер, на который браузер будет отправлять данные. С этой целью я написал простой Node.js скрипт, который генерирует HTML страницу, содержащую данные, которые форма собирает от пользователя. Смотрите главу 2 для информации о том, как получить и настроить Node.js. В листинге 12-2 показано, как будет использоваться скрипт. Как я уже упоминал в главе 2, я не буду копаться в деталях серверных скриптов, но поскольку Node.js основывается на JavaScript, вы можете легко понять, что делает данный скрипт, если прочтете про особенности языка JavaScript в главе 5 и просмотрите некоторую документацию, доступную на http://nodejs.org.

Листинг 12-2: Скрипт formecho.js
var http = require('http');
var querystring = require('querystring');
http.createServer(function (req, res) {
		switch(req.url) {
			case '/form':
			if (req.method == 'POST') {
				console.log("[200] " + req.method + " to " + req.url);
				var fullBody = '';
				req.on('data', function(chunk) {
				fullBody += chunk.toString();
				});
				req.on('end', function() {
				res.writeHead(200, "OK", {'Content-Type': 'text/html'});
				res.write('<html><head><title>Post data</title></head><body>');
				res.write('<style>th, td {text-align:left; padding:5px; color:black}\n');
				res.write('th {background-color:grey; color:white; min-width:10em}\n');
				res.write('td {background-color:lightgrey}\n');
				res.write('caption {font-weight:bold}</style>');
				res.write('<table border="1"><caption>Form Data</caption>');
				res.write('<tr><th>Name</th><th>Value</th>');
				var dBody = querystring.parse(fullBody);
				for (var prop in dBody) {
				res.write("<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>");
				}
				res.write('</table></body></html>');
				res.end();
				});
			} else {
				console.log("[405] " + req.method + " to " + req.url);
				res.writeHead(405, "Method not supported", {'Content-Type': 'text/html'});
				res.end('<html><head><title>405 - Method not supported</title></head><body>' +
				'<h1>Method not supported.</h1></body></html>');
				}
			break;
		default:
			res.writeHead(404, "Not found", {'Content-Type': 'text/html'});
			res.end('<html><head><title>404 - Not found</title></head><body>' +
			'<h1>Not found.</h1></body></html>');
			console.log("[404] " + req.method + " to " + req.url);
			};
}).listen(8080);

Этот скрипт собирает воедино данные, которые отправил браузер и возвращает простой HTML документ, который отображает данные в виде HTML таблицы. (Я описал элемент table в главе 11). Этот скрипт слушает порт 8080, по которому подключается браузер, и работает только с формами, которые отправляются из браузера при помощи метода HTTP POST и на URL /form. Вы поймете важность порта 8080 и URL /form, когда мы рассмотрим атрибуты, поддерживаемые элементом form, далее в этой главе. Я сохранил этот скрипт в файл с именем formecho.js. Чтобы запустить скрипт, я открыл окно командной строки на titan и набрал следующее:

bin\node.exe formecho.js

Titan работает с Windows Server 2008 R2, поэтому точная команду для запуска Node.js будет отличаться, если вы используете другую операционную систему. На рисунке 12-2 показано, как браузер отобразит выходные данные, если вы введете в текстовое поле формы из примера слово Apples и нажмете на кнопку Submit Vote.

Рисунок 12-2: Просмотр данных формы, отправленных браузером, при помощи Node.js

Здесь находится только один элемент (одна единица) данных, потому что есть только один элемент input в форме из примера. Значение в столбце Name равно fave, потому что это значение я присвоил атрибуту name элемента input. Значение в столбце Value равно Apples, потому что это те данные, которые я ввел в текстовое поле перед нажатием кнопки Submit Vote. Я покажу выходные данные в табличном виде скрипта Node.js, когда мы создадим более сложные формы.