HTML5 за 10 минут

Действие ползунка


Как показано, элемент управления вводом пределов действует как ползунок, тогда как в поле элемента управления вводом числовых значений отображается введенное число, которое может быть увеличено или уменьшено нажатием стрелок в расположенном справа счетчике. Оба эти элемента управления позволяют ввести числовое значение. Обратите внимание на используемые в приведенном выше коде атрибуты min и max, с помощью которых задаются конкретные пределы для ввода числовых значений, а также на атрибуты step и value, задающие шаг изменения числовых значений и устанавливаемое по умолчанию значение соответственно.

Создание элементов управления вводом даты и времени

В этом задании вам предстоит создать элементы управления вводом даты и времени. К их числу относятся следующие элементы управления.

•    Дата

•    Время

•    Неделя

•    Месяц

•    Дата и время

•    Дата и местное время

Для создания перечисленных выше элементов управления выполните следующие действия.

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

2.   Введите выделенный ниже полужирным код для создания элементов управления вводом даты и времени.

<IDOCTYPE html>

<html>

<head>

<title>

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

</head>

<body>

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

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

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

<tr>

<td>Дата</tdxtdxinput name="date" type="date"></td>

</tr>

<tr>

<td>HeflenH</td><td><input name="week" type=nweeknx/td>

</tr>

<tr>

<td>MecHq</td><td><input name="month" type="month"></td>

</tr>

<tr>

<td>Bpeiw</tdxtdxinput name= "time" type="time"x/td>

</tr>

<tr>

<td>flaTa и времЖ/tdxtdxinput name="datetime" type="datetime"></td>

</tr>

<tr>

<td>flaTa и местное времЖ/tdxtdxinput name="datetimelocal" type="datetime-local"></td>

</tr>

</table>

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

</form>

</body>

</html>

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

Для выбора конкретной даты в поле соответствующего элемента управления появляется всплывающее окно селектора дат, как показано на 4.4.

Создание элемента управления выбором цвета

В этом задании вам предстоит создать элемент управления выбором цвета.

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

2.   Введите выделенный ниже полужирным код для создания элемента управления выбором цвета.

<!DOCTYPE html>

<html>

<head>

<title>

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

</head>

<body>

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

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

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

<tr>

<td>IjBeT</td><td><input name="color"

type="color"></td> </tr>

<tr>

</table>

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

</form>

</body>

</html>

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

На момент написания этой книги в поле элемента управления выбором цвета можно было вводить не только образец конкретного цвета, но и его шестнадцатеричное значение, например f f f f f f или f89f8a, что вообще характерно для HTML. Но это не очень удобно, поскольку на уровне операционной системы предоставляются удобные селекторы для выбора подходящего цвета.

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