HTML5 за 10 минут

Пример создания веб-форм


В этой главе вам предстоит освоить новые для HTML5 элементы управления веб-формами на примере HTML-документа webforms.html.

Для того чтобы начать создание примера HTML-документа webforms.html, выполните следующие действия.

1.   Создайте HTML-документ webforms.html в любом редакторе текста, например в Windows WordPad.

2.   Введите приведенный ниже код для создания HTML-таблицы, состоящей из элементов управления веб-формами, а также кнопки Предъявить.

<!DOCTYPE html>

<html>

<head>

<title>

Пример веб-формы </title>

</head>

<body>

<Ь1>Пример веб-формы</Ь1>

<form method="post" action="webforms.php">

<table border="l" cellpadding="5">

</table>

<input type="submit" value="Предъявить">

</form>

</body>

</html>

3.   Сохраните внесенные изменения в файле webforms.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Итак, начало рассматриваемому здесь примеру положено. А далее вам предстоит ввести по очереди некоторые из новых для HTML5 элементов управления веб-формами.

Создание элемента управления, предоставляемого по умолчанию

Если конкретный тип создаваемого элемента управления не указан, то по умолчанию предоставляется текстовое поле. Именно такой предоставляемый по умолчанию элемент управления вам предстоит создать в этом задании.

1.   Откройте HTML-документ из файла webforms.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите выделенный ниже полужирным код для создания элемента управления, предоставляемого по умолчанию, не указывая атрибут type. Обратите внимание на атрибут autofocus, который обозначает, что в поле данного элемента управления должен появиться мигающий курсор после загрузки страницы с веб-формой, а также на атрибут placeholder, позволяющий задавать текст, заполняющий поле данного элемента управления по умолчанию, хотя эти атрибуты пока что действуют не во всех браузерах,

<IDOCTYPE html>

<html>

<head>

<title>

Пример веб-формы </title>

<body>

<Ь1>Пример веб-формы</Ь1>

<form method="post" action="webforins.php"> <table border="l" cellpadding="5">

<tr>

<td>Do yMon4aHHD</td><td><input name="name" placeholder”Введите вайе имя” autofocus> </td>

</tr>

</table>

<input type="submit" value="Предъявить">

</form>

</body>

</html>

Комментарии закрыты