Форми призначені для надсилання даних від користувача до веб-сервера. Форми в HTML можуть складатися з текстових полів і текстових областей, прапорців і перемикачів, а також списків, що розкриваються. Все це елементи форми. Кожен елемент служить для того, щоб передати будь-яке значення сайту.
За своєю суттю HTML-форма — це веб-сторінка, на якій ви бачите області для введення своєї інформації. Після того, як ви заповните форму і натиснете кнопку відправити, інформація з форми упаковується та надсилається веб-серверу для обробки серверним сценарієм (файлом-обробником). Після обробки до вас повертається як відповідь інша веб-сторінка. Наступний малюнок наочно демонструє як працює форма:
Немає нічого складного у створенні HTML-форм. Найпростіший спосіб отримати уявлення про форми це розібрати невеликий HTML-код, а потім подивитися, як він працює. У наступному прикладі показано синтаксис створення простої HTML-форми:
Приклад: Проста HTML-форма
- Спробуй сам »
Моя перша форма:
Ім'я:
Прізвище:
Елемент
Форми вставляються на веб-сторінки за допомогою елемента . Він є контейнером для всього вмісту форми, включаючи такі елементи, як текстові поля та кнопки, а також будь-які інші теги мови HTML. Однак він не може містити інший елемент
.
Для відправки форми на сервер використовується кнопка Submit, того ж результат вийде, якщо натиснути клавішу Enter в межах форми. Якщо кнопка Submit відсутня у формі, клавіша Enter може бути використана для відправки.
Більшість атрибутів елемента впливають на обробку форми, а не її дизайн. Найбільш поширеними з яких є actionі метод. Атрибут actionмістить URL, на який інформація у формі буде надіслана для обробки сервером. Атрибут методє методом HTTP, який повинні використовувати браузери для надсилання даних форми.
Елемент
Практично всі поля для форми створюються за допомогою елемента (Від англ. Input - введення). Зовнішній вигляделемента змінюються в залежності від значення його атрибуту type:
Ось деякі значення атрибуту type:
Введення тексту та пароля
Одним із найпростіших типів елементів форми є текстове поле, призначене для введення тексту з одного рядка. Цей типвведення тексту встановлено за замовчуванням, а отже, саме однорядкове поле відобразиться, якщо ви забудете вказати атрибут type. Для додавання однорядкового поля введення тексту у форму слід всередині елемента прописати атрибут typeзі значенням text:
Поле введення пароля є різновидом звичайного текстового поля. Воно підтримує самі атрибути, як і однорядкове текстове поле. Атрибут nameвстановлює ім'я поля введення пароля, яке буде надіслано на сервер разом із паролем, введеним користувачем. Щоб створити поле для введення пароля, необхідно встановити значення password атрибуту type(password (англ.) - пароль):
Приклад створення форми з полем для введення пароля:
Приклад: Поле введення пароля
- Спробуй сам »
Ваш логін:
Пароль:
Разом із цим атрибутом можна використовувати атрибут maxlenght, значення якого визначає максимальну кількість символів, які можна ввести в цей рядок. Можна також встановити довжину поля введення, використовуючи атрибут size. За замовчуванням у більшості браузерів ширина текстового поля обмежена 20 символами. Для керування шириною елементів нових форм замість атрибута sizeрекомендується використовувати засоби каскадних таблиць стилів (CSS).
Атрибут valueзадає значення, яке за замовчуванням відображається у текстовому полі під час завантаження форми. Ввівши в поле значення за промовчанням, можна пояснити користувачеві, які саме дані та в якому форматі ви хочете, щоб користувач сюди заніс. Це як зразок, адже користувачеві набагато зручніше заповнювати форму, бачачи собі приклад.
Перемикачі (Radio)
Елемент типу radioстворює перемикачі, які використовують принцип логічного «АБО», дозволяючи вибрати лише одне з кількох значень: якщо ви вибираєте одне положення, всі інші стають неактивними. Основний синтаксис елемента-перемикача:
Атрибут nameдля перемикачів є обов'язковим і відіграє важливу роль в об'єднанні декількох елементів-перемикачів у групу. Для об'єднання перемикачів у групу необхідно встановити однакове значення атрибуту nameі різне значенняатрибуту value. Атрибут valueвстановлює значення вибраного перемикача, яке буде надіслано серверу. Значення кожного елемента-перемикача має бути унікальним усередині групи, щоб сервер знав, який варіант відповіді вибрав користувач.
Наявність атрибуту checked(з англ. — встановлений) у елемента-перемикача вказує на те, який із запропонованих варіантів має бути обраний за замовчуванням під час завантаження сторінки, якщо це необхідно. Цей атрибут може бути встановлений тільки в одного елемента-перемикача з групи:
- Спробуй сам »
Скільки вам років?
- молодше 18
- від 18 до 24
- від 25 до 35
- більше 35
Атрибут action.
Головним для елемента є атрибут actionякий вказує обробник даних для форми. Обробник даних - це файл, який описує, що потрібно робити з даними форми. Як результат цієї обробки видається нова HTML-сторінка, яка повертається браузеру. Тобто в атрибуті actionвказується URL-шлях до файлу-обробника на сервері (іноді званого сторінкою сценарію) для обробки форми. Синтаксис наступний:
Файл обробки знаходиться на сервері mytestserver.comу папці namefolderі назва серверного сценарію, який оброблятиме дані — obrabotchik.php. Саме йому будуть передані всі дані, введені вами у форму на веб-сторінці. Розширення.php вказує на те, що вказана форма обробляється сценарієм написаним мовою PHР. Сам обробник може бути написаний іншою мовою, наприклад, це може бути мова сценаріїв Python, Ruby та ін.
Бажано завжди ставити значення атрибуту action. Якщо форма повинна передати значення на ту саму сторінку, де вона розташована як значення атрибуту action вкажіть порожній рядок: action="".
Атрибут method
Атрибут методзадає те, як інформація має бути передана на сервер. Вибір методу надсилання форми залежить від даних, які потрібно надіслати разом з нею. Тут основну роль грає обсяг цих даних. Найбільш популярними є два методи передачі вихідних даних вашої форми з браузера на сервер: GETі POST. Метод встановлюється на вибір, і якщо ви його не вказали, за замовчуванням буде використовуватися GET. Розглянемо застосування кожного їх.
Метод POST
Метод POSTпакує дані форми і відсилає їх серверу непомітно для користувача, оскільки дані містяться в тілі повідомлення. Веб-браузер при використанні методу POSTвідправляє на сервер запит, що складається із спеціальних заголовків, за якими слідують дані форми. Оскільки вміст цього запиту доступний лише серверу, метод POSTзастосовується для передачі конфіденційних даних, таких як паролі, реквізити банківських карток та інша персональна інформація користувачів. Метод POSTтакож підходить для надсилання великих обсягів інформації, оскільки на відміну від методу GET, у нього немає обмежень за кількістю символів, що передаються.
Метод GET
Як ви вже знаєте, основна робота браузера — це отримувати веб-сторінки від сервера. Так ось, коли ви використовуєте метод GET, ваш браузер просто отримує веб-сторінку, як це завжди. Метод GETтакож упаковує дані форми, але, перш ніж надіслати запит серверу, приєднує їх до кінця URL-адреси. Щоб зрозуміти, як працює метод GETдавайте подивимося його в дії. Відкрийте в блокноті (наприклад Notepad++) перший приклад цього уроку (Приклад: Проста HTML-форма) і внесіть у HTML-код невелику зміну:
з атрибутом action, в якому вказується сторінка на сервері, яка оброблятиме дані передані формою.
Структура найпростішої форми:
елементи форм…
У кожній формі необхідна наявність кнопки submit, призначеної для відправки даних після заповнення форми.
Структура кнопки:
Отже, для запису практично всіх елементів форм використовується тег з атрибутом типу. Для створення кнопки, яка скидатиме всі дані з форм використовується наступна структура:
Для створення текстового поля існує параметр text. У цьому використовуються параметри: name – ім'я поля; size – для поля у симолах; maxlength – максимально можлива кількість символів у полі; value – інформація, що відображається у формі за умовчанням
Приклад запису форми з двома текстовими полями:
Результат роботи форми представлений малюнку.
У разі, якщо в текстове поле необхідно ввести велику кількість інформації, наприклад, коментар використовується форма текстової області (textarea), яка створюється за допомогою тега
Результат роботи коду з текстовою областю представлено малюнку.
Наступним елементом форм є списки, дозволяють зробити вибір з представленого безлічі значень. Створити форму списку дозволяють теги
Структура запису списку:
Для того, щоб елемент був виділений при завантаженні сторінки, необхідно в тезі
Аналогічним способом вибору є елементи форми прапорець (checkbox) та радіокнопка (radiobutton). Відмінність цих елементів у тому, що прапорець дозволяє зробити множинний вибір, а радіокнопка лише одиничний.
Структура запису прапорця та радіокнопки:
текст
Радіокнопка:
текст
У вказаних у структурі елементах виділення прапорця і радіокнопки за промовчанням використовується атрибут checked. Приклад використання прапорця, радіокнопки, а також HTML-код представлені на малюнку.
Ще одним елементом форми є кнопка, що задається за допомогою атрибуту typeтега зі значенням button:
У вказаному коді для створення кнопки є параметр onclick, в якому зазвичай задається код на мові програмування для виконання тієї чи іншої дії при натисканні на цю кнопку:
Для виведення повідомлення у спеціальному вікні використовується команда мовою javascript – aler. Результат роботи прикладу представлено малюнку.
Для вставки зображення в кнопку використовується код, поданий у наступному прикладі:
При реєстрації та вході на сайти використовується поле із прихованим тестом, що відображається у вигляді зірочок. Це елемент форми password:
Часто реєстрація на сайті розбивається на кілька сторінок і кожна наступна повинна містити інформацію з попередньої. Для того щоб приховати інформацію, що передається, використовується елемент форми hidden:
Елемент форми hidden буде невидимий у вікні браузера.
Для завантаження файлів на сервер у формах є елемент файлу. Приклад коду для завантаження файлів на сервер наведено нижче:
Отже, у цій темі були розглянуті елементи форм для створення різних HTML-сторінок, які разом з обробниками сценарію на комп'ютері або сервері дозволяють розробляти повноцінні web-додатки.
2018-06-28
Створюємо форми HTML
Привіт шановний відвідувач!
У попередніх розділах ми створили основні елементи сайту та розглянули питання, пов'язані з наповненням контенту. І тепер можемо перейти до наступної досить важливої та великої теми – до роботи з формами HTML.
HTML-форми є найважливішими елементами взаємодії, що визначають інтерактивну частину веб-сторінки. Без яких не може обійтись жоден повноцінний сайт. Адже саме з їх допомогою здійснюється основний обмін між користувачем та стороною сервера.
Але в той же час, форми є досить складними елементами інтерфейсу, з великою різноманітністю функціональних компонентів та текстових полів. Тому, в даному розділі постараємося докладніше розглянути основні її елементи, приділивши особливу увагу практичному застосуванню їх у створюваному сайті.
Причому тут також будуть порушені питання роботи з базою даних MySQL. Так як застосування форм у наших прикладах буде нерозривно пов'язане з їхньою взаємодією з таблицями БД. В яких зберігатимуться введені користувачами дані, які використовуються надалі сервером під час обробки запитів.
- Загалом про форми HTML
- форма онлайн замовлення
- Форма авторизації
- форма зворотного зв'язку
Загалом про форми HTML
Форма на веб-сторінці встановлюється блоковим елементом