Come creare una pagina di login HTML

August 26

pagine Log-in sono utilizzati in siti web come schermate iniziali per ottenere l'accesso a informazioni riservate. pagine di log-in richiedono come minimo un nome utente e una password. A volte si è permesso di selezionare un'opzione per salvare le informazioni di log-in per un utilizzo futuro, ma è meglio non consiglia di farlo a meno che non siete su un computer privato. Per gli sviluppatori web, è abbastanza semplice per creare il codice HTML di una pagina di log-in. Il vero lavoro è sul back-end per verificare le credenziali di log-in. Questa guida vi aiuterà a creare un log-in pagina HTML per le vostre esigenze sito web.

istruzione

1 Aprire un editor di testo e creare un file HTML. Dreamweaver è il programma più popolare da utilizzare per lo sviluppo Web, ma è anche possibile utilizzare programmi gratuiti, come ad esempio TextEdit (su Mac) o il Blocco note (su Windows).

2 Creare un modulo HTML. Tra i tag <body> e </ body> tag è necessario digitare <form> </ form>; questi sono HTML tag form. Nel tag forma di partenza, avrete bisogno di una azione, metodo e enctype (tipo di crittografia). Per tipo di azione in cui elaborerà la forma, il valore di metodo sarà "get" o "post", il enctype normale è "/ form-data multipart", ma è anche possibile utilizzare "text / plain". Il valore "text / plain" comporta alcuna formattazione, se presentate. Il tag forma di partenza finale sarà simile a questa:

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

Sostituire "/bin/process.php" con la posizione del file che elaborerà i dati della pagina di login.

3 Creare un'etichetta nome utente e il campo nome utente. tag label hanno un testo descrittivo per indicare quale campo è vicino. Nella seguente codice line un tag input di tipo uguale a "testo" per un utente per immettere dati. Seguire l'esempio di seguito:

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

4 Creare un'etichetta password e campo password. Gli utenti non potranno vedere la loro password quando si digita nel campo della password, solo asterischi. Questo è quello di proteggere le informazioni dell'utente. Seguire l'esempio di seguito:

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

5 Creare un pulsante di invio. Ci sono due modi per creare un HTML pulsante di invio. Il primo è un tag input con un tipo di presentare che assomiglia a questo:

<Input type = "submit" value = "inviare questo modulo" />

Inserire il testo che si desidera che il pulsante a dire all'interno del attributo value come sopra illustrato. Il secondo modo per creare un pulsante di invio è un tag input con un tipo di immagine che assomiglia a questo:

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

Questo rende un'immagine pulsante a presentare al posto del pulsante tipica HTML. Sostituire "/images/submit.jpg" con la posizione dell'immagine che si desidera la gente a scegliere quando inviare il modulo. E 'pratica generale per avere uno dei due tipi di tag input per inviare un modulo, ma non entrambi.

6 Rivedere il codice. Il registro-in pagina quando completo dovrebbe essere simile a questo:

<Html>
<Body>
<Form action = "/ bin / process.php" method = "post" enctype = "multipart / form-data">
<Label> Nome utente: </ label>
<Input type = "text" value = "" />
<Label> Password: </ label>
<Input type = valore "password" = "" />
<Input type = "submit" value = "inviare questo modulo" />
</ Form>
</ Body>
</ Html>

Salvare il codice come un file HTML una volta completato.

Consigli e avvertenze

  • E 'buona pratica aggiungere attributi nome e / o gli ID per ogni tag input.
  • Si può prendere in considerazione una struttura di tabella o div per una corretta spaziatura delle etichette e tag di ingresso adiacenti.