Авторитетный login form html. Создание формы в HTML

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 формы | Комментарии на сайте

Имя Mail

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

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

Если между поместить текст, он будет показан внутри поля как пример, который легко удалить.

Пример HTML формы | Выпадающий список

Первая позиция Вторая позиция Третья позиция Четвертая позиция

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

• - определяют список с позициями для выбора.
• size="" - определяeт количество видимых позиций списка. Если значение равно 1 , мы имеем дело с выпадающим списком.
• - определяют позиции (пункты) списка.
• value="" - содержит значение, которое будет отправлено формой по указанному url на обработку.
• selected="selected" - выделяет позицию списка в качестве примера.

Пример HTML формы | Список с полосой прокрутки

Увеличив значение атрибута size="" , мы получим список с полосой прокрутки:

Первая позиция Вторая позиция Третья позиция Четвертая позиция

Первая позиция Вторая позиция Третья позиция Четвертая позиция

Для этого варианта применим флажок multiple="multiple" , который делает возможным выбор нескольких позиций. Его отсутствие разрешает выбрать только один пункт.

type="submit" - определяет кнопку.

type="reset" - определяет кнопку сброса.

value="" - определяет надпись на кнопке.

Смотрите дополнительно:

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>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить <a href="/how-to-make-a-color-circle-round-frame-around-the-avatar-in-the-instagram/">цветную рамку</a>, чтобы оно выделялось среди остальных:</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> <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="/plagin-dlya-sozdaniya-chislovoi-paginacii-kak-sdelat-chislovuyu-paginaciyu-v-wordpress/">Внешний вид</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="/u-23-e-mail-elektronnaya-pochta-elektronnaya-pochta-e-mail-i-web-mail-komu-i-dlya-chego-neobhodim/">электронной почты</a>;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/poleznye-frazy-dlya-delovoi-perepiski-ponyatie-skrytaya-kopiya-uchimsya/">скрытую копию</a> на ваш адрес электронной почты.</p> <p>Как вы уже знаете, веб-клиент имеет возможность передавать веб-серверу <a href="/svedeniya-i-dannye-ih-otlichie-ot-informacii-ponyatiya-informacii-davaemye/">различную информацию</a> при <a href="/dorvei-youtube-sozdanie-dorveev-na-youtube-s-pomoshchyu-post-get-i-servisa-photodex-strategiya/">помощи GET</a> и POST-запросов. <i>HTML-формы </i> - это основной инструмент для создания таких запросов. По сути, HTML-форма представляет собой поле или поля для ввода информации на веб-странице. <a href="/kak-perezagruzit-windows-xp-iz-komandnoi-stroki-vyklyuchit-kompyuter-iz/">Наглядным примером</a> HTML-формы служит форма ввода логина и пароля для авторизации на сайте.</p> <p>HTML-форма описывается с помощью парного тега <i>form </i>. Этот тег имеет два важнейших атрибута: <i>method </i> и <i>action </i>. В атрибуте method задается тип HTTP-запроса (get или post), в action - запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:</p> <<span>form method = "get" action = "/login.php" > </span> ... <<span>/ form > </span> <p>Существует несколько <a href="/kakie-est-korpusa-dlya-pk-vidy-kak-vybrat-korpus-dlya-pk/">различных видов</a> элементов для ввода данных, которые помещаются внутри формы. Элемент, с которого я хотел бы начать, называется <i>submit </i>:</p> <<span>input type = "submit" value = "Войти" / > </span> <p>Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут <i>value </i> задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты <i>name </i>. Например:</p> <<span>form method = "get" action = "/control.php" > </span> <<span>input type = "submit" name = "submit" value = "Add" / > </span> <<span>input type = "submit" name = "submit" value = "Edit" / > </span> <<span>/ form > </span> <p>При формировании запроса веб-браузер включит HTTP-параметр, характеризующий нажатый элемент submit. В качестве имени параметра будет взято значение атрибута name нажатой кнопки, в качестве значения - значение атрибута value. Таким образом, при нажатии <a href="/kak-sdelat-plavayushchuyu-knopku-plavayushchie-knopki-add-media-ustanovka-na-cms/">кнопки Add</a> будет сформирован запрос:</p><p> /control.php?submit=Add </p><p>а при нажатии кнопки Edit:</p><p> /control.php?submit=Edit </p><p>Следующий элемент представляет собой <a href="/vklyuchenie-activex-v-internet-explorer-activex-chto-eto-prosteishie-ponyatiya/">простейший элемент</a> для ввода однострокового текста. Его HTML-код:</p> <<span>input type = "text" name = "name" / > </span> <p><input type="text"></p> <p>name - обязательный атрибут для участия в HTTP-запросе. Значение этого атрибута будет использовано в качестве имени HTTP-параметра. Этот атрибут имеется у всех типов элементов форм.</p> <p>Элементу можно также задать атрибут value, указав в нем текст, который по-умолчанию будет введен в элементе. Например:</p> <<span>input type = "text" name = "login" value = <span>"Имя пользователя" </span> / > </span> <p>Элемент <i>password </i> служит для ввода паролей. Внешне он такой же, но введенный текст отображается в виде звездочек или точек:</p> <<span>input type = "password" / > </span> <p><input type="password"></p> <p>Этого, в принципе, достаточно для создания простейшей формы авторизации. Давайте попробуем ее реализовать, а затем вернемся к рассмотрению остальных типов элементов.</p> <p>Создадим файл auth.php в <a href="/kak-zapustit-wordpress-na-hostinge-razmeshchenie-failov-v-kornevom/">корневом каталоге</a> со следующим содержимым:</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= <span>"http://www.w3.org/1999/xhtml" </span>> </span> <<span>head > </span> <<span>title > </span>Авторизация<<span>/ title > </span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </span> <<span>/ head > </span> <<span>body > </span> <<span>form method = "get" action = "/auth.php" > </span> <<span>table > </span> <<span>tr > </span> <<span>td > </span>Имя пользователя:<<span>/ td > </span> <<span>td > </span> <<span>input type = "text" name = "login" value = "" / > </span> <<span>/ td > </span> <<span>/ tr > </span> <<span>tr > </span> <<span>td > </span>Пароль:<<span>/ td > </span> <<span>td > </span> <<span>input type = "password" name = "pass" value = "" / > </span> <<span>/ td > </span> <<span>/ tr > </span> <<span>/ table > </span> <<span>input type = "submit" value = "Войти" / > </span> <<span>/ form > </span> <<span>/ body > </span> <<span>/ html > </span> <p>Как видите, внутри <a href="/chuvstvitelnyi-form-html-atributy-formy---teg-primer-polnaya-forma/">тега form</a> можно размещать теги, помогающие красиво разметить форму (я внутрь поместил таблицу). Форма содержит поля для ввода имени пользователя и пароля с именами login и pass соответственно. При нажатии "Войти" формируется GET-запрос документа /auth.php (то есть, страница запрашивает саму себя). В моем случае полный <a href="/kak-sdelat-redirekt-vse-vidy-kak-v-php-zadat-redirekt-na-drugoi-url-do/">URL страницы</a> имел вид <i>http://test-domain3/auth.php </i>.</p> <p>Введите данные и нажмите "Войти". Страница должна перезагрузиться. Должен также измениться и адрес страницы. В моем случае он принял вид:</p><p>Http://test-domain3/auth.php?login=Joker-jar&pass=12345 </p><p>Это означает, что документ auth.php был запрошен с GET-параметрами, которые были введены с помощью HTML-формы. Поместите в начало файла auth.php PHP-обработчик, который будет принимать данные для авторизации:</p> <?php <span>//--Проверяем, были ли переданы данные </span> if ( isset ($_GET [ "login" ] ) && isset ($_GET [ "pass" ] ) ) { echo <span>"Ваше имя пользователя: " </span> . $_GET [ "login" ] . ", ваш пароль: " . $_GET [ "pass" ] ; exit ; } ?> <p>Если странице были переданы логин и пароль, условие сработает и сообщение будет выведено. Также будет вызван <i>exit </i>, который прекратит дальнейшее выполнение скрипта, следовательно форма выведена не будет.</p> <p>Передавать пароль с помощью GET-запроса небезопасно, так как он виден в <a href="/vypolnit-sochetanie-klavish-windows-kombinacii-klavish-na-klaviature-rabota-s/">адресной строке</a>. Сменим тип запроса на POST. Для этого изменим значение атрибута method, а в PHP-обработчике обращения к массиву $_GET изменим на $_POST. Проверьте работоспособность скрипта.</p> <p>Следующий элемент - <i>флажок </i>. Его применяют, когда от пользователя необходим ответ вида "да/нет":</p> <<span>input type = "checkbox" / > </span> <p>Если флажок не отмечен, в параметрах ничего не передается. Иначе передается параметр name со значением <i>on </i>. Есть еще один момент. Как правило, рядом с флажком присутствует поясняющая надпись. <a href="/pismo-platonu-yandeks-platon-shchukin-kto-zhe-on-pravila/">Хорошим тоном</a> является реализация веб-мастером реакции флажка на клики по этой надписи. Делается это просто. Флажку присваивается определенный id, а сама надпись оформляется тегом <i>label </i> с атрибутом <i>for </i>, значение которого равно идентификатору флажка:</p> <<span>input type = "checkbox" id = "remember" name = "remember" / > </span> <<span>label for = "remember" > </span>Запомнить меня<<span>/ label > </span> <p><input id="remember" name="remember" type="checkbox"></p> <p>Похожий элемент используется для выбора ответа из набора значений. Допустим, пользователю необходимо выбрать один из трех цветов:</p> <<span>input type = "radio" id = "red" name = "color" value = "red" / > </span> <<span>label for = "red" > </span>Красный<<span>/ label > </span> <<span>br / > </span> <<span>input type = "radio" id = "green" name = "color" value = "green" / > </span> <<span>label for = "green" > </span>Зеленый<<span>/ label > </span> <<span>br / > </span> <<span>input type = "radio" id = "blue" name = "color" value = "blue" / > </span> <<span>label for = "blue" > </span>Синий<<span>/ label > </span> <<span>br / > </span> <p><input id="red" name="color" type="radio" value="red"><br><input id="green" name="color" type="radio" value="green"><br><input id="blue" name="color" type="radio" value="blue"></p> <p>Обратите внимание, что у всех элементов <a href="/povtoryayushchiesya-znacheniya-v-excel-naiti-vydelit-ili-udalit-dublikaty-v-excel-kak/">одинаковое значение</a> name. Можно выбрать только одно значение. В HTTP-параметра передастся value выбранного элемента, например <i>color=blue </i>.</p> <p>Чтобы изначально был выбран какой-то из элементов, например, первый, ему нужно задать атрибут <i>checked </i> со значением <i>checked </i> (<a href="/doctype-dlya-chego-i-kak-on-ustroen-standarty-html-i-xhtml-chto-takoe-html/">стандарт XHTML</a>):</p> <<span>input type = "radio" id = "red" name = "color" value = "red" checked = "checked" / > </span> <p>Для ввода большого многострочного текста существует специальный элемент <i>textarea </i>:</p> <<span>textarea rows = "6" cols = "20" name = "text" > </span>Текст внутри элемента<<span>/ textarea > </span> <p>Текст внутри элемента</p> <p>Этот элемент, как видите, отличается от предыдущих. Он представляет собой парный тег, а текст помещается не в атрибут, а в тело тега. У элемента также есть атрибут name. При помощи атрибута <i>rows </i> можно задать количество строк в элементе, <i>cols </i> - количество символов в строке. Элемент textarea используется, как правило, в POST-формах, т.к. предполагает ввод <a href="/chto-takoe-programma-bloknot-ustanovka-i-zapusk-programm-perenos/">длинного текста</a> (например, форма сообщения на форуме).</p> <p>Выпадающий список. Наверняка сталкивались с таким элементом в программах. Позволяет выбрать одно значение из набора. Код элемента также не совсем обычен. Сначала создается элемент-контейнер <i>select </i>, ему задается атрибут name:</p> <<span>select name = "towns" > </span> <<span>/ select > </span> <p>Внутрь контейнера помещаются элементы списка. Элемент списка представляет собой парный тег <i>option </i>, каждому элементу задается атрибут value. В тело элемента прописывается надпись элемента:</p> <<span>select name = "town" > </span> <<span>option value = "msk" > </span>Москва<<span>/ option > </span> <<span>option value = "vlad" > </span>Владивосток<<span>/ option > </span> <<span>option value = "nsk" > </span>Новосибирск<<span>/ option > </span> <<span>/ select > </span> <p>В HTTP-запросе передается параметр с именем name и значением value выбранного элемента, например <i>town=vlad </i>. По умолчанию выбран первый элемент списка, если хотите, чтобы был выбран другой элемент, задайте ему атрибут <i>selected </i> со значением <i>selected </i>:</p> <<span>option value = "vlad" selected = "selected" > </span>Владивосток<<span>/ option > </span> <p>Список значений. Если элементу select задать атрибут <i>size </i> с <a href="/kak-naiti-sql-inekciyu-kak-poluchit-chislovoe-znachenie-stroki-ispolzuem-current-user/">числовым значением</a>, выпадающий список превратится в список значений. При этом значение атрибута size будет определять вертикальный размер элемента:</p> <<span>select name = "town" size = "3" > </span> <<span>option value = "msk" > </span>Москва<<span>/ option > </span> <<span>option value = "vlad" > </span>Владивосток<<span>/ option > </span> <<span>option value = "nsk" > </span>Новосибирск<<span>/ option > </span> <<span>/ select > </span> <p>Москва Владивосток Новосибирск</p> <p>Если элементу select задать атрибут <i>multiple </i> со значением <i>multiple </i> (стандарт XHTML), то появится возможность выбирать более одного элемента одновременно (например, с зажатой <a href="/goryachie-knopki-word-kombinacii-klavishi-peremeshcheniya-i-vydeleniya/">клавишей Ctrl</a>). В этом случае в HTTP-запросе будут переданы все выбранные элементы с одинаковыми именами, например: <i>town=msk&town=vlad&town=nsk </i>.</p> <p>Иногда необходимо в HTTP-запросе передать параметр, который пользователь не должен редактировать, а порой даже и видеть. Допустим, вы реализуете форму редактирования новости. В HTTP-запросе необходимо передавать идентификатор этой новости. Для подобных случаев есть скрытый элемент HTML-форм:</p> <<span>input type = "hidden" name = "param" value = "" / > </span> <p>Этот элемент не будет виден на форме, но при выполнении запроса будет передан HTTP-параметр name=value.</p> <p>Иногда может пригодиться элемент, очищающий форму. Кнопка, при нажатии на которую все введенные пользователем данные на форме стираются:</p> <<span>input type = "reset" value = "Очистить" / > </span> <p>Перечисленные элементы имеют два специальных атрибута:</p> <p>readonly="readonly" - запрещает изменение информации в элементе (режим "только для чтения);<br> disabled="disabled" - делает элемент неактивным.</p> <p>Существует также элемент для выбора файла, который при сабмите формы будет загружен на веб-сервер, но об этом, пожалуй, в отдельной статье.</p> <p>Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую <a href="/javascript-proverka-polei-formy-pered-otpravkoi-proverka-formy-na-javascript-prostaya/">простую форму</a> для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.</p> <p>Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на <a href="/batareya-li-poly-osobennosti-litii-polimernyh-akkumulyatorov-i-pravila-ih/">текущий момент</a> оно представляет собой просто поле для ввода текста.</p> <p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Логин</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Пароль</label></td> <td><input id="passwordField" type="text" name="password"></td> </tr> </table> </form> </p><p>Результат в браузере:<br><img src='https://i2.wp.com/webshake.ru/uploads/img/b46c524417a23a2090c6c78df55b64e6a0a7c8fffe166749d61cf537cda3bdcc.png' height="50" width="241" loading=lazy></p> <p>Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута <b>type </b> на <b>password </b>:</p><p> <input id="passwordField" type="password" name="password"> </p><p>Результат:<br><img src='https://i1.wp.com/webshake.ru/uploads/img/fcc1b0948d956a9c687641df8bd80f2c2d6612c088edb674e53bf2b22b502684.png' height="57" width="240" loading=lazy></p> <h2>Кнопка отправки формы</h2> <p>Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега <b><input> </b> с типом <b>submit </b>.</p> <p>Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут <b>value </b>. Задавать имя кнопке или нет – на ваше усмотрение, но если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.</p> <p> <input type="submit" value="Войти"> </p><p>Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.</p> <p>В итоге код нашей формы получится следующим:</p><p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Логин</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Пароль</label></td> <td><input id="passwordField" type="password" name="password"></td> </tr> <tr> <td colspan="2" style="text-align: center"><input type="submit" value="Войти"></td> </tr> </table> </form> </p><p>Результат в браузере:<br><img src='https://i1.wp.com/webshake.ru/uploads/img/eb03f584a26e6ec91e1be78ab7c996db8d84a9c6d56e52926ca73271189646dd.png' height="82" width="241" loading=lazy></p> <p>Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом <a href="/yazyk-servernogo-programmirovaniya-php-polnoe-opisanie-gde-primenyaetsya-php-s/">серверном языке</a> программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега <form> , как показано в примере 1.</p><p>Пример 1. Отправка данных формы</p><p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Данные формы</title> </head> <body> <form action="/example/handler.php"> <p><input name="login"> <input type="password" name="pass"></p> <p><input type="submit"></p> </form> </body> </html> </p><p>В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если <a href="/php-prinyat-dannye-iz-formy-php-self-v-atribute-formy-action/">атрибут action</a> не указывать, то передача происходит на адрес текущей страницы.</p><p>Передача на сервер происходит двумя <a href="/kak-pochistit-klaviaturu-kogda-zaedaet-metody-chistki/">разными методами</a>: GET и POST, для задания метода в теге <form> используется атрибут method , а его значениями выступают <a href="/konstruktor-klyuchevyh-slov-generator-klyuchevyh-slov/">ключевые слова</a> get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер <a href="/chto-takoe-get-sozdanie-post-i-get-zaprosov-razlichie-mezhdu-metodami-get-i-post/">методом GET</a>. В табл. 1 показаны различия между этими методами.</p><p>Какой метод используется легко определить по адресной строке браузера. Если в ней появился <a href="/google-pashalnye-yaica-pashalki-ot-google-kstati-ob-igrah-esli-vvesti/">вопросительный знак</a> и адрес стал похож на этот, то это точно GET.</p><p>http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8</p><p>Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает <a href="/otlichie-get-i-post-zaprosa-sozdanie-post-i-get-zaprosov/">запрос GET</a> и согласно ему формирует содержимое документа.</p><p>Ниже перечислены типовые области применения этих методов на сайтах.</p><h4>GET</h4> <p>Передача небольших текстовых данных на сервер; поиск по сайту.</p><p>Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.</p><h4>POST</h4> <p>Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.</p><p>Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега <form> . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега <iframe> (пример 2).</p><p>Пример 2. Открытие формы во фрейме</p><p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование фрейма</title> </head> <body> <p><iframe name="area" width="500" height="200"></iframe></p> <form action="handler.php" target="area"> <p><input placeholder="Введите текст" name="text"> <p><input type="submit" value="Отправить"></p> </form> </body> </html> </p><p>В <a href="/proektirovanie-relyacionnyh-baz-dannyh-rassmotrim-primer/">данном примере</a> при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .</p><p>Элементы формы традиционно располагаются внутри тега <form> , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).</p><p>Пример 3. Связывание формы с полями</p><p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма</title> </head> <body> <form id="auth" action="handler.php" method="post"></form> <p><input name="login" form="auth"> <input type="password" name="pass" form="auth"></p> <p><input type="submit" form="auth"></p> </body> </html> </p><p>В этом примере тег <form> однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.</p><p>Хотя параметры передачи формы традиционно указываются в теге <form> , их можно перенести и в кнопки отправки формы (<button> и <input type="submit"> ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.</p><p>Пример 4. Отправка формы</p><p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Отправка формы</title> </head> <body> <form> <p><input placeholder="Ваше имя" name="user"></p> <p><input type="submit" value="Отправить" formaction="handler.php" formmethod="post"></p> </form> </body> </html> </p><p>Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, <a href="/prosmotr-istorii-vo-vseh-brauzerah-internet-explorer-istoriya-v-internet/">Internet Explorer</a> и Safari.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div><div class="clear"></div> <script type="text/javascript"> document.getElementById('hc_full_comments').innerHTML = ''; </script><br /><br /><noindex><p align="center"><center> <div id="meta_news_block1111" style="text-align: center;"></div></center> </p> <br /><br /> <p align="center"> </p> </noindex> </div> </div> <div id="sidebar"> <div class="clear"></div><br /> <h2 class="front" style="margin:15px 0 5px 0">Популярные статьи</h2> <div class="tabcont"> <ol> <li><a href="/fantomnoe-pitanie-48-v-fantomnoe-pitanie-dlya-mikrofona-fantomnoe-pitanie/">Фантомное питание для микрофона</a></li> <li><a href="/sozdanie-multizagruzochnogo-cd-na-osnove-bootable-cd-wizard-chem-otkryt-ima/">Создание мультизагрузочного CD на основе Bootable CD Wizard</a></li> <li><a href="/proverochnym-modulem-vio-vidy-oshibok-v-szv-m-kak-rasshifrovat-kody/">Виды ошибок в сзв-м, как расшифровать коды и исправить ошибки</a></li> <li><a href="/kak-preobrazovat-txt-fail-v-pdf-fail-kak-preobrazovat-txt-fail-v-pdf-fail-chto/">Как преобразовать TXT файл в PDF файл Что необходимо для конвертации TXT файла в PDF файл или как можно создать PDF версию Вашего TXT файла</a></li> <li><a href="/numerologiya-nomera-telefona-kak-vybrat-udachnye-cifry-chto-oznachaet-vash/">Что означает ваш номер телефона Что означают цифры в мобильном номере</a></li> </ol> </div> <h2 class="front" style="margin:15px 0 5px 0">Последние статьи</h2> <div class="tabcont"> <ol> <li><a href="/jacarta-draiver-ustanovka-egais-edinyi-klient-jakarta-ne/">Jacarta драйвер. установка егаис. единый клиент jakarta. Не устанавливается единый клиент джакарта (2016 г.) Единый клиент jakarta скачать для windows 7</a></li> <li><a href="/gde-na-iphone-hranyatsya-dannye-o-vashem-peremeshchenii-i-kak-otklyuchit-ih/">Где на iPhone хранятся данные о вашем перемещении и как отключить их отслеживание</a></li> <li><a href="/samsung-galaxy-tab-s2-samyi-tonkii-flagmanskii-planshet-v-mire-samsung-galaxy-tab-s2-samyi/">Samsung Galaxy Tab S2: самый тонкий флагманский планшет в мире Разъемы, органы управления</a></li> <li><a href="/obzor-meizu-mx6-kamerofon-v-ispolnenii-meizu-obzor-meizu-mx6-kamerofon-v-ispolnenii-meizu/">Обзор Meizu MX6: камерофон в исполнении Meizu Meizu mx6 описание</a></li> <li><a href="/wan-razorvano-chto-delat-tipichnye-problemy-s-wi-fi-routerami/">Типичные проблемы с Wi-Fi роутерами</a></li> <li><a href="/kak-postavit-windows-10-s-zhestkogo-diska-kak-ustanovit-windows-napryamuyu-s/">Как установить Windows напрямую с жесткого диска различными методами?</a></li> <li><a href="/skachat-nfc-retag-na-android-prilozhenie-dlya-schityvaniya-tegov-s/">Приложение для считывания тегов с карт через NFC-модуль для Android</a></li> </ol> </div> <div class="widget" id="ajdg_grpwidgets-3"> <div class="g g-9"> <div class="g-single a-27"> <script> jQuery(function() { window.onscroll = function() { height_scroll = jQuery(document).scrollTop(); height = jQuery(document).height(); height50 = height / 2; if (height_scroll >= height50) { jQuery("#site-code-block-22").fadeIn(1200); document.getElementById('site-code-block-22').style.display = 'block'; jQuery("#site-code-block-23").fadeOut(1200); document.getElementById('site-code-block-23').style.display = 'none'; } else { jQuery("#site-code-block-22").fadeOut(1200); document.getElementById('site-code-block-22').style.display = 'none'; document.getElementById('site-code-block-23').style.display = 'block'; jQuery("#site-code-block-23").fadeIn(1200); } }; }); </script> <div class="site-code-block prma-count" data-rel="cb_23" id="site-code-block-23" style=""> </div> <div class="site-code-block prma-count" data-rel="cb_22" id="site-code-block-22" style=""> </div> </div> </div> </div> <div class="clear"></div> <br /> <center> <div style="color: #333333; font-size: 11px;"> </div> </center> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> </div> <br /><br /> <div id="footeri"> <div id="footer"> <div class="footer-sec"> <h6>Разделы</h6> <ul> <li><a href="/category/youtube/">Youtube</a></li> <li><a href="/category/facebook/">Facebook</a></li> <li><a href="/category/twitter/">Twitter</a></li> <li><a href="/category/tips/">Советы</a></li> <li><a href="/category/useful-tips/">Полезные советы</a></li> <br /> </ul> </div> <div class="footer-sec"> <h6>Страницы</h6> <ul> <li><a href="">О проекте</a></li> <noindex> <li><a href="" >RSS новости</a></li> </noindex> </ul><br /><br /><br /> <h6>Спецпроекты</h6> <ul> <li><a href="/feedback/">Связаться с нами</a></li> </ul> </div> <div id="footer-top"> <h6>Контакты</h6> <ul> <li><a href="">Реклама на сайте</a></li> <li><a href="/feedback/">Контакты</a></li> </div> <div class="clear"></div> </div></div> <div id="bottom"><div class="foot_col1"> 2024 © <a href="/">gtavrl.ru</a>. </div> <script type="text/javascript">var addthis_config = { "data_track_addressbar":true,"pubid": "ra-58b68bb0f1371607"} ;addthis_config.data_track_addressbar = false;addthis_config.data_track_clickback = false;</script> <script type='text/javascript'> var flag_hide = 0; function hide_direct() { flag_hide = 1; jQuery('#rek_mob_fixed').slideToggle( 'slow' ); var date = new Date(); var expires_hour = 21600000; date.setTime(date.getTime()+expires_hour); showSocial(); Cookies.set('advp_show_me', '1', { expires: date, path: '/'} ); } ; jQuery(function(f){ var element = f('#rek_mob_fixed'); element.delay(8000); f(window).scroll(function(){ if (flag_hide == 0){ var offset_element_for_hide = jQuery('#before_footer').val(); if (offset_element_for_hide != null) { offset_element_for_hide = jQuery('#before_footer'); offset_element_for_hide = jQuery(offset_element_for_hide).offset().top - jQuery(window).height(); } else { offset_element_for_hide = jQuery(document).height(); } //Если рекламный блок более 1000px по ширине, устанавливай фикс. ширину 1000px if (jQuery('#rek_mob_fixed_block').actual('width') >1000) { jQuery('#rek_mob_fixed_block').css({ 'max-width':'1000px'} ); } if(f(this).scrollTop() > 500){ element.fadeIn(0); } if(f(this).scrollTop() < 500 || f(this).scrollTop() > offset_element_for_hide ){ element.fadeOut(0) } if(f(this).scrollTop() + f(this).height() >= f(document).height() && flag_hide == 0 && jQuery('#rek_mob_fixed').is(':visible')) { jQuery('#rek_mob_fixed').slideToggle(100); } } } ); } ); function showSocial(){ if(flag_hide == 1 ) jQuery('#footer-share').slideToggle('slow'); } </script><div id="wondergridgallerylightbox_options" data-skinsfoldername="skins/default/" data-jsfolder="/wp-content/plugins/modesco-wonderplugin-gridgallery/engine/" style="display:none;"></div> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-monica/script.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ; /* ]]> */ </script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-table-of-contents-plus/front.js?ver=1404'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/page-links-to/js/new-tab.min.js?ver=2.9.8'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "ads-sidebar", "margin_top" : 10, "margin_bottom" : 50, "stop_id" : "before_footer", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['ajdg_grpwidgets-3'] } ; </script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type="text/javascript"> var _hcwp = _hcwp || []; var _hcobj = { widget_id : 29264, widget : "Bloggerstream",selector: '.hc_counter_comments',platform:"wordpress", } ; _hcwp.push(_hcobj); (function() { if("HC_LOAD_INIT" in window)return; HC_LOAD_INIT = true; var lang = "ru"; var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true; hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/29264/"+lang+"/widget.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hcc, s.nextSibling); } )(); </script> </body> </div> </body> </html>