Tag <input>

Definições e uso

A tag <input> especifica um campo de input onde o usuário pode inserir dados

O elemento <input> é o elemento mais importante do elemento form

O elemento <input> pode ser mostrado de vários maneiras, dependendo do atributo type

Os diferentes tipos de inputs são os seguintes:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (valor padrão)
<input type="time">
<input type="url">
<input type="week">

Exemplos


<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>


<!DOCTYPE html>
<html>
<body>

<h1>Tag input</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Resultado

Atributos

Atributo	Valor	Descrição
accept	file_extension audio/* video/* image/* media_type	Especifica um filtro para quais tipos de arquivo o usuário pode escolher na caixa de diálogo de entrada de arquivo
alt	text	Especifica um texto alternativo para imagens
autocomplete	on off	Especifica se um elemento <input> deve ter o preenchimento automático ativado
autofocus	autofocus	Especifica que um elemento <input> deve obter foco automaticamente quando a página for carregada
checked	checked	Especifica que um elemento <input> deve ser pré-selecionado quando a página for carregada
dirname	form_id	Especifica que a direção o texto será enviada
formaction	URL	Especifica a URL do arquivo que processará o controle de entrada quando o formulário for enviado
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Especifica como os dados do formulário devem ser codificados ao enviá-los ao servidor
formmethod	get post	Define o método HTTP para enviar dados para a URL de ação
formnovalidate	formnovalidate	Define que os elementos do formulário não devem ser validados quando enviados
formtarget	formtarget	Especifica onde exibir a resposta recebida após o envio do formulário
height	pixels	Specifies the height of an <input> element
list	datalist_id	Refere-se a um elemento <datalist> que contém opções predefinidas para um elemento <input>
max	number date	Especifica o valor máximo para um elemento <inpu>
maxlength	number	Especifica o número máximo de caracteres permitidos em um elemento <input>
min	number	Especifica um valor mínimo para um elemento <input>
minlength	number	Especifica o número mínimo de caracteres necessários em um elemento <input>
multiple	multiple	Especifica que um usuário pode inserir mais de um valor em um elemento <input>
name	text	Especifica o nome de um elemento <input>
pattern	regexp	Especifica uma expressão regular em que o valor de um elemento <input> é verificado
placeholder	text	Especifica uma dica curta que descreve o valor esperado de um elemento <input>
readonly	readonly	Especifica que um campo de entrada é somente leitura
required	required	Especifica que um campo de entrada deve ser preenchido antes de enviar o formulário
size	number	Especifica a largura, em caracteres, de um elemento <input>
src	URL	Especifica a URL da imagem a ser usada como um botão de envio
step	number any	Especifica o intervalo entre números legais em um campo de entrada
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Especifica o tipo de elemento <input> a ser exibido
value	text	Especifica o valor de um elemento <input>
width	pixels	Especifica a largura de um elemento <input>

Esta tag também suporta Atributos Globais.