|
Neste tutorial, veremos como criar alguns tipos de formul�rios em JavaScript.
Veremos a implementa��o de formul�rios JavaScript para diferentes prop�sitos. Aprenderemos os m�todos para
acessar formul�rios, obter elementos como o valor do formul�rio e enviar o formul�rio.
Introdu��o aos formul�rios
Os formul�rios s�o os fundamentos do HTML. Usamos o elemento de formul�rio HTML para criar os formul�rios JavaScript.
Para criar um formul�rio, podemos usar o seguinte c�digo de exemplo:
Veja na imagem abaixo o resultado desse c�digo::
No c�digo:
1) A tag de nome do formul�rio � usada para definir o nome do formul�rio. O nome do formul�rio aqui � "Login_form". Este nome
ser� referenciado no formul�rio JavaScript.
2) A tag de a��o define a a��o, e o navegador ir� lidar com o formul�rio quando ele for enviado. Aqui, n�o tomamos nenhuma
provid�ncia.
3) O m�todo para executar a a��o pode ser post ou get, que � usado quando o formul�rio deve ser enviado ao servidor. Ambos
os tipos de m�todos t�m suas pr�prias propriedades e regras.
4) A tag de tipo de entrada define o tipo de entradas que queremos criar em nosso formul�rio. Aqui, usamos o tipo de entrada
como 'texto', o que significa que vamos inserir valores como texto na caixa de texto.
5) Feito isso, tomamos o tipo de entrada como 'senha' e o valor de entrada ser� senha.
6) Em seguida, tomamos o tipo de entrada como 'bot�o', onde ao clicar, obtemos o valor do formul�rio ser� exibido.
Al�m de a��o e m�todos, existem os seguintes m�todos �teis tamb�m fornecidos pelo elemento de formul�rio HTML:
submit(): O m�todo � usado para enviar o formul�rio.
reset(): O m�todo � usado para redefinir os valores do formul�rio.
Formul�rios de refer�ncia:
Agora, criamos o elemento de formul�rio usando HTML, mas tamb�m precisamos fazer sua conectividade com JavaScript. Para isso,
usamos o m�todo getElementById() que referencia o elemento de formul�rio html ao c�digo JavaScript.
A sintaxe do uso do m�todo getElementById() � a seguinte:
let form = document.getElementById('subscribe');
Usando o Id, podemos fazer a refer�ncia.
Enviando o formul�rio:
Em seguida, precisamos enviar o formul�rio enviando seu valor, para o qual usamos o m�todo 'onSubmit()'. Geralmente, para
enviar, usamos um bot�o de envio que envia o valor inserido no formul�rio.
A sintaxe do m�todo submit() � a seguinte:
<input type="submit" value="Subscribe">
Quando enviamos o formul�rio, a a��o � executada pouco antes de a solicita��o ser enviada ao servidor. Ele nos permite
adicionar um ouvinte de eventos que nos permite colocar v�rias valida��es no formul�rio. Finalmente, o formul�rio fica pronto com
uma combina��o de c�digo HTML e JavaScript.
Vejamos um exemplo:
Veja na imagem abaixo o resultado desse c�digo:
Formul�rio de inscri��o (SignUp Form):
Agora vejamos um c�digo de como criar um formul�rio para o usu�rio criar uma nova conta.
Veja na imagem abaixo o resultado desse c�digo:
<< Tutorial para Criar uma Lista Suspensa
Tutorial para Criar Accordeons >>
|
