Створення HTML форм. HTML форми Html form post приклади

У процесі навігації по сайтах користувач, в основному, тільки клацає по посиланнях щоб переміщатися по веб-сторінкам.

Але зрозуміло, що користувачеві іноді потрібно забезпечити власні поля введення. Ці види взаємодії включають в себе:

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

Щоб пристосуватися до цих потреб, HTML пропонує інтерактивні елементи управління форми:

• текстові поля (для однієї або декількох рядків);
• перемикачі;
• прапорці;
• випадають списки;
• віджети для завантаження;
• кнопки відправки.

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

елемент

є блоковим елементом, який визначає інтерактивну частина веб-сторінки. Як результат, всі елементи управління (такі як , або <button> ) Повинні знаходитися <i>всередині</i> елемента <form> .</p><p>Два атрибути HTML <b>необхідні</b>:</p><ul><li>action містить адресу, який визначає, <i>куди</i> буде відправлена \u200b\u200bінформація форми;</li><li>method може бути або GET, або POST і визначає, <i>як</i> буде відправлена \u200b\u200bінформація форми.</li> </ul><p>Як правило, інформація форми надсилається на <b>сервер</b>. <i>як</i> ці дані потім будуть оброблені виходить за рамки даного керівництва.</p><p>Подумайте про форму як про набір елементів управління, які працюють разом, щоб виконати <b>одну</b> операцію. Якщо ви написали форму входу на сайт, у вас могло бути <b>три</b> поля:</p><ul><li>поле для електронної пошти <input type="email"> </li><li>поле для пароля <input type="password"> </li><li>кнопка відправки <input type="submit"> </li> </ul><p>Ці три елементи HTML будуть укладені всередині однієї форми <span><form action="/login" method="POST"> </span>.</p><p>Ви можете аналогічно додати форму реєстрації на тій же HTML-сторінці, в окремому елементі <form> .</p><h2>текстові поля</h2><p>Майже всім формам потрібна <b>текстовий</b> введення від користувачів, щоб ввести своє ім'я, адресу електронної пошти, пароль, адреса та ін. Текстові поля форми приходять в різних варіантах.</p><p>Хоча ці поля дуже схожі і дозволяють користувачам вводити текст будь-якого роду (навіть неправильний), їх тип забезпечує специфічну <b>семантику</b> для введення, визначаючи, яку інформацію поле <b>має</b> містити.</p><p>Браузери можуть згодом трохи змінити інтерфейс елемента управління, щоб підвищити <i>інтерактивність</i> або підказати, який вміст очікується.</p><p>Наприклад, поле для пароля показує точки замість символів. А поле для чисел дозволяє збільшувати / зменшувати значення за допомогою клавіш вгору і вниз.</p><h2>placeholder</h2><p>Текстові поля можуть відображати <b>підказує</b> текст, який зникне, як тільки буде введений певний текст.</p><p> <input type="text" placeholder="Введіть своє ім'я"> </p><p>Якщо ви починаєте набирати щось, то побачите як текст «Введіть своє ім'я» зникне.</p><h2><label></h2><p>Так як елементи форми самі по собі не дуже описові, їм, як правило, передує текстова <b>мітка</b>.</p><p> <label>Email</label> <input type="email"> </p><p>У той час як placeholder вже забезпечує деяку підказку про те, яке очікується утримання, мітки мають перевагу залишаючись видимими в будь-який час і можуть використовуватися поряд з іншими типами елементів форми, таких як прапорці або перемикачі.</p><p>Хоча ви можете застосовувати короткі абзаци для опису елементів форми, використання <label> є семантично більш правильним, тому що вони існують тільки в формах. <label> також може бути пов'язаний з певним елементом форми за допомогою атрибута for, відповідного значенням id у поля.</p><p> <label for="first_name">ім'я</label> <input id="first_name" type="text"> </p><p>При натисканні на мітці фокус переходить до текстового поля і поміщає курсор всередину нього. Поки ця зв'язка здається марною, але стане в нагоді з прапорцями і перемикачами.</p><h2>прапорці</h2><p><b>прапорці</b> - це елементи форми, які мають тільки два стани: увімкнене. Вони в основному дозволяють користувачеві сказати: «Так» або «Ні» для чогось.</p><p> <input type="checkbox"> Запам'ятати мене</p><p>Оскільки може виявитися складно клацнути по невеликому прапорця, рекомендується помістити прапорець і його опис всередину <label> .</p><p> <label> <input type="checkbox"> Я згоден з умовами</label> </p><p>Ви можете клацнути по тексту «Я згоден з умовами» щоб переключити прапорець.</p><p>За замовчуванням прапорець вимкнений. Ви можете помітити його включеним, просто використовуючи атрибут checked.</p><p> <label> <input type="checkbox" checked> Використовувати мій платіжний адреса</label> </p><h2>перемикачі</h2><p>Ви можете надати користувачеві <b>список варіантів</b> на вибір за допомогою перемикачів.</p><p>Для роботи цього елемента форми, ваш HTML-код повинен <b>згрупувати</b> список перемикачів разом. Це досягається за допомогою одного і того ж значення для атрибута name:</p><p> <label>Сімейний стан</label> <label> <input type="radio" name="status"> неодружений</label> <label> <input type="radio" name="status"> одружений</label> <label> <input type="radio" name="status"> розлучений</label> <label> <input type="radio" name="status"> Видавець</label> </p><p>Оскільки всі перемикачі використовують однакове значення атрибуту name (в даному випадку значення status), вибір одного з варіантів скасує всі інші. перемикачі є <b>взаємовиключними</b>.</p><h3>Різниця між перемикачами і прапорцями</h3><p>Хоча прапорець існує <b>сам по собі</b>, Перемикачі можуть з'являтися тільки у вигляді <b>списку</b> (Що означає, щонайменше два варіанти).</p><p>Крім того, клацання по прапорці є <b>довільним</b>, В той час як вибір одного з перемикачів є <b>обов'язковим</b>. Ось чому неможливо вимкнути перемикач, якщо вибрати найближчий варіант. Зрештою, завжди вибирається один з перемикачів.</p><h2>випадають меню</h2><p>Якщо кількість варіантів для вибору займає надто багато місця, ви можете скористатися випадають меню <select> .</p><p>Вони працюють подібно перемикачів, відрізняється тільки компоновка.</p><p> <select> <option>січень</option> <option>Лютий</option> <option>Березень</option> <option>Квітень</option> <option>Травень</option> <option>червень</option> <option>Липень</option> <option>Серпень</option> <option>вересень</option> <option>Жовтень</option> <option>Листопад</option> <option>грудень</option> </select> </p><h3>Множинний вибір з меню, що випадає</h3><p>Якщо додати атрибут multiple, ви можете надати можливість вибрати кілька варіантів.</p><p> <label>Якими браузерами ви користуєтеся?</label> <select multiple> <option>Google Chrome</option> <option>Internet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Виберіть кілька варіантів за допомогою утримання Ctrl (або ⌘) і клацання. Це може бути гарною альтернативою застосуванню кілька прапорців в рядку.</p><h2>Приклад: повна форма реєстрації</h2> <form action="/signup" method="POST"> <p> <label>звернення</label> <label> <input type="radio" name="title" value="mr"> Г-н</label> <label> <input type="radio" name="title" value="mrs"> Г-жа</label> </p> <p> <label>ім'я</label> <input type="text" name="first_name"> </p> <p> <label>Прізвище</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Телефон</label> <input type="tel" name="phone"> </p> <p> <label>пароль</label> <input type="password" name="password"> </p> <p> <label>Підтвердіть пароль</label> <input type="password" name="password_confirm"> </p> <p> <label>Країна</label> <select name="country"> <option>Канада</option> <option>Франція</option> <option>Німеччина</option> <option>Італія</option> <option>Японія</option> <option>Росія</option> <option>Великобританія</option> <option>США</option> </select> </p> <p> <label> <input type="checkbox" name="terms"> Я згоден з умовами використання</label> </p> <p> <button> зареєструватися</button> </p> </form> <p>Також доступні і інші елементи форм, але ми розглянули найбільш використовувані.</p> <p><b>HTML теги, що визначають HTML форми на сайті</b></p> <p><b>Створюємо сайти і окремі сторінки в мережі інтернет</b> для спілкування з відвідувачами.</p> <p><b>HTML форми</b> використовуються для реєстрації відвідувачів на сайті, для інтерактивних опитувань і голосувань, дозволяють відправляти повідомлення, здійснювати покупки і так далі. <b>HTML</b> Форма створюється з однією метою: збір і подальша передача інформації на обробку програмного сценарієм або по електронній пошті.</p> <i> </i><h2>Приклад HTML форми | Вхід на сайт</h2> <p>Теги, атрибути і значення</p> <ul><li><form> </form> - визначають форму.</li> <li>name \u003d "" - визначає ім'я форми.</li> <li>method \u003d "" - визначає спосіб відправки даних з форми. Значення: "get" (за замовчуванням) і "post". Чаші використовується метод "post", так як дозволяє передавати великі обсяги даних.</li> <li>action \u003d "" - визначає url по якому дані відправляються на обробку. У нашому випадку - enter_data.php ..</li> <li><input /> - визначають такі елементи форми як кнопки, перемикачі, текстові поля для введення даних.</li> <li>type \u003d "text" - визначає текстове поле для введення даних.</li> <li>type \u003d "password" - визначає поле для введення пароля, при цьому текст відображається у вигляді зірочок або кружечків.</li> <li>type \u003d "checkbox" - визначає перемикач.</li> <li>type \u003d "hidden" - визначає прихований елемент форми - використовується для передачі додаткової інформації на сервер.</li> <li>size \u003d "25" - довжина текстового поля в символах.</li> <li>maxlength \u003d "30" - максимально допустима кількість символів, що вводять.</li> <li>value \u003d "" - визначає значення, яке буде відправлено на обробку якщо відноситься до радіобутонам або перемикачів. Значення даного атрибута в складі текстового поля або кнопки буде показано як, наприклад, Вася або Вхід в прикладі вище.</li> </ul><h2>Приклад HTML форми | Коментарі на сайті</h2> <table class="jsexam"><tr><td> <span> <title>Приклад HTML форми</title><br> </head><br> <body><br> <form action="http://сайт/comments.php" method="post" name="commentform" id="commentform"><br> <p><input type="text" name="author" id="author" value="" size="25" /><br> <small> ім'я</small><br></p><br> <p><input type="text" name="email" id="email" value="" size="25" /><br> <small> Mail</small><br></p><br> <p><textarea name="comment" id="comment" cols="48" rows="8">

