Форма за влизане в комуникация html. Изпращане на данни от формуляра

Полето за въвеждане на парола е обикновено текстово поле, въведеният текст в което в зависимост от браузъра се показва като звездички или точки. Тази функция е предназначена да попречи на някой да подслушва въведената парола. Въпреки че въведеният текст не се показва на екрана, въведената информация се предава на сървъра в чист текст без криптиране. Следователно използването на това поле не гарантира сигурността на данните и те могат да бъдат прихванати.

Синтаксисът за създаване е както следва.

Атрибутите са същите като атрибутите на текстовото поле и са посочени в таблицата. 1.

Полето за парола се използва широко в уебсайтове за упълномощаване на потребители и ограничаване на достъпа до секции на уебсайта, където трябва да потвърдите пълномощията си. Пример 1 показва как да създадете такива полета.

Пример 1. Поле за парола

Поле за парола

Влизам:

Парола:

В резултат на това получаваме следното (фиг. 1).

Ориз. 1. Тип поле за парола

Свойствата на стила, които указват параметрите на цвят, фон, рамка и т.н., се прилагат към полето за парола. Пример 2 показва добавяне на фонови изображения към полетата на формуляра. Нека вземем за основа стила на текстовите полета.

Пример 2: Добавяне на изображение към текстово поле

