En este tutorial, aprenderemos, discutiremos y comprenderemos el formulario de JavaScript. También veremos la implementación del formulario JavaScript para diferentes propósitos.
Aquí, aprenderemos el método para acceder al formulario, obtener elementos como el valor del formulario JavaScript y enviar el formulario.
Introducción a los formularios
Los formularios son los conceptos básicos de HTML. Usamos elementos de formulario HTML para crear el javascript forma. Para crear un formulario, podemos utilizar el siguiente código de muestra:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
En el código:
- La etiqueta de nombre del formulario se utiliza para definir el nombre del formulario. El nombre del formulario aquí es 'Login_form'. Se hará referencia a este nombre en el formulario JavaScript.
- La etiqueta de acción define la acción y el navegador abordará el formulario cuando se envíe. Aquí no hemos tomado ninguna medida.
- El método para actuar puede ser correo o conseguir , que se utiliza cuando el formulario debe enviarse al servidor. Ambos tipos de métodos tienen sus propias propiedades y reglas.
- La etiqueta de tipo de entrada define el tipo de entradas que queremos crear en nuestro formulario. Aquí, hemos utilizado el tipo de entrada como 'texto', lo que significa que ingresaremos valores como texto en el cuadro de texto.
- Net, hemos tomado el tipo de entrada como 'contraseña' y el valor de entrada será contraseña.
- A continuación, tomamos el tipo de entrada como 'botón' donde, al hacer clic, obtenemos el valor del formulario y se muestra.
Además de las acciones y los métodos, también existen los siguientes métodos útiles que proporciona el elemento de formulario HTML
Formularios de referencia
Ahora, hemos creado el elemento de formulario usando HTML, pero también necesitamos establecer su conectividad con JavaScript. Para esto utilizamos el getElementById () método que hace referencia al elemento de formulario html al código JavaScript.
La sintaxis del uso de obtenerElementoById() método es el siguiente:
let form = document.getElementById('subscribe');
Usando el Id, podemos hacer la referencia.
Enviando el formulario
A continuación, debemos enviar el formulario enviando su valor, para lo cual utilizamos el al enviar() método. Generalmente, para enviar, utilizamos un botón de envío que envía el valor ingresado en el formulario.
La sintaxis del método submit() es la siguiente:
Cuando enviamos el formulario, la acción se realiza justo antes de que se envíe la solicitud al servidor. Nos permite agregar un detector de eventos que nos permite colocar varias validaciones en el formulario. Finalmente, el formulario se prepara con una combinación de código HTML y JavaScript.
Recopilemos y usemos todo esto para crear un Formulario de inicio de sesión y Formulario de registro y usar ambos.
Formulario de inicio de sesión
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'; } El resultado del código anterior al hacer clic en el botón Iniciar sesión se muestra a continuación:
Formulario de registro
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)>