Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

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

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

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

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

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

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

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

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

Значення Опис button
Визначає кнопку. Як правило, використовується в основному спільно з мовою програмування JavaScript для активації скрипта. checkbox
включено
вимкнено Елемент графічного призначеного для користувача інтерфейсу, що дозволяє користувачеві управляти параметром з двома станами - ☑ включено і ☐ вимкнено. Елемент також називають прапорець, флаговая кнопка, Галочка, галочка. color Значення Опис button   Визначає кнопку
Елемент управління для завдання кольору (визначає палітру кольорів). 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 reset   Визначає кнопку скидання вмісту форми до значень, встановлених за замовчуванням
Визначає однорядкове текстове поле для введення рядка пошуку 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 дані форми будуть видні при передачі в адресі сторінки:

http://www.kakoitosait.ru/example.php? firstname = Вася & lastname = Пупкін

Використовуйте метод 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 Атрибут   placeholder   (HTML тега   <Input>   ) Вказує підказку, яка описує очікуване значення для введення в елемент (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 В даному прикладі ми вказали для елемента   <Input>   з типом text (однорядкове текстове поле) і типом password (поле з паролем) текстову підказку для користувача (атрибут   placeholder   ), Яка описує очікуване значення для введення ), Яка описує очікуване значення для введення.

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

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

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

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

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

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

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

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

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


Php?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: