Вітаю вас, шановні читачі блогу сайт. Сьогодні я хочу поговорити про таку, як HTML форми. Який би не був движок вашого сайту (cms), на ньому обов'язково будуть у тому чи іншому вигляді використовуватися форми, створені за допомогою тегів Form і Input, а також атрибутів і параметрів Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .
Ну, і ще можна додати до цього елементи для створення списків, що випадають, і текстових полів — Select, Option, Textarea, Label, Fieldset, Legend.
Навіщо потрібні та як працюють форми на сучасних сайтах
Той самий рядок пошуку по сайту () створюється з використанням цих тегів, а пошук на вашому проекті буде обов'язково. Тому розуміння того, як вони влаштовані та працюють, вам зовсім не завадить для успішної роботи над дизайном, та й при самостійному розкручуванні та просуванні буде не зайвим.
Так, з обґрунтуванням необхідності вивчення цих елементів, гадаю, питань більше не повинно виникнути, тому саме час переходити безпосередньо до вивчення їх можливих варіантів.
Так, ще хочу нагадати, що ми вже встигли розглянути багато матеріалів на тему мови гіпертекстової розмітки, наприклад, трьох ) і .
За своєю суттю форми складаються з елементів, для створення яких всередині основного контейнера з тегів Form вставляють різні теги - Checked, Value, Checkbox, Radio, Checkbox, Submit та ін. , вказавши за допомогою тегів та їх атрибутів, як вона повинна буде виглядати.
Це може бути текстове поле з кнопкою відправки введеного запиту, варіанти вибору з радіокнопками (коли можна залишити натиснутою лише одну з кнопок), кілька текстових полів з кнопкою для відправки () і багато іншого.
Наприклад, у разі пошуку, за допомогою атрибута Value можна задати, що саме буде написано на кнопці розташованої поряд з полем для введення запиту. Дані, що вводяться у формах, повинні бути надалі якимось чином оброблені.
Наприклад, у разі зворотного зв'язку користувач, після того як заповнить поле зі своїм ім'ям, введе свій E-mail та текст повідомлення, а потім натисне кнопку відправки, буде вправі сподіватися на відправку даних з форми на E-mail автора сайту. Але реалізувати таке за допомогою лише однієї мови гіпертекстової розмітки (), на жаль, неможливо.
Для цього потрібно спеціальна програма обробник, яка після натискання користувачем на кнопку відправки візьме всі дані з полів зворотного зв'язку і відправить їх на E-mail власнику ресурсу. Яка саме програма це робитиме, ви повинні вказати самі за допомогою атрибуту Action.
Зазвичай програма обробки являє собою скрипт, написаний мовою PHP. Тому в атрибуті Action тега Form ви повинні прописати шлях до файлу цього скрипта, що лежить на сервері вашого хостингу. Наведу як приклад підписку на RSS стрічку мого блогу за допомогою E-mail:
Трохи незрозуміло, напевно, здається спочатку, але, думаю, що все проясниться в міру подальшої розповіді.
Теги Form та Input для створення кнопок, чекбоксів та радіокнопок
Будь-яка форма повинна бути укладена в теги, що відкриває і закриває Form. Це своєрідний контейнер для їхнього створення. Цей тег має ряд обов'язкових і необов'язкових атрибутів:
- Name – унікальне ім'я, яке потрібно вказувати, якщо у Html файлі, де ви щось робите, використовуватиметься декілька вебформ
- Action – обов'язковий атрибут, що вказує шлях до скрипту, якому будуть передані дані з неї для подальшої обробки
- Method – за допомогою нього можна змінити метод передачі даних з цієї вебформи скрипту файлу обробника. Якщо ви його не вкажете, то за умовчанням буде використовуватися метод Get, який, власне кажучи, призначений в основному для змінних і коротких повідомлень, і відкритим способом передаючи дані через адресний рядок браузера. Для передачі даних форм скрипту оброблювача все ж таки краще використовувати метод POST, призначений спеціально для надсилання текстових повідомлень закритим способом
Розглянемо інші теги, що дозволяють створювати різноманітні вебформи. Найуніверсальніший – це Input. Усередині нього обов'язково прописують атрибут Type, який визначає, що саме буде представляти собою HTML форма, створена за допомогою цього тегу.
За допомогою Input та Type можна створювати такі елементи:
- однорядкові текстові поля (Type="Text")
- поля для введення пароля (Type="Password")
- чекбокси (Type="Checkbox")
- радіокнопки (Type="Radio")
- приховані поля (Type="Hidden")
- звичайні кнопки (Type="Button")
- кнопки для надсилання даних до оброблювача (Type="Submit")
- кнопки для приведення веб-форми до початкового стану (Type="Reset")
- поля для завантаження файлів на сервер (Type="File")
- кнопки із зображенням (Type="Image")
Input не має тега, що закриває. Що саме представлятиме собою вебформа, створена за допомогою нього, цілком і повністю залежить від параметра вказаного в атрибуті Type. Якщо Type не вказано, за промовчанням буде створено текстове поле.
Приклади форм, створених на Input з різними значеннями для Type
Інші атрибути тега Input та приклади їх використання
Розглянемо, навіщо потрібні інші атрибути:
- Name – у випадку, якщо дані мають бути надіслані в скрипт програми оброблювача, то ви повинні обов'язково вказати параметр атрибута Name. Під цим ім'ям дані, надіслані з форми, фігуруватимуть у програмі обробника інформації.
- Size - за допомогою нього задається розмір поля створюваної вебформи. Значення вказується в кількості символів, які можуть поміститися в даному полі. Якщо Size не вказано, то ширина буде прийнята за умовчанням, що дорівнює 24 символам.
- Maxlength — за промовчанням кількість символів, яку можна буде ввести в Html форму, не обмежена, але за допомогою Maxlength можна встановити це обмеження. Більше символів, ніж у ньому буде вказано, ввести в поле не вдасться
- Value — за допомогою нього можна задати, що саме буде написано за замовчуванням у полі або на кнопці відправки даних
- Checked - це атрибут-прапор, який можна вставити в Input для радіокнопок (radio) або для чекбоксів (checkbox). У цьому випадку ця радіокнопка або чекбокс будуть активними при завантаженні сторінки з вебформою (у них вже стоятиме галочка)
Тепер давайте розглянемо все приклади форми з Input. Зовнішній вигляд текстового поля схожий на вигляд поля для введення пароля, тому розглянемо лише варіант створення Text, наприклад, для введення адреси електронної пошти:
Тепер розглянемо створення вебформи з радіокнопками (Radio):
Зверніть увагу, що в цій формі двічі використовується тег Input – для створення кожної з двох радіокнопок. Причому, у кожному їх прописаний атрибут Name з однаковим значенням (rezultat), а значення Value різне (YES і NO).
Це означає, що при її обробці, у разі вибору будь-якого з перемикачів, буде відправлено змінну, назва якої прописано в Name, але значення цієї змінної залежатиме від того, який саме перемикач був обраний.
Розглянемо приклад створення вебформи з чекбоксами (Checkbox):
Чекбокси відрізняються від радіокнопок можливістю вибрати одразу кілька варіантів. Name служить для визначення у файлі обробника, в якому саме чекбоксі проставлені прапорці, а Value - задає те значення, яке буде надіслано в обробник (якщо Value заданий не буде, то обробник буде відправлений текст, розташований поруч з цим чекбоксом).
Select, Option, Textarea, Label, Fieldset, Legend — списки, що випадають, текстові області та інші елементи вебформ
Спочатку хочу трохи нагадати, що таке, власне, вебформи і для чого вони потрібні на сторінках сайту. Вони в першу чергу покликані у зручному для користувача вигляді повторювати наявні в будь-якій операційній системі елементи: кнопки, поля для введення тексту, списки, прапорці, перемикачі і тому подібні речі.
Всі користувачі без будь-яких додаткових пояснень розуміють призначення цих елементів і якщо вони бачать кнопку Html форми, то розуміють, що на неї потрібно натиснути.
Причому всі складові її елементи (на зразок Select, Option, Textarea, Label, Fieldset, Legend) є вже закінченими заготовками (контейнерами), для вставки яких достатньо буде лише використовувати потрібний тег з потрібними атрибутами і параметрами.
Браузери самі знають, як відображати той чи інший елемент веб-форми. Правда, варіанти відображення одного і того ж її елемента в різних браузерах можуть трохи відрізнятися один від одного, але, як правило, не суттєво.
Т.о. виходить, що вебформи в Html є спробою перенести ключові елементи, що використовуються в будь-якій операційній системі, на сторінках веб-сайту. Але навіщо вони знадобляться на сторінках сайту?
В принципі, для того ж, навіщо аналогічні елементи використовуються в операційних системах – передача даних від користувача. У разі форм дані від користувача передаються на сервер, де обробляються спеціальною програмою (мова гіпертекстової розмітки, на жаль, не дозволяє проводити обробку даних).
Хоча дані можна відправити не тільки на сервер, але й, наприклад, електронною поштою на адресу, задану в атрибуті Action тега Form. При надсиланні з Html даних на E-mail у користувача, що заповнює поля, після натискання ним на кнопку надсилання даних, запуститься поштова програма, яка використовується на його комп'ютері за замовчуванням.
Відкриваючий тег Form у такому випадку має виглядати приблизно так:
Як ви можете переконатись, по тексту клацати для активації цього елемента марно - потрібно клацати саме по ньому самому. Саме такий стан речей і покликаний виправити тег Label. Він дозволить зробити текст поруч із елементом веб форми клікабельним, що безсумнівно покращить юзабіліті.
Але як зв'язати елемент Html форми та текст? Для цього потрібно дописати в атрибут ID з унікальним параметром, а текст потрібно оточити Label, що відкриває і закриває тегами. І це ще не все. У тезі Label, що відкриває, потрібно прописати атрибут For, параметр якого повинен бути точно таким же, як і у атрибута ID в Html тезі елемента форми. Виходить приблизно так:
Як ви можете бачити, тепер завдяки використанню Label елементи вебформи можна активувати не тільки клацанням по ньому самому, але й клацанням по тексту, розташованому поруч.
Fieldset і Legend - розбиваємо форму на частини
Ви, напевно, часто бачили, що великі форми в Html бувають розбиті на групи (Fieldset), які обведені в рамочку і кожна така група має свій заголовок (Legend). Реалізується це за допомогою двох тегів: Fieldset і Legend. Вони парні, тобто. у них повинні бути в обов'язковому порядку відкриває та закриває.
Так ось, для створення групи зі складових частин вам потрібно укласти всі ці частини у відкриваючий та закриваючий теги Fieldset. А для того, щоб задати для цієї групи заголовок (Legend), вам потрібно відразу ж після Fieldset, що відкриває, прописати конструкцію з відкриває і закриває Legend, між якими необхідно вставити текст заголовка групи.
Ось приклад створення груп за допомогою Fieldset та Legend:
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми списків, що випадають, і текстового поля
Списки в Html коді - теги UL, OL, LI та DL
MailTo - що це і як у Html створити посилання для відправки Емейла
Як задаються кольори в Html та CSS коді, підбір RGB відтінків у таблицях, видачі Яндекса та інших програмах
Що таке мова гіпертекстової розмітки Html і як переглянути список усіх тегів у валідаторе W3C
Як вставити в HTML посилання та картинку (фото) - теги IMG та A
Таблиці в Html - теги Table, Tr і Td, а також Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
Теги Font (Face, Size та Color), Blockquote та Pre - застаріле форматування тексту в чистому HTML (без використання CSS)
Як створити гіперпосилання (А, Href, Target blank), як відкривати її в новому вікні на сайті, а також зробити картинку посиланням у Html коді
За останні два роки, розробка веб-додатків (сайтів) просунулась далеко вперед і те, що ми використовували для створення сайту раніше - вже застаріло або з'явилися нові методи.
Раніше, щоб створити список, що випадає в html ( на англ. - dropdown), ми просто використовували
Спеціально для цієї статті, я знайшов 16 різних прикладів, які можуть стати в нагоді під час розробки сайту. І так приступимо.
1. Список, що настроюється
Html шаблон, який дозволяє налаштувати власні кольори на списку.
2. Зроблений на CSS3/JavaScript
Написаний на CSS3 та JavaScript. Звичайний список, що випадає.
3. Стиль: станції метро
Прозорий список зі стилістикою станцій метро.
4. Dropy. Написаний на SCSS & jQuery
5. Для довгих видаючих списків
Відмінне рішення для довгих меню.
Випадаюче меню, яке написане на чисто CSS без використання будь-яких скриптів.
Відмінно підійде для бічних меню на сайті, щоб візуально показати категорії на сайті.
8. Стильне меню налаштувань користувача
9. CSS3 випадаючий список
Зроблено у стилі UI, підійде під UI стилістику сайту.
12. Вибір прапора
Dropdown в стилі вибору країни.
13. Звичайний HTML, CSS dropdown
Сподіваюся, вам сподобалося моя добірка. Залишайте коментарі, ділитесь думкою та надсилайте власні роботи!
Як зробити список, що випадає в html (підбірка ТОП 16) від bologer
Горизонтальне меню, що випадаєвикористовується для упорядкування структури навігації сайтом. Оптимальна кількість рівнів вкладення – один-два. Що менше рівнів вкладень, то легше відвідувачу сайту знайти потрібну інформацію. Як створити звичайне горизонтальне меню, докладно викладено у .
Як зробити горизонтальне меню?
1. HTML-розмітка та базові стилі для випадаючого меню з одним рівнем вкладення
HTML-розмітка горизонтального меню, що випадає, відрізняється від звичайного меню тим, що до потрібного елементу списку
- або<оl> .
Для позиціонування вкладеного меню щодо основного меню оголошуються такі стилі:
- Для елемента списку, в який вкладений список, що випадає: li (position: relative;) ;
— для меню ul (position: absolute;) , а також значення left і top .
Для наочності та зручності форматування додамо основному меню клас topmenu, що випадає - submenu.
Приховати меню можна кількома способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) за допомогою бібліотеки jQuery.
Спосіб 1. (Display: none;)
Випадне меню ховається за допомогою .submenu (display: none;) , при наведенні показується за допомогою .topmenu li:hover .
Спосіб 2. (Visibility: hidden;)
Меню ховається за допомогою .submenu (visibility: hidden;), показується - .topmenu li:hover.
Спосіб 3. (opacity: 0;)
Меню ховається за допомогою .submenu (opacity: 0;), показується - .topmenu li:hover .submenu (opacity: 1;) . Щоб меню не з'являлося під час наведення на область, де воно розташоване, додаємо visibility: hidden; а при наведенні міняємо на visibility: visible; .
Спосіб 4. (transform: scaleY(0);)
Меню ховається за допомогою submenu (transform: scaleY(0);) , показується - .topmenu li:hover .submenu (transform: scaleY(1);) . Оскільки трансформація елемента за замовчуванням відбувається з центру, потрібно додати submenu (transform-origin: 0 0;) , тобто. із верхнього лівого кута.
Спосіб 5. За допомогою jQuery
$(".five li ul").hide(); // приховуємо меню, що випадає $(".five li:has(".submenu")").hover(function()( $(".five li ul").stop().fadeToggle(300);) /* відбираємо елемент списку, який містить елемент з классом.submenu і додаємо йому функцію при наведенні, яка показує і приховує меню */);2. 3D меню, що випадає
Цікаві ефекти можна створювати за допомогою CSS3-трансформацій, наприклад змусити меню з'являтися з глибини екрана.
* ( box-sizing: border-box; ) body ( margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : none; margin: 0; padding: 0; ) nav a ( display: block; text-decoration: none; outline: none; transition:. : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; position: relative; ). line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; ) . : FontAwesome; ). : 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; visible; opacity: 1; transform: perspective(600px) rotateX(0deg); ) .submenu li a ( color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; )
3. Меню, що розгортається, з логотипом
У цьому прикладі у верхньому розділі сторінки розташовані логотип та навігація по сайту. Як логотип може бути зображення або текст. Меню, що випадає, поступово розгортається з-під елемента верхнього списку за допомогою функції CSS3-трансформації.
4. Випадне меню, що збільшується
Ще один приклад для меню, що випадає. Ефект збільшення при появі меню реалізується за рахунок зменшення початкового розміру. submenu (transform: scale(.8);) , при наведенні розмір збільшується до.
* ( box-sizing: border-box; ) body ( margin: 0; background: url (https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( background: white; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration: none; outline: none; відтворення: блок; text-align: center; padding: 10px 0; ). 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; sans-serif; ). ; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; li:hover .submenu ( visibility: visible; opacity: 1; transform: scale(1); )
5. Меню, що під'їжджає.
Горизонтальне меню з міні-анімацією: при наведенні на посилання верхнього меню з'являється маленький кружок, який також супроводжує появу меню.
@import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; ) body:before ( content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); : none; display: block; color: #222; . Kaushan Script", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; ). left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; .topmenu li:hover a:before (transform: translate(-50%, 0); opacity: 1; ) .submenu ( position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2);box-sizing: border-box; visibility: hidden;opacity: 0;transform: translate(-50%, 20px); ; ). 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; ) .
У цій статті ми з Вами розглянемо елементи, які дозволяють створювати списки, що розкриваються, навчимося формувати групи в цих списках, розглянемо як відключати пункти і навіть групи списків, познайомимося з елементом, який дозволяє створити багаторядкове текстове поле, його надалі ви можете використовувати всередині HTML форм (елемент
Крім того, ми розмістили всередині форми кнопку, яка служить для надсилання форми (елемент з типом кнопки "надсилання форми": type = "submit" ).
Результат нашого прикладу:
Підказка для текстової області
І так ми з Вами розглянемо заключний приклад та перейдемо до практичного завдання статті цього підручника.
Завдяки атрибуту (HTML тега
Текст підказки ховається, коли користувач вводить значення (будь-який символ) у текстове поле, якщо його прибрати, то підказка буде відображена знову.
Розглянемо приклад використання:
type = "submit" name = "submitInfo" value = "надіслати" > !}
У цьому прикладі ми створили дві текстові області (елемент
Зверніть увагу на те, що якщо текстове поле доступне тільки для читання, то при цьому вміст не може бути змінено, але користувач може перейти до вмісту, виділити і скопіювати його.
Крім того, ми розмістили всередині форми кнопку, яка служить для надсилання форми (елемент з типом кнопки "надсилання форми": type = "submit" ).
Результат нашого прикладу:
Запитання та завдання на тему
Перед тим як перейти до вивчення наступної теми, пройдіть практичне завдання:
- Використовуючи отримані знання, складіть наступну форму розміщення вакансії:
Перш ніж приступити до виконання завдання, відкрийте приклад у новому вікні і уважно розгляньте форму, щоб повторити всі її моменти. Для виконання завдання Вам знадобляться знання зі статті. Якщо ви пропустили її, то поверніться до її вивчення.
Після того, як ви виконаєте вправу, проінспектуйте код сторінки, відкривши приклад в окремому вікні, щоб переконатися, що ви все виконали правильно.
Сьогодні хочу уявити невеликий «рецепт» створення списку на CSS. Ніякого JQuery, ніякого CSS3 – лише старий, добрий, кросбраузерний CSS. Приклад досить простий, тому досвідченим товаришам можливо буде нецікаво. Будемо реалізовувати список, що випадає, з соціальними кнопками.
Отже, не будемо довго міркувати, перейдемо одразу до справи
HTML
Поділися записом
- Google Plus
- ВКонтакті
- RSS
Я свідомо опускаю загальні моменти, як підключення стилів, щоб код не розростався. Внизу сторінки я дам посилання на вихідні - там все є.
Що в нас у HTML – звичайний список та незвичайний заголовок. Його незвичайність у тому, що зроблено його гіперпосиланням, яке дозволяє відстежити подію :hoverтобто наведення. Список, що випадає, буде працювати при наведенні курсору на заголовок.
CSS
Для початку розглянемо базові стилі списку, що випадає. Я намагався коментувати кожен рядок коду, щоб було зрозуміліше:
/*Скинемо відступи*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Базова обгортка*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Стиль блоку при наведенні*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Заголовок у звичайному стані*/ .droplink h3 a( text-align:center width:100%;display:block;padding:12px 0px;color:#999;text-decoration:none ) .droplink h3 a img(border:none) /*Стиль для заголовка при наведенні*/ a ( color:#FFF; font-weight:bold; position:absolute )
Тут нічого особливого, вказали розміри та стиль блоку, стиль заголовка і для обох елементів – їх стилі при наведенні курсору. Йдемо далі:
/*Приховуємо список без наведення*/ .droplink ul( list-style:none; display:none ) /*Відображаємо список при наведенні*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( display:block)
Цей код вже цікавіший і показує, як поводиться випадаючий списокпри наведенні курсору. У звичайному стані стоїть display:none,тобто він не відображається. При наведенні показуємо його блоком. Ось і весь секрет. Тепер трохи оформимо елементи списку та вставимо іконки:
/*Стиль елемента списку*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block;color:#FFF; background-repeat:no-repeat;background-position: 10px 3px ) /*Стиль елемента при наведенні*/ .droplink li a:hover( background-color:#999 ) /*Іконки*/ .facebook a (background-image :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
Ось, власне, і все. Випадаючий список готовий і виглядає досить симпатично. Можна оформити елементи на власний розсуд, додати закруглених кутів та інших «примочок».
Якщо потрібно, щоб список «перекривав» текст під ним під час наведення — дивіться убік z-index.
Якщо щось незрозуміло чи не виходить — питайте в коментарях або скористайтеся кнопкою «Надіслати повідомлення», вона там —>