Inloggen pagina's zijn een normaal onderdeel van het web . In deze tutorial leer je hoe je de HTML -tags nodig zijn om de gebruikersnaam invoerveld , het invoerveld wachtwoord , en de submit knop te creëren . Ik zal ook laten zien hoe u uw HTML-formulier te organiseren door het in een tabel die is twee kolommen breed en drie rijen hoog. Wat je nodig hebt
tekst editor Bron Bewerken
Document uploaden van software zoals FileZilla Server
ruimte die " server - side " -toepassingen , zoals log - in functies ondersteunt , zoals .
Show meer Instructions
Document Stappen
1 Maak de HTML DocumentAll HTML-documenten zal hebben , om compliant , de volgende labels zijn : ! • < 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 = " nl " lang = " nl " > • De begin -tag • De < /title > -tags & # x2022 ; de < /head > end -tag • de <body> begin -tag en de < /body > eindtag • en tot slot , de < /html > einde tag.Make ervoor dat u typt de na tussen het begin <title> tag en eindigt tag < /title > : • Mijn Inloggen PageSave het bestand als login.html en deze uploaden naar uw webserver . Je moet een lege witte pagina te zien en langs de bovenste blauwe rand van de browser te moeten lezen , " Mijn login pagina " . EXPLANATIONThe doctype verklaart dat u gebruik maakt van XHTML , de nieuwe standaard van het World Wide Web , zoals aangegeven door de W3Schools , de auteurs van HTML.The <html> tag heeft een aantal attributen in de tag , de eerste is xmlns , wat staat voor uitgebreide Markup Language Naam ruimte, die de structurering regels bent u following.The <head><meta name="viewport" content="width=device-width, initial-scale=1.0"> vaststelt < /head > tags bevatten alle informatie over het document , in dit geval , de <title> < /title > die verschijnt op de bovenste blauwe band aan de bovenkant van uw internet browser.The <body> alle informatie bevat op de pagina die hij eindgebruiker zal see.Finally , de < /html > eindtag completeert de HTML-pagina . kopen van 2 <p> de Vorm TagsNow dat u de HTML-document hebt gemaakt , moet u maken het login formulier itself.Type het volgende na het begin <body> en voordat de tag eindigt < /body > : <form action="#"> < /form > EXPLANATIONThe formulier tag verklaart aan de browser dat de tags tussen de begin tag <form> en het eindigt < /form > -tag zal het verzamelen van een soort van input van de gebruiker , of het nu een checkbox , of tekstvak , of een knop , of een andere vorm van interactieve punt . <br> 3 <p> Voltooi de FormType het volgende na het begin <form action="#"> tag en vóór het einde < /form > tags: <b> Gebruikersnaam: < /b > <input type="text" name="username" size="40" /> <br /> <b> Wachtwoord : < /b > < input type = "text " name = " password " size = " 40 " /> <br /> <input type="submit" value="Login" name="submit" /> Sla het bestand op en upload het naar uw website server . Wanneer u de pagina te bekijken , moet u een login-formulier te zien , zoals in de picture.EXPLANATIONThe <b> < /b > -tags zijn vet -tags genoemd . Ze veranderen het soort stijl van de tekst tussen hen te bold.The <input type="text" name="username" size="40" /> tag creëert een tekstvak ( aangegeven door het attribuut type = " text " ) dat is 40 tekens lang ( aangeduid door de size = " 40 " attribuut ) en wordt "username " ( aangeduid met de naam = attribuut " username" ) genoemd . De naam is belangrijk voor als je de inhoud van het formulier , die niet wordt behandeld in dit tutorial.The <br /> tag zorgt voor een regeleinde , net alsof je ' Return ' of ' Enter' in een was aangegaan verwerken tekst document.The tweede ingang label , genaamd ' password ', lijkt identiek aan het veld "username " , met de uitzondering dat het een andere waarde voor de " naam " attribute.The laatste tag , < input type = " submit " value = " Login" name = " submit " /> , creëert een input -knop die de gebruiker klikt u op om de gegevens aan de vorm - processing software in te dienen . het attribuut "input type" creëert de knop , het attribuut "value " schrijft de tekst op de knop , en de "name" attribuut identificeert de knop voor de vorm - processing software . <br> 4 <p> Maak de TABLETYPE het <table> begin -tag na de < form action = " # " > begin tag . Hit " enter weer " zo is het op zijn eigen lijn . Raak" in te voeren " en typ de <tr> begin tag.Type het <td> begin -tag voor de < b> Gebruikersnaam: < /b > sequence Typ de < /td > eind tag na de < /b > eindtag dat Gebruikersnaam volgt : . . de nieuwe lijn zal er zo uitzien: <td> <b> Gebruikersnaam : < /b > < /td > Typ de <td> begin -tag voor de <input type="text" name="username" size="40" /> tag en de < ;/td > tag aan het eind Verwijder de <br /> tag.The nieuwe lijn ziet er als volgt uit: . <td> < input type = " text " name = "username " size = " 40 " /> < /td > Druk op de Enter-toets en typ de < /tr> einde tag.Type het begin <tr> tag en hit enter.Surround de volgende regel als u eerder met de paren van <td> deed < /td > -tags zoals hieronder aangegeven , en zorg ervoor dat de /> tag <br verwijderen : <tr> <td> <b> Wachtwoord : < /b > < /td > <td> ; . <input type="text" name="password" size="40" /> < /td > < /tr> Druk op de Enter-toets en typ een nieuwe <tr> begin tag typ de volgende beginnend <td> tag met de volgende attributen voor de <input type="submit" value="Login" name="submit" /> tag : <td colspan="2"> Typ de < /td > eindtag na de <input type="submit" value="Login" name="submit" /> tag . Hit invoeren en typ de < /tr> eindtag . Hit voer opnieuw en typ de < /table > -tag , zoals getoond in de diagram.EXPLANATIONAn HTML-tabel is een heel gemakkelijke manier om een formulier te structureren . om een tabel te maken , moet je eerst binnen de <table> nodig de <table> < /table > tags. < /table > tags zijn <tr> < /tr> of tafel rij -tags , die de rijen van de tabel te maken , en <td> < /td > table data -tags , die de individuele cellen van het creëren tafel. de kolommen van de tabel worden bepaald door het aantal <td> < /td > tags die zijn tussen elke <tr> < /tr> tag . elke rij heeft tenminste 1 set <td> < /td > tags.In de laatste <td> begin tag zetten we een attribuut in de tag , die het label geeft een speciale instructie . in dit geval is het colspan attribuut bepaalt dat de cel , gecreëerd door de <td> ; < /td > tag is om 2 kolommen te bezetten , omdat we het gelijk aan 2 <br> 5 <p> Opslaan en upload uw bestand je had moeten zien dat een kleine verandering in de tekstvakken moeten. . worden perfect op elkaar afgestemd , zoals aangegeven in de afbeelding . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/computer-programming-languages/201309/88803.html' >Het wijzigen van de Fieldset Kleur </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/computer-programming-languages/201309/88805.html' >Hoe te corrigeren een Syntax Error </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Computer Programming Languages</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87119.html" title="How to Get bewerken Box Focus ? " target="_self">How to Get bewerken Box Focus …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87358.html" title="Hoe te Titles uitschakelen op FancyBox " target="_self">Hoe te Titles uitschakelen op …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88929.html" title="Hoe om te leren PASCAL " target="_self">Hoe om te leren PASCAL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87793.html" title="Hoe om te controleren voor de gehele getallen " target="_self">Hoe om te controleren voor de …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86848.html" title="Hoe de Orthagonal Bepaal in vector 3D " target="_self">Hoe de Orthagonal Bepaal in ve…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88417.html" title="Eenvoudige Source Code voor het bouwen van een webpagina " target="_self">Eenvoudige Source Code voor he…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86687.html" title="Verschil tussen Front End en Back End " target="_self">Verschil tussen Front End en B…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87654.html" title="Hoe toe te passen voor Legal Voogdij in Illinois " target="_self">Hoe toe te passen voor Legal V…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86430.html" title="Hoe uit te filteren Frequenties in LabVIEW " target="_self">Hoe uit te filteren Frequentie…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95732.html" title="Hoe je MP3's gebruiken MMControl in Visual Basic Spelen " target="_self">Hoe je MP3's gebruiken MMControl in Visu…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85540.html" title="C + + Fibonacci Nummer Functie " target="_self">C + + Fibonacci Nummer Functie </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/90566.html" title="Hoe maak je een Date Maak Vanuit een string in Java " target="_self">Hoe maak je een Date Maak Vanuit een str…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95424.html" title="Wat is een Dialog formulier in Visual Basic ? " target="_self">Wat is een Dialog formulier in Visual Ba…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92211.html" title="How Do I Pass PHP naar Iframe ? " target="_self">How Do I Pass PHP naar Iframe ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94806.html" title="Hoe te tellen het aantal letters in een string in VB6 " target="_self">Hoe te tellen het aantal letters in een …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89189.html" title="Hoe te UML Maak Van Java Source " target="_self">Hoe te UML Maak Van Java Source </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87200.html" title="Hoe te wijzigen Van GW - BASIC te QBasic " target="_self">Hoe te wijzigen Van GW - BASIC te QBasic…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91692.html" title="Hoe maak je een graaf converteren naar een array in PHP " target="_self">Hoe maak je een graaf converteren naar e…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