Теги, атрибути і значення

• action \u003d "http: //сайт/comments.php" - визначає url за яким будуть відправлені дані з форми.
• id \u003d "" - визначає ім'я, ідентифікатор елемента форми.
• name \u003d "" - визначає ім'я елемента форми.
• - визначають текстове поле в складі форми.
• cols \u003d "" - визначає кількість колонок текстового поля форми.
• rows \u003d "" - визначає кількість рядів текстового поля форми.

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

Приклад HTML форми | Випадаючий список

Теги, атрибути і значення

• - визначають список з позиціями для вибору.
• size \u003d "" - определяeт кількість видимих \u200b\u200bпозицій списку. Якщо значення дорівнює 1, ми маємо справу з списком, що випадає.
• - визначають позиції (пункти) списку.
• value \u003d "" - містить значення, яке буде відправлено формою за вказаною url на обробку.
• selected \u003d "selected" - виділяє позицію списку в якості прикладу.

Приклад HTML форми | Список з смугою прокрутки

Збільшивши значення атрибута size \u003d "", ми отримаємо список із смугою прокрутки:

Для цього варіанту можна застосувати прапорець multiple \u003d "multiple", який робить можливим вибір декількох позицій. Його відсутність дозволяє вибрати тільки один пункт.

Дивіться додатково:

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

