Создание простой формы
Чтобы создать форму, необходимы три элемента: 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.jsvar 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.jsTitan работает с 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, когда мы создадим более сложные формы.
