|
|
|
| Come creare login in HTML |
|
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 . Vorrei anche mostrare come organizzare il vostro modulo HTML spostando in una tabella che è larga due colonne da tre file di altezza . Cose che ti serviranno editor di testo come sorgente di editing software caricando documento come FileZilla spazio Server che supporta applicazioni " server-side ", come log -in funzionalità . Mostra più Istruzioni Documento Steps 1 Creare i DocumentAll documenti HTML 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 inizio • I < /title> & # x2022 ; il < /head> tag di chiusura • il tag inizio <body> e </body> tag di chiusura • e, infine , la < /html > tag.Make fine assicurarsi di digitare il in seguito tra il tag <title> inizio e tag < /title> chiusura • il mio login PageSave 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 " . EXPLANATIONThe DOCTYPE dichiara che si sta utilizzando XHTML , il nuovo standard del World Wide Web , come dichiarato dal W3Schools , di <html> HTML.The gli autori ha diversi attributi all'interno del tag , il primo è xmlns , acronimo di vasto Markup Language Nome spazio , che stabilisce le regole di strutturazione si è <head> following.The < /head> contengono tutte le informazioni relative al documento , in questo caso , il <title> < /title> che appare sulla fascia blu in alto nella parte superiore del vostro tag <body> browser.The internet contiene tutte le informazioni nella pagina che l'utente finale sarà see.Finally , il < /html > tag di chiusura completa la pagina HTML . <br> 2 <p> TagsNow modulo che hai creato il documento HTML , è necessario creare il form di login itself.Type il seguente dopo il tag <body> inizio e prima del tag < /body > chiusura <form action="#"> < /form > tag form EXPLANATIONThe dichiara al browser che i tag tra il tag <form> inizio e la chiusura < /form > tag saranno raccogliendo 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 . <br> 3 <p> Completa la FormType il seguente dopo il tag action="#"> inizio <form e prima delle chiusura < /form> : <b> Username: < /b > type="text" name="username" size="40" /> <br /> <b> password <origine : < /b > < input type = "text "name = " password " size = " 40 " /> <br /> <input type="submit" value="Login" name="submit" /> Salvare il file e caricarlo sul Web server. Quando si visualizza la pagina , si dovrebbe vedere un form di login , come indicato nella picture.EXPLANATIONThe <b> </b > sono chiamati tag grassetto . Cambiano lo stile del testo di tipo tra loro per bold.The <input type="text" name="username" size="40" /> tag crea una casella di testo (indicata dal attributo type = "text " ) che è lunga 40 caratteri ( indicato dal size = attributo " 40") e si chiama "username" (indicata con il nome = attributo " nome utente " ) . Il nome è importante per quando si elabora il contenuto del modulo , che non è coperto in questo <br /> tutorial.The tag crea un'interruzione di linea , proprio come se fosse stato inserito "Return " o " Enter 'in un testo document.The secondo tag input, denominata "password ", sembra identico al campo " nome utente " , con l'eccezione che ha un valore diverso per il tag finale attribute.The "nome" , < input type = " submit " value = nome di "Login" = " submit " /> , crea un pulsante di input che l' utente clicca su di inviare i dati al software modulo di elaborazione . l'attributo " tipo di ingresso " crea il pulsante , l'attributo " value ", scrive il testo sul pulsante , e l'attributo " name " identifica il pulsante per il software modulo di elaborazione . <br> 4 <p> Creare il TableType il tag all'inizio <table> dopo il form azione < = " # "> tag di inizio . premere" Invio " per cui è su una riga . ha colpito la" nuovamente il tasto enter " e digitare la <tr> inizio tag.Type il tag all'inizio <td> davanti alla < b> Nome utente: < /b > Digitare la sequenza < /td> tag di chiusura dopo il < /b > tag di chiusura che segue . Nome utente: . la nuova linea sarà simile a questa : <td> <b> Nome utente : < /b > < /td > Tipo il tag all'inizio <td> davanti alla <input type="text" name="username" size="40" /> tag , e la < ;/td > tag alla fine Eliminare il <br /> tag.The nuova linea sarà simile a questa : . <td> < input type = nome " testo" = "username " size = " 40 " /> < /td > premere il tasto Invio e digitare il < /tr> fine tag.Type il tag <tr> inizio e hit enter.Surround la riga successiva come avete fatto prima con le coppie di <td> </td> , 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 inizio <tr> digitare il seguente a cominciare tag <td> con il seguente attributo prima della <input type="submit" value="Login" name="submit" /> tag: <td Tipo colspan="2"> il < /td> tag di chiusura dopo il <input type="submit" value="Login" name="submit" /> tag . premere invio e digitare la < /tr> tag di chiusura . Hit entrare di nuovo e digitare il < /table > tag , come mostrato nella tabella HTML diagram.EXPLANATIONAn è un modo molto semplice per strutturare un form . per creare una tabella , in primo luogo è necessario il <table> < /table > tag . All'interno del <table> < /table> tag sono <tr> < /tr > o tags riga della tabella , che creano le righe della tabella , e <td> < /td> dati della tabella , che creano le singole cellule del tabella . 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 > tags.In l'ultimo tag inizio <td> abbiamo messo un attributo nel tag , che dà il tag un'istruzione speciale . in questo caso, gli attributi colspan afferma che la cellula , creato dal <td> ; < /td > tag è quello di occupare 2 colonne , perché abbiamo impostato uguale a 2 <br> 5 <p> Salvare e caricare il file Avrete anche notato un leggero cambiamento in quanto le caselle di testo dovrebbe. . essere perfettamente allineato con l'altro , come mostrato nell'immagine . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programmazione/computer-programming-languages/88803.html' >Come modificare il colore Fieldset </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/computer-programming-languages/88805.html' >Come correggere un errore di sintassi </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Articoli Correlati </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88612.html" title="Perché è binario usato nei computer ? " target="_self">Perché è binario usato nei computer ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86293.html" title="I vantaggi di un editor Premium " target="_self">I vantaggi di un editor Premium </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88818.html" title="Come utilizzare Mirage OS " target="_self">Come utilizzare Mirage OS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86796.html" title="Come prevenire una barra di navigazione di spingere giù una visualizzazione secondaria " target="_self">Come prevenire una barra di navigazione di spingere giù…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88186.html" title="Come prova di Business Objects " target="_self">Come prova di Business Objects </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86999.html" title="Come terminare Omnimark Script " target="_self">Come terminare Omnimark Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87695.html" title="Tipi di algoritmi di clustering " target="_self">Tipi di algoritmi di clustering </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88098.html" title="Come aggiungere Cert SSL per IIS " target="_self">Come aggiungere Cert SSL per IIS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88730.html" title="Tipologie di Dati " target="_self">Tipologie di Dati </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87472.html" title="Come Elimina dalla T - SQL " target="_self">Come Elimina dalla T - SQL </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Articoli in evidenza </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/96285.html" title="Come modificare la password di dominio da Script " target="_self">Come modificare la password di dominio da Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92457.html" title="Come fare riferimento a PHP Funzioni membro della classe " target="_self">Come fare riferimento a PHP Funzioni membro della class…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/86078.html" title="Come installare Microsoft Visual C + + " target="_self">Come installare Microsoft Visual C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92717.html" title="MySQL Query di aggiornamento unisce Tutorial " target="_self">MySQL Query di aggiornamento unisce Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92826.html" title="Tutorial sul PHP Calendario Eventi " target="_self">Tutorial sul PHP Calendario Eventi </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89900.html" title="Come utilizzare Typecast in Java " target="_self">Come utilizzare Typecast in Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89842.html" title="Come fare una linea continua Loop " target="_self">Come fare una linea continua Loop </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89645.html" title="L' importanza della programmazione Java nel campo dei computer " target="_self">L' importanza della programmazione Java nel campo dei c…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94280.html" title="VB6 Binary Compatibility " target="_self">VB6 Binary Compatibility </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/85728.html" title="Tipi di attacchi di sovraccarico del buffer " target="_self">Tipi di attacchi di sovraccarico del buffer </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
