Tag <input>
A tag <input> no HTML é um elemento essencial utilizado para criar campos interativos em formulários. Ela possui diversos atributos que permitem configurar e personalizar o comportamento do campo de entrada.
Atributos
Atributo type
Este atributo define o tipo de campo de entrada. Por padrão, o tipo é “text”. No entanto, ele pode ser ajustado para diferentes tipos, como “password” para senhas, “email” para endereços de e-mail, “number” para números, “checkbox” para caixas de seleção, entre outros.
<input type="text" />
<input type="password" />
<input type="email" />
<input type="number" min="10" max="50" step="5"/>
<input type="checkbox" />
<input type="radio" />
<input type="date" />
<input type="datetime-local" />
<input type="time" />
<input type="color" />
<input type="range" min="0", max="10" step="2"/>
<input type="url" />
<input type="search" />Atributo accept
Este atributo é específico para <input> do tipo “file” e define os tipos ou extensões de arquivos permitidos para upload.
<input type="file" accept=".jpg,.png,.doc" />
<input type="file" accept="image/*" />Atributo autocomplete
Controla se o navegador deve ou não fornecer sugestões automáticas para o campo. “on” é o comportamento padrão, enquanto “off” desativa essa funcionalidade.
<input type="text" autocomplete="off" />Atributo checked
Aplicável a <input> do tipo “radio” ou “checkbox”. Indica se o campo deve ser inicialmente marcado ou não.
<input type="checkbox" checked />Atributo disabled
Este atributo bloqueia qualquer interação com o elemento, tornando-o inativo.
<input type="text" disabled />Atributo value
Define o valor inicial do campo de entrada. É obrigatório apenas para <input> do tipo “radio” e “checkbox”.
<input type="text" value="Valor Inicial" />Atributo required
Torna obrigatório que o usuário insira um valor válido no campo para que o formulário seja enviado.
<input type="text" required />Atributo readonly
Previne qualquer alteração no valor do elemento. Algumas exceções incluem tipos de <input> específicos, nos quais esse atributo é ignorado.
<input type="text" value="Somente Leitura" readonly />Atributo list
O atributo list é uma funcionalidade específica da tag <input> com type="range" que permite associar um controle deslizante (<input> do tipo “range”) a um elemento <datalist>.
Ao usar o atributo list, você referencia o id de um elemento <datalist>, que contém uma lista de opções. Cada <option> dentro do <datalist> representa um valor específico que pode ser escolhido no controle deslizante.
<label for="volume">Nível de volume:</label>
<input
type="range"
id="volume"
name="volume"
min="0"
max="100"
list="volume-options"
/>
<datalist id="volume-options">
<option value="0" label="Mudo"></option>
<option value="25" label="Baixo"></option>
<option value="50" label="Médio"></option>
<option value="75" label="Alto"></option>
<option value="100" label="Máximo"></option>
</datalist>