Уведення даних: елемент INPUT

Синтаксис: <INPUT> (умісту й кінцевого тегу немає) Атрибути: id, class, style, title, lang, dir, події type = text | password | checkbox | radio | submit | reset | file | hidden | image | button (тип уведення) name = CDATA (ім'я керуючого елемента) value = CDATA (початкове значення елемента) checked = checked (стан обраний для прапорців і перемикачів) readonly = readonly (тільки читання для тексту й паролів) disabled = disabled (елемент заборонений) size = CDATA (початкова ширина елемента) maxlength = число (максимальна кількість символів тексту) src = URI (URI графічного образа кнопки) alt = текст (альтернативний текст для кнопки) usemap = URI (URI клієнтської карти посилань) ismap = ismap (серверна карта посилань) accesskey = символ (ім'я клавіші швидкого доступу) tabindex = число (номер у порядку натискання табуляції) accept = типи файлів (список припустимих типів файлів) onfocus = сценарій (при одержанні елементом фокуса) onblur = сценарій (при втраті елементом фокуса) onselect = сценарій (при виборі тексту елемента) onchange = сценарій (при зміні значення елемента) Підтримка: Атрибути accept, usemap й ismap ігноруються; клавіша, задана в accesskey, повинна натискатися разом з Alt (5.0+) Атрибути accept, alt, accesskey, tabindex, disabled, readonly, usemap й ismap ігноруються (4.0+)

Елемент INPUT створює керуючий елемент форми, призначений для уведення даних користувачем. Він може втримуватися в будь-яких блокових або текстових елементах, крім BUTTON, але багато оглядачів відображають його тільки тоді, коли він перебуває усередині елемента FORM. Даний елемент використається для створення різних керуючих елементів, залежно від значення атрибута type:

Text

Однорядкове поле уведення тексту (прийнято за замовчуванням). Атрибут value задає початкове значення тексту, size — розмір поля уведення в символах, а maxlength — максимально можлива кількість символів у даному полі. Атрибут readonly забороняє зміна тексту поля.

Password

Поле уведення пароля. Єдина відмінність від поля уведення тексту полягає в тому, що вводять сімволи, що, маскуються, звичайно заміною на зірочки. Однак, уведена інформація передається серверу як звичайний текст, тому цей елемент не забезпечує рівня безпеки, достатнього для передачі номерів кредитних карт або інший істотно важливої інформації.

Checkbox

Прапорець. Атрибут value задає значення цього елемента, коли він обраний, а атрибут checked — чи обраний спочатку.

Radio

Перемикач. Атрибут value задає значення цього елемента, коли він обраний, а атрибут checked — чи обраний спочатку.

Reset

Кнопка скидання форми. Необов'язковий атрибут value перекриває текст кнопки, прийнятий за замовчуванням.

Submit

Кнопка пересилання форми. Необов'язковий атрибут value перекриває текст кнопки, прийнятий за замовчуванням. Якщо форма містить кілька таких кнопок, то атрибут name використається для передачі імені кнопки оброблювачеві форми, що дозволяє останньому здійснювати різні дії залежно від того, яка із кнопок пересилання форми була натиснута.

Image

Графічна кнопка пересилання форми. Атрибут src задає URI графічного образа кнопки, а alt — альтернативний текст напису на кнопці. При щиглику мишею по такій кнопці відбувається пересилання форми, причому координати щиглика миші передаються серверу у вигляді name. x= x-value й name. y= y-value, де name — ім'я кнопки, а x-value й y-value — координати в пікселях щодо верхнього лівого кута образа. Атрибут usemap указує на клієнтську карту посилань і його значенням повинне бути ім'я закладки, задане атрибутом name відповідного елемента MAP. Атрибут ismap указує на серверну карту посилань.

Button

Кнопка загального виду. Атрибут value задає текст кнопки, а атрибут onclick повинен задавати сценарій, викликуваний при натисканні цієї кнопки.

File

Селектор файлів. Атрибут value задає початкове ім'я файлу, але оглядачі звичайно ігнорують його з міркувань безпеки. Необов'язковий атрибут accept задає список типів файлів, розділених комами, які підтримуються сервером оброблювача форми. Цей список може використатися для отфильтровки тільки припустимих файлів, але сучасні оглядачі звичайно ігнорують цей атрибут. Форма, що містить селектор файлів, повинна мати атрибути method =post й enctype ="multipart/form-data".

