Kommunikasjonspåloggingsskjema html. Opprette HTML-skjemaer
Dette er en forlengelse av veiledningen for å lage et medlemsbasert nettsted. Se forrige side for mer informasjon.
Last ned koden
Du kan laste ned hele kildekoden for registrerings-/påloggingssystemet fra lenken nedenfor:
ReadMe.txt-filen i nedlastingen inneholder detaljerte instruksjoner.
Påloggingsskjemaet
Her er HTML-koden for påloggingsskjemaet.
Logger inn
Vi bekrefter brukernavnet og passordet vi mottok, og slår deretter opp disse i databasen. Her er koden:
funksjon Login() ( if(empty($_POST["brukernavn"])) ( $this->HandleError("Brukernavn er tomt!"); return false; ) if(empty($_POST["passord"])) ( $this->HandleError("Passord er tomt!"); return false; ) $brukernavn = trim($_POST["brukernavn"]); $passord = trim($_POST["passord"]); if(! $this->CheckLoginInDB($brukernavn,$passord)) (retur falsk; ) session_start(); $_SESSION[$this->GetLoginSessionVar()] = $brukernavn; return true; )
For å identifisere en bruker som autorisert, skal vi sjekke databasen for kombinasjonen av brukernavn/passord, og hvis en riktig kombinasjon ble lagt inn, setter vi en sesjonsvariabel.
Her er koden for å slå opp brukernavn og passord.
funksjon SjekkLoginInDB($brukernavn,$passord) (if(!$this->DBLogin()) ( $this->HandleError("Databasepålogging mislyktes!"); return false; ) $brukernavn = $this->SanitizeForSQL($ brukernavn); $pwdmd5 = md5($password); $qry = "Velg navn, e-post fra $this->tabellnavn "." hvor brukernavn="$brukernavn" og passord="$pwdmd5" "." og bekreftelseskode=" y""; $result = mysql_query($qry,$this->tilkobling); if(!$result || mysql_num_rows($result)<= 0) { $this->HandleError("Feil ved pålogging." "Brukernavnet eller passordet stemmer ikke"); returner falsk; ) return true; )
Vær oppmerksom på at vi må sammenligne verdien for passordet fra databasen med den MD5-krypterte verdien til passordet som er angitt av brukeren. Hvis spørringen returnerer et resultat, setter vi en "autorisert" sesjonsvariabel, og omdirigerer deretter til det beskyttede innholdet. Hvis det ikke er noen rader med innlagte data, omdirigerer vi bare brukeren til påloggingsskjemaet igjen.
Få tilgang til kontrollerte sider
For de sidene som kun kan nås av registrerte medlemmer, må vi sette en hake øverst på siden.
Legg merke til at vi setter en "autorisert" øktvariabel i påloggingskoden ovenfor. På toppen av sidene vi ønsker å beskytte, ser vi etter den sesjonsvariabelen. Hvis brukeren er autorisert, viser vi ham det beskyttede innholdet, ellers sender vi ham til påloggingsskjemaet.
Inkluder denne prøvebiten på toppen av de beskyttede sidene dine:
CheckLogin()) ( $fgmembersite->RedirectToURL("login.php"); exit; ) ?>
Se filen: tilgangskontrollert.php i den nedlastede koden for et eksempel.
Her er funksjonskoden CheckLogin().
funksjon CheckLogin() ( session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) (retur falsk; ) returner true; )
Dette er det grunnleggende for å opprette et medlemsside. Nå som du har grunnleggende kunnskap, kan du eksperimentere med det og legge til nye funksjoner, for eksempel en "Glemt passord"-side for å la brukeren hente eller endre passordet hvis han glemmer det.
Oppdateringer
9 januar 2012
Tilbakestill passord/Endre passord-funksjoner er lagt til.
Koden er nå delt på GitHub.
Tillatelse
Koden deles under LGPL-lisens. Du kan fritt bruke den på kommersielle eller ikke-kommersielle nettsteder.
Ingen relaterte innlegg.
Kommentarer til dette innlegget er stengt.
Her er et eksempel på registreringsskjema som bruker HTML. Her kan en programmerer vise så mange "Tekstfelt" han/hun vil. Navnet foran tekstfeltet kalles "Etikett". På slutten av registreringsskjemaet er det en "LEGG TIL"-knapp bak som enhver ønsket lenke kan brukes. Når den er klikket, vil den omdirigere til den bestemte destinasjonen.
Her er et eksempel på registreringsskjema som bruker HTML. Her kan en programmerer vise så mange "Tekstfelt" han/hun vil. Navnet foran tekstfeltet kalles "Etikett". På slutten av registreringsskjemaet er det en "LEGG TIL"-knapp bak som enhver ønsket lenke kan brukes. Når den er klikket, vil den omdirigere til den bestemte destinasjonen.HTML-kode for registreringsskjema
Her er et eksempel på registreringsskjema som bruker HTML. Her kan en programmerer vise så mange "Tekstfelt" han/hun vil. Navnet foran tekstfeltet kalles "Etikett". På slutten av registreringsskjemaet er det en "LEGG TIL"-knapp bak som enhver ønsket lenke kan brukes. Når den er klikket, vil den omdirigere til den bestemte destinasjonen.
I dette eksemplet har vi vist 9 "Tekstfelt". Størrelsen på tekstboksen kan også endres i henhold til kravet.
registrering.html
Registreringsskjema
Påloggingsskjemaer er overalt på nettet. Bruker du sosiale nettverk? Du må gå gjennom påloggingsskjema av noe slag. Har du en epost? Ble du med i noen forum? Prøvde du å legge igjen en kommentar på et WordPress-nettsted? For å få tilgang til noe på internett, er sjansen stor for at du må gå gjennom en slags påloggingsprosess. Du må sannsynligvis registrere deg først, registrere deg eller legge igjen litt informasjon. Du må bruke et slags påloggingsskjema for å gjøre noe på internett.
Så hva har påloggingsskjemaer å gjøre med HTML og CSS? De er begge de viktigste delene av påloggingsskjemaene.
HTML (HyperText Markup Language) er et standard markup-språk som brukes til å lage nettsider. HTML-elementer er byggesteiner for alle nettsteder.
CSS (Cascading Style Sheet) er et språk som brukes for å beskrive utseendet og formateringen til et dokument skrevet i et markup-språk. For eksempel HTML!
Vi bruker HTML for å bygge et nettsted og CSS for å få det til å se pent ut. Det er det de fleste brukerne møter når de surfer på nettet.
Vi har laget en liste over 50 gratis påloggingsskjemaer som du kan bruke på din WordPress-side, blogg, forum eller andre steder. Dette er en håndplukket liste av Colorlib for å sikre høyeste kvalitet på skjemaene. Hvert eneste skjema har blitt grundig testet for å sikre at ingen komponenter mangler og at kildekoden er tilgjengelig ved hver nedlasting. Selvfølgelig står du fritt til å bruke disse skjemaene til personlige og kommersielle formål, uten behov for attribusjon.
Utforsk 2,5 millioner digitale eiendeler, inkludert 2019s beste WordPress-maler
Over 2 millioner varer fra verdens største markedsplass for HTML5-maler, temaer og designelementer. Enten det er det du trenger, eller du bare er ute etter noen få arkivbilder – alt kan finnes her på Envato Market.
LAST NED NÅ
WordPress Login Customizer
Resten av listen og HTML/CSS-drevne påloggingsskjemaer, men her kan du se den beste innloggingstilpasningspluginen for WordPress. Den kommer med flere definerte maler som du kan finjustere ytterligere for å matche designet på nettstedet ditt. Det er til dette pluginet at du endelig kan bli kvitt den kjedelige WordPress wp-admin-siden og skape en virkelig unik opplevelse for deg selv og brukerne dine.
Kreativt påloggingsskjema
Enkelt, men kreativt påloggingsskjema laget med HTML5 og CSS3. Dette skjemaet kan også brukes som registreringsskjema. Dette er vår favorittmal på denne listen takket være dens fleksibilitet og likhet som lar deg lage
WordPress versjonVi søkte på internett etter kule påloggingsskjemaer, men det var veldig vanskelig å finne flotte påloggingsskjemaer, derfor bestemte vi oss for å ha vårt syn på dem. Vi ønsker å presentere 20 påloggingsskjemaer designet og utvikler av Colorlib-teamet.
Påloggingsskjema 1 av Colorlib
Enkelt, kreativt og levende påloggingsskjema med gradientbakgrunn. Du kan bruke denne til alle slags intensjoner, som nett-, mobil- eller skrivebordsapplikasjoner. Men vær kreativ med det hvis du vil.
Påloggingsskjema 2 av Colorlib
Minimalt og sofistikert påloggingsskjema fra Colorlib med gradientknapp med animasjon og logo. Bruk den, endre den og ha den som et fint tillegg til ditt allerede smarte webhotell.
Påloggingsskjema 3 av Colorlib
En nydelig påloggingsside med et bakgrunnsbilde med skygge og en gradient skjemaboks med påloggingsknapp sveveeffekt. Den eneste begrensningen du har er fantasien din, så utvide visningen og bruk påloggingsskjema 3 til sitt fulle potensial.
Påloggingsskjema 4 av Colorlib
Kreativiteten kjenner ingen grenser, og det gjør påloggingsskjema 4 heller ikke. Her er det, til din disposisjon, klart og klart for deg å laste det ned og bruke det til en god del. Ikke bekymre deg for responsen heller.
Påloggingsskjema 5 av Colorlib
Lekker, ren og moderne form med mulighet for å logge på med Facebook eller Google. Alle knappene har en fin hove-effekt som krydrer opplevelsen.
Påloggingsskjema 6 av Colorlib
Hvis siden din allerede er superryddig og ryddig, bør et påloggingsskjema ikke være annerledes. Her er en som lett vil møte dine forventninger hvis minimalisme er din kopp te.
Påloggingsskjema 7 av Colorlib
Et skjema med treveis mulighet for å logge inn på kontoen. Enten det er Facebook, Twitter eller e-postpålogging de foretrekker, dette er den typen verktøy du må ha på siden din. Og hvis de ikke allerede har en konto, kan du også koble den til registreringssiden din.
Påloggingsskjema 8 av Colorlib
Nok et tidsriktig, trendy og fristende påloggingsskjema med avrundet alt. Denne er spesielt anvendelig for mobilbrukere på grunn av dens for tiden veldig populære stil med avrundede hjørner.
Påloggingsskjema 9 av Colorlib
Hvis du vil unngå den hvite eller ensfargede bakgrunnen, er dette påloggingsskjemasiden du bør vurdere. Ikke bare støtter den en full bildebakgrunn, men den kommer også med et gradientoverlegg og et alternativ for å logge på med Facebook eller Google.
Påloggingsskjema 10 av Colorlib
En noe fullstendig motsetning sammenlignet med den forrige er påloggingsskjema 10. Det kunne nesten ikke vært mer minimalistisk utseende mens det fortsatt har denne up-to-the-minute følelsen over seg.
Påloggingsskjema 11 av Colorlib
Med vår samling av de beste HTML5- og CSS3-påloggingsskjemaene sparer du deg selv for tid og krefter (også penger). I stedet for å bygge en fra bunnen av, her er en annen morder klar til bruk mal du kan bruke.
Påloggingsskjema 12 av Colorlib
Bildebakgrunn med blå skyggeoverlegg, navn, bilde og må-ha-skjemaet, det er det som skjer med Login Form 12. Det er også en kul sveveeffekt på påloggingsknappen og gir deg en sjanse til å koble den til registreringsskjemaet ditt for alle nye brukere.
Påloggingsskjema 13 av Colorlib
Et delt skjermregistreringsskjema, der den ene halvparten er dedikert til et bilde og den andre halvparten til skjemaet. Det er et gratis verktøy som du kan begynne å bruke akkurat nå. Bare last ned oppsettet og gå full tilt med det.
Påloggingsskjema 14 av Colorlib
I denne samlingen har vi en blanding av forenklede og de litt mer komplekse og avanserte påloggingsskjemaene. Kort sagt, det er noe for enhver smak, og påloggingsskjema 14 er mer på den minimalistiske siden. Men hvorfor komplisere med et påloggingsskjema, ikke sant? Til hver sin egen.
Påloggingsskjema 15 av Colorlib
Mens du fortsatt holder ting på et minimum, er et kult tillegg til påloggingsskjemaet 15 bildebanneret rett over skjemaet. Med denne lille funksjonen kan du gjøre opplevelsen litt mer engasjerende.
Påloggingsskjema 16 av Colorlib
Dette er et påloggingsskjema med et fullskjermbilde på toppen som er plassert et skjema med brukernavn og passordfelt og en gradientknapp med hover-effekt. Enkelt og greit.
Påloggingsskjema 17 av Colorlib
For å få det til å se mer personlig ut, passer denne innrammede påloggingsskjemamalen best for deg. Den har en bildeside og en formside, men holder ting på et minimum samtidig som den sikrer profesjonalitet.
Påloggingsskjema 18 av Colorlib
Hvis du liker å skille deg ut og holde ting originale, bør du vurdere å bruke påloggingsskjema 18. Mens noen liker påloggingssider super grunnleggende, vil de andre ha noen ekstra godbiter som rocker oppsettet. Og hvis du er ute etter å legge til et bilde, er dette for deg.
Påloggingsskjema 19 av Colorlib
Levende, energisk og oppmerksomhetsfangende, det er hva dette neste påloggingsskjemaet basert på HTML5 og CSS3 handler om. Den er også fullstendig responsiv og mobilklar, samt kompatibel med alle større nettlesere.
Påloggingsskjema 20 av Colorlib
Gradientbakgrunn, svart påloggingsknapp med sveveeffekt, brukernavn og passordfelt sammen med egendefinert tekst og "Glemt passord?" seksjonen, ja, det er alt som er en del av Login Form 20. Høres overveldende ut, men i virkeligheten langt ifra.
Skjemaet er skjult med mindre du klikker på "Logg inn". Virkelig flott funksjon for moderne nettsider som ønsker å unngå å ha en egen side for påloggingsskjemaet. Du kan vise skjemaet hvor som helst på nettstedet ditt med dette kraftige verktøyet.
nedlasting
Et design for et registreringsskjema ved hjelp av faner og flytende skjemaetiketter.
nedlasting
Det som opprinnelig ble laget for å hindre folk i å gå inn på én persons WordPress-side, ble en veldig populær form på grunn av sin enkelhet og pene design.
nedlastingFlat Login – Registreringsskjema
Når du klikker på "Klikk meg"-knappen øverst til høyre, får du jevn animasjon som forvandler dette påloggingsskjemaet til registreringsskjemaet.
nedlastingLogg på med selvstendig SCSS-skjema
Dette er et skjema med selvstendig SCSS. En utvidelse av CSS som tilfører kraft og eleganse til det grunnleggende språket. Den lar deg bruke variabler, nestede regler, mixins, innebygde importer og mer.
nedlasting
Dette er faktisk et animert påloggingsskjema, med toppen "Hei, logg på allerede" forvandles til skjemaet nederst. Myke animasjonseffekter.
nedlasting
Dette er et eksempel på hvordan du lager et enkelt påloggingsskjema ved hjelp av HTML5 og CSS3. Dette skjemaet bruker pseudoelementer (:etter og:før) for å lage flersideeffekten. Disse elementene roteres ved hjelp av CSS3-transformeringsegenskapen. Dette skjemaet bruker HTML5 for å gjøre validering og innsending enkelt.
nedlasting
Når du har skrevet inn feil passord i dette skjemaet, vil en fin risteeffekt advare deg om at du ikke skrev inn riktig passord. En enkel og effektiv løsning som vil påpeke problemet med feil passord.
nedlasting
Et boksy påloggingsskjema med en liten overraskelse. Prøv "admin" som brukernavn og "1234" som passord for full opplevelse.
nedlasting
Pent lite påloggingsskjema. Når du klikker på "LOGG PÅ" på venstre side, skaper animasjonseffekten et fint lite påloggingsskjema til høyre. Absolutt unik tilnærming!
nedlastingForm for materialdesign
Ganske enkelt og enkelt på øyepåloggingsskjemaet som du kan legge til bloggen din eller en hvilken som helst annen nettside og krydre opplevelsen. Du trenger ikke å overkomplisere med en enkel ting som påloggingsskjemaet er. Selv om du bare samler abonnenter, kan du også leke med denne layouten og få ting til å rocke.
Bootstrap Snippet Form
Tydeligvis er dette neste gratis HTML5-påloggingsskjemaet basert på det godt likte Bootstrap Framework. Dette forteller deg at du kan forvente en fin fleksibilitet som ethvert moderne nettsted og element må praktisere. E-postadresse, passord og en avmerkingsboks for å krysse av hvis en bruker vil at plattformen skal huske informasjonen hans eller hennes. Enkelt og til poenget.
Uansett hovedwebdesign, med ting som påloggingsskjemaer, vil du ikke komplisere det for mye. I stedet ønsker du å holde det enkelt og la det gjøre jobben, slik at brukerne får tilgang til kontoene sine sømløst. Du vil oppnå dette målet med dette påloggingsskjemaet med flat UI uten tvil.
Trendy UI-sett-skjema
Fra superenkle påloggingsskjemaer til de med litt mer handling på gang. Denne spesielle er ganske lik sammenlignet med den forrige, bare at du vil legge merke til en ramme som går rundt hele skjemaet. Få dem til å skrive inn navn eller brukernavn og passord, og de kan gå inn i din fantastiske verden.
Dashboard CSS3 HTML5-skjema
Alle HTML5- og CSS3-påloggingsskjemaene du finner på denne listen er enkle å bruke og uanstrengt å knytte til nettplattformen din. Denne har til og med en "Glemt passordet ditt?" helt nederst for alle som bare ikke kan huske passordene sine. Malen er perfekt for å gå inn i dashbordet, men du kan bruke den til andre behov også.
Logg på med gjenopprettingsskjema
Tittelen sier stort sett alt; dette er et pent, rent og minimalistisk påloggingsskjema med gjenoppretting. Det du også legger merke til er at det ikke er noen tradisjonell "boks" som du brukes til å se påloggingsskjemaer bruke. Hvis du ønsker å gjøre en forskjell, vet du nå hvilken layout du skal velge.
Et gratis flatt påloggingsskjema med en fantastisk og elegant mørk layout kombinert med en grønn oppfordringsknapp. Jada, du kan endre verktøyet etter eget ønske, men du kan også bruke det akkurat som det er og ha det live på nettstedet ditt på et blunk. Lek med funksjonene og få alt satt opp slik du liker det.
Gjennomsiktig pålogging
Selv et påloggingsskjema kan være av superkreativ og oppsiktsvekkende karakter. Mens mange holder seg til det enkle og grunnleggende utseendet, er det andre som liker det spesielt og eksklusivt. Dette gjennomsiktige påloggingsskjemaet vil garantert gjøre susen for deg. Med en bildebakgrunn og et skjema over, kan dette oppsettet følge merkevarebyggingen din til en T.
Du trenger ikke å gå for dyptgående med denne neste påloggingen siden den er ganske selvforklarende. Den er kompatibel med Google Chrome-utvidelsen, samt funksjonsknapper for de som ikke er registrert ennå eller har mistet passordet. Hvis dette er den du lette etter, så var det mer enn verdt det å rulle hele veien så langt.
Elegant flat form
Et flatt stilig skjema som du kan legge til webhotellet ditt som en pop-up eller annonse som en widget på en side. Uansett vil det holde din profesjonelle tilnærming intakt. Det er enkelt og lett for øyet og har også en CTA for alle som savnet å registrere seg for medlemmenes område. Bruk den som den er eller forbedre den etter din smak.
Definitivt en tilnærming til et gratis påloggingsskjema som du ikke bør gå glipp av. Det har en følelse av en kupong bare at det ikke er hvis det gir noen mening. Uansett, i tekstdelen kan du også koble dette skjemaet til registreringsskjemaet for de som er interessert i å opprette en konto. Annet enn det, vil det helt sikkert fange oppmerksomheten deres.
Flere og flere nettstedeiere implementerer sosiale pålogginger, og du kan også bli med på trenden. Dette gratis påloggingsskjemaet med sosial integrasjon er det rette alternativet for å ta skrittet fullt ut. Men sammen med Twitter-, Facebook- og Google+-knapper har oppsettet også den tradisjonelle måten å registrere seg på med en e-post.
Hvis passordet ditt er superkomplekst, vil du noen ganger bare skrive det inn i en "show"-modus. Tilby den samme funksjonen til alle brukerne dine med påloggingsskjemaet for vis og skjul passord. Den har en fantastisk mørk layout med grønne detaljer perfekt for de som graver denne typen design. Gjør selvfølgelig endringer i den og finjuster den etter dine behov.
Logg 'N Last animert skjema
Hvis du allerede øver på animasjoner og spesialeffekter på siden din, hold trenden med påloggingsskjemaet også. I stedet for å lage din egen, kan du ganske enkelt bruke dette slående Log 'N Load animerte skjemaet som vil gjøre susen. Når du holder musepekeren over påloggingsknappen, vises skjemaet rett foran deg. Den har til og med en sirkulær lasting som forbedrer opplevelsen.
Dette flate, moderne og brukervennlige påloggingsskjemaet fungerer utmerket på alle enheter, mobil, nettbrett og desktop. Du kan også leke med forskjellige justeringer og endre standardinnstillingene til nettstedets stil nøyaktig. Verktøyet har også kule sveveeffekter som gir et snev av raffinement til den totale opplevelsen.
Som du allerede vet, har webklienten muligheten til å overføre forskjellig informasjon til webserveren ved å bruke GET- og POST-forespørsler. HTML-skjemaer er hovedverktøyet for å lage slike søk. I hovedsak er et HTML-skjema et felt eller felt for å legge inn informasjon på en nettside. Et godt eksempel på et HTML-skjema er skjemaet for å legge inn pålogging og passord for autorisasjon på nettstedet.
Et HTML-skjema er beskrevet ved hjelp av en sammenkoblet tag form. Denne taggen har to viktige egenskaper: metode Og handling. Metodeattributtet spesifiserer typen HTTP-forespørsel (get eller post), og handlingsattributtet spesifiserer det forespurte dokumentet, det vil si banen til filen hvis forespørsel vil bli gjort. Banen kan enten være absolutt (angir nettstedets domene) eller relativ. For eksempel:
<form method = "get" action = "/login.php" > ... </form>Det finnes flere forskjellige typer dataelementer som passer inn i et skjema. Elementet jeg vil starte med heter sende inn:
<input type = "submit" value = "Logg inn" / > !}Elementet er en knapp, klikk på som resulterer i en HTTP-forespørsel. Egenskap verdi setter etiketten på knappen. Et skjema kan inneholde flere innsendingselementer. For å finne ut hvilken knapp som ble klikket på i det forespurte dokumentet, må du angi attributtene til innsendingselementene Navn. For eksempel:
<form method = "get" action = "/control.php" > <input type = "submit" name = "send" verdi = "Add" / > !} <input type = "submit" name = "send" verdi = "Rediger" / > !} </form>Når du oppretter en forespørsel, vil nettleseren inkludere en HTTP-parameter som karakteriserer det klikkede innsendingselementet. Verdien av navneattributtet til den trykkede knappen vil bli tatt som parameternavn, og verdien til verdiattributtet som verdi. Når du klikker på Legg til-knappen, vil følgende forespørsel genereres:
/control.php?submit=Legg til
og når du trykker på Rediger-knappen:
/control.php?submit=Rediger
Følgende element er det enkleste elementet for å legge inn enkeltlinjetekst. HTML-koden:
<input type = "tekst" navn = "navn" / >navn er et obligatorisk attributt for å delta i en HTTP-forespørsel. Verdien av dette attributtet vil bli brukt som HTTP-parameternavnet. Alle typer skjemaelementer har denne egenskapen.
Du kan også angi verdiattributtet til et element ved å spesifisere teksten som skal legges inn i elementet som standard. For eksempel:
<input type = "tekst" navn = "pålogging" verdi = "Brukernavn" / >Element passord brukes til å legge inn passord. Eksternt er det det samme, men den angitte teksten vises som stjerner eller prikker:
<input type = "passord" / >Dette er i prinsippet nok til å lage den enkleste formen for autorisasjon. La oss prøve å implementere det, og deretter gå tilbake til vurdering av de gjenværende elementene.
La oss lage en fil auth.php i rotkatalogen med følgende innhold:
<html xmlns= "http://www.w3.org/1999/xhtml"> <hodet > <tittel > Autorisasjon</tittel> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </hode> <kroppen > <form method = "get" action = "/auth.php" > <tabell > <tr > <td > Brukernavn:</td> <td > <input type = "tekst" navn = "pålogging" verdi = "" / > </td> </tr> <tr > <td > Passord:</td> <td > <input type = "passord" navn = "pass" verdi = "" / > </td> </tr> </tabell> <input type = "submit" value = "Logg inn" / > !} </form> </body> </html>Som du kan se, inne i skjemataggen kan du plassere tagger som hjelper deg med å markere skjemaet vakkert (jeg plasserte en tabell inni). Skjemaet inneholder brukernavn og passord felt som heter henholdsvis login og pass. Når du klikker "Logg inn", genereres en GET-forespørsel for dokumentet /auth.php (det vil si at siden ber om seg selv). I mitt tilfelle så hele sidens URL ut http://test-domene3/auth.php.
Skriv inn dine opplysninger og klikk "Logg inn". Siden skal lastes inn på nytt. Sidens adresse bør også endres. I mitt tilfelle tok det formen:
Http://test-domain3/auth.php?login=Joker-jar&pass=12345
Dette betyr at auth.php-dokumentet ble forespurt med GET-parametere som ble lagt inn ved hjelp av et HTML-skjema. Plasser en PHP-behandler i begynnelsen av auth.php-filen som vil motta autorisasjonsdata:
//--Sjekk om dataene ble overført if ( isset ($_GET [ "logg inn" ] ) && isset ($_GET [ "pass" ] ) ) ( ekko "Ditt brukernavn: ". $_GET ["pålogging"] . ", ditt passord: " . $_GET["pass"]; exit ; ) ?>Hvis siden har fått pålogging og passord, vil tilstanden utløses og en melding vises. Vil også bli oppringt exit, som vil stoppe videre kjøring av skriptet, derfor vil ikke skjemaet vises.
Det er ikke trygt å sende passordet med en GET-forespørsel fordi det er synlig i adressefeltet. La oss endre forespørselstypen til POST. For å gjøre dette, endre verdien av metodeattributtet, og endre $_GET til $_POST i PHP-behandleren for å få tilgang til matrisen. Sjekk funksjonaliteten til skriptet.
Neste element - avmerkingsboksen. Den brukes når et "ja/nei"-svar kreves fra brukeren:
<input type = "avmerkingsboks" / >Hvis avkrysningsboksen ikke er merket, sendes ingenting i parameterne. Ellers sendes navneparameteren med verdien på. Det er ett poeng til. Som regel er det en forklarende tekst ved siden av avmerkingsboksen. Det er god praksis for nettredaktøren å la avmerkingsboksen reagere på klikk på denne teksten. Dette gjøres enkelt. Flagget tildeles en bestemt id, og selve inskripsjonen er dekorert med en tag merkelapp med attributt til, hvis verdi er lik avmerkingsboksidentifikatoren:
<input type = "checkbox" id = "husk" navn = "husk" / > <etikett for = "husk" > Husk meg</label>Et lignende element brukes til å velge et svar fra et sett med verdier. La oss si at brukeren må velge en av tre farger:
<input type = "radio" id = "rød" navn = "farge" verdi = "rød" / > !} <etikett for = "rød" > rød</label> <br/> <input type = "radio" id = "grønn" navn = "farge" verdi = "grønn" / > !} <etikett for = "grønn" > Grønn</label> <br/> <input type = "radio" id = "blått" navn = "farge" verdi = "blått" / > !} <etikett for = "blå" > Blå</label> <br/>Merk at alle elementene har samme navneverdi. Du kan bare velge én verdi. HTTP-parameteren vil inneholde verdien til det valgte elementet, for eksempel farge=blå.
For at ett av elementene skal velges til å begynne med, for eksempel det første, må det gis et attributt krysset av med mening krysset av(XHTML-standard):
<input type = "radio" id = "rød" navn = "farge" verdi = "rød" checked = "checked" / > !}Det er et spesielt element for å legge inn stor tekst med flere linjer tekstområde:
<tekstområde rader = "6" cols = "20" navn = "tekst" > Tekst inne i element</tekstområde>Tekst inne i element
Dette elementet, som du kan se, er forskjellig fra de forrige. Det er en sammenkoblet tag, og teksten er ikke plassert i attributtet, men i selve taggen. Elementet har også et navneattributt. Bruker attributt rader du kan angi antall linjer i et element, cols- antall tegn på linjen. Textarea-elementet brukes som regel i POST-skjemaer, fordi... innebærer å skrive inn lang tekst (for eksempel et meldingsskjema på et forum).
Nedtrekksliste. Du har sikkert støtt på et slikt element i programmer. Lar deg velge én verdi fra et sett. Elementkoden er heller ikke helt vanlig. Først opprettes et beholderelement plukke ut, får den navneattributtet:
<velg navn = "byer" > </velg>Listeelementer plasseres inne i beholderen. Listeelementet er en sammenkoblet tag alternativ, får hvert element et verdiattributt. Elementets inskripsjon er skrevet inn i hoveddelen av elementet:
<velg navn = "by" > <alternativverdi = "msk" > !} Moskva</alternativ> <alternativverdi = "vlad" > !} Vladivostok</alternativ> <alternativverdi = "nsk" > !} Novosibirsk</alternativ> </velg>HTTP-forespørselen sender for eksempel en parameter med navnet navn og verdien til det valgte elementet by=vlad. Som standard er det første elementet i listen valgt, hvis du vil at et annet element skal velges, gi det et attributt valgt med mening valgt:
<alternativverdi = "vlad" selected = "selected" > !} Vladivostok</alternativ>Liste over verdier. Hvis det valgte elementet får attributtet størrelse Med numerisk verdi, vil rullegardinlisten bli til en liste med verdier. I dette tilfellet vil verdien av størrelsesattributtet bestemme den vertikale størrelsen på elementet:
<velg navn = "by" størrelse = "3"> <alternativverdi = "msk" > !} Moskva</alternativ> <alternativverdi = "vlad" > !} Vladivostok</alternativ> <alternativverdi = "nsk" > !} Novosibirsk</alternativ> </velg>Moskva Vladivostok Novosibirsk
Hvis det valgte elementet får attributtet flere med mening flere(XHTML-standard), da vil det være mulig å velge mer enn ett element samtidig (for eksempel mens du holder nede Ctrl-tasten). I dette tilfellet vil alle valgte elementer med samme navn, For eksempel: town=msk&town=vlad&town=nsk.
Noen ganger er det nødvendig å sende en parameter i en HTTP-forespørsel som brukeren ikke skal redigere, og noen ganger til og med se. La oss si at du implementerer et nyhetsredigeringsskjema. HTTP-forespørselen må inneholde identifikatoren til denne nyheten. For slike tilfeller er det et skjult HTML-skjemaelement:
<input type = "skjult" navn = "param" verdi = "" / >Dette elementet vil ikke være synlig på skjemaet, men HTTP-parameteren name=value vil bli sendt når forespørselen gjøres.
Noen ganger kan et element som sletter skjemaet være nyttig. En knapp som, når den klikkes, sletter alle data som er lagt inn av brukeren på skjemaet:
<input type = "reset" value = "Clear" / > !}De oppførte elementene har to spesielle attributter:
readonly="readonly" - forbyr endring av informasjon i elementet (skrivebeskyttet modus);
disabled="disabled" - gjør elementet inaktivt.
Det er også et element for å velge en fil som skal lastes opp til webserveren når skjemaet sendes inn, men dette vil trolig bli omtalt i en egen artikkel.
En veiledning om hvordan du oppretter et bytte påloggings- og registreringsskjema med HTML5 og CSS3.
I denne opplæringen skal vi lage to HTML5-skjemaer som vil bytte mellom pålogging og registrering ved å bruke CSS3-pseudoklassen :target . Vi vil style den med CSS3 og en ikonfont. Tanken bak denne demoen er å vise brukeren påloggingsskjemaet og gi en lenke for å "bytte" til registreringsskjemaet.
Merk at dette kun er for demoformål, det vil bare fungere i nettleser som støtter:target pseudo-klassen, og du bør ikke bruke denne koden på et live-nettsted uten å gi solid reserve.
I det følgende skal vi gå gjennom Demo 1.
HTML-en
I HTML-en legger vi begge skjemaene, og skjuler den andre med CSS. Her er koden, jeg vil forklare noen av de interessante delene senere.
Vi har lagt til noe HTML5-godhet her og brukt noen av de nye inngangene. Innspillet type=passord skjuler automatisk hva brukeren skriver og erstatter det med prikker (avhengig av nettleser). Innspillet type=e-post gjør det mulig for nettleseren å sjekke om det brukeren skrev inn har formatet til en gyldig e-postadresse. Vi har også brukt krever=påkrevd Egenskap; Nettlesere som støtter dette attributtet vil ikke la brukeren sende inn skjemaet før dette feltet er fylt ut, ingen JavaScript kreves.
De autofullfør=på attributtet vil forhåndsutfylle verdier basert på tidligere brukerinndata. Vi brukte også noen fine plassholdere for inngangene som vil vise en viss veiledende verdi når input ikke er fylt.
Nå de to vanskelige delene. Du har kanskje lagt merke til de to lenker øverst i skjemaet. Dette er et lite triks som vil få formen vår til å oppføre seg pent når vi leker med ankere, slik at den ikke "hopper" på lange sider når vi klikker på byttelenken og utløser:target-pseudoklassen.
Det andre lille trikset er knyttet til bruken av ikonfonten. Vi vil bruke et dataattributt for å vise ikonene. Ved å stille inn data-icon="icon_character" med det tilsvarende tegnet i HTML-en trenger vi bare én CSS-attributtvelger for å style alle ikonene. Les mer om denne teknikken på 24 måter: Vise ikoner med fonter og dataattributter.
CSS
For klarhet i koden i denne opplæringen vil jeg utelate alle leverandørprefiksene, men du vil selvfølgelig finne dem i filene. Nok en gang bruker jeg noen ganske avanserte CSS3-triks som kanskje ikke fungerer i alle nettlesere. La oss komme i gang.
Styler begge skjemaene ved hjelp av CSS3
Først, la oss gi de to skjemaene våre litt generell styling for beholderen.
#subscribe, #login( posisjon: absolutt; topp: 0px; bredde: 88%; polstring: 18px 6% 60px 6%; margin: 0 0 35px 0; bakgrunn: rgb(247, 247, 247); kantlinje: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 042) in, 042) ; ) #login( z-indeks: 22; )
Vi har lagt til en fin boksskygge som er laget av to skygger: en innfelt for å skape den indre blå gløden, og en utvendig skygge. Vi skal forklare z-indeksen om litt.
I det følgende vil vi style overskriften med litt bakgrunnsklipp:
/**** generell tekststil ****/ #wrapper h1( font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular"," Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** For øyeblikket støtter bare webkit bakgrunnsklipp:tekst; */ #wrapper h1( bakgrunn: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93), rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20bx, rg (64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; ) #wrapper h1:after( content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(venstre, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, 7,914, rgba(147,184,189,0) ,1) 53 %, rgba(147,184,189,0,8) 79 %, rgba(147,184,189,0) 100 %); )
Merk at for øyeblikket er det bare nettlesere som støtter bakgrunnsklipp: tekst, så vi vil lage en strippet bakgrunn kun for webkit her, og klippe den til teksten for å legge stripene til H1-tittelen. Siden bakgrunnsklipp: tekst egenskapen fungerer for øyeblikket bare i Webkit-nettlesere, jeg bestemte meg for å bare bruke webkit-prefikset. Det er grunnen til at jeg deler CSS-erklæringen i to deler, og bare bruker en webkit-prefiksgradient. Bare bruk av –webkit- prefikset er dårlig praksis, det er kun for demoformål, og du bør aldri gjøre dette på et ekte nettsted! Det er også der -webkit-tekst-fyll-farge: gjennomsiktig kommer godt med: det lar oss bare ha en gjennomsiktig bakgrunn på webkit-nettleserne, alle de andre vil ignorere det og gi oss den angitte tekstfargen som fallback.
Vi opprettet også en falmende linje under tittelen ved hjelp av:after pseudo-klassen. Vi bruker en høydegradient på 2 px og toner bakgrunnen til 0 opasitet i begge ender.
La oss nå style innspillene våre og gi dem et penere utseende.
/**** avansert inndatastil ****/ /* plassholder */ ::-webkit-input-placeholder ( farge: rgb(190, 188, 188); font-stil: kursiv; ) input:-moz- plassholder, tekstområde:-moz-plassholder( farge: rgb(190, 188, 188); font-stil: kursiv; ) input ( disposisjon: ingen; )
Først styler vi inngangene, og fjerner omrisset. Men vær forsiktig her; omrisset hjelper brukeren å vite hvilken inngang som er fokusert, så hvis du fjerner den, bør du oppgi noen:aktive og:fokustilstander for inngangene.
/* alle inndata bortsett fra send inn og avkrysningsboks */ #wrapper input:not())( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178) ; box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; ) #wrapper input:not() : aktiv, #wrapper input:not():focus( kantlinje: 1px solid rgba(91, 90, 90, 0.7); bakgrunn: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba ( 168, 168, 168, 0,9) innfelt; )
Her brukte vi klassen:not pseudo for å style alle innganger, bortsett fra avkrysningsboksen. Jeg ga en:fokus og:aktiv tilstand, siden jeg bestemte meg for å fjerne omrisset.
Og nå den morsomme delen: ikonfonten. Siden vi ikke kan bruke:før og:etter pseudoklasser på innganger, må vi jukse litt: vi legger til ikonet på etiketten, og deretter plasserer det i inngangen. Jeg bruker fontomas-biblioteket som setter sammen noen fine ikoner. Du kan omorganisere dem for å sette ikonet til en bestemt bokstav. Husk data-ikon Egenskap? Det er der du skal legge brevet. jeg brukte data-icon='u' for bruker, "e" for e-post, "p" for passord. Når jeg valgte bokstavene, lastet jeg ned fonten og brukte fontsquirrel-fontgeneratoren til å transformere den til et @font-face-kompatibelt format.
@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont" .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** det magiske ikontrikset ! **/ :after ( innhold: attr(data-icon); font-family: "FontomasCustomRegular"; farge: rgb(106, 159, 171); posisjon: absolutt; venstre: 10px; topp: 35px; bredde: 30px; )
Ja, det er det folkens, du trenger ikke ha en klasse for hvert ikon. Vi brukte innhold: attr(data-ikon) for å hente bokstaven fra data-ikon-attributtet, så vi trenger bare å deklarere fonten, velge en fin farge og plassere den.
La oss nå style innsendingsknappen for begge skjemaene.
/*styling av begge send-knappene */ #wrapper p.button input( width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; farge: #fff; font-size: 24px; kantlinje: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0,5); kantradius: 3px; boksskygge: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) innfelt, 0px 0px 0px 3px rgb(254, 54px), 30px, 30px rgb(210, 210, 210); overgang: alle 0.2s lineær; ) #wrapper p.button input:hover( bakgrunn: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p .button input:focus( bakgrunn: rgb(40, 137, 154); posisjon: relativ; topp: 1px; kantlinje: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) innfelt; ) p.login.button, p.signin.button( tekstjustering: høyre; marg: 5px 0; )
Trikset her er å bruke boksskyggen for å lage noen ekstra rammer. Du kan bare bruke én kant, men så mange boksskygger du vil. Vi vil bruke lengdeverdien til å lage en "falsk" andre hvit kant, 3px bred, uten uskarphet.
Så stiler vi avmerkingsboksen, ikke noe spesielt her:
/* stiler avmerkingsboksen "hold meg pålogget"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) .keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( width: 80%; )
Vi vil style bunnen av skjemaet ved å bruke repeterende lineære gradienter for å lage en stripet bakgrunn.
P.change_link( posisjon: absolutt; farge: rgb(127, 124, 124); venstre: 0px; høyde: 20px; bredde: 440px; utfylling: 17px 30px 20px 30px; skriftstørrelse: 16px; tekstjustert: høyre; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; bakgrunn: rgb(225, 234, 235); bakgrunn: repeterende-lineær-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(47,30 2) s. .change_link a (display: inline-block; font-weight: fet; bakgrunn: rgb(247, 248, 241); polstring: 2px 6px; farge: rgb(29, 162, 193); margin-venstre: 10px; tekst -decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; ) #wrapper p.change_link a:hover ( farge: rgb(57, 191, 215) ); bakgrunn: rgb(247, 247, 247); kantlinje: 1px solid rgb(74, 179, 198); ) #wrapper p.change_link a:active( posisjon: relativ; topp: 1px; )
Nå vil du legge merke til at vi har to fine skjemaer, men vi vil virkelig at bare én skal vises om gangen. Så nå er det tid for litt animasjoner!!
Opprette bytteanimasjonen
Det første du må gjøre er å skjule det andre skjemaet ved å sette opasiteten til 0:
#register( z-indeks: 21; opasitet: 0; )
Husker du at påloggingsskjemaet vårt hadde en z-indeks på 22? Vi vil gi den andre formen en z-indeks på 21, for å sette den "under" påloggingsskjemaet.
Og nå den virkelig gode delen: å bytte skjemaer ved å bruke pseudoklassen:target. Det du virkelig må forstå om:target, er at vi vil bruke ankere for å gjøre overgangen. Den normale oppførselen til en ankerlenke er å hoppe til målet på siden. Men vi vil ikke hoppe hvor som helst, vi vil bare bytte skjemaer. Og her kommer trikset vårt ved å bruke de to koblingene øverst på siden. I stedet for å lenke direkte til det andre skjemaet, og risikere å få en "hoppende" effekt, legger vi faktisk de to koblingene øverst på siden og gir dem display: ingen. Dette vil unngå sidehopp. Kreditt når kreditt skal betales: Jeg fant dette trikset på CSS3 create (på fransk).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-indeks: 22; animasjonsnavn: fadeInLeft; animasjonsforsinkelse: .1s; )
Så dette er hva som skjer: når vi klikker på Bli med oss knappen, utløser vi #toregister. Vi gjør deretter animasjonen ved å bruke søskenvelgeren ~ for å finne #register-elementet vårt. Vi bruker en animasjon som heter fadeInLeft. Siden vi "skjuler" skjemaet med null opasitet, vil vi bruke en animasjon som toner inn for å få det til å vises. Vi har også endret z-indeksen, slik at den vises på toppen av den andre formen.
Det samme skjer for den andre formen.
Og her er koden for animasjonen. Vi bruker CSS3-animasjonsrammeverket fra Dan Eden og tilpasset det for denne opplæringen.
Animate( animasjon-varighet: 0,5 s; animasjon-timing-funksjon: letthet; animasjon-fyll-modus: begge; ) @keyframes fadeInLeft ( 0% ( opasitet: 0; transform: translateX(-20px); ) 100 % ( opasitet : 1; transform: translateX(0); ) )
Skjemaet som "forsvinner" vil ha en annen animasjon som vil få den til å tone ut til venstre:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animasjonsnavn: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opasitet: 1; transform: translateX(0); ) 100% ( opasitet : 0; transform: translateX(-20px); ) )
Du kan nå bruke andre animasjoner fra Dan Edens animate.css: bare juster .animate-klassen din og erstatt animasjonsnavnene. Du vil også finne noen tilpassede animasjoner på slutten av animate-custom.css-filen.
Vel, det er det folkens. Jeg håper du likte veiledningen!
Vær oppmerksom på at i noen nettlesere bakgrunnsklipp: tekst er ikke støttet. I Internet Explorer 9 fungerer ikke overgangene og animasjonene, så det vil ikke være noen fancy formbytte. I Internet Explorer 8 og under støttes ikke:target-pseudoklassen, så den vil ikke fungere i det hele tatt (du vil bare se påloggingsskjemaet).