- valor (value, dado invisivel) = esse dado é enviado, quando o formulario for enviado.
- nome(dado visivel na pagina) = é o dado que digitamos no formulario para o usuario afim de auxiliar sobre cada campo a ser preenchido.
-name = cada campo tem que ter um name, para a requisicao ao servidor capturar e retornar corretamente.
Elementos/Controles de Formulario:
**label
= No elemento label escrevemos o titulo que vai referenciar ao input posterior.
**input
= O elemento input
como padrão é um campo do tipo texto (type="text"), porem ele pode se transformar no que quizermos (email, date, password, etc) se caracterizando assim como totalmente modelavel.
= O elemento form: usado para criar formularios, nele temos os atributos, method e action:
****method. Esse atributo cuida do metodo (GET ou POST), que é a forma que esse formulario vai ser enviado.
********GET. nesse metodo, os dados aparecem na barra de endereço(pesquiza).
********POST. nesse metodo os dados são enviados secretamente (login).
****action. esse atributo é usado para colocar o link do destino para onde os dados do formulario serão enviados.
Atributos de Formulario:
** No Elemento label:
[for: recebe o valor no id do input.] ** No Elemento input:
****Tipo texto:
[type: podemos informar varios tipos de dados, aqui que modificamos a forma do input a nossa preferencia.]
[placeholder: podemos digitar um texto para aparecer no campo ainda vazio de input, assim mostrando ao usuario que tipo de dado, e como se deve preencher aquele campo, quando o usuario lica no campo, esse texto some.]
****Tipo number:
[min/max: define o valor minimo e valor maximo em um campo do tipo numero (type="number").]
****Tipo radio:
[value: Adicionamos um valor para o usuario selecionar no input do tipo radio (type="radio").]
[name: Em um campo do typo radio (type="radio"), o name agrupa valores, e faz o controle para que um valor apenas seja selecionado. (ex: sexo)]
[checked: Atributo que seleciona 1 campo do tipo radio, mesmo contendo 2, por isso é preciso colocar esse atributo em apenas um campo. (ex: sexo)]
****Tipo checkbox:
[checked: Atributo que seleciona 1 campo do tipo checkbox, mesmo contendo 2, por isso é preciso colocar esse atributo em apenas um campo. (ex: sim ou não)]
****Tipo file:
[accept: esse atributo permite definir o tipo de arquivo que pode ser upado para o formulario.]
****Tipo submit:
[value: adicionamos um valor]
**No Elemento select: **No Elemento option:
[value: Adicionamos um valor para o usuario selecionar no option.] **No Elemento textarea:
[maxlength: define e limita a quantidade maxima de caracteres.]
Organizando o Formulario:
Elementos.
****fieldset: Organiza uma seção no formulario (ex: sessão conta, que tem email e senha.)
****legend: Colocamos o titulo da seção.
Enviando o Formulario:
- 1. Adicione o link para o servidor receber o formulario direto no atributo action.
- 2. Confira se todos os campos input, select, textarea estão identificados com name="".
Validando o Formulario:
- No HTML5 a grande novidade é poder validar os dados direto no formulario.
- O formulario é a porta de entrada para o servidor,ou seja, o formulario é fundamental no processo de interação do usuario com a aplicação(ex: twiter, facebook, instagram etc).
- A permissão da interação do usuario com a aplicação diretamente, acaba acarretando algumas preucupações quando se trata de dar permissão para que qualquer tipo de dado seja liberado/livre no formulario(não considerando dados de palavrão, etc, mas preenchimentos forçados que podem gerar erros na aplicação, ou acarretar sobrecarga nas requisições).
- Validar é RECEBER no BACKEND as INFORMAÇÕES mais CORRETAS!
- O HTML5, nos da essa opção de validar/controlar certas requisições digitadas pelo usuario.
Atributos:
** required: Obriga o usuario a preencher um campo (esse atributo é isolado(não necessita passar valores)).No caso do input ser do tipo radio(type="radio"), não é recomendado obrigar uma opção ou duas, ja que o atributo radio permite ao usuario a opção de escolha.
** minlength/maxlength,min/max: define um valor minimo e maximo de caracteres limite.
** checked: deixa um campo pre-preenchido pelo desenvolvedor.
** type: ele diz ao HTML5 qual formato o input vai ter, e estabelece o tipo de dado naquele campo.
** pattern: Obriga o usuario digitar igual ao modelo no placeholder.(ex: pattern="\([0-9]\)[\s][0-9]-[0-9]" maxlength="15")