Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> Computer Programspråk >> Content

    Hur man skapar Logga in HTML
    Login sidor är en normal del av webben . I den här guiden får du lära dig hur du skapar HTML-taggar som behövs för att skapa box användarnamn ingång , rutan för lösenordet , och submit -knappen . Jag kommer också att visa dig hur du organiserar din HTML-formulär genom att placera den i en tabell som är två kolumner bred och tre rader högt . Saker du behöver
    textredigerare som källa Redigera
    Document uppladdning programvara såsom FileZilla
    serverutrymme som stöder " server - side " program, t.ex. log - in funktioner .
    Show mer Instruktioner
    dokument steg
    1

    Skapa HTML DocumentAll HTML-dokument ska ha , för att vara kompatibel , följande taggar : • < 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 = " sv " lang = " sv " > • början tag • < /title > taggarna & # x2022 ; den < /head > sluttagg • den <body> början taggen och < /body > sluttagg • och slutligen , den < /html > end tag.Make säker på att du skriver efter mellan början <title> taggen och slutar < /title > tag: • Mitt Logga PageSave filen som login.html och ladda upp den till din webbserver . Du bör se en tom vit sida och längs den övre blå kanten av webbläsaren bör läsa , " My Login sida " . EXPLANATIONThe doctype förklarar att du använder XHTML , den nya standarden för World Wide Web , som deklarerades av W3Schools , författarna HTML.The <html> tagg har flera attribut inuti taggen , den första är xmlns , som står för omfattande Markup Language Namn utrymme , som fastställer de strukturerande regler du är following.The <head><meta name=viewport content="width=device-width, initial-scale=1.0"> < /head > taggarna innehåller all information om dokumentet , i detta fall , den <title> < /title > som visas på den övre blå bandet på toppen av din Internet browser.The <body> innehåller all information på sidan att han slutanvändaren see.Finally kommer , avslutar < /html > sluttagg HTML-sidan . <br> 2 <p> Form TagsNow som du har skapat HTML- dokument , behöver du skapa inloggningsformuläret itself.Type följande efter början <body> och före den avslutande < /body> -taggen : <form action="#"> </form > EXPLANATIONThe formulär taggen förklarar till webbläsaren att taggarna mellan början <form> taggen och den avslutande </form >-taggen kommer att samla in någon form av indata , oavsett om det är en kryssruta , eller textruta , eller en knapp , eller någon annan typ av interaktiva objekt . Addera 3 <p> Slutför FormType följande efter början <form action="#"> tag och innan de slutar </form > taggarna : <b> Användarnamn : < /b > <input type="text" name="username" size="40" /> <br /> <b> Lösenord : < /b > < input type = " text " name = " lösenord " size = " 40 " /> <br /> <input type="submit" value="Login" name="submit" /> Spara filen och ladda upp den på din webbsida servern. När du tittar på sidan , bör du se en inloggningsruta , som visas i picture.EXPLANATIONThe <b> < /b > taggarna kallas taggar i fetstil . De ändrar typ stil av text mellan dem bold.The <input type="text" name="username" size="40" /> taggen skapas en textruta ( anges med attributet type = " text " ) som är 40 tecken långa ( indikeras av storlek = " 40 " attribut ) och kallas " användarnamn" (indikeras av namnet = "användarnamn " attribut ) . Namnet är viktigt för när du bearbetar innehållet i formen , som inte täcks av denna tutorial.The <br /> taggen skapas en radbrytning , precis som om du hade skrivit " Return " eller " Enter " i en text document.The andra ingång tag , som heter " lösenord " ser identisk med den " användarnamn" fältet , med undantag för att den har ett annat värde för " namnet " attribute.The sista taggen < input type = " submit" value = " Logga in " name = " skicka " /> , skapar en ingång knapp som användaren klickar på för att skicka data till formulär - bearbetning programvara . "Input type" attributet skapar knappen , skriver " värdet " attributet texten på knappen , och " namn " attributet identifierar knappen för formen - bearbetning programvara . <br> 4 <p> Skapa TableType taggen <table> början efter < form action = " # " > början taggen . Hit " enter " så det är på en egen rad . Hit " Enter " igen och skriv <tr> början tag.Type taggen <td> början framför <b > Användarnamn : < /b > sekvensen Skriv < /td > sluttagg efter < /b > sluttagg som följer Användarnamn : . . den nya linjen kommer att se ut så här : <td> <b> Användarnamn : < /b > < /td > Skriv <td> början taggen framför <input type="text" name="username" size="40" /> tag , och < ;/td > -taggen i slutet Radera <br /> tag.The nya linjen kommer att se ut så här : . <td> < input type = " text " name = " username " size = " 40 " /> < /td > tryck på Enter och skriv in < /tr > ände tag.Type början <tr> taggen och hit enter.Surround nästa rad som du gjorde tidigare med paren <td> </td > taggar som visas nedan , och se till att ta bort <br /> tag: <tr> <td> <b> Lösenord : < /b > < /td > <td> ; . <input type="text" name="password" size="40" /> < /td > < /tr > tryck på Enter och skriv in ett nytt tag <tr> början skriv följande börjar <td> taggen med följande attribut innan <input type="submit" value="Login" name="submit" /> tag: <td colspan="2"> Skriv < /td > sluttagg efter <input type="submit" value="Login" name="submit" /> tag . Hit in och skriver < /tr > sluttagg . Hit in igen och skriver < /table > taggen , som show i diagram.EXPLANATIONAn HTML-tabell är ett väldigt enkelt sätt att strukturera ett formulär . för att skapa en tabell , måste du först att <table> < /table > taggarna . inom <table> < /table > taggar är <tr> < /tr > eller tabellrad taggar , vilket skapar raderna i tabellen , och <td> </td > datatabell -taggar , vilket skapar de enskilda cellerna i bord . kolumnerna i tabellen bestäms av antalet <td> < /td > taggar som är mellan varje <tr> < /tr > -taggen . varje rad kräver minst 1 uppsättning <td> < /td > tags.In sista <td> början märker vi sätter ett attribut i taggen , vilket ger taggen en särskild instruktion . i detta fall colspan attributet anger att cellen , skapad av <td> , < /td > taggen är att ockupera 2 kolumner , eftersom vi satt det lika med 2 <br> 5 <p> Spara och ladda upp din fil Du borde ha märkt en liten förändring i att textrutorna ska. . vara helt i linje med varandra såsom visas i bilden . <br> <br> <div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/computer-programming-languages/88803.html' >Hur du ändrar fältgrupp Color </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/computer-programming-languages/88805.html' >Hur du korrigerar en Syntax Error </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/computer-programming-languages/86848.html" title="Hur Bestäm Orthagonal i Vector 3D " target="_self">Hur Bestäm Orthagonal i Vector 3D </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86613.html" title="Hur man handskas med Delsträngar i CSH " target="_self">Hur man handskas med Delsträngar i CSH </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88729.html" title="HTML Color Guide för Grey - blue " target="_self">HTML Color Guide för Grey - blue </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88146.html" title="Hur Deep Link i Silverlight " target="_self">Hur Deep Link i Silverlight </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88150.html" title="Hur du gör din egen MUD spel " target="_self">Hur du gör din egen MUD spel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87280.html" title="Hur Kopiera från ListBox till Multiline TextBox " target="_self">Hur Kopiera från ListBox till Multiline TextBox </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87522.html" title="Så här visar i tabellform i MATLAB " target="_self">Så här visar i tabellform i MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86969.html" title="Hur man binda en ordbok för att DropDownList " target="_self">Hur man binda en ordbok för att DropDownList </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86449.html" title="Hur du krypterar en variabel i ColdFusion " target="_self">Hur du krypterar en variabel i ColdFusion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86469.html" title="Vad är API för SMS " target="_self">Vad är API för SMS </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 class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94998.html" title="Hur Ring VBScript Från Vb.NET " target="_self">Hur Ring VBScript Från Vb.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87333.html" title="Hur överföra funktioner på MATLAB " target="_self">Hur överföra funktioner på MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/perl-programming/93265.html" title="Hur man använder DBI att ansluta till Perl " target="_self">Hur man använder DBI att ansluta till Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94764.html" title="Så här öppnar SendKeys Funktion " target="_self">Så här öppnar SendKeys Funktion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92098.html" title="Hur avkoda binära strängar " target="_self">Hur avkoda binära strängar </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/89767.html" title="Hur att stänga en JFrame " target="_self">Hur att stänga en JFrame </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86289.html" title="iPhone Utveckling Komponenter " target="_self">iPhone Utveckling Komponenter </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92662.html" title="Återvinning av ett PHP lösenord " target="_self">Återvinning av ett PHP lösenord </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85857.html" title="Lägga till decimaler i C + + " target="_self">Lägga till decimaler i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86990.html" title="Hur man gör en radmatning i XSLT " target="_self">Hur man gör en radmatning i XSLT </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>