Підручник HTML 5. Стаття "Форми"

1. Угруповання даних форми
2. Текстова мітка
3. Підказка для полів вводу
4. Питання і завдання по темі

Наша взаимовыгодная связь https://banwar.org/

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

Синтаксично парний тег <Form> визначає форму в HTML документі. елемент <Form> за великим рахунком просто є контейнером, всередині якого можуть розміщуватися різні написи, елементи управління і типи вхідних елементів, прапорці, радіо-кнопки, кнопки відправки і інші HTML елементи, які ми з Вами зараз розглянемо.

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

Елемент повинен виглядати так:

<Form> елементи форми </ form>

елемент <Input> є основним елементом форми і визначає для користувача поле для введення інформації. Поле введення приймає різний вигляд, залежно від значення атрибута type , Застосованого до даного елементу:

Значення Опис button
Визначає кнопку. Як правило, використовується в основному спільно з мовою програмування JavaScript для активації скрипта. checkbox
включено
вимкнено Елемент графічного призначеного для користувача інтерфейсу, що дозволяє користувачеві управляти параметром з двома станами - ☑ включено і ☐ вимкнено. Елемент також називають прапорець, флаговая кнопка, Галочка, галочка. color
Елемент управління для завдання кольору (визначає палітру кольорів). date
Елемент управління для введення дати в форматі DD.MM.YYYY (день, місяць і рік). В елементі не вказується час. datetime-local
Елемент управління для введення дати в форматі DD.MM.YYYYThh: mm (день, місяць, рік, години і хвилини). В елементі не вказується часовий пояс. email
Визначає поле для введення адреси електронної пошти. file
Елемент управління, який дозволяє користувачеві вибрати файл. hidden
Елемент управління, який визначає приховане поле введення. image
Елемент управління, який визначає графічну кнопку "відправити форму" (значення submit). За аналогією з тегом <Img> ви повинні використовувати атрибут src , Щоб задати шлях до зображення і атрибут alt , Щоб вказати альтернативний текст, якщо зображення не буде завантажено з якихось причин. Розміри зображення задаються атрибутами width (Ширина) і height (Висота). month
Елемент управління для введення місяця і року (Month YYYY). В елементі не вказується часовий пояс. number
Елемент управління для введення числа з плаваючою крапкою. password
Визначає однорядкове текстове поле, призначене для введення пароля (символи, введені всередині поля ховаються). Використовуйте атрибут maxlength HTML тега <Input> , Щоб задати максимальну довжину значення, яке може бути введено в поле. radio
вибрано
не вибрано Елемент графічного призначеного для користувача інтерфейсу, який дозволяє користувачеві вибрати одне значення з визначеною групи значень. Елемент, як правило, називають радіокнопка (radio button) або перемикач. range
Елемент управління для введення номера (регулятор), в якому введення точного значення не є важливим. Цей тип управління використовує такі значення за замовчуванням, якщо атрибути не вказані:

• min = "0"
• max = "100"
• value = min + (max - min) / 2, або min (якщо max менше ніж min)
• step = "1"

reset
Визначає кнопку скидання вмісту форми до значень, встановлених за замовчуванням. search
Визначає однорядкове текстове поле для введення рядка пошуку submit
Визначає кнопку відправки форми tel
Визначає елемент управління для введення телефонного номера. text
Визначає однорядкове текстове поле (за замовчуванням має ширину в 20 символів).
Це значення за замовчуванням. time
Визначає елемент управління для введення часу без вказівки часового поясу (hh: mm). url
Визначає поле для введення абсолютного URL-адреси. week
Визначає елемент управління для введення порядку номера тижня в році і самого року (Тиждень NN, YYYY). В елементі не вказується часовий пояс.

З виходом HTML 5 до елементу <Input> додалося 12 нових типів (видів) полів, але на жаль, поки не всі з них мають повну підтримку всіма передовими браузерами. Як ви розумієте, до самим часто використовуваним видам полів відносяться ті, які були введені задовго до HTML 5, наприклад, такі як:

• checkbox (флаговая кнопка).
• radio (радіокнопка).
• submit (кнопкa відправки форми).
• text (однорядкове текстове поле).

Давайте розглянемо приклад використання цих елементів управління всередині форми:

<! DOCTYPE html> <html> <head> <title> HTML форми </ title> </ head> <body> <form> Ім'я: <input type = "text" name = "firstname" value = "Введіть ім'я" > <br> <br> Прізвище: <input type = "text" name = "lastname" value = "Введіть прізвище"> <br> <br> Чоловік <input type = "radio" name = "sex" value = " male "checked> Жінка <input type =" radio "name =" sex "value =" female "> <br> <br> Про себе: <br> <input type =" checkbox "name =" type1 "value =" low "> Менше 18 <br> <input type =" checkbox "name =" type2 "value =" 2old "> Від 18 до 35 <br> <input type =" checkbox "name =" type3 "value =" high " > Більше 35 <br> <input type = "checkbox" name = "type4" value = "busy"> Одружений / -а <br> <input type = "checkbox" name = "type5" value = "cat"> Є кішка <br> <br> <input type = "submit" name = "submit" value = "відправити"> </ form> </ body> </ html>

І так по порядку, що ми зробили в цьому прикладі:

• Розмістили два однорядкових текстових поля (<input type = "text">) для введення користувачем свого імені і прізвища. Присвоїли цих полях унікальні імена атрибутом name (для коректної передачі та обробки форми обов'язково вказуйте для кожного елемента <input> цей атрибут). Крім того атрибутом value встановили для цих полів значення за замовчуванням (при заповненні полів значення цього атрибута буде відповідати призначеному для користувача введення).
• Розмістили дві радиокнопки (<input type = "radio">) для вибору одного з обмеженого числа варіантів. Зверніть увагу, що для радіокнопок необхідно вказувати однакове ім'я, щоб була можливість вибрати тільки один варіант із запропонованих.
Для першої радиокнопки ми вказали атрибут checked , Який вказує, що елемент повинен бути попередньо обраний при завантаженні сторінки (в даному випадку поле зі значенням male). Він застосовується тільки для полів <input type = "checkbox"> і <input type = "radio">, в іншому випадку він ігнорується.
• Розмістили п'ять флaгових кнопок (чекбоксів), які дозволяють користувачам вказати необхідні параметри (вибрати необхідні значення). Присвоїли цих полях унікальні імена атрибутом name і атрибутом value встановили для цих полів необхідні значення.
• Заключний елемент, який ми розмістили всередині форми це кнопка, яка служить для відправки форми (<input type = "submit">). У кнопки за аналогією з іншими елементами є своє ім'я (атрибут name) і значення (атрибут value).

Результат нашого прикладу в браузері:

Рис 32 HTML форми.

Звертаю Вашу увагу, що в рамках вивчення HTML ми не будемо розглядати те, як сервери обробляють вхідні дані, лише розглянемо базові принципи передачі форми.

Оброблювач форми це, як правило, звичайна сторінка сервера, яка за допомогою скрипта обробляє вхідні (отримані) дані. Щоб вказати обробник форми, необхідно використовувати тег <Form> спільно з атрибутом action: <form action = "example.php">

Зверніть внімаеніе, що в атрибуті action вказується URL адресу того місця, куди вирушає форма. Якщо для форми не заданий атрибут action, то значенням за замовчуванням цього атрибута вважається поточна сторінка (обробник форми - поточна сторінка). У наведеному вище прикладі, передбачається, що скрипт обробки форми знаходиться всередині сторінки "example.php".

Розширення * .php використовується для файлів, написаних на мові PHP (Hypertext Preprocessor - препроцесор гіпертексту, вимовляється як "пі-ейч-пі") - скриптова мова програмування загального призначення, інтенсивно застосовується для розробки веб-додатків. В даний час підтримується переважною більшістю хостинг-провайдерів і є одним з лідерів серед мов, що застосовуються для створення динамічних веб-сайтів.

Ще одним важливим атрибутом при роботі з елементом <Form> є атрибут method, він визначає метод HTTP (get або post), який використовується при передачі форми:

<Form action = "example.php" method = "get"> або: <form action = "example.php" method = "post">

Ви можете використовувати get (метод за замовчуванням) якщо форма відправки є пасивною (як пошукової запит) і не містить конфіденційної інформації. При використанні методу get дані форми будуть видні при передачі в адресі сторінки:

Використовуйте метод post якщо форма використовує оновлення будь-яких даних, або включає в себе конфіденційну інформацію (наприклад пароль). Метод post пропонує кращу безпеку, так як представлені дані відправляються на сервер в тексті листа запиту.

Угруповання даних форми

тег <Fieldset> служить для візуальної угруповання елементів, розміщених всередині форми (HTML тег <Form> ). У всіх основних браузерах, даний елемент виділяється рамкою, а вміст елемента отримує внутрішні відступи з усіх сторін.

тег <Legend> визначає заголовок для <Fieldset> елемента, за допомогою якого групуються елементи форми.

Приклад використання:

<! DOCTYPE html> <html> <head> <title> Угруповання даних форми </ title> </ head> <body> <form> <fieldset> <legend> Будь ласка, увійдіть </ legend> Ім'я: <input type = "text" name = "firstname" value = "Введіть ім'я"> <br> <br> Прізвище: <input type = "text" name = "lastname" value = "Введіть прізвище"> <br> <br> Чоловік < input type = "radio" name = "sex" value = "male" checked> Жінка <input type = "radio" name = "sex" value = "female"> <br> <br> <input type = "submit" name = "submit" value = "відправити"> </ fieldset> </ form> </ body> </ html>

У цьому прикладі ми:

• Розмістили всередині форми (парний тег <Form> ) елемент <Fieldset> , Завдяки якому ми групуємо елементи форми, навколо форми з'являється рамка (зовнішній вигляд рамки може відрізнятися в залежності від браузера). тегом <Legend> ми визначаємо для нашої рамки заголовок "Будь ласка, увійдіть".
• Розмістили два однорядкових текстових поля (<input type = "text">) для введення користувачем свого імені і прізвища. Присвоїли цих полях унікальні імена атрибутом name (для коректної передачі та обробки форми обов'язково вказуйте для кожного елемента <input> цей атрибут). Крім того атрибутом value встановили для цих полів значення за замовчуванням (при заповненні полів значення цього атрибута буде відповідати призначеному для користувача введення).
• Розмістили дві радиокнопки (<input type = "radio">) для вибору одного з обмеженого числа варіантів. Зверніть увагу, що для радіокнопок необхідно вказувати однакове ім'я, щоб була можливість вибрати тільки один варіант із запропонованих.
• Заключний елемент це кнопка, яка служить для відправки форми (<input type = "submit">). У кнопки за аналогією з іншими елементами є своє ім'я (атрибут name) і значення (атрибут value ).

Результат нашого прикладу в браузері:

Рис 33 Угруповання елементів форми.

Текстова мітка

тег <Label> (Англ. - мітка) служить текстової міткою для елемента <Input> . За своїм виглядом мітка нічим не відрізняється від звичайного тексту, але завдяки їй користувач може вибрати елемент форми кліком по тексту, розташованих у межах елемента <Label> , А не по самому елементу <Input> .

Щоб визначити до якого елементу форми відноситься поточна мітка, необхідно використовувати атрибут for тега <label>. значення атрибута for має відповідати значенням глобального атрибута id того елемента форми, до якого буде відноситься мітка. Атрибут for можна не використовувати, якщо елемент <Input> буде знаходитися всередині елемента <Label> .

Розглянемо приклад використання:

<! DOCTYPE html> <html> <head> <title> Приклад використання тега <label> </ title> </ head> <body> <form> <label for = "yes"> Так </ label> <! - -Тут ми створюємо мітку для тега input c id = "yes" -> <input type = "radio" id = "yes" name = "choice" value = "yes" checked> <label for = "no"> Ні </ label> <! - Тут ми створюємо мітку для тега input c id = "no" -> <input type = "radio" id = "no" name = "choice" value = "no"> </ form > <br> <form> <label> Так <input type = "radio" name = "choice2" value = "yes"> </ label> <! - Тут ми поміщаємо теги <input> всередину тегів <label> ( при цьому атрибут for не потрібно) -> <label> Ні <input type = "radio" name = "choice2" value = "no" checked> </ label> </ form> </ body> </ html>

У цьому прикладі ми:

• Всередині першої форми:
  • Розмістили дві радиокнопки (<input type = "radio">) для вибору одного з обмеженого числа варіантів. Ще раз зверніть увагу, що для радіокнопок всередині однієї форми необхідно вказувати однакове ім'я, значення ми вказали різні. Для першої радиокнопки ми вказали атрибут checked , Який вказує, що елемент повинен бути попередньо обраний при завантаженні сторінки (в даному випадку радіокнопка зі значенням yes). Крім того, ми вказали для радіокнопок глобальні атрибути id , Які визначають унікальний ідентифікатор для елемента.
  • Розмістили два елементи <Label> , Які визначають текстові мітки для наших текстових полів. Зверніть увагу, що ми використовували атрибут for , Щоб визначити до якого елементу форми відноситься поточна мітка. значення атрибута for відповідає значенню глобального атрибута id необхідної нам радиокнопки.
• Всередині другої форми:
  • Розмістили дві радиокнопки (<input type = "radio">) для вибору одного з обмеженого числа варіантів. Для другої радиокнопки ми вказали атрибут checked , Який вказує, що елемент повинен бути попередньо обраний при завантаженні сторінки (в даному випадку радіокнопка зі значенням no). Крім того, ми вказали для радіокнопок унікальні значення в рамках форми і однакові імена.
  • Розмістили два елементи <Label> , Всередині них ми розмістили наші радиокнопки. На відміну від попереднього методу відсутня необхідність вказувати для радіокнопок глобальні атрибути id (Ідентифікатор для елемента), а для текстових міток використовувати атрибут for , Щоб на них послатися (зробити прив'язку).

У браузері обидва варіанти (методу) використання текстових міток виглядають ідентично:

Мал. 34 Використання текстової мітки (тег <label>).

Підказка для полів вводу

Атрибут placeholder (HTML тега <Input> ) Вказує підказку, яка описує очікуване значення для введення в елемент. Підказка відображається в полі введення до того, як користувач вводить значення.

Зверніть увагу на те, що браузер Internet Explorer має підтримку даного атрибута лише з 10-ій версії, в деяких випадках ви можете використовувати атрибут value в якості підказки для підтримки більш ранніх версій цього браузера (приклад ми розглядали вище).

Атрибут може бути використаний з полями даних наступних типів (атрибут type ):

Давайте розглянемо приклад використання:

<! DOCTYPE html> <html> <head> <title> Приклад використання атрибута placeholder </ title> </ head> <body> <form> Login: <input type = "text" name = "login" placeholder = "Введіть використовувати ваші дані "> <br> <br> Password: <input type =" password "name =" password "placeholder =" Введіть ваш пароль "> <br> <button type =" submit "> Далі </ button> </ form> </ body> </ html>

В даному прикладі ми вказали для елемента <Input> з типом text (однорядкове текстове поле) і типом password (поле з паролем) текстову підказку для користувача (атрибут placeholder ), Яка описує очікуване значення для введення.

Результат нашого прикладу:

Мал. 34а Атрибут placeholder HTML тега <input> (створення текстової підказки).

Питання і завдання по темі

Перед тим як перейти до вивчення наступної теми пройдіть практичне завдання:

• Використовуючи отримані знання складіть наступну форму оформлення замовлення:

Практичне завдання № 22.

Нюанс: у полях, де передбачається вибір, повинна бути можливість здійснення вибору кліком по тексту, а не тільки по самому елементу.

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