Conteúdo do Curso
HTML Supremo
HTML Supremo
Atributos de Input
O elemento HTML <input>
nos permite criar diversos controles de formulário para coleta de dados do usuário. Podemos 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 que ele assume depende do tipo de entrada:
- Para botões (
type="button"
,type="reset"
,type="submit"
), ele define o texto exibido no botão; - Para campos de texto (
type="text"
) e senha (type="password"
), ele define o valor padrão do campo de entrada; - Para caixas de seleção (
type="checkbox"
) e botões de opção (type="radio"
), ele define o valor associado à entrada.
Nota
O atributo
value
não pode ser utilizado com<input type="file">
.
Exemplo:
index
index
index
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 de entrada.
Exemplo:
index
index
index
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 de entrada obrigatório, ele receberá uma mensagem de erro de validação indicando que o preenchimento do campo é necessário.
Exemplo:
index
index
index
placeholder
O atributo placeholder
fornece uma dica ou exemplo do valor de entrada esperado ao usuário. Uma curta string de texto é exibida dentro do campo de entrada antes do usuário inserir qualquer valor. Isso é útil para campos que requerem um formato específico, como números de telefone ou de cartões de crédito.
Exemplo:
index
index
index
Nota
Nos exemplos acima, utilizamos diferentes atributos
type
para os elementos<input>
, o que afeta significativamente a aparência e funcionalidade deles. Vamos nos aprofundar nos diversos tipos de entrada no próximo capítulo.
Obrigado pelo seu feedback!