Kommunikation inloggningsformulär html. Skickar formulärdata

Lösenordsinmatningsfältet är ett vanligt textfält, den inmatade texten i vilken, beroende på webbläsare, visas som asterisker eller punkter. Den här funktionen är utformad för att förhindra att någon snokar efter det angivna lösenordet. Även om den inmatade texten inte visas på skärmen, överförs den inmatade informationen till servern i klartext utan kryptering. Därför säkerställer inte användningen av detta fält datasäkerheten och den kan avlyssnas.

Syntaxen för skapandet är som följer.

Attributen är desamma som textfältsattributen och listas i tabellen. 1.

Lösenordsfältet används ofta på webbplatser för att auktorisera användare och begränsa åtkomsten till delar av webbplatsen där du behöver bekräfta din auktoritet. Exempel 1 visar hur man skapar sådana fält.

Exempel 1. Lösenordsfält

Lösenordsfält

Logga in:

Lösenord:

Som ett resultat får vi följande (Fig. 1).

Ris. 1. Typ av lösenordsfält

Stilegenskaper som anger parametrarna för färg, bakgrund, ram, etc. tillämpas på lösenordsfältet. Exempel 2 visar att bakgrundsbilder läggs till formulärfält. Låt oss ta stilen som för textfält som grund.

Exempel 2: Lägga till en bild i ett textfält

