Атрибуты

· TYPE. Задает тип поля ввода. Может принимать значения: кнопка (BUTTON, SUBMIT, RESET), поле ввода (TEXT), поле ввода пароля (PASSWORD), скрытое поле (HIDDEN), флажок (CHECKBOX), переключатель (RADIO), файл (FILE).

С HTML5 добавились новые типы: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week. Если браузер не поддерживает какой-то из новых типов он будет считать, что это TEXT. Как организовать поддержку старых браузеров описано на примере даты.

Чуть ниже всё это рассмотрим подробно.

· NAME. Задает имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки.

· VALUE. Задает значение поля по умолчанию или надпись на кнопке.

· ONCLICK. Задает обработчик щелчка на кнопке.

· SIZE. Задает размер поля типа TEXT.

· MAXLENGTH. Задает ограничение в поле типа TEXT вводимого количества символов.

· AUTOCOMPLETE="OFF". Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. [domelement].setAttribute('autocomplete','off');

· AUTOFOCUS="autofocus" or "". после загрузки страницы делает поле ввода активным. Пример эмуляции свойства автофокус для старых браузеров.

· readonly="readonly" или "". Запрещает изменение элемента.

· disabled="disabled" or "". Делает элемент недостпным. Недоступные элементы не передаются на сервер.

· required. Только HTML 5 Web Forms 2.0. Поле является обязательным. Автоматически проверяет заполнено ли поле.

· required email. Только HTML 5 Web Forms 2.0. Автоматически проверяет корректно ли указан адрес e-mail.

· min, max, step. Только HTML 5 Web Forms 2.0. Задает диаппазон возможных значений, для даты формат 2012-12-19.

· pattern Только HTML 5 Web Forms 2.0. Шаблон поля ввода. Примеры шаблонов для html5 form input pattern.

· placeholder. Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса. Пример настроки стиля подсказки

::-webkit-input-placeholder { /* для webkit браузеров */

color: red;

font-style: italic;

margin-left: 20px;

display: block;

background: url(back.jpg);

}

:-moz-placeholder { /* для браузеров mozilla */

color: red;

font-style: italic;

}

input[type=number] {

text-align: left; /* в Opera для полей number по умолчанию выравнивание вправо */

}

Общие атрибуты:

· accesskey. Назначает клавишу быстрого доступа элементу на странице. Клавиша доступа — один символ из набора символов документа, это может быть буква или цифра на клавиатуре с учетом выбранного языка и регистра. Например: accesskey="G"

· class = set of space-separated tokens

· contenteditable = "true" or "false" or "" (empty string) or empty HTML5

· contextmenu = ID reference HTML5

· dir = "ltr" or "rtl" or "auto"

· draggable = "true" or "false" HTML5

· dropzone = "copy", "move" или "link" HTML5

· hidden = "hidden" or "" (empty string) or empty HTML5

· id = ID

· lang = language tag

· spellcheck = "true" or "false" or "" (empty string) or empty HTML5

· style = string

· tabindex = integer Определяет порядок получения форуса в форме

· title = any value

Атрибуты обработки событий:

· onabort = function HTML5 Загрузка элемента прервана пользователем.

· onblur = function Элемент потерял фокус.

· oncanplay = function HTML5

· oncanplaythrough = function HTML5

· onchange = function Пользователь изменил значения элеменов формы.

· onclick = function

· oncontextmenu = function HTML5 Пользователь вызвал контекстное меню для элемента.

· ondblclick = function

· ondrag = function HTML5 Пользователь продолжает перетаскивание элемента

· ondragend = function HTML5 Пользователь закончил перетаскивание

· ondragenter = function HTML5 Пользователь начал перетаскивание

· ondragleave = function HTML5 Пользователь оставил элемент перетаскивания

· ondragover = function HTML5 Пользователь продолжает перетаскиавание на элементе

· ondragstart = function HTML5 Пользователь начал перетаскивать элемент

· ondrop = function HTML5 Пользователь закончил перетаскивать над элементом.

· ondurationchange = function HTML5 Изменена продолжительность (duration)

· onemptied = function HTML5 The video or audio element has returned to the uninitialized state.

· onended = function HTML5 The end of the video or audio element has been reached.

· onerror = function HTML5 Element failed to load properly.

· onfocus = function Element received focus.

· oninput = function User changed the value of element (form control).

· oninvalid = function HTML5 Element (form control) did not meet validity constraints.

· onkeydown = function User pressed down a key.

· onkeypress = function User pressed down a key that is associated with a character value.

· onkeyup = function User released a key.

· onload = function Element finished loading.

· onloadeddata = function HTML5 UA can render the video or audio element at the current playback position for the first time.

· onloadedmetadata = function HTML5 UA has just determined the duration and dimensions of the video or audio element.

· onloadstart = function HTML5 UA has begun looking for media data in the video or audio element.

· onmousedown = function User pressed down pointer button over element.

· onmousemove = function User moved mouse.

· onmouseout = function User moved pointer off boundaries of element.

· onmouseover = function User moved pointer into boundaries of element or one of its descendant elements.

· onmouseup = function User released pointer button over element.

· onmousewheel = function User rotated wheel of mouse or other device in a manner that emulates such an action.

· onpause = function HTML5 User has paused playback of the video or audio element.

· onplay = function HTML5 UA has initiated playback of the video or audio element.

· onplaying = function HTML5 Playback of the video or audio element has started.

· onprogress = function HTML5 UA is fetching media data for the video or audio element.

· onratechange = function HTML5 Either the DOM attribute defaultPlaybackRate or the DOM attribute playbackRate on the video or audio element has been updated.

· onreadystatechange = function HTML5 Element and all its subresources have finished loading.

· onreset = function The form element was reset.

· onscroll = function Element or document view was scrolled.

· onseeked = function HTML5 The value of the IDL attribute seeking changed to false (a seek operation on the video or audio element ended).

· onseeking = function HTML5 The value of the IDL attribute seeking changed to true, and the seek operation on the video or audio elements is taking long enough that the UA has time to fire the seeking event.

· onselect = function User selected some text.

· onshow = function HTML5 User requested the element be shown as a context menu.

· onstalled = function HTML5 UA is attempting to fetch media data for the video or audio element, but that data is not forthcoming.

· onsubmit = function The form element was submitted.

· onsuspend = function HTML5 UA is intentionally not currently fetching media data for the video or audio element, but does not yet have the entire contents downloaded.

· ontimeupdate = function HTML5 The current playback position of the video or audio element changed either as part of normal playback, or in an especially interesting way (for example, discontinuously).

· onvolumechange = function HTML5 Either the DOM attribute volume or the DOM attribute muted on the video or audio element has been changed.

· onwaiting = function HTML5 Playback of the video or audio element has stopped because the next frame is not yet available (but UA agent expects that frame to become available in due course).

Теперь познакомимся со всеми типами тэга <INPUT>.

Кнопка - BUTTON

Пример

<FORM>

<INPUT TYPE="BUTTON" VALUE ="Жми!" ONCLICK="alert('Нажал!');">

</FORM>

Кнопку можно задать также с помощью парного тега <button>...</button>. Внутри элемента BUTTON можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком. Вот так:

<button type="button"> <br>

Кнопочка

<img src="be.gif" alt="кнопочка не функционирует"

border="0" height="115" width="100"> <br>

</button>

Можно вместо рисунка вставить что угодно, хоть таблицу, если вам это необходимо.

<button type="button"> <br> <br> <br> <br>

<table border="1" cellspacing="0" width="200"> <tbody>

<tr> <td>нажми на кнопку</td>

<td>получишь результат</td> </tr> </tbody>

</table> <br>

</button>