Conteúdo do Curso
HTML Definitivo
HTML Definitivo
Aperfeiçoando Formulários com Atributos de Entrada
O elemento <input>
do HTML permite criar diversos controles de formulário para coletar dados do usuário. É possível personalizar o comportamento e a aparência desses controles utilizando diferentes atributos. Vamos explorar alguns atributos comumente utilizados:
value
O atributo value
é utilizado para definir o valor inicial do elemento <input>
. O valor específico depende do tipo de entrada:
- Para botões (
type="button"
,type="reset"
,type="submit"
), define o texto exibido no botão; - Para campos de texto (
type="text"
) e senha (type="password"
), define o valor padrão do campo de entrada; - Para caixas de seleção (
type="checkbox"
) e botões de opção (type="radio"
), define o valor associado ao campo de entrada.
Observação
O atributo
value
não pode ser utilizado com<input type="file">
.
index.html
autofocus
O atributo autofocus
especifica que o campo de entrada deve receber o foco automaticamente quando a página web for carregada. Quando a página é carregada, o campo de entrada será selecionado automaticamente, permitindo que o usuário comece a digitar sem precisar clicar primeiro no campo.
Nota
O autofocus não funciona aqui porque a página não é recarregada ao clicar no botão "Run Code".
index.html
required
O atributo required
é utilizado para tornar um campo de entrada obrigatório. Ele especifica que o campo de entrada deve ser preenchido antes que o usuário possa enviar o formulário. Se o usuário tentar enviar o formulário sem preencher o campo obrigatório, uma mensagem de erro de validação será exibida indicando que o campo é obrigatório.
index.html
placeholder
O atributo placeholder
fornece uma dica ou exemplo do valor esperado para o usuário. Um texto curto é exibido dentro do campo de entrada antes que o usuário insira qualquer valor. Isso é útil para campos que exigem formatação específica, como números de telefone ou cartões de crédito.
index.html
Nota
Nos exemplos acima, diferentes atributos
type
para os elementos<input>
são utilizados, afetando significativamente sua aparência e funcionalidade. Você explorará mais tipos de input no próximo capítulo.
1. Qual atributo é utilizado para definir o valor padrão de um elemento de input?
2. Qual atributo é utilizado para definir uma dica ou exemplo do valor esperado para um elemento input
?
3. Qual atributo é utilizado para especificar que um campo de entrada deve ser preenchido antes do envio do formulário?
Obrigado pelo seu feedback!