Hidden

Схований елемент.

Атрибут disabled забороняє даний керуючий елемент. Це означає, що елемент не може одержати фокус, не доступний шляхом натисканні табуляції й не може бути успішним. Спосіб відображення забороненого елемента залежить від оглядача.

Необов'язкові атрибути accesskey й tabindex застосовні до всіх типів елементів, крім схованих:

Атрибут accesskey задає символ Unicode як клавіша швидкого доступу до елемента.

Значением атрибута tabindex повинне бути ціле число в діапазоні від 0 до 32767. Це число задає номер даного елемента при русі по Веб-сторінке натисканнями клавіші Tab. Якщо tabindex дорівнює 0 або не задано, то даний елемент одержить фокус після всіх елементом з позитивним значенням tabindex. При збігу значень tabindex у декількох елементів першим одержує фокус той, котрий раніше зустрічається в документі.

Даний елемент підтримує обробку наступних нестандартних подій:

onfocus — відбувається, коли елемент одержує фокус;

onblur — відбувається, коли елемент губить фокус;

onselect — відбувається, коли обраний текст у поле типу text або password;

onchange — відбувається, коли елемент губить фокус і його значення змінилося з моменту попереднього одержання фокуса.

Приклади використання елемента INPUT наведені в попередньому розділі.

Кнопки: елемент BUTTON

Синтаксис: <BUTTON>…</BUTTON> (текстовий елемент) Атрибути: id, class, style, title, lang, dir, події type = submit | reset | button (тип уведення) name = CDATA (ім'я керуючого елемента) value = CDATA (початкове значення кнопки) disabled = disabled (елемент заборонений) accesskey = символ (ім'я клавіші швидкого доступу) tabindex = число (номер у порядку натискання табуляції) onfocus = сценарій (при одержанні елементом фокуса) onblur = сценарій (при втраті елементом фокуса) Підтримка: Відповідає стандарту; клавіша, задана в accesskey, повинна натискатися разом з Alt (5.0+) Не підтримується

Елемент BUTTON створює кнопку форми. Він може містити будь-які текстові елементи, крім A, BUTTON, IFRAME, INPUT, LABEL, SELECT й TEXTAREA, і будь-які блокові елементи, крім FORM й FIELDSET. Він може втримуватися в будь-яких текстових і блокових елементах, крім BUTTON.

Кнопки, створені цим елементом, подібні до кнопок, створеним елементом INPUT, але вони можуть мати вміст. Атрибут name задає ім'я даного керуючого елемента, а value — його початкове значення. Атрибут type задає тип кнопки:

Submit

Кнопка пересилання форми (прийнято за замовчуванням).

Reset

Кнопка скидання форми.

Button

Кнопка загального виду.

Атрибут disabled забороняє даний керуючий елемент. Це означає, що елемент не може одержати фокус, не доступний шляхом натисканні табуляції й не може бути успішним. Спосіб відображення забороненого елемента залежить від оглядача. Інші необов'язкові атрибути:

Атрибут accesskey задає символ Unicode як клавіша швидкого доступу до елемента.

Значением атрибута tabindex повинне бути ціле число в діапазоні від 0 до 32767. Це число задає номер даного елемента при русі по Веб-сторінке натисканнями клавіші Tab. Якщо tabindex дорівнює 0 або не задано, то даний елемент одержить фокус після всіх елементом з позитивним значенням tabindex. При збігу значень tabindex у декількох елементів першим одержує фокус той, котрий раніше зустрічається в документі.

Даний елемент підтримує обробку наступних нестандартних подій:

onfocus — відбувається, коли елемент одержує фокус;

onblur — відбувається, коли елемент губить фокус.

Наступний приклад є переробкою з використанням елемента BUTTON приклада форми, наведеного вище:

Code 8.2 <FORM action="http://mysite.com/cgi-bin/adduser" method="post"> <P> <LABEL for="firstname">Ім'я: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Прізвище: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">E-mail: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="Male" checked="checked"> Чоловік<BR> <INPUT type="radio" name="sex" value="Female"> Жінка<BR> <BUTTON name="submit" value="submit" type="submit">Послати</BUTTON> <BUTTON name="reset" type="reset">Скинути</BUTTON> </P></FORM>

Відображатися ця форма буде приблизно так: