| Home | Ferragens | Networking | Programação | Software | Pergunta | Sistemas |
Programação  
 
* Conhecimento computador >> Programação >> Programação De Computador Idiomas >> 
Como Criar Login em HTML
páginas de login são uma parte normal da web. Neste tutorial, você vai aprender como criar as tags HTML necessárias para criar a caixa de nome de usuário de entrada, caixa de entrada de senha, e no botão enviar. Além disso, vou mostrar-lhe como organizar seu formulário HTML , colocando-o em uma tabela que é de duas colunas de largura por três linhas de altura. Coisas que você precisa
editor de texto como fonte Editar
software upload de documentos , tais como FileZilla
espaço no servidor que suporta aplicações " server-side ", tais como os recursos de log -in.
Mostrar mais instruções
documento Passos
1

Crie documentos as HTML DocumentAll HTML terá , de forma a ser compatível com as seguintes marcas : • < DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Transitional http:////EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> • < html xmlns =" www.w3.org/1999/xhtml " xml: lang = " en " lang = " en " > • A marca de início • Os & # x2022 ; a tag final • o começando tag e tag final • e, finalmente, o final tag.Make certeza de que você digite o seguinte tag entre o início e término tag: • meu login PageSave o arquivo como login.html e enviá-lo para seu servidor web. Você deverá ver uma página em branco e ao longo da borda azul superior do navegador deve ler-se : "A minha página de login " . EXPLANATIONThe doctype declara que você está usando XHTML , o novo padrão da World Wide Web, como declarado pela W3Schools , os autores do HTML.The tag tem vários atributos dentro da tag , sendo a primeira xmlns , que significa Amplo espaço Markup Nome do Idioma , que estabelece as regras de estruturação que você está following.The contém todas as informações sobre o documento, neste caso, o < /title> que aparece na faixa azul superior na parte superior de seu browser de internet <body> contém todas as informações na página de utilizador final que ele vai see.Finally , a tag </html> final completa a página HTML. <br> 2 <p> o Formulário TagsNow que você criou o documento HTML , você precisa criar o formulário de login itself.Type o seguinte após o início tag <body> e antes do término </body> tag: <form action="#"> </form> EXPLANATIONThe tag form declara para o navegador que as tags entre o início <form> marca eo fim </form > marca estará coletando algum tipo de entrada do usuário, se é uma caixa de seleção, ou caixa de texto ou um botão, ou algum outro tipo de item interactivo . <br> 3 <p> Complete a FormType o seguinte após o início <Form action="#"> tag e antes do término </form> tags: <b> usuário: </b> <input type="text" name="username" size="40" /> <br /> <b> Senha: </b> <input type = "text "name =" senha " size = " 40 " /> <br /> <input type="submit" value="Logon" name="submit" /> Salve o arquivo e enviá-lo para o seu web servidor . Quando você visualizar a página , você verá um formulário de login , como mostrado nas picture.EXPLANATIONThe <b> </b > marcas são chamadas de tags em negrito . Eles mudam o estilo de tipo de texto entre eles para bold.The <input type="text" name="username" size="40" /> tag cria uma caixa de texto (indicado pelo atributo type = "text" ) que é de 40 caracteres (indicado pelo size = "40" atributo) e é chamado de "username" (indicado pelo name = "username" atributo) . O nome é importante para quando você processar o conteúdo do formulário, que não é abrangido por este tag /> <br tutorial.The cria uma quebra de linha, como se você tivesse entrado "Return" ou "Enter " em um texto document.The segunda marca de entrada , chamada de " senha", parece idêntico ao campo "username" , com a ressalva de que ele tem um valor diferente para o "nome" attribute.The tag final, < input type = "submit" value = " Login" name = "submit" /> , cria um botão de entrada que o usuário irá clicar para enviar os dados para o software de processamento de formulários . o "tipo de entrada" atributo cria o botão , o "valor" atributo escreve o texto no botão , eo atributo "name" identifica o botão para o software de processamento de formulário. <br> 4 <p> Crie o TableType a tag começando <table> após o <form action = " # " > marca o começo. tecle" Enter ", por isso está na sua própria linha. Bata a tecla" Enter "novamente e digite o <tr> começando tag.Type a tag começando <td> na frente do < b> usuário: . </b> Digite a seqüência </td> tag final após a tag </b> final que segue usuário: . a nova linha será parecido com este : <td> <b> Usuário: </b> </td> Digite o tag começando <td> em frente ao type="text" name="username" size="40" /> tag <input , eo < . ;/td > marca no final Exclua o <br /> tag.The nova linha será parecido com este : <td> <input type = "text " name = tamanho "username" = "40" /> </td> pressione a tecla Enter e digite o </tr> final tag.Type tag início <tr> e bateu enter.Surround a próxima linha como você fez antes com os pares de <td> </td > marcas como mostrado abaixo, certificando-se de excluir a tag <br /> : <tr> <td> <b> Senha: </b> < /td> <td> ; <input type="text" name="password" size="40" /> </td> < /tr> pressione a tecla Enter e digite um novo tag começando <tr> digite o seguinte . começando tag <td> com o seguinte atributo antes da type="submit" value="Logon" name="submit" /> tag <input : <td colspan="2"> Digite o </td> tag final após a type="submit" value="Logon" name="submit" /> tag <input . Aperte enter e digite o </tr> tag final . Aperte enter novamente e digite o < /table> tag, como mostra a tabela de diagram.EXPLANATIONAn HTML é uma maneira muito fácil de estruturar um formulário. para criar uma tabela , em primeiro lugar você precisa dos <table> </table> tags. dentro do <table> </table> tags são <tr> </tr> ou tags de linha da tabela, que criam as linhas da tabela , e <td> </td > marcas de dados da tabela , que criam as células individuais do mesa. as colunas da tabela são determinados pelo número de <td> </td > marcas que estão entre cada </tr> tag <tr> . cada linha requer pelo menos 1 jogo de <td> < /td > tags.In último <td> começando tag colocamos um atributo na etiqueta , o que dá a etiqueta é uma instrução especial . neste caso , o atributo mesclada indica que a célula , criada pelo <td> ,. . </td> tag é ocupar duas colunas , porque nós defini-lo igual a 2 <br> 5 <p> Salvar e carregar o arquivo Você deve ter notado uma ligeira mudança no que as caixas de texto devem estar perfeitamente alinhados uns com os outros , como mostrado na imagem. <br> <br> <div class=ptad2><script language='javascript' src='/ad/201310/4.js'></script></div> </div> </div> <div class=ptnrx></div> <table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="51%"><p>Anterior : <a class='LinkPrevArticle' href='http://ptcomputador.com/P/computer-programming-languages/88803.html' >Como alterar a cor Fieldset </a> </p></td> </tr> <tr> <td width="49%"> Próximo : No</li></td> </tr> </table></td> </tr> </table> <div class=bai7></div> <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"> Os artigos relacionados </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://ptcomputador.com/P/computer-programming-languages/87512.html" title="Como alterar um título de página em ASP.NET " target="_self">Como alterar um título de página em ASP.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88511.html" title="Como adicionar uma quebra de linha em um String " target="_self">Como adicionar uma quebra de linha em um String </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88546.html" title="Como faço para converter o Datestamp Data em DB2 " target="_self">Como faço para converter o Datestamp Data em DB2 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88236.html" title="Como programar uma TI-86 " target="_self">Como programar uma TI-86 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/86435.html" title="O que é um PDB no Visual Studio " target="_self">O que é um PDB no Visual Studio </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/87575.html" title="Como fazer uma exibição de caixa de texto Dependendo ComboBox no Visual Studio " target="_self">Como fazer uma exibição de caixa de texto Dependendo …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/87943.html" title="Como usar um Spinner para um Palm Pilot " target="_self">Como usar um Spinner para um Palm Pilot </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/87805.html" title="Como declarar variáveis ​​como uma forma No VBA " target="_self">Como declarar variáveis ​​como uma forma No VBA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/87254.html" title="Como converter Latin1 para UTF-8 " target="_self">Como converter Latin1 para UTF-8 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88272.html" title="Microsoft Visual FoxPro 9.0 Tutorial " target="_self">Microsoft Visual FoxPro 9.0 Tutorial </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">Artigos em destaque </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="http://ptcomputador.com/P/cc-programming/85275.html" title="Quais são propriedades parciais " target="_self">Quais são propriedades parciais </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/cc-programming/85409.html" title="Como executar um desenvolvedor Xcode iPhone " target="_self">Como executar um desenvolvedor Xcode iPhone </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/cc-programming/85421.html" title="Estrutura Seleção em Programação C " target="_self">Estrutura Seleção em Programação C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/cc-programming/85776.html" title="Como excluir um botão na Visual C " target="_self">Como excluir um botão na Visual C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/86662.html" title="Fatores que determinam a escolha da linguagem de programação Usado " target="_self">Fatores que determinam a escolha da linguagem de progra…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88283.html" title="Como remover um retorno de carro branco usando SQL " target="_self">Como remover um retorno de carro branco usando SQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88676.html" title="Como criar uma caixa de listagem Formulário de cartão de crédito datas com XHTML " target="_self">Como criar uma caixa de listagem Formulário de cartão…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/87931.html" title="Como criar o seu próprio estudo Instância UID " target="_self">Como criar o seu próprio estudo Instância UID </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88337.html" title="Como converter arquivos Olympus DSS " target="_self">Como converter arquivos Olympus DSS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/cc-programming/85232.html" title="Objetivo Questionamento em C Programação " target="_self">Objetivo Questionamento em C Programação </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=bai7></div> <div class="ptbottom bs"> Cop e direita © Conhecimento computador http://ptcomputador.com Todos os Direitos Reservados <script language='javascript' src='/ad/201310/1.js'></script> </div> </div> </body> </html>