Использование элемента input для создания скрытых данных
Есть случаи, когда нам нужно, чтобы при отправке формы данные передавались на сервер, но чтобы они не были показаны пользователю или чтобы их нельзя было отредактировать. Типичным примером является ситуация, когда веб приложение отображает запись базы данных, представленную пользователю для редактирования. Нам часто нужно включить в веб страницу первичный ключ, так что мы знаем, какую запись редактирует пользователь, но мы не хотим, чтобы эта информация была ему отображена. Чтобы добиться такого результата, мы можем использовать тип hidden элемента input. В листинге 13-15 показано, как можно использовать этот тип элемента input.
Листинг 13-15: Создание типаhiddenэлементаinput
<!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 type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Favorite Fruit:
<input type="text" id="fave" name="fave" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
В этом примере я создал скрытый элемент input, чей атрибут name имеет значение recordID и чей атрибут value равен 1234. Когда отображается страница, браузер визуально не представляет элемент input, как вы можете видеть на рисунке 13-19.
Рисунок 13-19: Веб страница со скрытым элементом input
Когда пользователь отправляет форму, браузер включает туда данные, используя name и value, которые мы передали скрытому элементу input. Вы можете увидеть это на рисунке 13-20, который показывает ответ скрипта Node.js после отправки формы, представленной на предыдущем рисунке.
Рисунок 13-20: Ответ сервера, в котором показаны скрытые данные
Внимание
Этот вид элемента
inputподходит только для данных, которые скрыты для удобства или по причинам юзабилити, а не потому что он оказывает влияние на безопасность. Пользователь может видеть скрытые элементыinput, глядя на HTML самой страницы, и данные передаются от браузера к серверу в виде открытого текста. Большинство фреймворков для веб приложений поддерживают надежное хранение конфиденциальных данных на сервере, и связывают их с запросами, основываясь на идентификаторах сессий, чаще всего выраженных как куки (cookies).
