Formulários HTML

Form

Para utilizarmos um formulário em um site precisamos usar a tag <form></form>

Entre elas deve ter o que você precisa, claro. Para isso mostrarei aqui um pouco sobre os elementos possíveis:

Primeiro os atributos de <form>:

id 

Serve para o formulário ser identificado, pode ser para css ou para outro coisa que você precise
identificá-lo.
Ex:
<form id="cadastro">

action

O atributo action especifica para onde enviar o formulário de dados quando um formulário é submetido.
Ex:
<form action="teste.php" method="get">

method

<form action="teste.php" method="post">

O atributo method especifica como enviar os dados do formulário (os dados do formulário são enviado para a página especificada no atributo action).

Os dados do formulário podem ser enviados como variáveis ​​de URL (com o method = "get") ou como  operação post do HTTP(com o method = "post").
get = envia os dados pela URL
post = envia os dados via transação HTTP


enctype

O atributo enctype especifica como os dados do formulário devem ser codificados quando enviados para o servidor.
Obs: O atributo enctype só pode ser utilizado se o "method"  for "post".
Ex:
<form action="teste.php"
method="post" enctype="multipart/form-data">

oninput

A tag <output> representa o resultado de um cálculo (como um realizado por um script).
Ex:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

autocomplete

O atributo autocomplete especifica se um campo de entrada deve ou não ter habilitado o completamento automático.

Autocomplete permite que o navegador preveja o valor quando um usuário começa a digitar em um campo, o navegador deve exibir opções para preencher o campo, com base em valores anteriormente digitados.

Obs: O atributo autocomplete funciona com os tipos <input>:text, search, url, tel, email, password, datepickers, range, e color.
Ex:
<form action="teste.php" autocomplete="on">

novalidate

Quando presente, ele especifica que os dados do formulário (de entrada) não devem ser validados quando submetidos.

Ex:

<form novalidate>

Label:

Atributos:

accesskey

Em HTML5, o atributo accesskey pode ser usado em qualquer elemento HTML (que irá validar em qualquer elemento HTML. No entanto, não é necessariamente útil).
Ele serve para adicionar um atalho ao elemento que você quiser.
Ex:
<label accesskey="L">
Assim, quando a pessoa apertar ALT+L ela vai direto à essa label

for

Especifica a que elemento do form a label está associada
Ex:
<form action="teste.php">
<label for="masculino">Masculino</label>
<input type="radio" name="sexo" id="masculino" value="masculino"><br>
<label for="feminino">Feminino</label>
<input type="radio" name="sexo" id="feminino" value="feminino"><br>
<input type="submit" value="Enviar">
</form>

Input

type

text, password, email, search, url, hidden, number, range, tel, date, datetime, datetime-local, time, month, week, checkbox, radio, file, color, button, image, reset, submit
Com esses tipos de atributos o type ficou muito mais semântico, ou seja, os buscadores sabem o que deve ser inserido em cada campo.
Com base em teste feitos em sala, sabemos que alguns atributos não funcionam direito em uns navegadores mas em outros sim, portanto é altamente aconselhável verificar qual navegador o seu público alvo usa, e testar antes de implementar um deles.
Abaixo mostro um pouco de como alguns desses campos aparecem no navegador.

password

search

hidden


(Ué... não apareceu nada? SIIIIM quando você escolhe o tipo hidden ele simplesmente não aparece! 

)







number

range

date

checkbox

radio

file

color (cada sistema operacional tem uma maneira de deixar você escolher a cor)

button

alt

O atributo alt oferece um texto alternativo para o usuário, se ele / ela por alguma razão não pode ver a imagem (por causa da conexão lenta, um erro no atributo src, ou se o usuário usa um leitor de tela).

Nota: O atributo alt só pode ser usado com <input type="image">.

checked

Quando presente, ele especifica que um elemento <input> deve ser pré-selecionado (marcado), quando a página é carregada, ou seja, ele pré-checa.
O atributo verificado pode ser usado com <input type="checkbox"> e <input type="radio">.
O atributo verificado também pode ser definido após o carregamento da página, com um JavaScript.

disabled

O atributo disabled é um atributo booleano.

Quando presente, ele especifica que um grupo de elementos de formulário relacionados (um fieldset) deve ser desativado.

Um fieldset desativado é inutilizável e não clicável.

O atributo desativado pode ser configurado para que um usuário não veja esse fieldset até que uma condição seja cumprida (como a seleção de uma caixa de seleção, etc.) Em seguida, um JavaScript poderia remover o valor com deficiência, e fazer o fieldset utilizável.

maxlength

o atributo maxlength especifica o número máximo de caracteres permitidos no elemento <input>.

readonly

Quando presente, ele especifica que um campo de entrada é somente leitura.
Um campo de entrada somente leitura não pode ser modificado (no entanto, o usuário pode usar TAB nele, selecionar ou copiar um texto dele).
O atributo readonly pode ser configurado para evitar que um usuário altere o valor até algumas outras condições forem satisfeitas (como a seleção de uma caixa de seleção, etc.) Em seguida, um JavaScript pode remover o valor readonly, e fazer o campo de entrada editável.

size

O atributo size especifica a largura visível, em caracteres, de um elemento <input>.

Obs: O atributo size trabalha com os seguintes tipos de entrada:  text, search, tel, url, email, e password.

Dica: Para especificar o número máximo de caracteres permitidos no elemento <input>, use o atributo maxlength.

src

O atributo src especifica a URL da imagem para ser usada como um botão de envio.
Nota: O atributo src é necessário para <input type="image">, e só pode ser usado com 
<input type="image">.