Lösenordsfält .textField, .passField ( bredd: 100%; /* Fältbredd */ utfyllnad: 10px; /* Marginaler */ boxstorlek: border-box; /* Breddberäkningsalgoritm */ box-shadow: infälld 0 1px 5px rgba(0,0,0,0.2); /* Skugga inuti */ kant: 1px fast #ccc; /* Kantalternativ */ färg: #ff6d37; /user.png) no-repeat 5px 50%; /* Användarens bild */ padding-left: 30px /* Avstånd från vänster kant */ .passField (bakgrund: url(/example/image/lock.png) no-; upprepa 5px 50% /* Bild för lösenordsfältet */ )

Resultatet av detta exempel visas i fig. 2. Bilder läggs till som bakgrund, så texten måste flyttas till höger via padding-left , annars kommer den att visas ovanpå bilden.

HTML5 ger många funktioner och förbättringar till webbformulär, det finns nya attribut och fälttyper som introducerades främst för att göra livet lättare för webbutvecklare och arbeta med formulär mer bekvämt för webbanvändare. Idag kommer vi att skapa en inloggningssida med html5. Om du inte är bekant med de nya formulärgodsakerna kommer den här handledningen att hjälpa dig.

Slutresultat:

Skriva uppmärkning

Låt oss skapa följande uppmärkning

Avsnitt class="loginform cf">

E-post
Lösenord

< /section>

Om du har arbetat med HTML-formulär tidigare kommer den här koden att se bekant ut. Men det finns också en del egenheter. Fälten har platshållare och några attribut som är nya.

Platshållare

Med platshållarattributet kan du inkludera standardtext i ett fält som försvinner när elementet får fokus eller när fältet är ifyllt. Vi brukade göra detta med JavaScript, men nu har allt blivit mycket enklare tack vare de nya attributen.

"required" attribut

Det obligatoriska attributet förhindrar att fält lämnas tomma tills formuläret skickas. Om användaren inte fyller i fältet visas följande fel.

En ny väljare ingår också i CSS3 (:required). Här är ett exempel:

Ingång (kant: 1px fast röd;)

Fälttyper

Vårt första fält är av typen e-post (indatatyper är en annan HTML5-innovation). Om användaren inte fyller i adressfältet E-post, kommer följande meddelande att visas;

Att använda en sådan inmatning är också bekvämt eftersom det kommer att vara bekvämare för användare av mobila enheter (iPhone eller Android) att fylla i fältet med "@" markerat.

De nya funktionerna som erbjuds för HTML5-formulär är kraftfulla och lätta att implementera, men de stöds inte överallt, till exempel;

Platshållarattributet stöds endast av moderna webbläsare - Firefox 3.7+, Safari 4+, Chrome 4+ och Opera 11+. Om du vill fixa detta, använd denna krycka i kombination med Modernizr.

Samma sak med det obligatoriska attributet. Felmeddelandet kan inte anpassas, men felet kvarstår: "Snälla fyll i fälten" istället
"Vänligen ange ett namn", detta attribut stöds också endast i vanliga webbläsare.

Etikett ( display : block ; color : #999 ; ) .cf :before , .cf :after ( innehåll : "" ; display : table; ) .cf :after ( clear : both ; ) .cf ( *zoom: 1 ; ) :fokus ( kontur : 0 ; )

Alla fält utom "skicka"-fältet kommer att ha följande stilar:

Loginform input:not ([ typ=submit] ) ( utfyllnad : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: infälld 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 );

Och här är stilarna för knappen för att skicka formuläret.

Loginform input[ typ=submit] ( border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; bakgrund : #64c8ef ; /* Gamla webbläsare */ bakgrund : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ); /* FF3.6+ */ bakgrund : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,# 00a2e2 ) ; /* Chrome,Safari4+ */ bakgrund : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ bakgrund : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2e2e2e"ype 0 ) ; /* IE6-9 */ färg : #fff : 5px 15px ; 15px ; )

Det är allt! Vi hoppas att du tyckte att den här handledningen var användbar.

Vi har sammanställt en lista med 60 gratis inloggningsformulär som du kan använda på din WordPress-webbplats, blogg, forum, etc. Varje formulär testas noggrant för att säkerställa att det fungerar och att källkoden är tillgänglig.

WordPress Login Customizer

Formulären i denna lista skapas med HTML/CSS. Men i det här fallet vi pratar om om det bästa pluginet för att anpassa WordPress UI. Den kommer med flera mallar som kan anpassas ytterligare för att passa din webbdesign. Med detta plugin kan du bli av med den tråkiga WordPress-inloggningssidan.

Kreativt inloggningsformulär

Ett enkelt men kreativt inloggningsformulär skapat med HTML och CSS3. Det kan också användas som registreringsformulär. Detta är vår favoritmall från den här listan.

Vi sökte på Internet efter riktigt coola auktoriseringsformulär, men det visade sig vara svårt att hitta dem. Det är därför vi bestämde oss för att presentera vår egen. Här är 20 inloggningsformulär designade av vårt team.

Fullmaktsblankett nr 1

Enkel, kreativ och levande inloggningsformulär med gradientbakgrund. Du kan använda den för alla ändamål, till exempel auktorisering i en webbtjänst, mobil eller stationär applikation.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 2

Minimalistiskt och sofistikerat inloggningsformulär med knapp, gradientfyllning, animering och logotyp. Använd den genom att ändra de nödvändiga elementen.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 3

Inloggningssida med bakgrundsbild, skugga och svävningseffekt för inloggningsknapp.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 4

Du kan ladda ner detta webbformulär och använda det som du vill. Det är helt adaptivt.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 5

En vacker och modern form med möjligheter att logga in via Facebook eller Google. Dess knappar har vackra svävningseffekter för att ge användarna en fantastisk användarupplevelse.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 6

Om webbsidan är snygg och vacker bör inloggningsformuläret inte skilja sig från dess design. Här är ett formulär som definitivt uppfyller dina förväntningar.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 7

Ett formulär med tre alternativ för att logga in på ditt konto: Facebook, Twitter eller e-post. Och om användaren ännu inte har konto, kan du länka formuläret till registreringssidan.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 8

Ännu ett modernt, moderiktigt och vackert inloggningsformulär. Det ser särskilt bra ut på mobila enheter.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 9

Om du vill komma bort från en ren vit eller monokromatisk design bör du vara uppmärksam på denna form. Det stöder att lägga till en bakgrundsbild eller övertoning. Det finns även möjlighet att logga in via Facebook eller Google.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 10

Detta är raka motsatsen till det tidigare alternativet. Det ser minimalistiskt ut, men samtidigt väldigt snyggt.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 11

Istället för att skapa ett formulär från grunden kan du använda en bra, färdig att använda mall som den här.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 12

En bakgrundsbild med en blå skuggöverlagring, ett namn med en avatar och inmatningsfält är behörighetsformuläret nr 12. Lade till en svävningseffekt på inloggningsknappen.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 13

En mall för delad skärm där ena halvan är för bilden och den andra halvan är för formen.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 14

Denna samling innehåller både enkla och mer komplexa inloggningsformulär. Och mall nr 14 är en av de minimalistiska.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 15

Ganska minimalistisk form, men du kan lägga till en banderoll överst. Tack vare detta lilla alternativ kan du göra formen mer attraktiv.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 16

Det här är ett inloggningsformulär med en helskärmsbild, ovanpå finns fält för inloggning och lösenord, samt en knapp med hovringseffekt.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 17

För att göra ditt formulär mer personligt kan du använda den här mallen. Den innehåller en bild på sidan.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 18

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 19

Livlig, energisk och spännande - det är vad det här anmälningsformuläret handlar om. Den är helt adaptiv, optimerad för Mobil enheter och är kompatibel med alla större webbläsare.

Ladda ner

Förhandsvisning

Fullmaktsblankett nr 20

Gradientbakgrund, svart knapp med svävningseffekt, fält för inloggning och lösenord, samt avsnittet "Glömt ditt lösenord?" Allt detta finns i behörighetsblanketten nr 20.

Ladda ner

Förhandsvisning

Drop-down inloggningsformulär

Ladda ner

Flytande registreringsformulär

Designad för prenumerationsformulär med flikar och etiketter.

Ladda ner

Enkelt tillståndsformulär

Det som brukade stoppa folk när de ville logga in på en WordPress-sajt var att det var för enkelt utseende. Denna form behåller den populära designen men lägger till färg till den.

Ladda ner

Platt inloggning – registreringsformulär

När du klickar på knappen "Klicka på mig" i det övre högra hörnet kommer inloggningsformuläret att omvandlas till ett registreringsformulär genom animering.

Ladda ner

Logga in med självständigt SCSS-formulär

Detta är ett formulär skapat med SCSS. En CSS-tillägg som lägger till ny funktionalitet och elegans till basspråket. Det låter dig använda variabler, kapslade regler, inline-importer och mycket mer.

Ladda ner

Animerat inloggningsformulär

Detta är ett animerat inloggningsformulär, och den övre delen "Hej du, logga in redan" förvandlas till ett formulär när du klickar på knappen.

Ladda ner

Inloggningsformulär med CSS3 och HTML5

Ett exempel på hur man skapar ett enkelt inloggningsformulär med HTML5 och CSS3. Den använder pseudoelement (:efter och :före) för att skapa effekten av flera sidor. Det här formuläret använder HTML5 för att förenkla datavalidering och presentation.

Ladda ner

Logga in med skakeffekt

Om du angav fel lösenord kommer du att meddelas med en vacker skakeffekt. En enkel och effektiv lösning.

Ladda ner

Boxy inloggningsformulär

Ladda ner

Animerat inloggningsformulär

Ett snyggt litet inloggningsformulär När du klickar på knappen "LOGGA IN" till vänster kommer inloggningsformuläret att visas.

Här är ett exempel på html-kod för inloggningssidan. I det här exemplet har vi visat ett textfält, lösenord, återställningsknapp och inloggningsknapp. Vi har använt knappen Återställ som återställer alla fält till tomma. Vi har använt JavaScript-validering på inloggningssidan. Vi har angett användarnamn och lösenord. Om en person anger fel användarnamn eller lösenord eller båda, kommer ett felmeddelande med "Error: Incorrect Username or Password" att visas. Förrän personen anger rätt användarnamn och lösenord kommer den inte att logga in.

När du anger rätt användarnamn och lösenord kommer du att omdirigeras till en annan sida.

Inloggningssidan används på de flesta av den dynamiska webbplatsen för att validera användare baserat på deras referenser. För att skapa inloggningssida för webbplatser används HTML-formulär och HTML-element. Textfält används för att acceptera användarnamn och lösenord textfält används för att acceptera lösenord från användare.

Skicka-knappen används för att skicka data till servern för validering. Det är bra att validera användarinmatning i webbläsaren med JavaScript. I den här handledningen skapar vi en HTML-inloggningskod och validerar användarinmatning med JavaScript. I moderna webbapplikationer är validering på serversidan också mycket viktigt, det görs på serversidan med programmet som körs på servern.

Här är videohandledning:

Men i denna handledning lär du dig att skapa en inloggningssida i HTML och validera användarinmatning med JavaScript. Se demo av HTML-inloggningssidan.

Här är skärmdumpen av inloggningssidan vi gör:

Den här inloggningssidan visar textfälten Användarnamn, Lösenord och sedan knappar för återställning och inloggning. När användaren anger data och klickar på knappen Logga in, används JavaScript för att validera formuläret och felmeddelande visas om valideringen misslyckas.

HTML-inloggningssida med JavaScript-validering

HTML-inloggningssida
Användarnamn:
Lösenord:

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

HTML-taggen är hjärtat i att skapa användarformulär i webbapplikationer som tar användarens indata och slutligen skickar in det till serversidans program för vidare bearbetning. Data för alla inmatade eller dolda fält tas och skickas till servern via form-tagg. "Skicka"-knappen används för att initiera sändning av formulärdata till servern. Du kan också använda JavaScript-kod för att skicka in formuläret. Om ditt formulärnamn till exempel är "loginForm" kan följande JavaScript-kod anropas för att skicka formuläret programmatiskt.

Själva formuläret är vanligtvis avsett att ta emot information från användaren för att vidare skicka den till servern, där formulärdata tas emot av hanterarprogrammet. Ett sådant program kan skrivas i vilket programmeringsspråk som helst på serversidan som PHP, Perl, etc. Programadressen anges i taggens action-attribut, som visas i exempel 1.

Exempel 1: Skicka in formulärdata

HTML5 IE Cr Op Sa Fx

Formulärdata

I det här exemplet kommer formulärdata som indikeras av namnattributet (inloggning och lösenord) att skickas till filen på /example/handler.php. Om åtgärdsattributet inte är specificerat sker överföringen till adressen för den aktuella sidan.

Överföring till servern sker på två olika metoder: GET och POST För att ställa in metoden i taggen används metodattributet och dess värden är nyckelorden get och post. Om metodattributet inte är specificerat skickas data som standard till servern med GET-metoden. I tabell Figur 1 visar skillnaderna mellan dessa metoder.

Vilken metod som används kan enkelt avgöras av webbläsarens adressfält. Om ett frågetecken visas i den och adressen ser ut så här, är detta definitivt en GET.

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

En unik kombination av parametrar i adressfältet identifierar en sida unikt, så sidor med adresserna ?q=node/add och ?q=node anses olika. Den här funktionen används av innehållshanteringssystem (CMS, innehållshanteringssystem) för att skapa många webbsidor. I verkligheten används en enda fil som tar emot en GET-förfrågan och, enligt den, genererar innehållet i dokumentet.

Nedan listas typiska tillämpningar av dessa metoder på webbplatser.

SKAFFA SIG

Överföra små textdata till servern; Sidsök.

Sökmotorer och sökformulär för webbplatser skickas alltid med GET-metoden, detta gör att du kan dela sökresultat med vänner, skicka en länk via post eller lägga upp den på ett forum.

POSTA

Överföra filer (foton, arkiv, program, etc.); skicka kommentarer; lägga till och redigera meddelanden på forumet, bloggen.

Som standard bearbetas formuläret i den aktuella webbläsarfliken, men när du skickar formuläret kan du ändra denna parameter och öppna formulärhanteraren i en ny flik eller ram. Detta beteende specificeras genom "kontextnamnet", som är värdet för taggens målattribut. Populära värden är _blank för att öppna formuläret i ett nytt fönster eller en ny flik, och namnet på ramen, som anges av taggens namnattribut (exempel 2).

Exempel 2: Öppna ett formulär i en ram

HTML5 IE Cr Op Sa Fx

Använda en ram

I i detta exempel När du klickar på knappen "Skicka" öppnas resultatet av att skicka in formuläret i en ram som kallas område .

Formulärelement är traditionellt placerade inuti taggen och definierar därigenom vilken data som kommer att överföras till servern. Samtidigt har HTML5 förmågan att separera ett formulär från dess element. Detta görs för bekvämlighet och mångsidighet, så en komplex layout kan innehålla flera formulär som inte ska korsa varandra, eller till exempel visas vissa element med hjälp av skript på ett ställe på sidan, och själva formuläret finns på ett annat . Kopplingen mellan formuläret och dess element sker i detta fall genom formuläridentifieraren, och formattributet med ett värde lika med denna identifierare bör läggas till elementen (exempel 3).

Exempel 3: Länka ett formulär till fält

HTML5 IE Cr Op Sa Fx

Form

I det här exemplet identifieras taggen unikt genom auth-identifieraren och form="auth" läggs till i fälten som ska skickas via formuläret. I det här fallet ändras inte elementens beteende när knappen klickas, inloggningen och lösenordet skickas till handler.php-hanteraren.

Även om parametrar för formulärinlämning traditionellt anges i taggen, kan de också överföras till formulärsändningsknapparna ( och ). För detta används en uppsättning attribut formaction , formmethod , formenctype och formtarget, som är analoger till motsvarande attribut utan formprefixet. Exempel 4 visar användningen av dessa attribut.

Exempel 4: Skicka ett formulär

HTML5 IE Cr Op Sa Fx

Skicka ett formulär

Alla nya formulärattribut stöds inte av vissa webbläsare, särskilt Internet Explorer och Safari.