Pole na zadanie hesla je bežné textové pole, zadaný text sa v závislosti od prehliadača zobrazuje ako hviezdičky alebo bodky. Táto funkcia je navrhnutá tak, aby zabránila komukoľvek šmírovať zadané heslo. Aj keď zadaný text nie je zobrazený na obrazovke, zadané informácie sa prenesú na server ako čistý text bez šifrovania. Preto použitie tohto poľa nezabezpečuje bezpečnosť údajov a môže byť zachytené.

Syntax vytvorenia je nasledovná.

Atribúty sú rovnaké ako atribúty textového poľa a sú uvedené v tabuľke. 1.

Pole hesla sa na webových stránkach vo veľkej miere používa na autorizáciu používateľov a obmedzenie prístupu do sekcií webovej lokality, kde potrebujete potvrdiť svoje poverenia. Príklad 1 ukazuje, ako vytvoriť takéto polia.

Príklad 1. Pole hesla

Pole hesla

Prihlásiť sa:

heslo:

V dôsledku toho dostaneme nasledovné (obr. 1).

Ryža. 1. Typ poľa hesla

Na pole hesla sa použijú vlastnosti štýlu, ktoré určujú parametre farby, pozadia, rámu atď.. Príklad 2 ukazuje pridávanie obrázkov pozadia do polí formulára. Vezmime si za základ štýl ako pri textových poliach.

Príklad 2: Pridanie obrázka do textového poľa