tabindex

Especifica a ordem de tabulação de um elemento

value

O atributo value especifica o valor de um elemento <input>.

O atributo value é utilizado de forma diferente para diferentes tipos de entrada:

Para o "button", "reset", e "submit" - define o texto no botão
Para o "text", "password", e "hidden" - define o valor (padrão) inicial do campo de entrada
Para o "checkbox", "radio", "image" - define o valor associado à entrada (este valor também é enviado pelo submit)

max

O atributo max especifica o valor máximo de um elemento <input>.
Dica: Use o atributo máximo juntamente com o atributo min para criar uma faixa de valores legais.
Nota: O max e atributos min trabalha com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week.

min

Mesma coisa que o de cima, só que ao contrário :)

step

O atributo step especifica os intervalos de número legal para um elemento <input>.
Exemplo: se o step = "3", os números poderiam ser legais -3, 0, 3, 6, etcDica: O atributo step  pode ser usado junto com o Max e atributos min para criar uma faixa de valores legais.
Nota: O atributo step trabalha com os seguintes tipos de entrada:
number, range, date, datetime, datetime-local, month, time e week.

autofocus

Quando presente, ele especifica que um elemento <input> deve receber automaticamente o foco quando a página é carregada.

formenctype*formaction*formmethod*formnovalidate*
* Funcionam exatamente como enctype, action, method, novalidate, respectivamente, só que quando usado como por exemplo em um submit, ele subscreve o atributo colocado em <form>

formtarget


O atributo target especifica um nome ou uma palavra-chave que indica onde exibir a resposta que é recebida após enviar o formulário.

O atributo target define um nome ou palavra-chave para, um contexto de navegação (por exemplo, uma janela, aba).

height

Define a altura do campo.
width

Define o tamanho(visual, não de caracteres) do campo

multiple

Quando presente, ele especifica que o usuário está autorizado a enviar mais de um valor no elemento <input>.
Nota: O atributo multiple trabalha com os seguintes tipos de entrada: email e file.


pattern

O atributo pattern especifica uma expressão regular que o valor do elemento <input> é verificado.
Nota: O atributo padrão trabalha com os seguintes tipos de entrada:text, search, url, tel, email, e password.

placeholder

mostra ao usuário o que deve ser digitado, por exemplo no campo nome aparece "João da Silva", para exemplificar, ao digitar, esse exemplo some.

required

Evita que um campo seja deixado em branco, quando o usuário clica em enviar, o navegador mostra uma mensagem e indica o campo(cada navegador tem sua mensagem própria).

Select

disable

Quando presente, ele especifica que uma opção deve ser desativada.

A opção com o atributo disable é inútil e não-clicável.

O atributo desativado pode ser configurado para evitar que um usuário selecione a opção até que alguma outra condição foi cumprida (como a seleção de um checkbox, etc.).

option

A tag <option> define uma opção em uma lista de seleção.

Ex:
<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

optgroup

O <optgroup> é usado para agrupar opções relacionadas em uma lista drop-down.

Se você tem uma lista com muitas opções, grupos de opções relacionadas são mais fáceis de manusear para o usuário.

Ex:

<select>
    <optgroup label="Carros Suiços">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="Carros alemães">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

datalist

A tag <datalist> especifica uma lista de opções pré-definidas para um elemento <input>.

A tag <datalist> é usada para fornecer um recurso "autocompletar" em elementos <input>. Os usuários verão uma lista suspensa de opções pré-definidas como entrada de dados.

Use o atributo do elemento <input> da lista para vinculá-lo em conjunto com um elemento <datalist>.

Ex:

<input list="browsers">

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

keygen

A tag <keygen> especifica um campo gerador de par de chaves utilizado para formulários.

Quando o formulário é enviado, a chave privada é armazenada localmente, e a chave pública é enviada para o servidor.

Ex:

<form action="teste.php" method="get">
    Usuario: <input type="text" name="usuario">
    Criptografia: <keygen name="seguranca">
    <input type="submit">
</form>

output

A tag <output> representa o resultado de um cálculo (como um realizado por um script).

Ex:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

textarea

A tag <textarea> define uma entrada de texto multi linha.

Um textarea pode conter um número ilimitado de caracteres, e o texto é renderizado em uma fonte de largura fixa (geralmente Courier).

O tamanho de um textarea pode ser especificado pelo cols e atributos de rows , ou até melhor, através do CSS  com as propriedades de altura e largura.

button

A tag <button> define um botão clicável.

Dentro de um elemento <button> você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os botões criados com o elemento <input>.

Dica: Sempre especificar o tipo de atributo para um elemento <button>. Navegadores diferentes usam diferentes tipos padrões para o elemento <button>.

Usando o atributo value, você especifica um valor inicial para o botão.

Ex:

<button type="button">Clique em mim!</button>

Fieldset

A tag <fieldset> é utilizada para agrupar elementos relacionados em um formulário.

A tag <fieldset> desenha uma caixa em torno dos elementos relacionados.

Ex:

<form>
    <fieldset>
        Nome: <input type="text"><br>
        Email: <input type="text"><br>
        Nascimento: <input type="text">
    </fieldset>
</form>

legend

A tag <legend> define uma legenda para o elemento <fieldset>.

Ex:

<form>
    <fieldset>
        <legend>Dados pessoais</legend>
        Nome: <input type="text"><br>
        Email: <input type="text"><br>
        Nascimento: <input type="text">
    </fieldset>
</form>

Ufa, terminei!!