Come creare Accesso in HTML

March 2

pagine di login sono una parte normale del Web. In questo tutorial, imparerete come creare i tag HTML necessari per creare la casella di input nome utente, la casella di immissione della password, e il pulsante di invio. Mi si mostrerà anche come organizzare il vostro modulo HTML collocandolo in una tabella che è di due colonne da tre file di altezza.

istruzione

Passi documento

1 Come creare Accesso in HTML

Creare il documento HTML
Tutti i documenti HTML avranno, in modo da essere compatibile con i seguenti tag:
• <! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "it" lang = "it">
• Il tag <head> di iniziare
• Il <title> </ title> tag
• Il </ head> tag di chiusura
• Il tag <body> di inizio e il </ body> tag di chiusura
• E, infine, il </ html> tag di chiusura.
Assicurarsi che si digita il seguente tra l'inizio tag <title> e termina <title /> tag:
• La mia pagina di login
Salvare il file come login.html e caricarlo sul server Web. Si dovrebbe vedere una pagina bianca vuota e lungo il bordo superiore blu del browser si dovrebbe leggere, "La mia pagina di login".
SPIEGAZIONE
Il DOCTYPE dichiara che si sta utilizzando XHTML, il nuovo standard del World Wide Web, come dichiarato dal W3Schools, di HTML gli autori.
Il tag <html> ha diversi attributi all'interno del tag, la prima è xmlns, che sta per ampio spazio Markup Language Nome, che stabilisce le regole di strutturazione si stanno seguendo.
<Head> </ head> tag contengono tutte le informazioni sul documento, in questo caso, il <title> </ title> che appare sulla fascia blu in alto nella parte superiore del vostro browser internet.
Il tag <body> contiene tutte le informazioni sulla pagina che l'utente finale vedrà.
Infine, il tag di chiusura </ html> completa la pagina HTML.

2 I tag form
Ora che avete creato il documento HTML, è necessario creare il modulo di login in sé.
Digitare il seguente dopo l'inizio tag <body> e prima del tag di chiusura </ body>:
<Form action = "#">
</ Form>
SPIEGAZIONE
Il tag form dichiara al browser che i tag tra l'inizio tag <form> e il finale </ form> tag saranno raccogliendo un qualche tipo di input dell'utente, se si tratta di una casella di controllo o casella di testo o un pulsante, o qualche altro tipo di elemento interattivo.

3 Come creare Accesso in HTML

Completa la forma
Digitare il seguente dopo l'inizio <form action = "#"> tag e prima <form> tag / terminano:
<B> Nome utente: </ b> <input type = "text" name = "username" size = "40" /> <br />
<B> Password: </ b> <input type = "text" name = "password" size = "40" /> <br />
<Input type = "submit" value = "Login" name = "submit" />
Salvare il file e caricarlo sul server Web. Quando si visualizza la pagina, si dovrebbe vedere un form di login, come mostrato in figura.
SPIEGAZIONE
Il <b> </ b> tag sono chiamati tag grassetto. Cambiano lo stile tipo di testo tra loro per grassetto.
Il <input type = "text" name = "username" size = "40" /> tag crea una casella di testo (indicato dal tipo di attributo = "text") che è di 40 caratteri (indicato dalla size = "40" attributo) e si chiama "username" (indicata con il nome = attributo "username"). Il nome è importante per quando si elaborano il contenuto del modulo, che non è coperto in questo tutorial.
Il tag <br /> crea una interruzione di linea, proprio come se si fosse inserito "Return" o "Invio 'in un documento di testo.
Il secondo tag input, denominata "password", sembra identico al campo "username", con l'eccezione che ha un valore differente per l'attributo "nome".
Il tag finale, <input type = "submit" value = nome "Login" = "submit" />, crea un pulsante di input che l'utente dovrà fare clic su per inviare i dati al software modulo di elaborazione. L'attributo "tipo di ingresso" crea il pulsante, il "valore" di attributo scrive il testo sul pulsante, e il "nome" attributo identifica il pulsante per il software sotto forma di elaborazione.

4 Creare la Tabella
Digitare il <table> a partire tag dopo il <form action = "#"> inizio tag. Premere "Invio" ed è quindi sulla propria riga. Colpite di nuovo il tasto "invio" e digitare il tag <tr> inizio.
Digitare il tag <td> che inizia davanti alla <b> Nome utente: </ b> sequenza. Digitare il </ td> tag di chiusura dopo il tag </ b> fine che segue Nome utente :. La nuova linea sarà simile a questa:
<Td> <b> Nome utente: </ b> </ td>
Digitare il tag <td> che inizia davanti alla <input type = "text" name = dimensione "username" = "40" /> tag, e la </ td> tag alla fine. Eliminare il tag <br />.
La nuova linea sarà simile a questa:
<Td> <input type = "text" name = "username" size = "40" /> </ td>
Premere il tasto Invio e digitare il </ tr> tag di chiusura.
Digitare l'inizio tag <tr> e premi invio.
Circondano la riga successiva come avete fatto prima con le coppie di <td> </ td> tag come mostrato di seguito, avendo cura di eliminare il tag <br />:
<Tr>
<Td> <b> Password: </ b> </ td>
<Td> <input type = "text" name = "password" size = "40" /> </ td>
</ Tr>
Premere il tasto Invio e digitare un nuovo tag <tr> inizio. Digitare il seguente principio <td> tag con il seguente attributo prima della <input type = "submit" value = "Login" name = "submit" /> tag: <td colspan = "2">
Digitare il </ td> tag di chiusura dopo il <input type = "submit" value = nome "Login" = "submit" /> tag. Hit entrare e digitare il </ tr> tag di chiusura. Premere invio di nuovo e digitare il </ table> tag, come mostrato in figura.
SPIEGAZIONE
Una tabella HTML è un modo molto semplice per strutturare un form. Per creare una tabella, in primo luogo è necessario il <table> </ table> tag. All'interno della <table> </ table> tag sono <tr> </ tr> Tavolo tag riga, che creano le righe della tabella, e <td> </ td> tag dati della tabella, che creano le singole cellule del tavolo. Le colonne della tabella sono determinati dal numero di <td> </ td> tag che sono tra ogni <tr> </ tr> tag. Ogni riga richiede almeno 1 set di <td> </ td> tag.

Nell'ultimo tag <td> iniziare abbiamo messo un attributo nel tag, che dà il tag un'istruzione speciale. In questo caso, l'attributo colspan afferma che la cella, creato dal </ td> tag <td> è occupare 2 colonne, perché abbiamo impostato uguale a 2. 5 Come creare Accesso in HTML


Salvare e caricare il file. Si dovrebbe aver notato un leggero cambiamento in quanto le caselle di testo devono essere perfettamente allineati tra loro, come mostrato nell'immagine.

Consigli e avvertenze

  • Aggiungi un attributo in principio tag <table> chiamato "confine" e impostarlo uguale a 1, come mostrato: <table border = "1">. Che vi permetterà di vedere le linee che compongono le celle e le righe della table.To caricare i documenti al server, utilizzare un programma di file-trasferimento libero come FileZilla http://filezilla-project.org/download.phpUse un editor di codice sorgente, come Edit per scrivere codice HTML. Modifica origine, che può anche essere scaricato gratuitamente all'indirizzo: http://www.brixoft.net/download.asp#ID1
  • La pagina di log-in funziona solo se si dispone del software appropriato caricato sul vostro server. Il fornitore di server spazio potrebbe essere in grado di aiutare ad installare e attivare il software.