Como construir Entradas de estilo de texto para seus HTML5 e CSS3 Baseadas Páginas da Web

A maioria dos elementos do formulário em páginas da web HTML5 e CSS3 são variações da mesma marca. A tag pode criar caixas de uma única linha de texto, caixas de senha, botões e conteúdo, mesmo invisível (como campos ocultos). A maioria destes objectos partilham os mesmos atributos básicos, embora a aparência externa pode ser diferente.

Como fazer um campo de texto padrão

A forma mais comum do elemento de entrada é um campo de texto simples.

Para fazer uma entrada de texto básico, você precisa de uma forma e um elemento de entrada. Adicionando um rótulo para que o usuário saiba o que é suposto para entrar na caixa de texto também é comum. Aqui está o código:

textbox.html 

Um elemento de entrada tem três atributos comuns:

  • digitar: o digitar atributo indica o tipo de elemento de entrada que é isso. Este primeiro exemplo conjuntos digitar para texto, a criação de uma caixa de texto padrão. Outros tipos criar senhas, campos ocultos, caixas de verificação e botões.

  • identidade: o identidade atributo cria um identificador para o campo. Quando você usa uma linguagem de programação para extrair dados a partir deste elemento, uso identidade para especificar qual campo você está se referindo. A identidade campo muitas vezes começa com uma frase dica para indicar o tipo de objeto que ele é (por exemplo, TXT indica uma caixa de texto).

    image0.jpg
  • valor: Este atributo determina o valor padrão da caixa de texto. Se você deixar esse atributo para fora, o campo de texto começa vazio.

Os campos de texto também pode ter outros atributos, que não são utilizados tão frequentemente, como

  • tamanho: Este atributo determina o número de caracteres que são exibidos.

  • comprimento máximo: Utilize este atributo para definir o maior número de caracteres que são permitidos.

Não há tag. tags de entrada são um resquício dos dias em que muitas marcas não têm marcas que terminam. Você acabou de terminar a tag original com um caractere de barra, como mostrado no código de exemplo anterior.

Você pode se perguntar por que a tag foi adicionado, se ele não tem qualquer efeito sobre a aparência ou o comportamento do formulário. Neste exemplo em particular, a marca não tem um efeito, mas como tudo em HTML, você pode fazer coisas incríveis estilo com ele em CSS. Mesmo que rótulos não têm tipicamente um estilo padrão, eles ainda são úteis.

Como construir um campo de senha

As senhas são como caixas de texto, exceto o texto não é apresentado. Em vez disso, aparece uma série de asteriscos.

O código a seguir revela que as senhas são quase idênticos aos campos de texto comuns:

password.html 

Neste exemplo, um campo de senha foi criado com a ID. O valor padrão deste campo é. O termo segredo realmente não vai aparecer no de campo ele será substituído com seis caracteres do asterisco.

image1.jpg

O campo de senha oferece praticamente nenhuma segurança significativo. Ele protege o usuário de satélites espiões olhando por cima de seu ombro para ler uma senha, mas que é sobre ele. Os padrões abertos de HTML e linguagens de programação significa senhas são muitas vezes passou em campo aberto. Existem soluções - como a tecnologia SSL -, mas por agora, apenas estar ciente de que o campo de senha não é adequado para proteger os seus segredos.

Este exemplo não faz nada com a senha, mas você vai usar outras tecnologias para isso.

Como fazer com que a entrada de texto multi-linha

O campo de texto com uma única linha é um recurso poderoso, mas às vezes, você quer algo com um espaço de pouco mais. O programa demonstra como você pode criar uma página para uma pergunta de desenvolvimento.

A estrela deste programa é uma nova marca -:

essay.html 

Aqui estão algumas coisas para manter em mente quando se usa a tag:

  • Ele precisa anattribute, assim como um elemento de entrada.

  • Você pode especificar os withandattributes tamanho.

  • O conteúdo vai entre as tags. A área de texto pode conter muito mais informações do que as marcas comuns, por isso, em vez de colocar os dados no atributo, o conteúdo do texto vai entre as tags e.

Qualquer coisa colocada entre e no código termina na saída, também. Isso inclui espaços e retornos de carro. Se você não quer quaisquer espaços em branco na área de texto, coloque o tag que termina mesmo ao lado da marca de início.

image2.jpg

menu