Як створити форми html. Створення форм в HTML. Анімовані Пошук Вхідний

HTML форми - складні елементи інтерфейсу. Вони включають в себе різні функціональні елементи: поля введення і , списки <select> , Підказки і т.д. Весь код форми полягає в елемент <form> .</p> <p>Велика частина інформації веб-форм передається за допомогою елемента <input> . Для введення одного рядка тексту застосовується елемент <input type="text"> , Для кількох рядків - елемент <textarea> . елемент <select> створює список, що випадає.</p> <p>елемент <label> створює написи до полів форми. Існує два способи угруповання написи і поля. Якщо поле знаходиться всередині елемента <label> , То атрибут for вказувати не потрібно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name <input type="text" name="lastname"></label> </p><p>Поля форми можна розділяти на логічні блоки за допомогою елемента <fieldset> . Кожному розділу можна привласнити назву за допомогою елемента <legend> .</p><p> <fieldset> <legend>Контактна інформація</legend> <label>ім'я <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy> Мал. 1. Угруповання полів форми</p><p>Щоб зробити форму зрозумілішою для користувачів, в поля форми додають текст, що містить приклад, що вводяться. Такий текст називається підстановлювальний і створюється за допомогою атрибута placeholder.</p> <p>Обов'язкові для заповнення поля також необхідно виділяти. До появи HTML5 використовувався символ зірочки *, встановлений біля назви поля. У новій специфікації з'явився спеціальний атрибут required, який дозволяє відзначити обов'язкове поле на рівні розмітки. Цей атрибут дає вказівку браузеру (за умови, що той підтримує HTML5), вказівку не відправляти дані після натискання користувачем кнопки відправити, поки зазначені поля незаповнені.</p><p> <input type="text" required placeholder="Ваше ім'я"> </p><p>Для зміни зовнішній вигляд текстового поля при отриманні фокусу, використовується псевдоклас focus. Наприклад, можна зробити фон поточного поля більш темним або додати цвітну рамку, щоб воно виділялося серед інших:</p><p>Input: focus (background: #eaeaea;)</p><p>Ще один корисний html5-атрибут - атрибут autofocus. Він дозволяє автоматично встановити фокус на потрібному початковому поле для елементів <input> і <textarea> (Тільки в один елемент кожної форми).</p> <h2>Приклад створення форми реєстрації</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Реєстрація</h1> </div> <form method="post" action="form.php"> <div> <label for="name">ім'я</label> <input type="text" name="name" required> </div> <div class="radio"> Підлога <label> <input type="radio" name="sex" value="чоловічий">чоловічий <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="жіночий">жіночий <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Країна</label> <select name="country"> <option>Виберіть країну проживання</option> <option value="Росія">Росія</option> <option value="Україна">Україна</option> <option value="Білорусь">Білорусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Надіслати</button> </form> </div> <p><b>Примітка</b><br> action \u003d "form.php" - посилання на файл обробника форми. Створіть файл в кодуванні UTF-8, закачайте його на сервер і замініть action \u003d "form.php" на шлях до файлу на вашому сервері.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy> Мал. 2. Зовнішній вигляд форми за замовчуванням <p>Як видно з малюнка, кожен елемент форми має стилі браузера за замовчуванням. Очистимо стилі і оформимо елементи форми.</p><p> Form-wrap (width: 550px; background: # ffd500; border-radius: 20px;) .form-wrap * (transition: .1s linear) .profile (width: 240px; float: left; text-align: center; padding : 30px;) form (background: white; float: left; width: calc (100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: # 7b7b7b;) .form-wrap: after, form div: after (content: ""; display: table; clear: both;) form div (margin-bottom: 15px; position: relative;) h1 (font-size: 24px; font-weight: 400; position: relative ; margin-top: 50px;) h1: after (content: "\\ f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX (-50 %);) / ********************** стилізація елементів форми ******************** ** / label, span (display: block; font-size: 14px; margin-bottom: 8px;) input, input (border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: # e6e6e6;) input: focus, input: focus (box-sha dow: inset 0 0 0 2px rgba (0,0,0, .2); ) .Radio label (position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px;) .radio input (position: absolute; opacity: 0;) .radio -control (position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: # e6e6e6; border-radius: 50%; text-align: center;) .male: before (content: " \\ f222 "; font-family: FontAwesome; font-weight: bold;) .female: before (content:" \\ f221 "; font-family: FontAwesome; font-weight: bold;) .radio label: hover input ~. radio-control, .radiol input: focus ~ .radio-control (box-shadow: inset 0 0 0 2px rgba (0,0,0, .2);) .radio input: checked ~ .radio-control (color: red;) select (width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: # e6e6e6; color: # 7b7b7b; -webkit-appearance: none; / * прибираємо галочку в webkit -браузер * / -moz-appearance: none; / * прибираємо галочку в Mozilla Firefox * /) select :: - ms-expand (display: none; / * прибираємо галочку в IE * /) .select-arrow (position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; / * Активізуємо показ списку при натисканні на стрілку * / border-style: solid; border-width: 8px 5px 0 5px; border-color: # 7b7b7b transparent transparent transparent; ) Button (padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: # 60e6c5; color: white; font-size: 14px; outline: none; text-transform : uppercase;) / ********************** додаємо формі адаптивність ******************** ** / @media (max-width: 600px) (.form-wrap (margin: 20px auto; max-width: 550px; width: 100%;) .profile, form (float: none; width: 100%;) h1 (margin-top: auto; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;))</p><p><b>файл form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>"." \\ R \\ n "; $ headers. \u003d" Bcc: ваш_email "." \\ R \\ n "; if (! Empty ($ name) &&! Empty ($ sex) &&! Empty ($ email) &&! empty ($ country) && filter_var ($ email, FILTER_VALIDATE_EMAIL)) (mail ($ email, $ subject, $ msg, $ headers); echo "Спасибі! Ви успішно зареєструвалися.";)?\u003e</p><p><b>Примітка</b><br> У змінній $ subject вкажіть текст, який буде відображатися як заголовок листа; <br> Ваше_ім'я - тут ви можете вказати ім'я, яке буде відображатися в полі «від кого лист»; <br> url_вашего_сайта замініть на адресу сайту з формою реєстрації; <br> ваш_email замініть на Вашу електронну адресу електронної пошти; <br> $ Headers. \u003d "Bcc: ваш_email". "\\ R \\ n"; відправляє приховану копію на Вашу електронну адресу електронної пошти.</p> <p>Форми являють собою найбільш важливі інтерактивні елементи HTML, що дозволяють розробникам сторінок інтерактивно взаємодіяти з відвідувачами. З їх допомогою користувач може повертати коментарі з приводу відвідування певного вузла, пересилати запити або реєструватися. Розробник задає питання, створюючи форму, а користувач відповідає на них заповнюючи її. Вміст форми або передається сценарієм CGI, або по електронній пошті надсилається одержувачу. Сам процес створення форми складається з двох етапів. Перший полягає в створенні самої форми, а другий містить в собі створення на сервері сценарію CGI. Форма створюється за допомогою різних тегів і атрибутів, укладених в пару <FORM></FORM>:</p> <p>елемент <FORM> є необхідною умовою для всіх форм. Він може мати наступні атрибути:</p> <p>method Цей атрибут визначає спосіб пересилання даних сценарієм CGI. Тут протокол GET обраний за замовчуванням, але в більшості випадків розробники користуються протоколом POST, який дозволяє передавати великі обсяги даних.</p> <p>action Цей атрибут визначає шлях до сценарієм CGI або адресу електронної пошти.</p> <p>enctype Цей атрибут визначає спосіб кодування вмісту форми. Іншими словами він повідомляє браузеру про спосіб кодування інформації перед відсиланням сервера. За замовчуванням використовується значення x-www-form-encoded.</p> <p>Синтаксис форми для сценарію:</p> <p><FORM method="get" или "post" action="URL сценария" ></FORM></p> <p>Синтаксис форми для пошти: <FORM method="get" или "post" action="mailto:адрес" ></FORM></p> <p>елемент <INPUT> є базовим для всіх елементів форми. Він використовується для впровадження в форму кнопок, графічних зображень, прапорців, перемикачів, паролів і текстових полів. Незважаючи на зовнішні відмінності форм все вони пересилають сценарієм CGI дані у вигляді пар ім'я: значення. Елемент може мати вісім атрибутів позначаються як type:</p> <p>TEXT Однорядкове текстове поле, використовується для введення інформації, яку не можна ввести ні в одному з інших елементів форми. Сюди вводяться імена, адреси, посади, телефони, хобі, і дані практично будь-якого типу. Елемент може мати атрибути:</p> <p>синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping"></p> <p>PASSWORD Однорядкове поле, в якому замість символів, що вводять відображаються зірочки. Елемент може мати атрибути:</p> <p>maxlength. Задає максимально допустиму довжину вписується значення в символах.</p> <p>size. Задає максимально допустиму довжину поля в символах.</p> <p>value. Задає значення за замовчуванням, яке можна змінювати.</p> <p>синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20"></p> <p>HIDDENЕще один тип прихованого введення інформації. Дозволяє пересилати сценаріями інформацію, яка не може бути змінена користувачем. Деякі програми CGI використовують приховані поля для передачі інформації з однієї сторінки в іншу, наприклад, ім'я або номер. Такий підхід суттєво полегшує роботу користувача, позбавляючи його від необхідності повторного введення даних. Наприклад, для пересилання файлу з вихідним кодом HTML використовується наступна конструкція: <INPUT type="HIDDEN" name="file" value="anyfile.html"></p> <p>CHECKBOXФлажкі використовуються для надання можливості користувачеві відповісти однозначно: так / ні істина / неправда більше / менше і т.д. Виглядає зазвичай у вигляді хрестика або пташки. Елемент може мати атрибути:</p> <p>checked. Задає початковий статус прапорця за замовчуванням.</p> <p>value. Задає значення за замовчуванням, яке можна змінювати.</p> <p>синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked></p> <p>RADIO Перемикачі багато в чому нагадують прапорці, відрізняючись лише більш широкими функціональними можливостями вибору. У групі перемикачів може бути обраний лише один. Для кожного перемикача вказується окремий елемент INPUT.</p> <p>SUBMIT Клацання на цій кнопці призводить до пересилання вмісту форми сценарієм, який був заданий атрибутом action в елементі <FORM>. C допомогою кнопок можна обчислювати суму, завантажувати сторінки, пересилати дані, скидати значення. синтаксис:</p> <p><FORM method="get" или "post" action="mailto: Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script "> <INPUT type="submit" value="послати"></FORM></p> <p>RESET Кнопка використовується для відновлення значень, заданих за замовчуванням. Якщо значення за замовчуванням не передбачено, то воно просто обнулится. Ширина кнопки може змінюватися в залежності від інших елементів. Має так само атрибут value.</p> <p>синтаксис: <INPUT type="reset" value="очистка"></p> <p>IMAGE Багато в чому схожий на кнопку SUBMIT, тільки в якості кнопки використовується зображення. Однією з переваг є можливість передачі координат клацання користувача, що дозволяє організувати карту зображень. Елемент може мати атрибути:</p> <p>src. Задає URL файлу із зображенням.</p> <p>align. Задає вирівнювання зображення щодо тексту за допомогою значень TOP, MIDDLE та BOTTOM.</p> <p>name. Задає ім'я карти, яке так само пересилається сценарієм разом з координатами.</p> <p>синтаксис: <INPUT type="image" src="knopka.gif"></p> <p>BUTTON Створює іншу кнопку, браузери користувачів можуть використовувати значення атрибута value в якості вихідного імені файлу.</p> <p>синтаксис: <INPUT type="button"value="кнопка"></p> <p>FILE Створює керуючий елемент вибір файлу. синтаксис: <INPUT type="file"></p> <p>ACCESSKEY Задає кнопку, при натисканні якої відбувається обробка поля. синтаксис: <INPUT accesskey="a"></p> <p>SIZE задає ширину елемента в пікселях. синтаксис: <INPUT size="число"></p> <p>DISABLED Вимикає можливість змінювати вміст поля або положення кнопки. синтаксис: <INPUT disabled"></p> <p>елемент <TEXTAREA> За допомогою цього елемента створюється область для введення і перегляду тексту. Може використовуватися і не в складі форми, а як самостійні деталі сторінки. Область введення допомагає заощадити місце завдяки смугах прокрутки. Може мати атрибути:</p> <p>name. Задає ключове слово, за яким сценарій може звертатися до його вмісту.</p> <p>rows. Задає висоту області в рядках.</p> <p>cols. Задає ширину області в символах.</p> <p>синтаксис:</p> <p><FORM><H3>введи текст <TEXTAREA name="ключевое слово" rows=5 cols=30>Область для введення тексту

елемент може приймати форму списку або меню елементів. Має вкладений тег і атрибути:

name. Задає ім'я.

size. Задає максимальну кількість елементів списку, що одночасно відображаються на екрані.

multiple. Задає можливість одночасного вибору декількох значень.

елемент же задає можливі варіанти вибору меню

синтаксис: значення

Має атрибути:

selected. Задає спочатку вибране слово.

value. Задає значення обраного слова для сценарію.

елемент застосовується для логічної угруповання елементів всередині тега має атрибут label:

синтаксис:

Оберіть:

перший

другий

третій четвертий

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

приклад: Припустимо що на поточній сторінці заданий базовий URL за допомогою елемента тоді, якщо користувач введе в поле ключові слова для пошуку слово1, слово2, слово3, то браузер сформує і відішле запит для пошукової машини сервера у вигляді: http: //www.названіе.домен/? слово1 + слово2 + слово3 Якщо пошукова програма сервера підтримує стандартний синтаксис запиту з використанням знаків? і +, пошук буде здійснено.

елемент є альтернативою елементу з більш багатими можливостями - наприклад, із завданням альтернативного тексту. синтаксис:

name задає ім'я елементу.

value задає значення елементу.

type при використанні в якості кнопки приймає значення: button, submit і reset.

disabled робить недоступним даний елемент

tabindex визначає положення в послідовності переходу клавішею Tab, відключені поля форм участі не беруть в черговості.

accesskey задає клавішу доступу.

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

елемент