Створення форм HTML. CSS форми Як створити форму реєстрації html з м'язів

Форми трапляються в інтернеті майже на кожному сайті. Наприклад, коли Ви вводите логін та пароль на сайті, дані заповнюються через форми і відправляються на сервер. Також прикладом форми є різні опитування.

Синтаксис тега

Тег

Перетворюється на сторінку на наступне:

Пояснення, наприклад

• action="" - говорить про те, що обробка даних відбуватиметься на цій сторінці.
• - атрибут type="radio" говорить про те, що потрібно відобразити текст після цього коду як кнопку вибору. Атрибут name і value у цьому тезі нам нині грають невелику роль, т.к. ми зараз не вивчаємо php (див. уроки php).
• - атрибут type="text" говорить про те, що це текстове поле. Тут також є два важливі атрибути: name (для php) і value (значення за умовчанням).
• - атрибут type="textarea" говорить про те, що це буде текстове поле. Різниця від попереднього випадку лише тому, що він дозволяє записувати великий обсяг тексту.
• - атрибут type="submit" свідчить, що це кнопка. У атрибуті value пишеться те, що буде написано на кнопці.

Докладніше про всі ці елементи можна прочитати у 15 уроці: елементи тега

Структура найпростішої форми:

елементи форм…

У кожній формі необхідна наявність кнопки submit, призначеної для відправки даних після заповнення форми.

Структура кнопки:

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

Для створення текстового поля існує параметр text. У цьому використовуються параметри: name – ім'я поля; size – для поля у симолах; maxlength – максимально можлива кількість символів у полі; value – інформація, що відображається у формі за умовчанням

Приклад запису форми з двома текстовими полями:

Результат роботи форми представлений малюнку.

У разі, якщо в текстове поле необхідно ввести велику кількість інформації, наприклад, коментар використовується форма текстової області (textarea), яка створюється за допомогою тега із наступними атрибутами: name – ім'я області; cols – кількість стовпців області; rows – кількість рядків; wrap – спосіб перенесення сток (on – переносити рядки, off – не переносити рядки).</p><p>До вищезазначеного коду додамо поле текстової області:</p><p>Коментар: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Результат роботи коду з текстовою областю представлено малюнку.

Наступним елементом форм є списки, що дозволяють зробити вибір із представленої безлічі значень. Створити форму списку дозволяють теги з параметром value, що відповідає за значення елемента та з параметрами name, в якому вказується ім'я списку, size, що відповідає за кількість видимих ​​елементів.

Структура запису списку:

<
текст
текст

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

Аналогічним способом вибору є елементи форми прапорець (checkbox) та радіокнопка (radiobutton). Відмінність цих елементів у тому, що прапорець дозволяє зробити множинний вибір, а радіокнопка лише одиничний.

Структура запису прапорця та радіокнопки:

текст

Радіокнопка:

текст

У вказаних у структурі елементах виділення прапорця і радіокнопки за промовчанням використовується атрибут checked. Приклад використання прапорця, радіокнопки, а також HTML-код представлені на малюнку.

Ще одним елементом форми є кнопка, що задається за допомогою атрибуту typeтега зі значенням button:

У вказаному коді для створення кнопки є параметр onclick, в якому зазвичай задається код мовою програмування для виконання тієї чи іншої дії при натисканні на цю кнопку:

Для виведення повідомлення у спеціальному вікні використовується команда мовою javascript – aler. Результат роботи прикладу представлено малюнку.

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

При реєстрації та вході на сайти використовується поле із прихованим тестом, що відображається у вигляді зірочок. Це елемент форми password:

Часто реєстрація на сайті розбивається на кілька сторінок і кожна наступна повинна містити інформацію з попередньої. Для того щоб приховати інформацію, що передається, використовується елемент форми hidden:

Елемент форми hidden буде невидимий у вікні браузера.

Для завантаження файлів на сервер у формах є елемент файлу. Приклад коду для завантаження файлів на сервер наведено нижче:

Отже, у цій темі були розглянуті елементи форм для створення різних HTML-сторінок, які разом з обробниками сценарію на комп'ютері або сервері дозволяють розробляти повноцінні web-додатки.

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 використовувався символ зірочки *, встановлений біля назви поля. У новій специфікації з'явився спеціальний атрибут, який дозволяє відзначити обов'язкове поле на рівні розмітки. Цей атрибут дає вказівку браузеру (за умови, що той підтримує 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="form.php" - посилання на файл обробника форми. Створіть файл у кодуванні UTF-8, закачайте його на сервер та замініть action="form.php" на шлях до файлу на вашому сервері.</p> <br><img src='https://i1.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; : 30px; ) form ( background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; ) 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; .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 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 .= "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 "Дякую! Ви успішно зареєструвалися."; ) ?></p><p><b>Примітка</b><br>У змінній $subject вкажіть текст, який буде відображатися як заголовок листа; <br>Ваше_ім'я — тут ви можете вказати ім'я, яке відображатиметься в полі «від когось лист»; <br>url_вашого_сайту замініть на адресу сайту з формою реєстрації; <br>ваш_email замініть на вашу адресу <a href="/email-google-registration-in-russian-registration-and-creation-of-email-in-gmail/">електронної пошти</a>;<br>$headers .= "Bcc: ваш_email". "\r\n"; надсилає приховану копію на вашу адресу електронної пошти.</p> <p>Я абсолютно впевнений, що, бігаючи по Інтернету, Ви не раз зустрічали різні форми, наприклад, форму реєстрації, форму входу в систему, форму зворотного зв'язку та багато інших <b>HTML форми</b>.</p><p>Власне форма складається з різних елементів введення: текстових полів, текстових областей, радіо-кнопок, перемикачів, кнопок і так далі.</p><p>І в цій статті Ви навчитеся створювати абсолютно будь-які.</p><p>Спочатку створіть найпростішу <b>HTML-сторінку</b>, в яку додайте контейнер (тег <b><div> </b>), що вирівнює свій вміст по центру. Сподіваюся, що Ви з цим легко впораєтеся.</p><p>А тепер займемося формою. Форма починається з тега <b><form> </b>відповідно закінчується закриваючим тегом <b></form> </b>. Цей тег має кілька атрибутів, які дуже бажано заповнювати. Але для початку давайте створимо найпростішу форму з атрибутами тега <b><form> </b>щоб Вам було зрозуміліше призначення кожного з них:</p><p> <form name = "form1" action = "script/request.php" method = "post"><br></form> </p><p>Тут у нас починається опис форми, яка має такі атрибути:</p><p>1) Атрибут " <b>name</b>Значення цього атрибуту означає ім'я <b>HTML форми</b>. Постає питання, навіщо це треба? Відповідь дуже проста: якщо Ви використовуватимете не одну форму, а кілька, то щоб відрізнити одну форму від іншої, необхідно задавати різні імена. А самі імена потрібні для того, щоб звертатися до форм, наприклад, через <b>JavaScript</b>. Я Вам відкрию маленький секрет, який я Вам не раджу використовувати, але заради чесності, скажу про нього. Насправді форми можна легко розрізняти і без імен, тому, взагалі кажучи, ім'я форми зовсім необов'язково. Але я <b>НАПОЛЕГЛИВО</b>рекомендую давати формам імена, адже Вам самим так простіше зрозуміти, за що кожна з форм відповідає.</p><p>2) Атрибут " <b>action</b>Значення цього атрибуту відповідає за шлях до файлу скрипта, який буде обробляти форму. Тобто мало ввести дані у форму, адже їх ще потрібно відповідним чином обробити, і ось якраз шлях до цього <i>файлу-оброблювачу</i>та знаходиться у значенні атрибуту " <b>action</b>".</p><p>3) Атрибут " <b>метод</b>". У нього може бути одне з двох дуже популярних значення:" <b>post</b>"і" <b>get</b>Цей атрибут визначає спосіб відправки. Не вдаватимуся в подробиці, просто скажу, що перший спосіб є прихованою відправкою даних, а другий відкритою. Щоб стало ще зрозуміліше, то давайте розглянемо дві адреси переходу:</p><p>а) <b>http://mysite.ru/scipt/request.php</b></p><p>б) <b>http://mysite.ru/script/request.php?a=7&b=Michael</b></p><p>У першому випадку користувач не бачить, що відправляє (метод " <b>post</b>"), а в другому він реально бачить імена змінних та їх значення (метод " <b>get</b>"). Ви, наприкінці статті, можете спробувати надіслати форму за допомогою двох <a href="/terminologiya-rezervnogo-kopirovaniya-rezervnoe-kopirovanie/">різних методів</a>і переконатися у їх відмінності. Але поки що скажу, що <b>МІСТО</b>частіше використовують метод " <b>post</b>", тобто приховане відправлення.</p><p>Це був опис самої форми, а тепер можна зайнятися додаванням елементів у форму.</p><p>Перше, що ми додамо – це текстове поле. Додається текстове поле за допомогою тега <b><input> </b>, а точніше за допомогою атрибуту цього тега <b>type</b>"зі значенням" <b>text</b>Також перед створенням текстового поля рекомендується написати, що це за поле, наприклад, " <i>Ваше ім'я</i>". Усередині тега <b><form> </b>напишіть такий рядок:</p><p>Ваше ім'я: <input type = "text" name = "firstname" value = "Тут Ваше ім'я"> </p><p>Знову ж таки, давайте розберемо атрибути:</p><p>1) Атрибут " <b>type</b>відповідає за тип елемента введення. <a href="/cel-sbora-i-obrabotki-personalnyh-dannyh-poruchenie-na-obrabotku/">даному випадку</a>Ми вказали, що це звичайне текстове поле. У наступних елементах ми змінюватимемо значення цього атрибуту.</p><p>2) Атрибут " <b>name</b>" відповідає за ім'я елемента. Тут ми вказали, що ім'я <a href="/vstavka-obektov-v-pole-s-tipom-dannyh-ole-kak-vstavit-kartinku-v-bazu-dannyh/">даного поля</a> <b>firstname</b>.</p><p>3) Атрибут " <b>value</b>відповідає за значення цього поля за замовчуванням.</p><p>Як кажуть, краще один раз побачити, ніж сто разів почути, тому краще Ви наберете ( <b>причому саме наберіть, а не скопіюйте!</b>) цей текст у редакторі, а потім подивіться результат у браузері.</p><p>Тепер створимо ще одне схоже поле, але не для введення звичайних символів, а для введення пароля. Тобто має бути все те саме, але тільки текст повинен бути прихований за <i>зірочками</i>. Тому, перейшовши на наступний рядок (тег <b><br> </b>), напишемо такий код:</p><p>Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль"> </p><p>Як бачите, тепер значенням атрибуту " <b>type"</b>є " <b>password</b>Інші атрибути ті ж, що і для звичайного текстового поля.</p><p>Наступний елемент - це список, що випадає. Створюється він трохи складніше, тому що тут необхідно не тільки оголосити створення списку, що випадає, але ще й додати елементи в цей список. Напишемо, перейшовши на наступний рядок (далі, згадувати про це не буду) наступний <b>HTML-код</b>.</p><p>Виберіть варіант: <br><select name = "choice"><br> <option value = "1">Варіант 1 <br> <option value = "2">Варіант 2 <br> <option value = "3">Варіант 3 <br></select> </p><p>Тег <b><select> </b>означає початок списку, що випадає. Закінчується список тегом <b></select> </b>. Атрибут <b>name</b>Ясний, бо вже пояснював його кілька разів. Елементи списку створюються за допомогою тега <b><option> </b>. Значення атрибуту " <b>value</b>означає, яке значення буде у змінної <b>choice</b>(наприклад, в <b>JavaScript</b>), тобто або <b>choice = 1</b>, або <b>choice = 2</b>, або <b>choice = 3</b>. Відразу після закінчення опису тега <b><option> </b>ставиться те, що побачить користувач у списку, що випадає. Знову ж таки, краще подивіться в браузері, і Вам все відразу стане зрозуміло.</p><p>Тепер додамо текстову область, використовуючи тег <b><textarea> </b>:</p><p>Напишіть що-небудь: <br><br><br><textarea name = "message" rows = "10" cols = "15">Повідомлення

