HTML5, elemento de entrada - parte 2

Já na primeira parte deste Tutorial definimos os atributos com os quais podemos trabalhar, vimos que temos alguns novos para HTML5 e outras que não, porém quando se trata de construir campos sólidos que nos auxiliem nos processos essenciais do site, é quando a combinação destes e o uso adequado de cada um nos ajudarão a coletar da melhor forma possível.
Definir o tamanho de um campo
Como vimos, temos dois atributos que afetam diretamente o tamanho de um campo, são eles Tamanho Y comprimento máximo, um regula a amplitude visual do campo e o outro a quantidade de texto que o campo pode realmente receber.
Vejamos um exemplo usando ambos os atributos:

 Exemplo
Inhame:

Cidade:
Fruta:
Enviar voto 

Neste exemplo, vemos como o primeiro campo é especificado como comprimento máximoSó com isso dizemos ao navegador que ele só pode aceitar 10 caracteres, porém pode atribuir a largura padrão, no segundo campo especificamos o Tamanho Com o que dizemos quão largo deve ser, porém não limitamos a entrada de texto e no terceiro aplicamos ambas as condições, vamos ver como funciona no navegador.

Uso de valor e espaço reservado
Tendo visto a diferença entre esses dois campos, neste exemplo vamos demonstrar efetivamente como aplicá-los a um formulário, vamos ver como usá-los no código a seguir.

 Exemplo
Inhame:
Cidade:
Fruta:
Enviar voto 

Como podemos ver nos dois primeiros campos, o placeholder indica uma ajuda para o que o usuário deve inserir, este valor que o placeholder contém não é o valor do campo de entrada, então se enviarmos esses campos eles chegarão vazios, ao invés do terceiro campo Tem algo já colocado no atributo valor, este se passaria ao submeter ao referido formulário.
Vamos ver como o navegador nos mostraria isso

Crie campos somente leitura
Às vezes devemos trabalhar com campos somente leitura, seja porque o valor não deve ser modificado pelo usuário ou é meramente informativo. Pode ser também que seja o resultado de uma filtragem prévia por parte do usuário e apenas este valor possa ser visualizado, para isso temos duas opções que embora pareçam iguais são totalmente diferentes.
Já tínhamos visto o atributo somente leitura e sabemos que é para que o campo não possa ser modificado, também temos o atributo Desativado, tem a mesma função que somente leitura, no entanto, ao fazer enviar todos os campos Desativado eles não são enviados, então é como se não existissem no formulário.
Vamos ver o que foi explicado acima com um exemplo prático.

 Exemplo
Inhame:
Cidade:
Fruta:
Enviar voto 

Podemos ver que o primeiro campo está desabilitado e o segundo em somente leitura, quando o desabilitado é exibido no navegador ele aparece com uma coloração cinza, geralmente associada à não habilitação, enquanto o somente leitura é visto como um campo normal, embora se tentarmos para escrever para ninguém, ninguém nos permitirá inserir texto.
Vamos ver como o exemplo é:

Com isso finalizamos esta segunda parte do tutorial, agora podemos melhorar nossos formulários utilizando validações básicas de tamanho e quantidade de texto e também controlando o que o usuário pode modificar ou não, além de podermos mostrar ajuda nos campos para que ele tenha uma ideia de que você deve ou não entrar.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo