HTML5, elemento de entrada - parte 1

Índice
Um dos elementos mais importantes em um documento HTML é o elemento entrada por ser a principal fonte de energia que temos para o usuário, neste tutorial veremos um pouco mais a fundo como trabalhar com este elemento e as características que ele possui, bem como os atributos que podemos utilizar a partir de HTML5.
Entrada de texto
O Entrada de texto, é a forma mais básica do elemento de entrada, nos permite capturar texto simples alfanumérico e qualquer caractere especial, embora a entrada não seja ruim, às vezes precisamos filtrar um pouco mais para obter os dados que realmente precisamos.
Vamos ver os atributos especiais que podemos usar com este elemento quando estamos trabalhando como um tipo de texto.
  • dirname: Este atributo não é novo para HTML5, no entanto, esse atributo nos permite mudar a direção da entrada de texto da direita para a esquerda ou da esquerda para a direita, que é o que normalmente usamos na língua ocidental.

Comente:

Postar Comentário

  • Lista: Este atributo é novo em HTML5 e nos dá a possibilidade de especificar o id de um elemento datalist Eu poderia atribuir valores a este elemento.
 Pagina inicial: 
  • comprimento máximo: Outro velho conhecido de HTML, Não é novo, porém é muito útil, pois nos permite limitar o número máximo de caracteres que a entrada aceita, um exemplo é quando aceitamos códigos de 3 letras, colocamos este atributo com o valor 3 e ao tentar inserir uma quarta carta, não, eu simplesmente escreveria.


  • padronizar: Novo no HTML5, ele nos permite inserir padrões de expressão regular para que possamos adicionar um novo nível de validação sem usar linguagens adicionais.
 Número da peça: 
  • placeholder: Novo em HTML5, É um auxílio visual que nos permite inserir um texto que aparecerá dentro do texto de entrada dizendo uma pequena ajuda para o usuário, por exemplo, se um texto de entrada for para a entrada de nome e sobrenome, poderíamos colocar o marcador de posição "Digite o nome e o sobrenome separados por espaço", é claro ajustando os estilos para que tudo pareça esteticamente correto.

Inhame:

  • somente leitura: Este atributo não é novo no HTML5, ele permite que o usuário não consiga inserir dados ou editar o conteúdo do campo que possui este atributo.

  • requeridos: Novo em HTML5, Este atributo permite-nos indicar, caso o input esteja vazio, o formulário ainda não deve ser submetido, obrigando assim a obrigatoriedade do seu preenchimento, desta forma elevamos outro nível de validação.

Endereço de e-mail:

  • Tamanho: Nos ajuda a especificar a largura do elemento de entrada, este atributo não é novo, porém é muito importante, pois nos ajuda a dar um melhor visual do texto que o usuário deve inserir, além de nos ajudar esteticamente a criar homogêneos campos de entrada, para poder colocá-los todos com uma largura maior que a que é trazida por padrão.
 
  • valor: Não é novidade no HTML5, este atributo nos permite colocar valores em um texto de entrada, é diferente do placeholder, pois o que está em valor atribuído ao enviar se seria enviado como conteúdo do elemento, é bastante usado para preencha um formulário com o conteúdo que é trazido do banco de dados quando usamos uma linguagem de servidor.
 

Na próxima parte do tutorial, veremos alguns exemplos práticos de como usar alguns desses atributos.
Atualizar: Parte 2 deste tutorialGostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo

Você vai ajudar o desenvolvimento do site, compartilhando a página com seus amigos

wave wave wave wave wave