Створення елементів керування

Для всіх внутрішніх елементів керування батьківським є елемент <FORM>.

На Web-Сторінку елементи керування вводяться тегом <INPUT> Наприклад, щоб створити текстове поле, можна виконати наступне:

<INPUT type = "text" name = "organization">

В таблиці 6 розглянуті атрибути тегу <INPUT>

 

Таблиця 6. Атрибути тегу <INPUT>

Параметр	Опис
type	Визначає тип елемента, призначеного для уведення даних, якщо атрибут не заданий, то вважається, за замовчуванням, що тег <INPUT> описує текстове поле.
align	Задає розташування елемента по вертикалі. Можливі значення поля такі ж, як і у випадку атрибута align у тегу <IMG>;
checked	Відповідає установці прапорця або перемикача. Встановлений прапорець або перемикач повертає пару значень name/value при представленні форми.
name	Визначає ім'я елемента, що використовується при передачі форми. Вказувати його необхідно для більшої частини елементів. Ім'я повинне бути унікальним для елемента або для групи логічний елементів
size	Задає розмір текстового поля в символах
maxlength	Вказує максимальне число символів, які можуть бути уведені в текстове поле
src	Використовується разом з атрибутом type=IMAGE і задає URL потрібного зображення
value	Визначає значення (текстовий рядок або число) для елемента, що задається атрибутом type
tabindex	Встановлення цього атрибуту дозволяє встановити порядок переміщення фокусу по елементам форми при натисканні клавіші Tab.

 

Типи елементів керування (атрибут type)

Елемент керування вводиться тегом <INPUT>, тип елементу задається атрибутом type. Розглянемо можливі елементи управління.

· Текстові поля (text). Це буквено-цифрові поля, які застосовуються для введення даних або одержання інформації від користувача. На можливість введення тексту в поле вказує курсор. Якщо в полі є вихідний текст, то користувач може встановити курсор у потрібнім місці (наприклад, <INPUT type="text" name="reply" size=15 maxlength=30>).

· size – визначає кількість видимих символів (ширину поля)

· maxlength – задає максимальна кількість символів

Якщо необхідно відобразити вже наявний текст, то додається value: <INPUT type="text" size=40 maxlength=40 value="Moї дані ">

· Поля Введення пароля (password) Це текстові поля, у яких уводяться символи, що, заповнюються зірочками «*», які приховують на екрані вміст поля. По зірочках користувач може перевірити кількість уведених символів пароля.

Наприклад, <INPUT type="password">

У цьому тегу можна вказувати ті ж атрибути (size, maxlength, value), що й у тегу діалогового текстового поля.

· Приховані поля (hidden). Для передачі даних, розрахованих разом з формою, часто використовуються приховані текстові поля. Щоб створити приховане поле, досить визначити його тип за допомогою значення hidden для атрибута type, наприклад, <INPUT type="hidden">

· Багаторядкове текстове поле (textarea). Надає можливість введення й відображення тексту в окремому прямокутному полі, що може мати вертикальну смугу прокручування. (переліків, реквізитів, інструкцій). Текст розташований на декількох рядках міститься в парі тегів <textarea>---</textarea>

Атрибути:

Cols – довжина поля в символах

Rows – припустима кількість рядків

Wrap = off – заборона автоматичного переносу, при цьому зберігаються переноси, визначені автором.

Приклад

<textarea name="text" cols="50" rows="5">

Будь якій текст

</textarea>

· Поле вибору файлів (file). Поле введення, оснащене додатковими кнопками, можна вибрати файл на диску й включити його у форму для наступного пересилання на сервер.

· Прапорці (checkbox). Вид маленьких квадратиків, визначають який-небудь вибір (включення або вимикання якого-небудь параметра). Порожні квадратики означають, що параметр виключений, квадратики з галочкою - включений.

· Перемикачі (radio). Перемикачі мають не менш двох положень і дозволяють вибрати одне (і тільки одне) положення.

· Кнопки

"button " - звичайна кнопка.

Наприклад

< input type="button"> - розміщує на формі прямокутну кнопку.

<input type="button" value="pusk" name="start"> - кнопка з написом, напис визначається тегом Value

" submit " - кнопка подачі запиту

Наприклад

<input type="submit" value="otpravit" name="zapros">

Якщо значення Value не задане, то за замовчуванням на кнопці відображається напис «Подача запиту»

"reset"- скидання. Приведення форми в початкове положення (скидання усіх введених даних).

Наприклад

<input type="reset" value="povtor">

Якщо значення Value не задане, то за замовчуванням на кнопці відображається напис «Скидання»

Кнопки з зображенням

Для введення на форму кнопки з зображенням у тег <input> вводяться атрибути type="image" src="atom1.BMP".

Наприклад

<input type="image" src="atom1.BMP" height="50" align="top" name="result">

· Списки (select). Список варіантів для вибору. Два типи списків: списки, що розкриваються, і списки із прокручуванням. В HTML передбачена можливість створення списку із множинним вибором, що дозволяє вибрати більше одного елемента. Пряме редагування вмісту списків неможливо.

1. Список, що розкривається:

<select name="spisok1"> - тег - список з ім'ям

<option value="0"> pen</option> - елемент списку, що висвічується у вікні списку

<option value="1"> pencil</option>

<option value="2"> book</option>

</select>

Поле - список

<select name="spisok2" size="3">поле з ім'ям і кількістю рядків, які одночасно відображаються (три)

<option value="0"> red</option>

<option value="1"> green</option>

<option value="2"> black</option>

<option value="3"> brown</option>

<option value="4"> blue</option>

<option value="5"> white</option>

</select>

Список із множинним вибором

<select name="spisok3" size="2" multiple> - включає режим вибору декількох елементів.

<option value="0"> red</option>

<option value="1"> green</option>

<option value="2"> black</option>

<option value="3"> brown</option>

<option value="4"> blue</option>

<option value="5"> white</option>

</select>

Тег < Option > може мати наступні атрибути:

o selected – встановлює початкове виділення в списку (якщо атрибут не встановлений ні для одного тегу <Option>, то не буде виділених елементів;

o value – вже розглядався.

· Елементи керування можна зв'язати з написами або згрупувати. Для створення написів, пов'язаних з елементами керування (прапорцями, перемикачами й ін.), в Internet Explorer 4.0 і більше пізніх версіях є тег < LABEL >