Criando um Site – Parte 7

Olá pessoal!

Hoje eu irei continuar aquele tutorial de 15 partes: o Criando um Site. Na última parte eu prometi ensinar vocês a criar formulários HTML. Vamos aprender a criar caixas de texto, caixas de combinação, seleção e opção.

Então vamos lá

OK. Como se cria um formulário HTML? Usando a tag <form>. Crie uma página e coloque isso entre as tags <body> e </body>:

<form>

</form>

Veja alguns parâmetros:

  • action: O valor pode ser um endereço de e-mail (naquele formato mailto) ou um arquivo PHP/ASP/CGI.
  • method: Muito útil daqui para frente. O valor pode ser POST ou GET. Para mandar para endereços de e-mail recomendo usar POST.
  • enctype: O tipo de envio. Os valores podem ser:
    • text/plain: Texto puro
    • multipart/form-data: Texto mais complexo, imagens, arquivos
    • application/x-www-form-urlencoded: Tudo acima codificado

Então OK. Salve e abra a página no navegador de Internet. Não recomendo esse daqui porque ele não atende algumas especificações, e nós vamos ver isso mais para frente

Então vamos criar uma caixa de texto? Insira o seguinte entre as tags <form> e </form>

<input type="text" id="texto" name="texto" />

A tag <input> serve para criarmos áreas de introdução de informações. A maioria dos controles de formulários HTML gira por dentro dessa tag <input>. O atributo text serve para criar uma caixa de texto. O atributo id serve para identificação geral do controle, e o name serve para identificação geral no formulário – não terá nenhum efeito fora dele.

Salve e atualize, você verá algo parecido com isso abaixo:

Ficou esquisito. Vamos fazer uma identificação? Na verdade, nós vamos criar um rótulo para identificar este controle. Um rótulo pode identificar qualquer controle de formulário com o atributo id. É assim a sintaxe:

<label for="texto">Texto: </label>

<input type="text" id="texto" name="text" />

Nesse caso, o rótulo está linkado ao controle pelo atributo for (o atributo for do rótulo é o mesmo que o atributo id do controle). Ah: e quando você clicar no texto do rótulo ele dará o foco ao controle.

Se você mandar o conteúdo por e-mail, o mesmo seria:

text=(Texto da caixa de texto)

Agora vamos aprender novos atributos para serem usados com <input type=”text”>:

  • size: Tamanho visual da caixa de texto, ou seja, o tamanho que dá para ver, em caracteres
  • maxlength: Tamanho real da caixa de texto, em caracteres
  • value: Valor da caixa de texto
  • disabled: A caixa de texto não pode ser digitada. O valor é disabled. Isso pode ser testado em todos os controles
  • readonly: Somente leitura. O valor é readonly (???)

Na próxima página iremos aprender a criar caixas de seleção e de opção

Anúncios

Publicado em 03/09/2010, em Nível médio, tutoriais e marcado como , , . Adicione o link aos favoritos. 2 Comentários.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: