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!!
