Теоретичні відомості

Створення списків за допомогою тега SELECT. Використання кнопок.

1.Тег SELECT - використовується для створення|створіння| списків, що розкриваються

(Pull Down List) і дає|уявляє| можливість|спроможність| вибору одного або декількох із|із|

запропонованого переліку значень. Тег парний.

Для цього вводиться тег <SELECT> замість тега <INPUT>. У середині тега| SELECT кожен елемент з переліку можливих значень створюється елементом OPTIONS .

Атрибут "name" - визначає ім`я списку, унікальне для даної форми, яке буде

використане при передачі даних на сервер.

Атрибут "size" має значення = кількості елементів списку, які будуть на

екрані одночасно видимими. Для створення класичного

списку, що розкривається, необхідно вказати значення.

Атрибуту size=”1”. За замовчанням, на початку списку відображається той

пункт(опція), який був введеним першим.

Атрибут multiple. У полі зі|із| списком можна вибрати не один, а відразу декілька

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

2. Тег options.

Атрибут selected - так самояк і для групи перемикачів (у полі прапорець), в

полі зі|із| списком можна вказати значення, задане за

замовчанням, для цього в тегі| OPTIONS необхідно

використовувати атрибут selected.

Атрибут value - задає даному елементу списку значення.

Практична частина.

Приклад 1. Створення форми зі списком вибору дня тижня коли має дзвонити будильник. Звичайно, не забуваємо обов'язкові html-теги (HTML, HEAD, TITLE, BODY) і тег для введення форми в документ (FORM) і його атрибути. Не забудьте дати йому ім'я (NAME).Задамо для кожної опції (OPTION) значення (VALUE):

<SELECT NAME="day" size=”1”>

<OPTION VALUE="mon "> Понедельник

<OPTION VALUE="true">Вторник

…… перелічити усі 7 діб

<OPTION VALUE="san">Воскресенье

</SELECT>

Створіть форму і перегляньте її у IE.

Зрозуміло, що дані будуть відіслані в закодованому вигляді, бо протокол HTTP не переносить російських літер.

Крім розкриваючого списку є ще список, що прокручується (Scrolling List), вони між собою дуже|дуже| схожі. Його можливо створити , якщо додати|добавивши| лише один атрибут SIZE для тега| <SELECT>.

Завдання.

Скопіюйте форму прикладу1 і змініть так, щоб одночасно були видимими усі дні тижня.

Контрольні питання:

1. У чому полягає призначення форм ?

2. В якому тегу при створенні форми можливо вказати тип даних ?

3. Який тег форми дозволяє створити поле для розміщення багаторядкової примітки ?

4. В чому полягає різниця між полем-прапорець та полем-перемикач ?

5. Для чого використовується атрибут checked ?

6. Як створити у формі список, що прокручується ?

7. Як створити список, в якому одразу буде виводитися два значення ?

8. Якими мають бути значення імен полів – прапорців ?

9. Як описати поле, вміст якого буде паролем?

10. За допомогою якого елемента описуються елементи розкриваючого списку?

Завдання для СРС.

1.Створити форму яка дає можливість вибору вихідних днів тижня (двох підряд), одночасно видимих. Список створити за допомогою поля списку.

2.Змінити форму з СРС так, щоб був тільки один день вихідним. Крім того, за замовчанням це має бути – Неділя (Воскресенье), але потім його звісно можливо переобрати.

Кнопки форми – це спеціальні елементи форми, які призначені для відміни чи підтвердження введених в форму даних. Для створення будь-якої кнопки необхідно користуватися тегом INPUT або BUTTON.

Тег INPUT для створення кнопок.

Тип кнопки визначається атрибутом type.

Атрибути: name – задає назву елементу, який буде визначений при

заповнені поля сервером , наприклад name=”button”;

type – визначає тип кнопки:

submit- створює кнопку відправки, встановлюється за

замовчанням;

reset - створює кнопку очистки форми;

image – створює графічну кнопку відправки.

button - створює кнопку довільної дії;

value –задає текстовий заголовок для кнопки.

Кнопка відправки (Submit) створює у формі кнопку відправки вмісту форми

програмі - обробнику на Web -сервер.

<INPUT type = "submit" name = "submit" value = "Отправить">

При натисканні на цю кнопку дані форми відсилаються до вас.

Кнопка очищення (Reset) створює кнопку, що дозволяє відновити значення

всіх полів форми, змінені користувачем.

<INPUT type = "reset" name ="reset" value = "Очистить">

При натисканні на RESET, дані з форми зникають, поля очищуються.

Кнопка Іmage – створюється графічна кнопка відправки, при цьому графічне зображення можливо або створити у графічному редакторі, або вказати ім’я графічного файлу у атрибуті src, зображення можливо вирівнювати.

<form >

<input type="image" name=”but” src=”angel.gif “ align=’bottom”>

</form>

Тег BUTTON

Кнопки у формі можливо створювати і за допомогою тега BUTTON, який є парним і можливості таких кнопок значно ширші, ніж тих що створені за допомогою тега INPUT, хоча діють вони однаково. Кнопки , які створені тегом BUTTON можуть містити як текст так і графіку.

Завдання для СРС.

Створити форму реєстрації відвідувача сайту. Вона має містити поля введення

- імені;

- прізвища;

- адреси e-mail;

- пароля;

- адреси;

- вибору зі списку можливих значень Дати народження, при цьому поле має містити у одному рядку – число, місяць, рік.

Внизу форми мають бути дві кнопки: Очистити та Зареєструватися, а також багаторядкове текстове поле, в якому відвідувач може розповісти про себе. Форма повинна мати колір на ваш вибір.

Рекомендована література [ 8,12,16,22,23 ]

ЗМ11 Тема 10. Організація комп’ютерної безпеки та захисту інформації.