Neste tutorial, aprenderemos, discutiremos e compreenderemos o formulário JavaScript. Veremos também a implementação do formulário JavaScript para diversos fins.
Aqui aprenderemos o método para acessar o formulário, obtendo elementos como o valor do formulário JavaScript e enviando o formulário.
Introdução aos Formulários
Formulários são o básico do HTML. Usamos o elemento de formulário HTML para criar o JavaScript forma. Para criar um formulário, podemos usar o seguinte código de exemplo:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
No código:
- 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.
- A tag de ação define a ação e o navegador executará o formulário quando ele for enviado. Aqui, não tomamos nenhuma atitude.
- O método para agir pode ser publicar ou pegar , que é usado quando o formulário deve ser enviado ao servidor. Ambos os tipos de métodos possuem suas próprias propriedades e regras.
- A tag input type define o tipo de entradas que queremos criar em nosso formulário. Aqui, usamos o tipo de entrada como ‘texto’, o que significa que inseriremos valores como texto na caixa de texto.
- Net, consideramos o tipo de entrada como 'senha' e o valor de entrada será senha.
- A seguir, consideramos o tipo de entrada como 'botão' onde, ao clicar, obtemos o valor do formulário e o exibimos.
Além de ações e métodos, existem também os seguintes métodos úteis que são fornecidos pelo elemento de formulário HTML
Formulários de referência
Agora criamos o elemento do formulário usando HTML, mas também precisamos fazer sua conectividade com JavaScript. Para isso, usamos o getElementById() método que faz referência ao elemento de formulário html ao código JavaScript.
A sintaxe de uso do getElementById() método é o seguinte:
let form = document.getElementById('subscribe');
Usando o Id, podemos fazer a referência.
Enviando o formulário
A seguir, precisamos enviar o formulário enviando seu valor, para o qual utilizamos o onSubmit() método. Geralmente, para enviar, utilizamos um botão de envio que envia o valor inserido no formulário.
A sintaxe do método submit() é a seguinte:
Quando enviamos o formulário, a ação é executada imediatamente antes de a solicitação ser enviada ao servidor. Ele nos permite adicionar um ouvinte de evento que nos permite colocar várias validações no formulário. Por fim, o formulário fica pronto com uma combinação de código HTML e JavaScript.
Vamos coletar e usar tudo isso para criar um Forma de login e Formulário de inscrição e use ambos.
forma de login
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br> function submit_form(){ alert('Login successfully'); } function create(){ window.location='signup.html'; } A saída do código acima ao clicar no botão Login é mostrada abaixo:
Formulário de inscrição
SignUp Page <table class="table"> <tr><td> Name</td> <td></td></tr> <tr><td>Email </td> <td></td></tr> <tr><td> Set Password</td> <td></td></tr> <tr><td>Confirm Password</td> <td></td></tr> <tr><td> </td></tr></table> function create_account(){ var n=document.getElementById('n1').value; var e=document.getElementById('e1').value; var p=document.getElementById('p1').value; var cp=document.getElementById('p2').value; //Code for password validation var letters = /^[A-Za-z]+$/; var email_val = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; //other validations required code if(n==''||e==''||p==''||cp==''){ alert('Enter each details correctly'); } else if(!letters.test(n)) { alert('Name is incorrect must contain alphabets only'); } else if (!email_val.test(e)) { alert('Invalid email format please enter valid email id'); } else if(p!=cp) { alert('Passwords not matching'); } else if(document.getElementById('p1').value.length > 12) { alert('Password maximum length is 12'); } else if(document.getElementById('p1').value.length <6) { alert('password minimum length is 6'); } else{ alert('your account has been created successfully... redirecting to javatpoint.com'); window.location="https://www.javatpoint.com/" ; < pre> <p>The output of the above code is shown below:</p> <img src="//techcodeview.com/img/javascript-tutorial/97/javascript-form-2.webp" alt="JavaScript Form"> <p>In this way, we can create forms in JavaScript with proper validations.</p> <hr></6)>