Тут ми з Вами створюємо текстову область заввишки 10 рядків (значення атрибуту " rows") і шириною в 15 символів (значення атрибута " cols").

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

Наступний елемент – це радіо-кнопка. Радіо-кнопка - це набір таких " кружечків", з яких можна вибрати тільки один. Створюються радіо-кнопки за допомогою HTML-тега , а, точніше, за допомогою значення " radio"атрибута" type". Напишемо такий HTML-код:

Виберіть щось одне:
Варіант 1
Варіант 2
Варіант 3

Тут я зупинюся на атрибуті name", тому що крім завдання імені у нього є ще одна дуже важлива особливість. Якщо Ви НЕзробите однаковими імена у цих трьох радіокнопок, то вони стануть незалежними, а, отже, можна буде вибрати відразу кілька варіантів. Щоб переконатися в цьому, поміняйте імена, а потім спробуйте вибрати відразу кілька варіантів, і Ви відразу переконаєтеся в моїх словах. Тому одна група радіокнопок повинна мати те саме значення атрибута " name". Атрибут " value" означає значення змінної " choiceradio(Знову ж, наприклад, в JavaScript). Відразу після опису тега йде текст, який побачить користувач поряд із відповідною радіо-кнопкою.

Ще одним елементом форми є перемикачі ( checkbox). Створюються вони знову ж таки за допомогою тега . Напишемо такі рядки:

