Фон с большим расширением. Управление размером фонового изображения при помощи css. Абсолютное изменение размера

16.03.2019

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p><a href="/audio/bolshaya-gruppa-lyudei-sostavnaya-chast-socialnoi-obshchnosti-ponyatie.html">Большая часть</a> информации веб-форм передаётся с помощью элемента <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><a href="/classmates/razmetka-kontaktnoi-informacii-dlya-snippetov-poiskovoi.html">Контактная информация</a></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> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В <a href="/classmates/novyi-soni-specifikacii-sony-xperia-z7-flagmany-slow-mo-vodozashchita-i.html">новой спецификации</a> появился специальный <a href="/classmates/kak-zastavit-rabotat-atribut-required-dlya-input-v-staryh-versiyah-ie-bezopasnost.html">атрибут required</a> , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид <a href="/hard-drive/vertikalnaya-tablica-v-vorde-sozdaem-tekstovoe-pole-obnaruzhenie-izmenenii-orientacii.html">текстового поля</a> при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить <a href="/browsers/cvetnye-ramki-dlya-vorda-kak-sozdat-krasivuyu-ramku-v-word.html">цветную рамку</a>, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <p><b>HTML разметка </b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i2.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><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="/browsers/vneshnii-vid-operacionnoi-sistemy-osnovnye-vidy-operacionnyh.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 замените на ваш адрес <a href="/windows-7/vse-ob-elektronnoi-pochte-prezentaciya-prezentaciya-na-temu-elektronnaya.html">электронной почты</a>;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/program/bezzhalostnyi-svyaz-otpravit-mne-kopiyu-kopiya-i-skrytaya-kopiya-v.html">скрытую копию</a> на ваш адрес электронной почты.</p> <p>Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.<br> По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:</p> <p>Нет ничего сложного в создании HTML-форм. Самый простой способ получить представление о формах — это разобрать небольшой HTML-код, а затем посмотреть, как он работает. В следующем примере показан синтаксис создания простой HTML-формы:</p> <h3>Пример: Простая HTML-форма</h3> <ul><li>Попробуй сам »</li> </ul><p>Моя первая форма:<br> Имя: <input type="text" name="firstname" value=""><br> Фамилия: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Простая форма</title> </head><br><body> <form action="action_form.php" method="POST"> <p>Моя первая форма:<br> Имя: <input type="text" name="firstname" value=""><br> Фамилия: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> </body><br></html></p> <h2>Элемент <b><form> </b> </h2> <p>Формы вставляются на веб-страницы посредством элемента <b><form> </b> . Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги <a href="/wi-fi-ethernet/pervye-shagi-v-koddinge-ili-s-chego-nachat-izuchenie-html-yazyk-html-dlya.html">языка HTML</a>. Однако он не может содержать в себе другой элемент <b><form> </b> .<br> Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.<br> Большинство атрибутов элемента <b><form> </b> влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются <b>action </b> и <b>method </b>. Атрибут <b>action </b> содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут <b>method </b> является <a href="/browsers/raznica-mezhdu-get-i-post-zaprosami-post-i-get-zaprosy-kakaya-mezhdu-nimi.html">методом HTTP</a>, который должны использовать браузеры для отправки данных формы.</p> <h2>Элемент <b><input> </b> </h2> <p>Практически все поля для формы создается с помощью элемента <b><input> </b> (от англ. input — ввод). Внешний вид элемента <b><input> </b> меняются в зависимости от значения его атрибута <b>type </b>:</p><p> <input type="значение"> </p><p>Вот некоторые значения атрибута <b>type </b>:</p> <h2>Ввод текста и пароля</h2> <p>Одним из самых <a href="/wi-fi-ethernet/chto-delat-esli-vyletaet-oshibka-runtime-error-runtime-error-kak-ispravit-lyubye-tipy-oshibki.html">простых типов</a> элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. <a href="/browsers/timestamp-sql-tip-dannyh-kalendarnye-tipy-dannyh-v-mysql-osobennosti.html">Данный тип</a> ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут <b>type </b>. Для добавления однострочного поля ввода текста в форму следует внутри элемента <b><input> </b> прописать атрибут <b>type </b> со значением text:</p><p> <input type="text"> </p><p>Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут <b>name </b> устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение <a href="/wi-fi-ethernet/kak-uznat-kakoi-parol-v-odnoklassnikah-kak-zaiti-na-stranicu-v.html">password атрибуту</a> <b>type </b> (password (англ.) — пароль):</p><p> <input type="password"> </p><p>Пример создания формы с полем для ввода пароля:</p> <h3>Пример: Поле ввода пароля</h3> <ul><li>Попробуй сам »</li> </ul><p>Ваш логин: <input type="text" name="login" size="15" maxlength="30" value="Ваше имя"></p> <p>Пароль: <input type="password" name="password" size="15" maxlength="30" value="Пароль"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Ваш логин: <input type="text" name="login" size="15" maxlength="30" value="Ваше имя"> </p> <p>Пароль: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> </body><br></html></p> <p>Вместе с этим атрибутом можно использовать атрибут <b>maxlenght </b>, значение которого определяет <a href="/windows-7/maksimalnoe-kolichestvo-audiozapisei-v-kontakte-limity-vkontakte-kakie.html">максимальное количество</a> символов, которые можно ввести в <a href="/usb-flash-drive/kak-v-eksel-sozdat-tablicu-s-dannymi-kak-vstavit-novuyu-stroku-ili.html">данную строку</a>. Можно также задать длину поля ввода, используя атрибут <b>size </b>. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута <b>size </b>, рекомендуется использовать средства каскадных таблиц стилей (CSS).<br> Атрибут <b>value </b> задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.</p> <h2>Переключатели (radio)</h2> <p>Элемент <b><input> </b> типа <b>radio </b> создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:</p><p> <input type="radio" name="имя _переменной" value="значение"> </p><p>Атрибут <b>name </b> для переключателей обязателен и играет <a href="/skype/start-v-nauke-pri-provedenii-poiska-informacii-v-internete-v.html">важную роль</a> в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить <a href="/vkontakte/tablica-znachenii-kriteriya-styudenta-sluchai-odinakovoi.html">одинаковое значение</a> атрибута <b>name </b> и <a href="/classmates/cvet-metalla-rgb-cvet-v-stilyah-mozhno-zadavat-raznymi-sposobami.html">разное значение</a> атрибута <b>value </b>. Атрибут <b>vаluе </b> устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.<br> Наличие атрибута <b>checked </b> (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. <a href="/computer/pravila-zapisi-funkcionalnyh-zavisimostei-v-obshchem-vide.html">Данный атрибут</a> может быть установлен только у одного элемента-переключателя из группы:</p> <h3></h3> <ul><li>Попробуй сам »</li> </ul><p>Сколько Вам лет?</p> <ol><li><input type="radio" name="age" value="18" checked>младше 18</li> <li><input type="radio" name="age" value="18-24">от 18 до 24</li> <li><input type="radio" name="age" value="25-34">от 25 до 35</li> <li><input type="radio" name="age" value="35-50">более 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Сколько Вам лет?</p> <ol> <li><input type="radio" name="age" value="18" checked>младше 18</li> <li><input type="radio" name="age" value="18-24">от 18 до 24</li> <li><input type="radio" name="age" value="25-34">от 25 до 35</li> <li><input type="radio" name="age" value="35-50">более 35</li> </ol> <input type="submit"< </form> </body><br></html></p> <h2>Флажки (checkbox)</h2> <p>Элемент <b><input> </b> типа <b>checkbox </b> создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута <b>name </b>, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:</p><p> <input type="checkbox" name="имя _переменной" value="значение"> </p><p>Атрибут <b>checked </b>, как и в случае с переключателями, указывает, что данный флажок должен быть установлен по умолчанию при загрузке страницы. Данный атрибут может быть установлен одновременно для нескольких флажков группы.<br> В следующем примере использование флажков заданы несколько выбранных по умолчанию вариантов ответа:</p> <h3>Пример: Использование переключателей</h3> <ul><li>Попробуй сам »</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Джаз</li> <li><input type="checkbox" name="musik" value="bluse" checked>Блюз</li> <li><input type="checkbox" name="musik" value="rock">Рок</li> <li><input type="checkbox" name="musik" value="shanson">Шансон</li> <li><input type="checkbox" name="musik" value="kantry">Кантри</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Какие музыкальные жанры Вы любите?</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Джаз</li> <li><input type="checkbox" name="musik" value="bluse" checked>Блюз</li> <li><input type="checkbox" name="musik" value="rock">Рок</li> <li><input type="checkbox" name="musik" value="shanson">Шансон</li> <li><input type="checkbox" name="musik" value="kantry">Кантри</li> </ol> <input type="submit"< </form> </body><br></html></p> <h2>Кнопки подтверждения (submit) и очистки (reset)</h2> <p>Элемент <b><input> </b> типа <b>submit </b> создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту <b>type </b> значение «reset» . Элементу <b><input> </b> типа <b>submit </b> может быть присвоен необязательный атрибут <b>name </b>. Атрибут <b>vаluе </b> используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.<br> Создание кнопок подтверждения и очистки:</p> <h3>Пример: Использование submit и reset</h3> <ul><li>Попробуй сам »</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Подписаться"><input name="reset" type="reset" value="Очистить"><p>После щелчка на кнопке Reset происходит сброс любых введенных пользователем данных.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Подписаться"> <input name="reset" type="reset" value="Очистить"> </form> </body><br></html></p> <h2>Атрибут action.</h2> <p>Главным для элемента <b><form> </b> является атрибут <b>action </b>, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру. Другими словами в атрибуте <b>action </b> указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Файл обработки находится на сервере <i>mytestserver.com </i> в папке <i>namefolder </i> и название серверного сценария, который будет обрабатывать данные — <i>obrabotchik.php </i>. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение.php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.<br> Желательно всегда задавать значение атрибута <b>action </b>. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action="".</p> <h2>Атрибут method</h2> <p>Атрибут <b>method </b> задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: <b>GET </b> и <b>POST </b>. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться <b>GET </b>. Рассмотрим применение каждого из них.</p> <h2>Метод POST</h2> <p>Метод <b>POST </b> упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода <b>POST </b> отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод <b>POST </b> применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод <b>POST </b> также подходит для отправки больших объемов информации, так как в отличие от метода <b>GET </b>, у него нет ограничений по количеству передаваемых символов.</p> <h2>Метод GET</h2> <p>Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод <b>GET </b>, ваш браузер просто получает веб-страницу, как делает это всегда. Метод <b>GET </b> также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод <b>GET </b>, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:</p><p> <form action="" method="GET"> </p><p>т.е. замените <b>POST </b> на <b>GET </b>.<br> Сохраните файл под именем <i>file_name.html </i> и обновите страницу браузера (F5), затем заполните форму, например <i>Вася Пупкин </i>, и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:</p><p>File_name.html?firstname=Вася&lastname=Пупкин </p><p>Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.<br> URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд <b>(&) </b>.<br> Этот метод нужно использовать, если вы не передаете больших объемов информации.<br> Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.<br> Кроме того, метод <b>GET </b> непригоден, если вместе с формой вы хотите переслать на сервер файлы.</p> <h2>Группировка элементов формы</h2> <p>Элементы формы, связанные по смыслу, можно сгруппировать между тегами <b><fieldset> </b> и <b></fieldset> </b> . Браузер отобразит <b><fieldset> </b> в виде рамки вокруг группы элементов формы. Внешний вид рамки может быть изменен с помощью каскадных таблиц стилей (CSS).<br> Чтобы добавить заголовок для каждой группы, понадобится элемент <b><legend> </b> , который задает встраиваемый в рамку текст заголовка группы.</p> <p>Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.</p> Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination. <h2>HTML Code for registration form</h2> <p>Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.</p> <p>In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.</p> <p><b>registration.html </b></p><p> <html> <head> <title>registration form</title> </head> <h2 ALIGN="CENTER">Registration form</h2> <form action="Welcome.html" method="post"> <table border="0" align="center"> <tbody> <tr> <td><label for="id">Id: </label></td> <td><input id="id" maxlength="50" name="name" type="text" /></td> </tr> <tr> <td><label for="name">Name: </label></td> <td><input id="name" maxlength="50" name="name" type="text" /></td> </tr> <tr> <td><label for="course">Course: </label></td> <td><input id="course" maxlength="50" name="course" type="text" /></td> </tr> <tr> <td><label for="branch">Branch: </label></td> <td><input id="branch" maxlength="50" name="branch" type="text" /></td> </tr> <tr> <td><label for="rolln0">Rollno: </label></td> <td><input id="rollno" maxlength="50" name="rollno" type="text" /></td> </tr> <tr> <td><label for="email">Email_Address:</label></td> <td><input id="email" maxlength="50" name="email" type="text" /></td> </tr> <tr> <td><label for="username">User_Name:</label></td> <td><input id="username" maxlength="50" name="username" type="text" /></td> </tr> <tr> <td><label for="aboutus">About Us:</label></td> <td valign="middle" align="center"><textarea> Password:

Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.

WordPress Login Customizer

Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress.

Creative Login Form

Скачать

Предварительный просмотр

Форма авторизации №19

Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами.

Скачать

Предварительный просмотр

Форма авторизации №20

Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.

Скачать

Предварительный просмотр

Выпадающая форма авторизации

Скачать

Animated Login Form

Скачать

Stylized Login Form

Скачать

Login form templates aren’t there just to look beautiful, they need to be simpler and more efficient to fill out. There are many ways to design login forms. But finding the right solution for the job can be a painstaking task. To help you create great looking login page templates quickly, here are some most interesting HTML, CSS techniques that you can easily follow. Just download the template source and test it all by yourself for free!

Free Login/Register Templates

Login & Register Form

Kill two birds with one stone… The form will switch from login to register, and back, based on if the user is already “registered”. Find “registered” users in the js panel.

A simple Login Form template with Flat UI…

Disqus Like Sign-in form

Slick login form with HTML5 & CSS3

A clean and simple login form template with a round submit button and elegant focus states.

Nice and Simple Login Form

A nice and simple HTML/CSS login form template. It uses wordpress’s login system.

CSS3 Login Form Template

An amazing css3 login form template with only html, css features being used. Download and use this as you like.

Flat UI Login Form

Animated Form Switching with jQuery

A simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

Slick Login Form With CSS3

A minimal and slick login form template using basic HTML5 and enhancing it with some CSS3 techniques.

Pure CSS Login Form

Simple and effective dropdown login box

In this article, you will learn how to create a good looking dropdown login form template using CSS3 and a bit of jQuery.

Login Form Template with HTML and CSS

Just a simple and flat login form template…

Login

Flat UI Login Form

Custom Login Form Styling

In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness.

Login Form with PHP, JQuery and CSS3

Creating an elegant login page using CSS3, Jquery + Ajax and processed by PHP.

Login/Register form with pass metter

Apple-like Login Form with CSS 3D Transforms

In this tutorial we will see how we can use the transforms to create an interesting flipping effect on an Apple-inspired form.

Login Form (Coded)

This freebie is a professional login form. The download includes the PSD file, and xHTML, Js and CSS files as well. You can use it in anyway you want. It involves some nice effects using CSS3 and javascript and I hope you enjoy it!

Login

Login form using HTML5 and CSS3

This is an example how to create a simple login form using HTML5 and CSS3.