Hvordan lage en HTML Pålogging Side

Log-in sider brukes i nettsteder som første skjermbildene for å få tilgang til konfidensiell informasjon. Logg inn sidene krever minst et brukernavn og passord. Noen ganger du har lov til å velge et alternativ for å lagre innloggingsinformasjon for fremtidig bruk, men det er best å ikke anbefalt å gjøre dette med mindre du er på en privat datamaskin. For webutviklere, er det ganske enkelt å lage HTML for en påloggingsside. Den virkelige arbeidet er på back-end verifisere innloggings legitimasjon. Denne guiden vil hjelpe deg å lage en HTML påloggingsside for nettstedet ditt behov.

Bruksanvisning

1 Åpne en teksteditor og lage en HTML-fil. Dreamweaver er det mest populære programmet for å bruke for webutvikling, men du kan også bruke gratis programmer, for eksempel TextEdit (på Mac) eller Notepad (på Windows).

2 Opprette et HTML-skjema. Mellom <body> og </ body> kodene må du skrive inn <form> </ form>; disse er HTML-skjema koder. I start skjemaet tag, trenger du en handling, metode, og enctype (krypteringstype). For handlingstype i hvor skjemaet vil behandle, vil metoden verdien være "få" eller "post", er normal enctype "multipart / skjema-data", men du kan også bruke "text / plain". Den "text / plain" verdi innebærer ingen formatering når de sendes. Den endelige start skjemaet koden vil se omtrent slik ut:

<Form action = "/ bin / process.php" method = "post" enctype = "multipart / skjema-data">

Erstatt "/bin/process.php" med plasseringen av filen som vil behandle påloggingssiden data.

3 Opprett et brukernavn etikett og brukernavn feltet. Merk kodene har beskrivende tekst for å indikere hvilket felt er neste. På neste linje kode en inngang tag med type lik "tekst" for en bruker å skrive inn data. Følg eksempelet nedenfor:

<Label> Brukernavn: </ label>
<Input type = "text" value = "" />

4 Lag et passord etikett og passordfeltet. Brukerne vil ikke se passordet sitt når de skriver i passordfeltet, bare stjerner. Dette er for å beskytte brukerens informasjon. Følg eksempelet nedenfor:

<Label> Passord: </ label>
<Input type = "text" value = "" />

5 Lag en send-knappen. Det er to måter å lage en HTML-send-knappen. Den første er en inngang tag med en sender type som ser slik ut:

<Input type = "submit" value = "Send Denne Form" />

Plasser teksten du vil at knappen skal si inne verdien attributtet som vist ovenfor. Den andre måten å skape en send-knappen er en inngang tag med en bildetype som ser slik ut:

<Input type = "image" height = "50" width = "50" />

Dette gjør et bilde en send-knappen i stedet for en vanlig HTML-knappen. Erstatt "/images/submit.jpg" med plasseringen av bildet du vil at folk skal klikke når du sender inn skjemaet. Det er vanlig praksis å ha en av de to typer input-koder for å sende inn et skjema, men ikke begge deler.

6 Koden din. Din innloggingssiden når du er ferdig skal se omtrent slik ut:

<Html>
<Body>
<Form action = "/ bin / process.php" method = "post" enctype = "multipart / skjema-data">
<Label> Brukernavn: </ label>
<Input type = "text" value = "" />
<Label> Passord: </ label>
<Input type = "password" value = "" />
<Input type = "submit" value = "Send Denne Form" />
</ Form>
</ Body>
</ Html>

Lagre koden din som en HTML-fil når du er ferdig.

Hint

  • Det er god praksis å legge til navne attributter og / eller IDer til hver inngang tag.
  • Det kan være lurt å vurdere et bord eller div struktur for riktig avstand av etiketter og tilstøtende inngangs koder.