Красивые формы ввода данных html. Создание формы. Несколько более сложная форма

< input name =" save " type =" checkbox " value =" yes "> Запомнить - добавляем флажок и пишем поясняющий текст.

< br >< input type =" submit " name =" enter " value ="Вход"> - создаём кнопку, нажатие которой запускает процесс обработки данных.

- закрываем форму.

В браузере веб-форма будет выглядеть, как на рисунке ниже.

Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php рядом с 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://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид <a href="/sozdanie-formy-s-pomoshchyu-html-html-formy-mnogostrochnoe-tekstovoe-pole.html">текстового поля</a> при получении фокуса, используется псевдокласс 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://i0.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' 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://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. <a href="/chto-takoe-bic-bai-dre-kak-ya-poslushal-naushniki-beats-i-ne-umer-ot-zvuka.html">Внешний вид</a> формы по умолчанию <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-shadow: 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 .= "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 замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/poleznye-frazy-dlya-delovoi-perepiski-ponyatie-skrytaya-kopiya.html">скрытую копию</a> на ваш адрес электронной почты.</p> <h3>Описание</h3> <p>Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.</p> <p>Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.</p> <p>Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.</p> <p>Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form> . Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET , то адресная строка может принимать следующий вид.</p> <p>http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p> <p>Параметры перечисляются после <a href="/chto-znachit-voprositelnyi-znak-skaipe-chto-oznachayut-znachki-v-skaipe-kak.html">вопросительного знака</a>, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).</p> <p>Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.</p> <h3>Синтаксис</h3> <form action="URL"> ... </form> <h3>Атрибуты</h3> Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. Адрес программы или документа, который обрабатывает данные формы. Включает автозаполнение полей формы. Способ кодирования данных формы. Метод протокола HTTP. Имя формы. Отменяет встроенную проверку данных формы на корректность ввода. Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. <h3>Закрывающий тег</h3> <p>Обязателен.</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег FORM</title> </head> <body> <form action="handler.php"> <p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p> <p><input type="radio" name="answer" value="a1">Офицерский состав<Br> <input type="radio" name="answer" value="a2"><a href="/krasivye-operacionnye-sistemy-dlya-pk-samaya-bystraya-windows-reiting-operacionnyh.html">Операционная система</a><Br> <input type="radio" name="answer" value="a3">Большой полосатый мух</p> <p><input type="submit"></p> </form> </body> </html> </p><p>Результат <a href="/kak-izmenit-parametry-sistemy-kak-izmenit-dannye-kompyutera-primer.html">данного примера</a> показан на рис. 1.</p> <p>Рис. 1. Вид элементов формы в окне браузера</p> <p><form action="file.php" method="post" id="form"> ... содержимое формы... </form></p> <li>Как раз внутри элемента form должны располагаться элементы управления, которых может быть сколь угодно много.</li> <p><b>Атрибуты формы: </b></p> <ul><li>В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке <i>php </i>или <i>perl </i>.</li> <li>Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .</li> <li>Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать <a href="/dever-posting-php-t-peredacha-peremennyh-v-php-metody-get-i-post-peredacha.html">метод post</a> .</li> </ul><h2><span>Элементы формы html </span></h2> <ul><table><tr><td class="code"> <<span>input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" > </span> </td> </tr></table><p><input type="text" name="login" size="20" value="Логин" maxlength="25"></p> <p>Результат:</p> <p><input style="all: inherit; border:1px #aaa solid" type="text" size="20" value="Логин" maxlength="25"></p> <ul><li>Значение атрибута type — text — указывает на то, что это именно текстовое поле</li> <li>size — размер текстового поля в символах</li> <li>maxlength — максимальное кол-во вмещающихся в поле символов</li> <li>value — первоначальный текст в текстовом поле</li> <li>name — имя элемента, необходимо для обработки данных в файле-обработчике</li> </ul><p><input type="password" name="pass" size="20" value="Пароль" maxlength="25"></p> <p>Результат:</p> <p><input style="all: inherit; border:1px #aaa solid" type="password" size="20" value="Пароль" maxlength="25"><br> Вместо текста в поле отображается маска — звездочки или кружочки</p> <table><tr><td class="code"> <<span>input type = "submit" value = <span>"Отправить данные" </span>> </span> </td> </tr></table><p><input type="submit" value="Отправить данные"></p> <p>Результат:</p> <p><input type="submit" value=" Отправить данные " style="all: unset; border:1px #aaa solid"></p> <p>Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.</p> <table><tr><td class="code"> <<span>input type = "reset" value = "Очистить форму" > </span> </td> </tr></table><p><input type="reset" value="Очистить форму"></p> <p>Результат:<br><img src='https://i1.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-65.png' height="54" width="224" loading=lazy><br> Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)</p> <table><tr><td class="code"> <<span>input type = "checkbox" name = "asp" value = "yes" > </span>ASP<<span>br > </span> <<span>input type = "checkbox" name = "js" value = "yes" checked = "checked" > </span>javascript<<span>br > </span> <<span>input type = "checkbox" name = "php" value = "yes" > </span>PHP<<span>br > </span> <<span>input type = "checkbox" name = "html" value = "yes" checked = "checked" > </span>HTML<<span>br > </span> </td> </tr></table><p><input type="checkbox" name="asp" value="yes">ASP<br> <input type="checkbox" name="js" value="yes" checked="checked">javascript<br> <input type="checkbox" name="php" value="yes">PHP<br> <input type="checkbox" name="html" value="yes" checked="checked">HTML<br></p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-95.png' align="center" width="100%" loading=lazy><br> Результат:</p> <p><input type="checkbox">ASP<br><input type="checkbox" checked>javascript<br><input type="checkbox">PHP<br><input type="checkbox" checked>HTML</p> <p>В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа</p> <table><tr><td class="code"> <<span>input type = "radio" name = "book" value = "asp" > </span>ASP<<span>br > </span> <<span>input type = "radio" name = "book" value = "js" > </span>Javascript<<span>br > </span> <<span>input type = "radio" name = "book" value = "php" > </span>PHP<<span>br > </span> <<span>input type = "radio" name = "book" value = "html" checked = "checked" > </span>HTML<<span>br > </span> </td> </tr></table><p><input type="radio" name="book" value="asp">ASP<br> <input type="radio" name="book" value="js">Javascript<br> <input type="radio" name="book" value="php">PHP<br> <input type="radio" name="book" value="html" checked="checked">HTML<br></p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-89.png' align="center" width="100%" loading=lazy></p> <p>Результат:</p> <p><input type="radio">ASP<br><input type="radio">Javascript<br><input type="radio">PHP<br><input type="radio" checked>HTML</p> <p>radio кнопка html служит для единственного выбора из нескольких вариантов</p> <p>Атрибут checked устанавливает сразу элемент отмеченным</p> </ul><p><b>Важно: </b> Для элементов <b>radio </b> необходимо, чтобы значение атрибута <b>name </b> у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться</p> <h2><span>Выпадающий список HTML </span></h2> <p>Рассмотрим пример добавления выпадающего списка:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 </td><td class="code"> <<span>select name = "book" size = "1" > </span> <<span>option value = "asp" > </span>ASP<<span>/ option > </span> <<span>option value = "js" > </span>JavaScript<<span>/ option > </span> <<span>option value = "php" > </span>PHP<<span>/ option > </span> <<span>option value = "html" selected = "selected" > </span>HTML<<span>/ option > </span> <<span>/ select > </span> </td> </tr></table><p><select name="book" size="1"> <option value="asp">ASP</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </select></p> <p>Результат:</p> <p><img src='https://i1.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-68.png' height="122" width="117" loading=lazy></p> <ul><li>Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта</li> <li>Атрибут size со значением <i>«1» </i> указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню</li> <li>Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»</li> </ul><p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-90.png' align="center" width="100%" loading=lazy></p> <p>Для больших и сложных списков есть возможность <b>добавить подзаголовки </b> — тег optgroup с атрибутом label (надпись):</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <<span>select name = "book" size = "1" > </span> <<span>optgroup label = "Английские" > </span> <<span>option value = "asp" > </span>ASP<<span>/ option > </span> <<span>option value = "js" > </span>JavaScript<<span>/ option > </span> <<span>option value = "php" > </span>PHP<<span>/ option > </span> <<span>option value = "html" selected = "selected" > </span>HTML<<span>/ option > </span> <<span>/ optgroup > </span> <<span>optgroup label = "Русские" > </span> <<span>option value = "asp_rus" > </span>ASP по-русски<<span>/ option > </span> <<span>option value = "js_rus" > </span>JavaScript по-русски<<span>/ option > </span> <<span>/ optgroup > </span> <<span>/ select > </span> </td> </tr></table><p><select name="book" size="1"> <optgroup label="Английские"> <option value="asp">ASP</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </optgroup> <optgroup label="Русские"> <option value="asp_rus">ASP по-русски</option> <option value="js_rus">JavaScript по-русски</option> </optgroup> </select></p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-69.png' height="202" width="211" loading=lazy><br> Для предоставления возможности <b>выбора нескольких пунктов одновременно </b> необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1:</p> <p><textarea name="description" cols="30" rows="10">Текст

Результат:

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

Другие элементы

Дополнительные элементы и атрибуты

• Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

<input type = "checkbox" id = "book1" > <label for = "book1" > ASP</ label >

ASP

В примере создана надпись (тег label) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

Результат:



• Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

<input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" disabled = "disabled" > <input type = "checkbox" name = "asp" value = "yes" > ASP<br > <input type = "checkbox" name = "js" value = "yes" checked = "checked" disabled = "disabled" > javascript<br >


ASP
javascript