Щоб визначити до якого елементу форми відноситься поточна мітка, необхідно використовувати атрибут for тега . Значення атрибута for повинно відповідати значенню глобального атрибута того елемента форми, до якого буде відноситься мітка. Атрибут for можна не використовувати, якщо елемент буде знаходитися всередині елемента .

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибути форми:

• В атрибуті action вказується серверний файл зі скриптом, відповідальним за основний обробіток даних, що пересилаються з форми. Зазвичай код цього файлу пишеться на серверній мові програмування, наприклад, на мові phpабо perl.
• Атрибут enctype вказує на тип переданої на сервер інформації, якщо це просто текстові дані - text / plain, якщо з формою відсилаються файли, то слід вказати multipart / form-data.
• Атрибут method вказує і визначає форму передачі даних. Детально ми на цьому зупинятися не будемо, однак слід сказати, що для більш надійної передачі слід вказати метод post.

Елементи форми html

<input type \u003d "text" name \u003d "login" size \u003d "20" value \u003d "(! LANG: Логін" maxlength = "25" > !}

результат:

• Значення атрибута type - text - вказує на те, що це саме текстове поле
• size - розмір текстового поля в символах
• maxlength - максимальна к-ть вміщаються в поле символів
• value - початковий текст в текстовому полі
• name - ім'я елемента, необхідно для обробки даних в файлі-обробнику

