<input>

Controle no Formulário

Definição:

A tag <input> vem do inglês input e significa entrada de dados.

Esta tag permite à página coletar dados do usuário como por exemplo, nome, login, senha entre outros.

A tag <input>  não possui um terminador, ou seja na linguagem XHTML a tag deve ser declarada como <input />.

Suporte:

Netscape: 2.0
Internet Explorer: 2.0
Aceito nas especificações DTD: Estrito, Transicional e Frameset

Dicas:

Para que os dados entrados pelo usuário nos campos definidos pela tag <input>  sejam enviados corretamente ao servidor, é necessário que esta seja colocada dentro do contexto da tag <form>.

Outras tags com funções semelhantes à da tag <input>: <button>, <optgroup>, <option>, <select> e <textarea>.

Exemplo:

Código Resultado
 <form action="/index.php" method="get">
Pesquisar no site referenciando.com:<br />
<input type="hidden" name="submitted" value="true" />
<input type="text" name="s" size="15" maxlength="100" /><br />
<button type="submit" value="submit">Procurar</button>
</form>
Pesquisar no site referenciando.com:

Atributos Padrão:

accesskey, class, dir, id, lang, style, tabindex, title

Atributos Opcionais:

Atributo Valor Descrição
accept lista_de_tipos_MIME

Especifica uma lista de tipos MIME separados por vírgula dos tipos de arquivos que serão submetidos ao servidor. Este atributo é usado em conjunção com o atributo type="file".

Exemplos: text/html, image/jpg, video/mpeg, text/css
align absbottom
absmiddle
baseline
bottom
left
middle
right
texttop
top

Especifica o alinhamento do controle em relação a textos e figuras ao seu redor. Note que este atributo é considerado obsoleto e não será suportado na próxima revisão da linguagem. Recomenda-se utilizar folhas de estilo em cascata (CSS) para configurar o alinhamento. Este atributo não é suportado na especificação DTD estrito.

absbottom = alinha a linha atual com a parte de baixo do controle.
absmiddle = alinha a linha atual com o meio do controle.
baseline = alinha a linha atual com a base da linha do controle
bottom = alinha a linha atual com a parte de baixo do controle
left = alinha o controle à esquerda e as linhas irão rodear o controle pela direita.
middle = alinha a linha atual com o meio do controle.
right = alinha o controle à direita e as linhas irão rodear o controle pela esquerda.
texttop = alinha a linha atual com a parte de cima do controle
top = alinha a linha atual com a parte de cima do controle
alt descrição_da_imagem

Se o atributo type="image" for especificado, o atributo alt é usado para apresentar uma descricão da figura caso o navegador não suporte imagens.
checked checked Se o controle for do tipo radio ou checkbox, então este atributo ativa o respectivo controle.
disabled disabled

Desabilita o controle em questão. O usuário não poderá modificar o valor neste controle e o mesmo é mostrado pelo navegador como acizentado.

Este atributo não pode ser utilizado com controles escondidos, isto é, com o atributo type="hidden".
maxlength número Especifica o número máximo de caracteres que podem ser entrados em um controle do tipo texto, isto é: type="text".
name nome_do_controle Especifica um nome único para o controle. Este será o nome da variável passada ao servidor quando o formulário for submetido.
readonly readonly Especifica o controle como sendo apenas para leitura. O usuário não poderá modifica o conteúdo deste controle. A diferença entre este atributo e o disabled é que o controle não será mostrado como acizentado.
size caracteres
pixels		 Especifica a largura do controle. Se o controle for do tipo text ou password então este tamanho é dado em número de caracteres. Para controles de outros tipos, este valor é dado em pixels.
src URL Se o tipo do controle for image, então este atributo é usado para especificar o arquivo de imagem usado para representar o controle.
type button
checkbox
file
hidden
image
password
radio
reset
submit
text

Especifica o tipo do controle. Cada tipo é apresentado no navegador em um formato diferente. Se o tipo não for especificado, o tipo padrão é text.

button = cria um botão
checkbox = cria uma checkbox
file = cria um controle de seleção de arquivos
hidden = cria um controle escondido. Controles escondidos não são mostrados pelo navegador, mas seus dados são enviados para o servidor quando o formulário é submetido.
image = cria um botão de submissão com base em uma imagem especificada pelo usuário. Para controles do tipo image é obrigatórió definir o atributo alt.
password = cria um controle similar ao text, exceto que todos os caracteres digitados pelo usuários serão escondidos por asteriscos ('*').
radio = cria um controle do tipo botão de rádio ou botão de opção. Este controle permite ao usuário selecionar um valor entre uma série. Diferente do controle tipo checkbox, este controle não permite seleções múltiplas de valores dentro de uma mesma categoria.
reset = cria um botão de reset. Se o usuário clicar neste botão todos os controles dentro do formulário em que este controle foi definido serão apagados ou resetados ao seu valor padrão.
submit = cria um botão de submissão. Se o usuário clicar neste botão os dados em todos os controles definidos no formulário serão enviados ao servidor. Veja a tag <form> para mais detalhes sobre como os dados são enviados ao servidor.
text = cria uma caxa de texto em uma linha. Para criar caixas de texto que permitam ao usuário entrar múltiplas linhas use a tag <textarea>.
value texto Especifica um valor inicial para o controle. O usuário pode modificar este valor se o controle for do tipo file, password ou text. Este atributo é obrigatório para controles do tipo checkbox e radio. Para controles to tipo radio, checkbox e image, o valor especificado pelo atributo value é passado para o servidor quando o formulário for submetido.

Eventos Associados:

onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect