Зображення на кнопці підтвердження

Якщо ви хочете використовувати графіку на кнопці підтвердження, то можна встановити значення атрибута type="image". У цьому випадку прийдеться вказати і URL, по якому міститься графічний файл і альтернативний текст (для текстових браузерів). У підсумку елемент буде виглядати в такий спосіб: <input type="image" src="images/buttons/submit.gif" alt="Підтвердити" /> Тепер розглянемо, як створювати власні кнопки.

Власні кнопки

У стандартах, починаючи з HTML 4.01, є ще один елемент, призначений спеціально для створення кнопок на формі, — це <button>. У нього є атрибут type, що може приймати три значення: reset, submit і image. Особливість цього елемента полягає в тому, що він є контейнером, тобто може містити зовсім довільну розмітку. Наприклад:

<button name="submit" type="submit"> <span style="font-family: Courier: font-variant: small-caps; font-size: 14pt">Відправити </span></button>

<button name="reset" type="reset"> <img src="reset.gif" alt="Очистити" /> </button>

В елемента <button> можуть бути наступні атрибути: name, type і value, при цьому type потрібно тільки для завдання трьох стандартних значень, про які вже говорилося раніше. Якщо ви хочете, щоб ваш код знаходився у відповідності зі стандартами, включайте в елемент <button> атрибут name.

Створення меню

Ще один вид елементів контролю — це меню. Якщо дотепер мова йшла в основному про елемент <input>, то тут усе вертиться навколо елемента <select>. З його допомогою створюються меню, що випадають, прокручювані меню і т.п. У цих випадках користувачу пропонується зробити свій вибір, але не дається можливість увести власний текст. Обов'язковим є атрибут name, призначення якого вже повинно бути зрозуміло, а за допомогою атрибута size можна задати кількість одночасно виведених на екран значень.

Зверніть увагу: <select> є контейнером. Значення (визначаються за допомогою <option>) повинні розміщатися між відкриваючим і закриваючим тегами <select> і </select>. Коли користувач вибирає який-небудь пункт меню, то відповідне значення привласнюється змінній, описаній в відкриваючому тегу <select>.

Атрибут selected="selected" установлює значення за замовчуванням у меню. Прикладом може бути наступний код:

Чи часто Ви відвідуєте цей сайт?

<select name="frequency">

<option selected="selected" value="first">Bnepшe</option>

<option value="monthly">Щомісяця</орtion>

<option value="weekly">Щотижня</орtion>

<option value="daily">Щодня</option>

</select>

Існує ще і такий атрибут, як size, за допомогою якого можна установити кількість показуваних рядків. Просто замініть перший рядок приклада, що написаний раніше, на: <select name="frequency" size="4">

У першому прикладі наведення мишки на меню приводить до «вискакування» декількох рядків. В другому прикладі ці рядки (кількість яких установлюється параметром size) з'являються на екрані відразу ж після завантаження сторінки.

Але що робити, якщо виникне необхідність вибрати кілька пунктів меню одночасно? Для цього існує спеціальний атрибут елемента <select>. Синтаксис наступний: multiple="multiple". Він змушує меню завжди виглядати як прокручуваний список, незалежно від того, яке значення привласнене атрибуту size, (size опускати все рівно не можна, оскільки з його допомогою визначається, скільки рядків буде в списку.) Як приклад розглянемо наступний код:

<р> Про що б ви хотіли довідатися зі статей, що публікуються на нашому сайті? (Виберіть усе,що вас цікавить)</р>

<select name="topics" multip1e="multiple">

<option value="upgrade"> Відновлення комп'ютерів </option>

<option value="repair"> Ремонт комп'ютерів </option>

<option value="apps"> Практичні ради користувачам </option>

<option value="tricks"> Маленькі хитрощі </option>

<option value="news"> Новини комп'ютерної індустрії </option>

<option value="rumor"> Огляди новинок </option>

<option value="none" selected="se1ected"> Нічого з перерахованого </option>

</select>

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

Перш ніж закінчити розмову про елемент <select> і про меню взагалі, згадаємо ще дещо. Існує, наприклад, елемент <optgroup>. Він дозволяє групувати кілька пунктів меню усередині одного <select>. Розгляньте уважно наступні приклади:

<р> Про що б ви хотіли б довідатися зі статей, що публікуються на нашому сайті? (Виберіть усе, що вас цікавить)</р>

<select name="topics" multiple="multiple">

<option value="upgrade"> Відновлення комп'ютерів </option>

<option value="repair"> Ремонт комп'ютерів </option>

<option value="apps"> Практичні ради користувачам </option>

<option value="tricks"> Маленькі хитрощі </option>

<option value="news"> Новини комп'ютерної індустрії </option>

<option value="rumor"> Огляди новинок </option>

<option value="none" selected="selected"> Нічого з перерахованого </option>

</select>

Нічого неправильного тут немає, однак набагато приємніше було б розділити пункти по темах, особливо важливо це зробити, якщо в майбутньому ви плануєте збільшити список. Для цього використовуємо елемент <optgroup>.

<р> Про що б ви хотіли б довідатися зі статей, що публікуються на нашому сайті? (Виберіть усе, що вас цікавить)</р>

<select name="topics" size="15" multiple="multiple">

<optgroup label="Залізо">

<option value="upgrade"> Відновлення комп'ютерів </option>

<option value="repair"> Ремонт комп'ютерів </option>

</optgroup>

<optgpoup label="Програми">

<option value="apps"> Практичні ради користувачам </option>

<option value="tricks"> Маленькі хитрощі </option>

</optgroup>

<optgroup label="Новини">

<option value="news"> Новини комп'ютерної індустрії </option>

<option value="rumor"> Огляди новинок </opt1on>

</optgroup>

<option value="none" selected="selected"> Нічого з перерахованого </option>

</select>

Майте на увазі, що далеко не всі браузери знають, що таке <optgroup>. Утім, нічого страшного в цьому немає — у крайньому випадку результатом буде звичайний список без підзаголовків.

 ХІД РОБОТИ

Створіть сторінку персоналізації й ідентифікації, подібно до сторінки реєстрації електронної поштової скриньки.