Pole hesla .textField, .passField ( šírka: 100 %; /* Šírka poľa */ výplň: 10px; /* Okraje */ veľkosť poľa: border-box; /* Algoritmus výpočtu šírky */ box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Vnútorný tieň */ orámovanie: 1px plný #ccc; /* Možnosti orámovania */ farba: #ff6d37; /* Farba textu */ pozadie: url(/príklad/ obrázok /user.png) no-repeat 5px 50%; /* Obrázok používateľa */ padding-left: 30px; /* Vzdialenosť od ľavého okraja */ ) .passField ( background: url(/example/image/lock.png) no -repeat 5px 50%; /* Obrázok poľa pre heslo */ )

Výsledok tohto príkladu je znázornený na obr. 2. Obrázky sa pridávajú ako pozadie, takže text musí byť posunutý doprava pomocou padding-left , inak sa zobrazí v hornej časti obrázka.

HTML5 prináša do webových formulárov množstvo funkcií a vylepšení, sú tu nové atribúty a typy polí, ktoré boli zavedené najmä preto, aby uľahčili život webovým vývojárom a prácu s formulármi pre používateľov webu. Dnes si vytvoríme prihlasovaciu stránku pomocou html5. Ak nie ste oboznámení s novými vychytávkami formulárov, tento návod vám pomôže.

Konečný výsledok:

Písanie značiek

Vytvorme nasledujúce označenie

Sekcia class="loginform cf">

• Email
• heslo

< /section>

Ak ste už predtým pracovali s formulármi HTML, tento kód vám bude povedomý. Ale sú tu aj niektoré zvláštnosti. Polia majú zástupné symboly a niektoré atribúty, ktoré sú nové.

Zástupné symboly

Atribút zástupného symbolu vám umožňuje zahrnúť predvolený text do poľa, ktoré zmizne, keď sa prvok zaostrí alebo keď sa pole vyplní. Kedysi sme to robili pomocou JavaScriptu, ale teraz je všetko oveľa jednoduchšie vďaka novým atribútom.

atribút „povinné“.

Povinný atribút zabraňuje tomu, aby polia zostali prázdne, kým sa formulár neodošle. Ak používateľ nevyplní pole, zobrazí sa nasledujúca chyba.

V CSS3 je zahrnutý aj nový selektor (:povinné). Tu je príklad:

Vstup (okraj: 1px plná červená;)

Typy polí

Naše prvé pole je typu e-mail (druhy vstupu sú ďalšou inováciou HTML5). Ak používateľ nevyplní pole e-mailovej adresy, zobrazí sa nasledujúce upozornenie;

Použitie takéhoto vstupu je tiež pohodlné, pretože pre používateľov mobilných zariadení (iPhone alebo Android) bude pohodlnejšie vyplniť pole so zvýrazneným „@“.

Nové funkcie ponúkané pre formuláre HTML5 sú výkonné a ľahko implementovateľné, ale napríklad nie sú všade podporované;

Atribút zástupného symbolu podporujú iba moderné prehliadače – Firefox 3.7+, Safari 4+, Chrome 4+ a Opera 11+. Ak to chcete napraviť, použite túto barličku v kombinácii s Modernizrom.

To isté s požadovaným atribútom. Oznámenie o chybe nie je možné prispôsobiť, ale chyba zostane: „Vyplňte polia“.
„Zadajte názov“, tento atribút je tiež podporovaný iba v bežných prehliadačoch.

Označenie ( display : block ; color : #999 ; ) .cf :before , .cf :after ( content : "" ; display : table; ) .cf :after ( clear : both; ) .cf ( *zoom: 1 ; ):focus (obrys : 0 ;)

Všetky polia okrem poľa „odoslať“ budú mať nasledujúce štýly:

Vstup prihlasovacieho formulára: nie ([ typ=odoslať] ) ( 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 ) ; )

A tu sú štýly tlačidla na odoslanie formulára.

Vstup prihlasovacieho formulára[ type=submit] ( border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; background : #64c8ef ; /* Staré prehliadače */ pozadie : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ); /* FF3.6+ */ pozadie : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,# 00a2e2 ) ); /* Chrome,Safari4+ */ pozadie : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ pozadie : -o-linear- gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ pozadie : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ pozadie : linear-gradient(to bottombottom, #64c8ef 0% ,#00a2e2 100% ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientTy= 0 ); /* IE6-9 */ farba : #fff ; padding : 5px 15px ; margin-right : 0 ; margin-top : 15px ; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 0, 0,3); )

To je všetko! Dúfame, že tento návod bol pre vás užitočný.

Zostavili sme zoznam 60 bezplatných prihlasovacích formulárov, ktoré môžete použiť na svojom webe WordPress, blogu, fóre atď. Každý formulár je dôkladne testovaný, aby sa zabezpečilo, že funguje a je dostupný zdrojový kód.

Prispôsobovač prihlásenia WordPress

Formuláre v tomto zozname sú vytvorené pomocou HTML/CSS. V tomto prípade však hovoríme o najlepšom doplnku na prispôsobenie používateľského rozhrania WordPress. Dodáva sa s viacerými šablónami, ktoré je možné ďalej prispôsobiť tak, aby vyhovovali dizajnu vašej webovej stránky. Pomocou tohto pluginu sa môžete zbaviť nudnej prihlasovacej stránky WordPress.

Kreatívny prihlasovací formulár

Jednoduchý, ale kreatívny prihlasovací formulár vytvorený pomocou HTML a CSS3. Dá sa použiť aj ako registračný formulár. Toto je naša obľúbená šablóna z tohto zoznamu.

Hľadali sme na internete naozaj skvelé autorizačné formuláre, no nájsť ich sa ukázalo ako zložité. Preto sme sa rozhodli predstaviť vám ten náš. Tu je 20 prihlasovacích formulárov navrhnutých naším tímom.

Autorizačný formulár č. 1

Jednoduchý, kreatívny a živý prihlasovací formulár s gradientným pozadím. Môžete ho použiť na akýkoľvek účel, napríklad autorizáciu vo webovej službe, mobilnej alebo desktopovej aplikácii.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.2

Minimalistický a prepracovaný prihlasovací formulár s tlačidlom, prechodovou výplňou, animáciou a logom. Použite ho zmenou potrebných prvkov.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.3

Prihlasovacia stránka s obrázkom na pozadí, tieňom a efektom vznášania sa pre tlačidlo prihlásenia.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.4

Tento webový formulár si môžete stiahnuť a použiť podľa vlastného uváženia. Je úplne prispôsobivý.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.5

Krásny a moderný formulár s možnosťami prihlásenia cez Facebook alebo Google. Jeho tlačidlá majú krásne efekty vznášania, ktoré používateľom poskytujú skvelý používateľský zážitok.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 6

Ak je webová stránka úhľadná a krásna, prihlasovací formulár by sa nemal líšiť od jej dizajnu. Tu je formulár, ktorý určite splní vaše očakávania.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 7

Formulár s tromi možnosťami prihlásenia sa do účtu: Facebook, Twitter alebo e-mail. A ak používateľ ešte nemá účet, môžete formulár prepojiť s registračnou stránkou.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 8

Ďalší moderný, módny a krásny prihlasovací formulár. Vyzerá obzvlášť dobre na mobilných zariadeniach.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 9

Ak sa chcete dostať preč od čisto bieleho alebo monochromatického dizajnu, mali by ste venovať pozornosť tomuto tvaru. Podporuje pridanie obrázka na pozadí alebo prekrytie s prechodom. Nechýba ani možnosť prihlásiť sa cez Facebook alebo Google.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.10

Ide o presný opak predchádzajúcej možnosti. Vyzerá minimalisticky, no zároveň veľmi úhľadne.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 11

Namiesto vytvárania formulára od začiatku môžete použiť skvelú šablónu pripravenú na použitie, ako je táto.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.12

Obrázok na pozadí s modrým tieňovým prekrytím, menom s avatarom a vstupnými políčkami je autorizačný formulár č. 12. Do prihlasovacieho tlačidla bol pridaný efekt vznášania.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 13

Šablóna rozdelenej obrazovky, kde jedna polovica je pre obrázok a druhá polovica pre tvar.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 14

Táto kolekcia obsahuje jednoduché aj zložitejšie prihlasovacie formuláre. A šablóna č.14 patrí k tým minimalistickým.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 15

Celkom minimalistický tvar, ale môžete pridať banner v hornej časti. Vďaka tejto malej možnosti môžete formulár zatraktívniť.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 16

Ide o prihlasovací formulár s obrázkom na celú obrazovku, nad ktorým sú polia na zadanie prihlasovacieho mena a hesla, ako aj tlačidlo s efektom vznášania.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 17

Ak chcete, aby bol váš formulár prispôsobenejší, môžete použiť túto šablónu. Obsahuje obrázok na boku.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 18

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č. 19

Vibrujúci, energický a vzrušujúci – o tom je tento vstupný formulár. Je plne responzívny, optimalizovaný pre mobilné zariadenia a kompatibilný so všetkými hlavnými webovými prehliadačmi.

Stiahnuť ▼

Náhľad

Formulár splnomocnenia č.20

Prechodové pozadie, čierne tlačidlo s efektom vznášania, polia na zadanie prihlasovacieho mena a hesla, ako aj sekcia „Zabudli ste heslo?“. Toto všetko je v autorizačnom formulári č.20.

Stiahnuť ▼

Náhľad

Rozbaľovací prihlasovací formulár

Stiahnuť ▼

Plávajúci registračný formulár

Navrhnuté pre formuláre predplatného pomocou kariet a štítkov.

Stiahnuť ▼

Jednoduchý autorizačný formulár

To, čo ľudí zastavilo, keď sa chceli prihlásiť na stránku WordPress, bolo to, že to vyzeralo príliš jednoducho. Tento tvar si zachováva obľúbený dizajn, no pridáva mu farbu.

Stiahnuť ▼

Jednoduché prihlásenie – Registračný formulár

Po kliknutí na tlačidlo „Klikni na mňa“ v pravom hornom rohu sa prihlasovací formulár pomocou animácie premení na registračný formulár.

Stiahnuť ▼

Prihláste sa pomocou samostatného formulára SCSS

Toto je formulár vytvorený pomocou SCSS. Rozšírenie CSS, ktoré k základnému jazyku pridáva novú funkčnosť a eleganciu. Umožňuje vám používať premenné, vnorené pravidlá, vložené importy a oveľa viac.

Stiahnuť ▼

Animovaný prihlasovací formulár

Toto je animovaný prihlasovací formulár a horná časť „Ahoj, už sa prihláste“ sa po kliknutí na tlačidlo zmení na formulár.

Stiahnuť ▼

Prihlasovací formulár pomocou CSS3 a HTML5

Príklad vytvorenia jednoduchého prihlasovacieho formulára pomocou HTML5 a CSS3. Používa pseudo prvky (:after a :before) na vytvorenie efektu viacerých stránok. Tento formulár používa HTML5 na zjednodušenie overovania a prezentácie údajov.

Stiahnuť ▼

Prihláste sa pomocou Shake Effect

Ak ste zadali nesprávne heslo, budete upozornení krásnym efektom zatrasenia. Jednoduché a efektívne riešenie.

Stiahnuť ▼

Prihlasovací formulár Boxy

Stiahnuť ▼

Animovaný prihlasovací formulár

Úhľadný malý prihlasovací formulár Po kliknutí na tlačidlo „PRIHLÁSENIE“ umiestnené vľavo sa zobrazí prihlasovací formulár.

Tu je príklad html kódu prihlasovacej stránky. V tomto príklade sme zobrazili jedno textové pole, Heslo, tlačidlo Resetovať a tlačidlo Prihlásiť. Použili sme tlačidlo Reset, ktoré resetuje všetky polia na prázdne. Na prihlasovacej stránke sme použili overenie JavaScriptu. Nastavili sme hodnotu používateľského mena a hesla.

Tu je príklad html kódu prihlasovacej stránky. V tomto príklade sme zobrazili jedno textové pole, Heslo, tlačidlo Resetovať a tlačidlo Prihlásiť. Použili sme tlačidlo Reset, ktoré resetuje všetky polia na prázdne. Na prihlasovacej stránke sme použili overenie JavaScriptu. Nastavili sme hodnotu používateľského mena a hesla.

Tu je príklad html kódu prihlasovacej stránky. V tomto príklade sme zobrazili jedno textové pole, Heslo, tlačidlo Resetovať a tlačidlo Prihlásiť. Použili sme tlačidlo Reset, ktoré resetuje všetky polia na prázdne. Na prihlasovacej stránke sme použili overenie JavaScriptu. Nastavili sme hodnotu používateľského mena a hesla. Ak osoba zadá nesprávne používateľské meno alebo heslo alebo oboje, zobrazí sa chybové hlásenie „Chyba: Nesprávne používateľské meno alebo heslo“. Kým osoba nezadá správne používateľské meno a heslo, neprihlási sa.

Po zadaní správneho používateľského mena a hesla budete presmerovaní na inú stránku.

Prihlasovacia stránka sa používa na väčšine dynamických webových stránok na overenie používateľa na základe jeho poverení. Na vytvorenie prihlasovacej stránky pre webové stránky sa používa HTML formulár a HTML prvky. Textové pole sa používa na prijatie používateľského mena a textové pole sa používa na prijatie hesla od používateľa.

Tlačidlo Odoslať sa používa na odoslanie údajov na server na overenie. Vstup používateľa v prehliadači je dobré overiť pomocou JavaScriptu. V tomto návode vytvárame kód HTML prihlasovacej stránky a overujeme vstup používateľa pomocou JavaScriptu. V modernej webovej aplikácii je tiež veľmi dôležitá validácia na strane servera, ktorá sa vykonáva na strane servera s programom spusteným na serveri.

Tu je video tutoriál:

V tomto návode sa však naučíte vytvoriť prihlasovaciu stránku v HTML a overiť vstup používateľa pomocou JavaScriptu. Pozrite si ukážku HTML prihlasovacej stránky.

Tu je snímka obrazovky prihlasovacej stránky, ktorú vytvárame:

Táto prihlasovacia stránka zobrazuje textové polia Používateľské meno, Heslo a potom tlačidlá na resetovanie a prihlásenie. Keď používateľ zadá údaje a klikne na tlačidlo Prihlásiť, na overenie formulára sa použije JavaScript a ak overenie zlyhá, zobrazí sa chybové hlásenie.

HTML prihlasovacia stránka s validáciou JavaScriptu

Prihlasovacia stránka

HTML prihlasovacia stránka
Používateľské meno:
heslo:

function check(form) ( if(form.userid.value == "Roseindia" && form.pwd.value == "Roseindia") { return true; } else { alert("Error Password or Username") return false; } } !}

Značka HTML je srdcom vytvárania užívateľského vstupného formulára vo webovej aplikácii, ktorý preberá užívateľské vstupné dáta a nakoniec ich odošle do programu na strane servera na ďalšie spracovanie. Údaje všetkých vstupných alebo skrytých polí sa odoberajú a odosielajú na server prostredníctvom značky formulára. Tlačidlo "odoslať" sa používa na spustenie odosielania údajov formulára na server. Na odoslanie formulára môžete použiť aj kód JavaScript. Ak je napríklad názov vášho formulára „loginForm“, potom je možné zavolať nasledujúci kód JavaScript na odoslanie formulára programovo.

Samotný formulár je zvyčajne určený na prijímanie informácií od používateľa na ich ďalšie odoslanie na server, kde sú údaje formulára prijímané obslužným programom. Takýto program môže byť napísaný v akomkoľvek programovacom jazyku na strane servera, ako je PHP, Perl atď. Adresa programu je uvedená v atribúte action tagu, ako je uvedené v príklade 1.

Príklad 1: Odoslanie údajov formulára

HTML5 IE Cr Op Sa Fx

Údaje formulára

V tomto príklade budú údaje formulára označené atribútom name (login a heslo) odovzdané do súboru na /example/handler.php. Ak atribút action nie je zadaný, prenos sa uskutoční na adresu aktuálnej stránky.

Prenos na server prebieha dvoma rôznymi spôsobmi: GET a POST. Na nastavenie metódy v tagu sa používa atribút method a jeho hodnotami sú kľúčové slová get a post . Ak atribút metódy nie je zadaný, údaje sa štandardne odošlú na server pomocou metódy GET. V tabuľke Obrázok 1 ukazuje rozdiely medzi týmito metódami.

Ktorá metóda sa použije, sa dá ľahko určiť podľa panela s adresou prehliadača. Ak sa v ňom objaví otáznik a adresa vyzerá takto, tak je to určite GET.

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

Jedinečná kombinácia parametrov v paneli s adresou jednoznačne identifikuje stránku, takže stránky s adresami ?q=node/add a ?q=node sa považujú za odlišné. Túto funkciu využívajú redakčné systémy (CMS, Redakčný systém) na vytváranie mnohých webových stránok. V skutočnosti sa používa jeden súbor, ktorý dostane požiadavku GET a podľa nej vygeneruje obsah dokumentu.

Nižšie sú uvedené typické aplikácie týchto metód na stránkach.

GET

Prenos malých textových údajov na server; Vyhľadávanie na stránkach.

Vyhľadávače a formuláre na vyhľadávanie na stránkach sa vždy odosielajú pomocou metódy GET, čo vám umožňuje zdieľať výsledky vyhľadávania s priateľmi, poslať odkaz poštou alebo ho uverejniť na fóre.

POST

Prenos súborov (fotografií, archívov, programov atď.); posielanie komentárov; pridávanie a úprava správ na fóre, blogu.

Štandardne sa formulár spracováva na aktuálnej karte prehliadača, pri odosielaní formulára však môžete tento parameter zmeniť a otvoriť obslužný program formulára na novej karte alebo ráme. Toto správanie je špecifikované prostredníctvom „kontextového názvu“, čo je hodnota cieľového atribútu značky. Populárne hodnoty sú _blank na otvorenie formulára v novom okne alebo karte a názov rámca, ktorý je určený atribútom name značky (príklad 2).

Príklad 2: Otvorenie formulára v rámci

HTML5 IE Cr Op Sa Fx

Použitie rámu

V tomto príklade, keď kliknete na tlačidlo Odoslať, výsledok odoslania formulára sa otvorí v rámci s názvom area .

Prvky formulára sú tradične umiestnené vo vnútri značky, čím definujú údaje, ktoré sa budú prenášať na server. HTML5 má zároveň schopnosť oddeliť formulár od jeho prvkov. Robí sa to z dôvodu pohodlia a všestrannosti, takže zložité rozloženie môže obsahovať niekoľko formulárov, ktoré by sa nemali navzájom pretínať, alebo napríklad niektoré prvky sa zobrazujú pomocou skriptov na jednom mieste na stránke a samotný formulár sa nachádza na inom mieste. . Spojenie medzi formulárom a jeho prvkami sa v tomto prípade uskutočňuje prostredníctvom identifikátora formulára a k prvkom by sa mal pridať atribút formulára s hodnotou rovnou tomuto identifikátoru (príklad 3).

Príklad 3: Prepojenie formulára s poľami

HTML5 IE Cr Op Sa Fx

Formulár

V tomto príklade je značka jednoznačne identifikovaná prostredníctvom identifikátora auth a do polí, ktoré by sa mali odoslať prostredníctvom formulára, sa pridá form="auth". V tomto prípade sa správanie prvkov nemení, po kliknutí na tlačidlo sa prihlasovacie meno a heslo odošle handler.php.

Hoci parametre odoslania formulára sú tradične špecifikované v značke, možno ich preniesť aj do tlačidiel odoslania formulára ( a ). Na tento účel sa používa množina atribútov formation , formmethod , formenctype a formtarget, ktoré sú analógmi zodpovedajúcich atribútov bez predpony formulára. Príklad 4 ukazuje použitie týchto atribútov.

Príklad 4: Odoslanie formulára

HTML5 IE Cr Op Sa Fx

Odoslanie formulára

Všetky nové atribúty formulárov nie sú podporované niektorými prehliadačmi, najmä Internet Explorer a Safari.

Podobné články