Поле за парола .textField, .passField ( ширина: 100%; /* Ширина на полето */ подложка: 10px; /* Полета */ box-sizing: border-box; /* Алгоритъм за изчисляване на ширината */ box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Shadow inside */ border: 1px solid #ccc; /* Border options */ color: #ff6d37; /user.png) без повторение 5px 50%; repeat 5px 50% /* Изображение за полето за парола */ )

Резултатът от този пример е показан на фиг. 2. Картините се добавят като фон, така че текстът трябва да се премести надясно чрез padding-left, в противен случай ще се покаже върху изображението.

HTML5 носи много функции и подобрения в уеб формулярите, има нови атрибути и типове полета, които бяха въведени главно, за да улеснят живота на уеб разработчиците и да улеснят работата с формуляри за уеб потребителите. Днес ще създадем страница за вход с помощта на html5. Ако не сте запознати с новите екстри за формуляри, този урок ще ви помогне.

Краен резултат:

Маркиране на писане

Нека създадем следното маркиране

Раздел class="loginform cf">

електронна поща
Парола

< /section>

Ако сте работили с HTML формуляри преди, този код ще изглежда познат. Но има и някои особености. Полетата имат контейнери и някои атрибути, които са нови.

Заместители

Атрибутът placeholder ви позволява да включите текст по подразбиране в поле, което ще изчезне, когато елементът получи фокус или когато полето бъде попълнено. Преди правехме това с помощта на JavaScript, но сега всичко стана много по-лесно благодарение на новите атрибути.

атрибут "задължителен".

Задължителният атрибут предотвратява оставянето на полета празни, докато формулярът не бъде изпратен. Ако потребителят не попълни полето, се появява следната грешка.

Нов селектор също е включен в CSS3 (:задължително). Ето един пример:

Вход (рамка: 1px плътно червено;)

Типове полета

Първото ни поле е от тип имейл (типовете въвеждане са друго нововъведение в HTML5). Ако потребителят не попълни адресното поле електронна поща, ще се появи следното известие;

Използването на такъв вход също е удобно, защото ще бъде по-удобно за потребителите на мобилни устройства (iPhone или Android) да попълнят полето с маркиран знак „@“.

Новите функции, предлагани за HTML5 формуляри, са мощни и лесни за внедряване, но не се поддържат навсякъде, например;

Атрибутът placeholder се поддържа само от модерни браузъри - Firefox 3.7+, Safari 4+, Chrome 4+ и Opera 11+. Ако искате да поправите това, използвайте тази патерица в комбинация с Modernizr.

Същото с необходимия атрибут. Известието за грешка не може да бъде персонализирано, но вместо това грешката ще остане: „Моля, попълнете полетата“.
„Моля, въведете име“, този атрибут също се поддържа само в нормални браузъри.

Етикет (дисплей: блок; цвят: #999;) .cf:преди, .cf:след (съдържание: ""; дисплей: таблица;) .cf:след (изчистване: и двете;) .cf (*увеличение: 1; ) :фокус ( контур : 0 ; )

Всички полета с изключение на полето „изпращане“ ще имат следните стилове:

Loginform input:not ([ type=submit] ) ( padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 ) ;

А ето и стиловете за бутона за изпращане на формуляра.

Loginform input[ type=submit] ( border : 1px solid rgba(0 , 0 , 0 , 0 .3 ); background : #64c8ef ; /* Стари браузъри */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ фон : -webkit-gradient(линеен, ляво отгоре, ляво отдолу отдолу, color-stop(0 %,#64c8ef) , color-stop(100 %,# 00a2e2 ) ; /* Chrome,Safari4+ */ фон : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; градиент(отгоре, #00a2e2 100%) /* Opera 11.10+ */ фон: -ms-linear-gradient(отгоре, #64c8ef 0%,#00a2e2 100%); /* IE10+ */ фон : линеен градиент (към bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) /* W3C */ филтър: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientType=); 0 ; /* IE6-9 */ цвят : 5px 15px ; margin-shadow : 1px 0px rgba(0 , 0 , 0 , 0 ) ; )

Това е всичко! Надяваме се, че сте намерили този урок за полезен.

Съставихме списък от 60 безплатни формуляра за влизане, които можете да използвате на вашия WordPress сайт, блог, форум и т.н. Всеки формуляр е щателно тестван, за да се гарантира, че работи и изходният код е наличен.

Персонализатор за влизане в WordPress

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

Творческа форма за вход

Проста, но креативна форма за влизане, създадена с помощта на HTML и CSS3. Може да се използва и като форма за регистрация. Това е нашият любим шаблон от този списък.

Търсихме в интернет наистина готини формуляри за оторизация, но намирането им се оказа трудно. Ето защо решихме да ви представим нашия собствен. Ето 20 формуляра за вход, проектирани от нашия екип.

Формуляр за пълномощно №1

Прост, креативен и динамичен формуляр за влизане с градиентен фон. Можете да го използвате за всякакви цели, като оторизация в уеб услуга, мобилно или десктоп приложение.

Изтегли

Преглед

Формуляр за пълномощно № 2

Минималистичен и усъвършенстван формуляр за влизане с бутон, градиентно запълване, анимация и лого. Използвайте го, като промените необходимите елементи.

Изтегли

Преглед

Формуляр за пълномощно №3

Страница за вход с фоново изображение, сянка и ефект на курсора на мишката за бутона за вход.

Изтегли

Преглед

Формуляр за пълномощно № 4

Можете да изтеглите този уеб формуляр и да го използвате, както желаете. Той е напълно адаптивен.

Изтегли

Преглед

Формуляр за пълномощно № 5

Красива и модерна форма с опции за влизане през Facebook или Google. Неговите бутони имат красиви ефекти при задържане, за да предоставят на потребителите страхотно потребителско изживяване.

Изтегли

Преглед

Формуляр за пълномощно № 6

Ако уеб страницата е спретната и красива, формата за вход не трябва да се различава от нейния дизайн. Ето една форма, която определено ще отговори на очакванията ви.

Изтегли

Преглед

Формуляр за пълномощно № 7

Форма с три опции за влизане във вашия акаунт: Facebook, Twitter или имейл. И ако потребителят все още няма сметка, можете да свържете формата към страницата за регистрация.

Изтегли

Преглед

Формуляр за пълномощно № 8

Друга модерна, модерна и красива форма за вход. Изглежда особено добре на мобилни устройства.

Изтегли

Преглед

Формуляр за пълномощно № 9

Ако искате да избягате от чисто бял или едноцветен дизайн, трябва да обърнете внимание на тази форма. Поддържа добавяне на фоново изображение или градиентно наслагване. Има и възможност за влизане през Facebook или Google.

Изтегли

Преглед

Формуляр за пълномощно № 10

Това е точно обратното на предишния вариант. Изглежда минималистично, но в същото време много спретнато.

Изтегли

Преглед

Формуляр за пълномощно № 11

Вместо да създавате формуляр от нулата, можете да използвате страхотен готов за използване шаблон като този.

Изтегли

Преглед

Образец за пълномощно № 12

Фоново изображение със синя сянка, име с аватар и полета за въвеждане е формуляр за оторизация № 12. Добавен е ефект на задържане към бутона за влизане.

Изтегли

Преглед

Формуляр за пълномощно № 13

Шаблон за разделен екран, където едната половина е за изображението, а другата половина е за формата.

Изтегли

Преглед

Формуляр за пълномощно № 14

Тази колекция съдържа както прости, така и по-сложни форми за влизане. А шаблон No14 е един от минималистичните.

Изтегли

Преглед

Формуляр за пълномощно № 15

Доста минималистична форма, но можете да добавите банер в горната част. Благодарение на тази малка опция можете да направите формата по-привлекателна.

Изтегли

Преглед

Образец за пълномощно № 16

Това е форма за вход с изображение на цял екран, върху което има полета за въвеждане на потребителско име и парола, както и бутон с ефект на задържане.

Изтегли

Преглед

Формуляр за пълномощно № 17

За да направите формуляра си по-персонализиран, можете да използвате този шаблон. Включва изображение отстрани.

Изтегли

Преглед

Образец за пълномощно № 18

Изтегли

Преглед

Образец за пълномощно № 19

Жизнена, енергична и вълнуваща - това е целта на този формуляр за участие. Той е напълно адаптивен, оптимизиран за мобилни устройстваи е съвместим с всички основни уеб браузъри.

Изтегли

Преглед

Образец за пълномощно № 20

Градиентен фон, черен бутон с ефект на курсора, полета за въвеждане на потребителско име и парола, както и раздел „Забравена парола?“ Всичко това е във формуляр за разрешение № 20.

Изтегли

Преглед

Падаща форма за вход

Изтегли

Плаващ формуляр за регистрация

Проектиран за формуляри за абонамент, използващи раздели и етикети.

Изтегли

Опростен формуляр за оторизация

Това, което спираше хората, когато искаха да влязат в сайт на WordPress, беше, че беше твърде лесно външен вид. Тази форма запазва популярния дизайн, но добавя цвят към него.

Изтегли

Flat Login – Форма за регистрация

Когато щракнете върху бутона „Щракнете върху мен“, разположен в горния десен ъгъл, формата за вход ще се преобразува във форма за регистрация чрез анимация.

Изтегли

Влезте със самостоятелен SCSS формуляр

Това е формуляр, създаден с помощта на SCSS. CSS разширение, което добавя нова функционалност и елегантност към основния език. Тя ви позволява да използвате променливи, вложени правила, вградени импорти и много други.

Изтегли

Анимиран формуляр за влизане

Това е анимиран формуляр за влизане, а горната част „Хей, влезте вече“ се трансформира във формуляр, когато щракнете върху бутона.

Изтегли

Форма за влизане с помощта на CSS3 и HTML5

Пример за това как да създадете прост формуляр за влизане с помощта на HTML5 и CSS3. Той използва псевдо елементи (:after и :before), за да създаде ефекта на множество страници. Този формуляр използва HTML5 за опростяване на валидирането и представянето на данните.

Изтегли

Влезте с Shake Effect

Ако сте въвели грешна парола, ще бъдете уведомени с красив ефект на разклащане. Просто и ефективно решение.

Изтегли

Boxy Форма за вход

Изтегли

Анимиран формуляр за влизане

Приятен малък формуляр за вход Когато щракнете върху бутона „ВХОД“, разположен вляво, ще се покаже формулярът за вход.

Ето пример за html код на страница за влизане. В този пример сме показали едно текстово поле, парола, бутон за нулиране и бутон за влизане. Използвахме бутона за нулиране, който нулира всички полета до празни. Използвахме валидиране на JavaScript в страницата за вход. Задали сме стойност на потребителско име и парола. Ако човек въведе грешно потребителско име или парола или и двете, ще се покаже съобщение за грешка с „Грешка: Неправилно потребителско име или парола“. Докато лицето не въведе правилното потребителско име и парола, няма да влезе.

След като въведете правилното потребителско име и парола, ще бъдете пренасочени към друга страница.

Страницата за вход се използва в по-голямата част от динамичния уебсайт за валидиране на потребителя въз основа на неговите идентификационни данни. За изработване на страница за вход на уебсайтове се използват HTML форма и HTML елементи. Текстовото поле се използва за приемане на потребителско име и текстовото поле за парола се използва за приемане на парола от потребителя.

Бутонът за изпращане се използва за изпращане на данни към сървъра за валидиране. Добре е да проверявате въведеното от потребителя в браузъра с помощта на JavaScript. В този урок ние създаваме HTML код на страница за влизане и валидираме потребителското въвеждане с JavaScript. В модерното уеб приложение валидирането от страна на сървъра също е много важно, то се извършва от страна на сървъра с програмата, работеща на сървъра.

Ето видео урок:

Но в този урок ще се научите да създавате страница за вход в HTML и да валидирате потребителското въвеждане с JavaScript. Вижте демонстрация на HTML страница за вход.

Ето екранната снимка на страницата за вход, която правим:

Тази страница за вход показва потребителско име, текстови полета за парола и след това бутони за нулиране и влизане. След като потребителят въведе данните и щракне върху бутона Вход, JavaScript се използва за валидиране на формуляра и се показва съобщение за грешка, ако валидирането е неуспешно.

HTML страница за влизане с JavaScript валидиране

Страница за вход

HTML страница за влизане
потребителско име:
Парола:

функция check(form) ( if(form.userid.value == "Roseindia" && form.pwd.value == "Розиндия") { return true; } else { alert("Error Password or Username") return false; } } !}

Тагът на HTML е сърцето на създаването на потребителски формуляр за въвеждане в уеб приложение, което взема въведените от потребителя данни и накрая ги изпраща на програма от страна на сървъра за по-нататъшна обработка. Данните от всички входни или скрити полета се вземат и изпращат на сървъра чрез етикет на формуляр. Бутонът "изпрати" се използва за иницииране на изпращане на данни от формуляра към сървъра. Можете също да използвате JavaScript код за изпращане на формуляра. Например, ако името на формуляра ви е "loginForm", тогава следният JavaScript код може да бъде извикан за програмно подаване на формуляра.

Самият формуляр обикновено е предназначен да получава информация от потребителя за по-нататъшното й изпращане до сървъра, където данните от формуляра се получават от програмата за обработка. Такава програма може да бъде написана на всеки език за програмиране от страна на сървъра, като PHP, Perl и т.н. Адресът на програмата е посочен в атрибута action на тага, както е показано в пример 1.

Пример 1: Изпращане на данни от формуляр

HTML5 IE Cr Op Sa Fx

Данни от формуляра

В този пример данните от формуляра, посочени от атрибута име (влизане и парола), ще бъдат предадени на файла в /example/handler.php. Ако атрибутът за действие не е посочен, тогава прехвърлянето се извършва към адреса на текущата страница.

Прехвърлянето към сървъра се извършва по два различни метода: GET и POST За да зададете метода в тага, се използва атрибутът method, а неговите стойности са ключовите думи get и post. Ако атрибутът на метода не е посочен, тогава по подразбиране данните се изпращат до сървъра чрез метода GET. В табл Фигура 1 показва разликите между тези методи.

Кой метод се използва може лесно да се определи от адресната лента на браузъра. Ако в него се появи въпросителен знак и адресът изглежда така, тогава това определено е GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникална комбинация от параметри в адресната лента уникално идентифицира страница, така че страниците с адреси ?q=node/add и ?q=node се считат за различни. Тази функция се използва от системи за управление на съдържанието (CMS, система за управление на съдържанието) за създаване на много страници на уебсайтове. В действителност се използва един файл, който получава GET заявка и според нея генерира съдържанието на документа.

По-долу са изброени типични приложения на тези методи в сайтове.

ВЗЕМЕТЕ

Прехвърляне на малки текстови данни към сървъра; Търсене в сайта.

Търсачките и формулярите за търсене в сайтове винаги се изпращат чрез метода GET, това ви позволява да споделяте резултати от търсенето с приятели, да изпращате връзка по пощата или да я публикувате във форум.

ПУБЛИКУВАНЕ

Прехвърляне на файлове (снимки, архиви, програми и др.); изпращане на коментари; добавяне и редактиране на съобщения във форум, блог.

По подразбиране формулярът се обработва в текущия раздел на браузъра; но когато изпращате формуляра, можете да промените този параметър и да отворите манипулатора на формуляра в нов раздел или рамка. Това поведение се определя чрез „името на контекста“, което е стойността на целевия атрибут на тага. Популярните стойности са _blank за отваряне на формуляра в нов прозорец или таб и името на рамката, което е посочено от атрибута name на тага (пример 2).

Пример 2: Отваряне на формуляр в рамка

HTML5 IE Cr Op Sa Fx

Използване на рамка

IN в този примерКогато щракнете върху бутона „Изпращане“, резултатът от изпращането на формуляра се отваря в рамка, наречена област.

Елементите на формуляра традиционно се намират вътре в етикета, като по този начин определят данните, които ще бъдат предадени на сървъра. В същото време HTML5 има способността да отделя форма от нейните елементи. Това се прави за удобство и гъвкавост, така че сложното оформление може да съдържа няколко формуляра, които не трябва да се пресичат помежду си, или например някои елементи се показват с помощта на скриптове на едно място на страницата, а самият формуляр се намира на друго . Връзката между формуляра и неговите елементи в този случай се осъществява чрез идентификатора на формуляра, а атрибутът на формуляра със стойност, равна на този идентификатор, трябва да се добави към елементите (пример 3).

Пример 3: Свързване на формуляр към полета

HTML5 IE Cr Op Sa Fx

форма

В този пример етикетът се идентифицира уникално чрез идентификатора за удостоверяване и form="auth" се добавя към полетата, които трябва да бъдат изпратени чрез формуляра. В този случай поведението на елементите не се променя, когато се щракне върху бутона, данните за вход и парола се изпращат на манипулатора handler.php.

Въпреки че параметрите за подаване на формуляр традиционно са посочени в етикета, те могат също да бъдат прехвърлени към бутоните за подаване на формуляр ( и ). За целта се използва набор от атрибути formaction, formmethod, formenctype и formtarget, които са аналози на съответните атрибути без префикса на form. Пример 4 показва използването на тези атрибути.

Пример 4: Изпращане на формуляр

HTML5 IE Cr Op Sa Fx

Изпращане на формуляр

Всички нови атрибути на формуляри не се поддържат от някои браузъри, особено Internet Explorer и Safari.