Tag input
A tag input cria vários elementos
de formulário HTML: campo de entrada comum, campo para
senha, checkbox,
botões de rádio (radio), botão.
A tag input deve estar dentro da tag
form.
Isso não é obrigatório, mas é necessário para enviar
dados para o servidor e subsequentemente processá-los
via PHP.
Não requer tag de fechamento.
Atributos
| Atributo | Descrição |
|---|---|
type |
Define o tipo de campo de entrada. Veja as opções abaixo. |
value |
Valor padrão no campo de entrada. No caso de um botão, define seu texto.
Para mais detalhes, veja o atributo value.
|
placeholder |
Dica no campo de entrada, para mais detalhes veja
o atributo placeholder.
|
name |
Nome do campo de entrada. Necessário para obter os dados do campo de entrada em PHP. Para o funcionamento correto do formulário, os nomes dos campos de entrada não devem coincidir entre si (em um mesmo formulário). Se coincidirem - em PHP chegarão os dados do campo de entrada que está mais abaixo no código HTML. |
disabled |
Bloqueia o elemento do formulário (não apenas o input, mas praticamente qualquer um),
para mais detalhes veja o atributo disabled.
|
Valores do atributo type
| Valor | Descrição |
|---|---|
text |
Cria um campo de entrada de texto comum. |
password |
Cria um campo de entrada de texto para senha. Tente digitar texto nele - ele será exibido como asteriscos. |
checkbox |
Cria uma caixa de seleção (checkbox).
Para mais detalhes, veja checkbox.
|
radio |
Cria um botão de opção (radio).
Para mais detalhes, veja radio.
|
hidden |
Cria um input oculto, que não será visível na tela, mas enviará os dados contidos
no atributo value para o servidor.
|
button |
Cria um botão. Clicar neste botão
não enviará o formulário para o servidor. Ele pode ser usado dentro de uma
ligação ou via JavaScript.
Por padrão, o botão não tem texto (exemplo de botão sem texto: ),
ele é definido usando value.
Veja também a tag button,
que também cria um botão.
|
submit |
Cria um botão que enviará os dados para o servidor.
O texto do botão depende do navegador, pode ser alterado
usando value.
Veja também a tag button,
que também cria um botão.
|
reset |
Cria um botão que limpa o formulário preenchido.
O texto do botão depende do navegador, pode ser alterado
usando value.
|
file |
Cria um botão de seleção de arquivo. É proibido alterar o design deste botão
via CSS (no entanto, existem maneiras complicadas). Se você precisar de tal campo em um formulário,
a tag form deve ter o atributo
enctype com o valor multipart/form-data.
|
Novos valores para o atributo type no HTML5
Estes valores do atributo são novos, apareceram apenas no HTML5, portanto, em alguns navegadores eles podem não funcionar ou funcionar de maneira diferente em diferentes navegadores.
Caso o navegador não consiga entender o conteúdo
do atributo type (por exemplo, se ele
não for suportado ou for digitado incorretamente),
ele considerará o elemento como um input de texto comum,
como se no type estivesse o valor
text.
Veja os exemplos abaixo em
diferentes navegadores. Tente inserir
texto nos inputs e clicar no botão de envio.
Se o texto for incorreto ou o campo estiver vazio -
o navegador exibirá um erro. Por exemplo, se no
campo do tipo email for inserido um email incorreto -
o navegador não permitirá o envio do formulário e
exibirá uma mensagem de erro (o texto do erro
e sua aparência não podem ser alterados via html css).
Se o campo estiver vazio - o navegador também exibirá um erro,
isso é alcançado com o atributo required:
| Valor | Descrição |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