Ви погоджуєтесь з нашими правилами:

Я думаю, що тут все прозоро, тож пояснювати не буду. Раджу лише просто подивитися, як це виглядає, у браузері. І скажу, що якщо прапорець стоятиме, то значення змінної " terms"буде" yes", якщо не буде стояти, то значення цієї змінної буде "", тобто порожнім рядком.

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

Виберіть файл для завантаження:

HTML теги, що визначають HTML форми на сайті

Створюємо сайти та окремі сторінки в мережі інтернетдля спілкування із відвідувачами.

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

Приклад HTML форми Вхід на сайт

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

• - Визначають форму.
• name="" – визначає ім'я форми.
• method="" - визначає спосіб відправлення даних із форми. Значення: "get" (за замовчуванням) та "post" . Чаші використовується метод "post", оскільки дозволяє передавати великі обсяги даних.
• action="" - визначає url яким дані відправляються на обробку. У нашому випадку - enter_data.php..
• - Визначають такі елементи форми як кнопки, перемикачі, текстові поля для введення даних.
• type="text" - визначає текстове поле для введення даних.
• type="password" - визначає поле для введення пароля, при цьому текст відображається у вигляді зірочок або кружечків.
• type="checkbox" - визначає перемикач.
• type="hidden" - визначає прихований елемент форми - використовується передачі додаткової інформації на сервер.
• size="25" - довжина текстового поля символи.
• maxlength="30" - максимально допустима кількість символів, що вводяться.
• value="" - визначає значення, яке буде відправлено на обробку, якщо відноситься до радіобутонів або перемикачів. Значення цього атрибуту у складі текстового поля або кнопки буде показано як, наприклад, Вася або Вхід у прикладі вище.

Приклад HTML форми Коментарі на сайті

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

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

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

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

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

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

Приклад HTML форми Список зі смугою прокручування

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

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

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