Ім'я файлу: 9 клас.docx
Розширення: docx
Розмір: 38кб.
Дата: 17.03.2023
скачати
Пов'язані файли:
Дипломна робота Товарознавча оцінка та позиціонування телевізорі

Тема. Форми. Створення форми.

Форми дають можливість користувачам вводити інформацію. Вам напевно, не раз зустрічалися всілякі тести, опитування, голосування. Для того, щоб все це зробити на своїх web-сторінках і потрібні форми.

Тут слід зауважити, що html-форми самі по собі тільки дозволяють вводити інформацію, а ось обробляти її HTML не вміє (це все-таки мова розмітки, а не програмування). Для обробки інформації використовуються такі мови, як javascript, php і інші.

Але всьому свій час, поки ми навчимося додавати html-форми на свої сторінки, а обробляти інформацію з них будемо вчитися в інших уроках, присвячених, наприклад, javascript.

Отже, в html форма задається тегами 
 . Всі інші елементи форми розташовуються між цими тегами.

У тега  є кілька параметрів:

  • name - ім'я форми. Необхідно, якщо на сторінці кілька форм

  • action - визначає URL-адресу, за якою буде відправлена інформація введених користувачем

  • method - визначає спосіб відправки інформації

  • target - вказує ім'я вікна, в якому будуть відображатися результати обробки надісланої форми

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


Текстовеполе

Просте однорядкове текстове поле, в яке можна вводити і редагувати текст. Здається тегом 


Bottom of Form

параметри:

  • name - ім'я елемента,

  • type - тип елемента (в даному випадку - text),

  • size - розмір текстового поля в символах, які одночасно будуть видні, при введенні більшої кількості символів, вони будуть прокручуватися,

  • maxlength - максимальна кількість символів, які можна ввести в поле, якщо опустити цей параметр, то число символів буде необмеженим,

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

Можливі ще два параметри:

  • disabled - блокує поле від будь-яких змін,

  • readonly - робить поле доступним тільки для читання.

Bottom of Form

Текстове поле для введення пароля

Це таке ж текстове поле, як і попередній елемент. Різниця тільки в тому, що вводиться текст не відображається, замість нього з'являються спеціальні символи, наприклад зірочки. Найчастіше використовується при введенні паролів. Всі параметри такі ж, як у простого текстового поля, крім параметра type = "password" .

приклад:

Введітьпароль:

Прапорці

Ви, звичайно, зустрічали подібний елемент:

Top of Form

Якими мовами ви володієте:

англійська  німецький  іспанська  французький

Bottom of Form

Він задається все тим же тегом  , причому один тег задає один прапорець. Потрібно чотири прапорця, доведеться чотири рази писати input.

приклад:

Якими мовами ви володієте:
англійська німецька іспанська французький
Розглянемо його параметри:

  • type - тип елемента (в даному випадку - checkbox),

  • name - ім'я елемента, вказує програмі оброблювачу форми, який пункт вибрав користувач,

  • value - значення елемента, вказує програмі оброблювачу форми значення пункту, який вибрав користувач. У нашому прикладі вибрано пункт англійська, отже, програма-обробник отримає: lan1 = "english",

  • checked - їм зазвичай позначають найбільш ймовірні для вибору пункти, користувач клацанням миші може вибрати інші пункти.

Перемикачі

На відміну від прапорців, можна вибрати тільки один пункт. У зв'язку з цим значення параметра name повинні бути однакові для всіх елементів групи. Параметр type = "radio" , всі інші такі ж, як у прапорців.

Bottom of Form

Кнопки

Існує чотири види кнопок:

  • submit - кнопка відправки вмісту форми web-серверу. Її параметри:

    • type = "submit" - тип кнопки,

    • name - ім'я кнопки,

    • value - напис на кнопці.

  • image - графічна кнопка відправки вмісту форми web-серверу. Для її використання необхідно підготувати картинку кнопки, а потім використовувати її у вигляді кнопки. Її параметри:

    • type = "image" - тип графічної кнопки,

    • name - ім'я кнопки,

    • src - адреса картинки для кнопки.

  • reset - кнопка, що дозволяє відновити всі значення за замовчуванням в формі. Її параметри:

    • type = "reset" - тип кнопки очищення,

    • name - ім'я кнопки,

    • value - напис на кнопці.

  • button - довільна кнопка, її дії призначаються вами, тобто сама вона робити нічого не вміє. Її параметри:

    • type = "button" - тип довільної кнопки,

    • name - ім'я кнопки,

    • value - напис на кнопці.

    • onclick - вказує, що робити при натисканні на кнопку. Взагалі, у цього типу кнопок є і інші події (наприклад, подвійне клацання), але тут ми не будемо їх розглядати.

Якщо на формі кілька кнопок, то вони повинні мати різні назви.

Bottom of Form

Кнопки можна задавати і по іншому, за допомогою тегів 

скачати

© Усі права захищені
написати до нас