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><meta name=viewport content="width=device-width, initial-scale=1.0"> 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>
<ul class="mhjkhjlj">
<li> <a class='LinkPrevArticle' href='/Programmazione/Computer-Programming-Languages/1177606.html' >Come modificare il colore Fieldset </a></li>
<li> <a class='LinkNextArticle' href='/Programmazione/Computer-Programming-Languages/1177610.html' >Come correggere un errore di sintassi </a></li>
</ul>
<div class="deep">
<div class="guanggadsadswqew"><script language='javascript' src='http://www.354353.com/AD/it3.js'></script></div>
<div class="guanggadsadswqew1"></div>
</div>
<div class="xiangguanleitong">
<div class="vbfdghgjt65f"><h4>Informazioni correlate</h4></div>
<ul>
<li><a href="/Programmazione/rubino-Programmazione/1188362.html" target="_blank">Come battere il Terzo Capopalestra Con Grovyle in Pokemon : Rubino </a></li><li><a href="/Programmazione/PHP--MySQL-Programmazione/1183060.html" target="_blank">Bugs PHP comuni </a></li><li><a href="/Programmazione/Python-Programming/1187614.html" target="_blank">Funzioni di Python per i principianti </a></li><li><a href="/Programmazione/C--C-----Programming/1170448.html" target="_blank">Come ottenere un prototipo di funzione nella DLL </a></li><li><a href="/Programmazione/Java-Programming/1180498.html" target="_blank">Java per giochi </a></li><li><a href="/Programmazione/C--C-----Programming/1171798.html" target="_blank">Come convertire un float in una stringa in C Programmazione </a></li><li><a href="/Programmazione/Python-Programming/1187912.html" target="_blank">Come rientro di un file Python </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182116.html" target="_blank">Come aggiornare i cookie Via JavaScript </a></li>
</ul>
</div>
</div>
</div>
<div class="woshiyouleirog">
<div class="zxtjianasd">
<div class="bidssdfjm3"><h4>Articoli consigliati</h4></div>
<div class="dasdcdfurit33">
<ul>
<li><a href="/Programmazione/Computer-Programming-Languages/1176420.html" target="_blank">Come cercare un Hex in DB2 SQL </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1173416.html" target="_blank">Qual è il buffering in Programmazione </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1176992.html" target="_blank">Come aprire i file MBOX </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1173266.html" target="_blank">Tipi di file che può essere utilizzato con QBASIC </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1176868.html" target="_blank">Come recuperare un file DAT </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1177898.html" target="_blank">Come per favorire le buone pratiche di codifica da parte degli sviluppatori di software </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1177296.html" target="_blank">Tipi di errori di sintassi </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1177526.html" target="_blank">Come Elimina dalla Oracle e SQL </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1175250.html" target="_blank">Come fare Sovrapposizione CSS div muovono insieme </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1172644.html" target="_blank">Caratteristiche API </a></li>
</ul>
</div>
</div>
<div class="guanggandgsa32a"> </div>
<div class="huosirengs">
<li><a class='childclass' href='/Programmazione/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a class='childclass' href='/Programmazione/Computer-Programming-Languages/' target="_self">Computer Programming Languages</a></li> <li><a class='childclass' href='/Programmazione/Delphi-Programming/' target="_self">Delphi Programming</a></li> <li><a class='childclass' href='/Programmazione/Java-Programming/' target="_self">Java Programming</a></li> <li><a class='childclass' href='/Programmazione/Programmazione-Javascript/' target="_self">Programmazione Javascript</a></li> <li><a class='childclass' href='/Programmazione/PHP--MySQL-Programmazione/' target="_self">PHP /MySQL Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a class='childclass' href='/Programmazione/Python-Programming/' target="_self">Python Programming</a></li> <li><a class='childclass' href='/Programmazione/rubino-Programmazione/' target="_self">rubino Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Nozioni-di-base-di-Visual-Programming/' target="_self">Nozioni di base di Visual Programming</a></li>
</div>
</div>
</div>
<div class="dsadsafa-da">
<p class="sdqwfwe42"> </p>
<p class="vbnhg654">Programmazione © www.354353.com</p>
<p class="iop8iud"> </p>
</div>
</div>
</body>
</html>