результат:


Замість тексту в поле відображається маска - зірочки або кружечки

<input type \u003d "submit" value \u003d "Відправити дані">

результат:

Кнопка submit збирає всі дані з форми, введені користувачем і відправляє їх за адресою, вказаною в атрибуті action форми.

<input type \u003d "reset" value \u003d "(! LANG: Очистити форму" > !}

результат:

Кнопка повертає стан всіх елементів управління до первісного (очищає форму)

<input type \u003d "checkbox" name \u003d "asp" value \u003d "(! LANG: yes" > !}ASP<br\u003e <input type \u003d "checkbox" name \u003d "js" value \u003d "(! LANG: yes" checked = "checked" > !}javascript<br\u003e <input type \u003d "checkbox" name \u003d "php" value \u003d "(! LANG: yes" > !}PHP<br\u003e <input type \u003d "checkbox" name \u003d "html" value \u003d "(! LANG: yes" checked = "checked" > !}HTML<br\u003e

ASP
javascript
PHP
HTML



результат:

ASP
javascript
PHP
HTML

В html прапорець служить для організації множинного вибору, тобто коли необхідно і можливо вибрати кілька варіантів відповіді

<input type \u003d "radio" name \u003d "book" value \u003d "(! LANG: asp" > !}ASP<br\u003e <input type \u003d "radio" name \u003d "book" value \u003d "(! LANG: js" > !}Javascript<br\u003e <input type \u003d "radio" name \u003d "book" value \u003d "(! LANG: php" > !}PHP<br\u003e <input type \u003d "radio" name \u003d "book" value \u003d "(! LANG: html" checked = "checked" > !}HTML<br\u003e

ASP
Javascript
PHP
HTML




результат:

ASP
Javascript
PHP
HTML

radio кнопка html служить для єдиного вибору з декількох варіантів

Атрибут checked встановлює відразу елемент зазначеним

важливо: для елементів radio необхідно, щоб значення атрибуту name у всіх елементів в групі було однаковим: в такому випадку елементи будуть працювати взаємопов'язане, при включенні одного елемента, інші буду відключатися

Список, що випадає HTML

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

ASP JavaScript PHP HTML

результат:

• Список, що випадає складається з головного тега - select - який має закриває пару, а кожен пункт списку - це тег option, всередині якого відображається текст пункту
• Атрибут size зі значенням «1» вказує на те, що список в згорнутому вигляді відображає один пункт, інші відкриваються при натисканні на стрілочки меню
• Атрибут selected у пункту (option) вказує на те, що саме цей пункт буде спочатку видно, а інші пункти «згорнуті»

Для великих і складних списків є можливість додати підзаголовки - тег optgroup з атрибутом label (напис):

ASP JavaScript PHP HTML ASP по-російськи JavaScript по-російськи

Для надання можливості вибору кількох пунктів одночасно необхідно додати атрибут multiple. Але в такому випадку і атрибут size слід встановити в значення, більше, ніж 1:

текст

результат:

• Ширина елемента залежить від атрибута cols, який вказує скільки символів міститься по горизонталі
• Атрибут rows визначає кількість рядків в елементі

інші елементи

Додаткові елементи і атрибути

• Для елементів управління radioі checkboxзручно використовувати додаткові елементи, які, по-перше, роблять прив'язку тексту до самого елементу radio або checkbox, по-друге, додають обведення при кліці:

<input type \u003d "checkbox" id \u003d "book1"\u003e <label for \u003d "book1"\u003eASP</ Label\u003e

ASP

У прикладі створена напис (тег label) для елемента checkbox. Прив'язка здійснюється через атрибут id, значення якого вказано в атрибуті for написи.

результат:



• Атрибут disabled дозволяє блокувати елемент, роблячи його недоступним для зміни користувачем:

<input type \u003d "text" name \u003d "login" size \u003d "20" value \u003d "(! LANG: Логін" maxlength = "25" disabled = "disabled" >!} <input type \u003d "checkbox" name \u003d "asp" value \u003d "(! LANG: yes" > !}ASP<br\u003e <input type \u003d "checkbox" name \u003d "js" value \u003d "(! LANG: yes" checked = "checked" disabled = "disabled" > !}javascript<br\u003e


ASP
javascript