Tipos de Input
O HTML oferece diversos elementos <input> que permitem capturar diferentes tipos de dados dos usuários. Vamos explorar alguns tipos de entrada comumente utilizados:
email e password
type="email": Utilizado para campos de inserção de e-mail que exigem um endereço de e-mail válido. O navegador valida automaticamente o endereço de e-mail, solicitando ao usuário que corrija entradas inválidas;type="password": Utilizado para campos de senha onde o texto digitado é ocultado por segurança. Também podemos especificar os atributosminLengthemaxLengthpara definir requisitos de comprimento da senha.
Exemplo:
index.html
index.css
index.js
number
type="number": Utilizado para entrada numérica. Podemos definir um intervalo específico com os atributos min e max e estabelecer um valor de passo específico com o atributo step.
Exemplo:
index.html
index.css
index.js
tel
type="tel": Destinado à inserção de números de telefone, mas não realiza qualquer validação na entrada de dados. Cabe ao desenvolvedor validar a entrada e garantir que seja um número de telefone válido.
Exemplo:
index.html
index.css
index.js
checkbox
type="checkbox": Permite que o usuário selecione uma ou mais opções entre escolhas predefinidas. O atributo checked faz com que uma caixa de seleção esteja marcada por padrão.
Exemplo:
index.html
index.css
index.js
radio
type="radio": Cria um conjunto de opções onde apenas uma opção pode ser selecionada. Um botão de opção representa cada opção, e escolher uma automaticamente desmarca as outras. Cada botão de opção deve ter um atributo value único para identificá-lo.
Exemplo:
index.html
index.css
index.js
range
type="range": Cria um controle deslizante que permite aos usuários selecionar um valor dentro de um intervalo específico. Podemos aplicar os atributos min, max, step e value para definir seu comportamento.
Exemplo:
index.html
index.css
index.js
Nota
Aprenderemos JavaScript nos cursos seguintes. Não é o contexto deste curso.
date e time
type="date": Permite que os usuários selecionem uma data a partir de um calendário pop-up;type="time": Permite que os usuários insiram um horário no formato de 24 horas;type="datetime-local": Combina entradas de data e hora.
Exemplo:
index.html
index.css
index.js
Nota
Para garantir uma estilização consistente em diferentes dispositivos, soluções prontas são frequentemente utilizadas para calendários pop-up e entradas de hora.
Tudo estava claro?
Conteúdo do Curso
HTML Supremo
2. Tags e Atributos
HTML Supremo
Tipos de Input
O HTML oferece diversos elementos <input> que permitem capturar diferentes tipos de dados dos usuários. Vamos explorar alguns tipos de entrada comumente utilizados:
email e password
type="email": Utilizado para campos de inserção de e-mail que exigem um endereço de e-mail válido. O navegador valida automaticamente o endereço de e-mail, solicitando ao usuário que corrija entradas inválidas;type="password": Utilizado para campos de senha onde o texto digitado é ocultado por segurança. Também podemos especificar os atributosminLengthemaxLengthpara definir requisitos de comprimento da senha.
Exemplo:
index.html
index.css
index.js
number
type="number": Utilizado para entrada numérica. Podemos definir um intervalo específico com os atributos min e max e estabelecer um valor de passo específico com o atributo step.
Exemplo:
index.html
index.css
index.js
tel
type="tel": Destinado à inserção de números de telefone, mas não realiza qualquer validação na entrada de dados. Cabe ao desenvolvedor validar a entrada e garantir que seja um número de telefone válido.
Exemplo:
index.html
index.css
index.js
checkbox
type="checkbox": Permite que o usuário selecione uma ou mais opções entre escolhas predefinidas. O atributo checked faz com que uma caixa de seleção esteja marcada por padrão.
Exemplo:
index.html
index.css
index.js
radio
type="radio": Cria um conjunto de opções onde apenas uma opção pode ser selecionada. Um botão de opção representa cada opção, e escolher uma automaticamente desmarca as outras. Cada botão de opção deve ter um atributo value único para identificá-lo.
Exemplo:
index.html
index.css
index.js
range
type="range": Cria um controle deslizante que permite aos usuários selecionar um valor dentro de um intervalo específico. Podemos aplicar os atributos min, max, step e value para definir seu comportamento.
Exemplo:
index.html
index.css
index.js
Nota
Aprenderemos JavaScript nos cursos seguintes. Não é o contexto deste curso.
date e time
type="date": Permite que os usuários selecionem uma data a partir de um calendário pop-up;type="time": Permite que os usuários insiram um horário no formato de 24 horas;type="datetime-local": Combina entradas de data e hora.
Exemplo:
index.html
index.css
index.js
Nota
Para garantir uma estilização consistente em diferentes dispositivos, soluções prontas são frequentemente utilizadas para calendários pop-up e entradas de hora.
Tudo estava claro?
