Dans ce didacticiel, nous allons apprendre, discuter et comprendre le formulaire JavaScript. Nous verrons également l'implémentation du formulaire JavaScript à différentes fins.
Ici, nous allons apprendre la méthode pour accéder au formulaire, obtenir des éléments comme valeur du formulaire JavaScript et soumettre le formulaire.
Introduction aux formulaires
Les formulaires sont les bases du HTML. Nous utilisons l'élément de formulaire HTML afin de créer le Javascript formulaire. Pour créer un formulaire, nous pouvons utiliser l'exemple de code suivant :
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
Dans le code :
- La balise de nom de formulaire est utilisée pour définir le nom du formulaire. Le nom du formulaire ici est « Login_form ». Ce nom sera référencé dans le formulaire JavaScript.
- La balise d'action définit l'action et le navigateur prendra en charge le formulaire lors de sa soumission. Ici, nous n’avons pris aucune mesure.
- La méthode pour agir peut être soit poste ou obtenir , qui est utilisé lorsque le formulaire doit être soumis au serveur. Les deux types de méthodes ont leurs propres propriétés et règles.
- La balise input type définit le type d’entrées que nous souhaitons créer dans notre formulaire. Ici, nous avons utilisé le type d'entrée comme « texte », ce qui signifie que nous saisirons les valeurs sous forme de texte dans la zone de texte.
- Net, nous avons pris le type d'entrée comme « mot de passe » et la valeur d'entrée sera le mot de passe.
- Ensuite, nous avons pris le type d'entrée comme « bouton » où, en cliquant, nous obtenons la valeur du formulaire et l'affichons.
Outre l'action et les méthodes, il existe également les méthodes utiles suivantes qui sont fournies par l'élément de formulaire HTML.
Formulaires de référencement
Maintenant, nous avons créé l'élément de formulaire en utilisant HTML, mais nous devons également assurer sa connectivité avec JavaScript. Pour cela, nous utilisons le getElementById () méthode qui référence l’élément de formulaire HTML au code JavaScript.
La syntaxe d'utilisation du getElementById() la méthode est la suivante :
let form = document.getElementById('subscribe');
En utilisant l'Id, nous pouvons faire la référence.
Envoi du formulaire
Ensuite, nous devons soumettre le formulaire en soumettant sa valeur, pour laquelle nous utilisons le surSoumettre() méthode. Généralement, pour soumettre, nous utilisons un bouton de soumission qui soumet la valeur saisie dans le formulaire.
La syntaxe de la méthode submit() est la suivante :
Lorsque nous soumettons le formulaire, l'action est effectuée juste avant que la demande ne soit envoyée au serveur. Cela nous permet d'ajouter un écouteur d'événement qui nous permet de placer diverses validations sur le formulaire. Enfin, le formulaire est prêt avec une combinaison de code HTML et JavaScript.
Rassemblons et utilisons tout cela pour créer un Formulaire de connexion et Formulaire d'inscription et utilisez les deux.
Formulaire de connexion
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'; } La sortie du code ci-dessus en cliquant sur le bouton de connexion est présentée ci-dessous :
Formulaire d'inscription
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)>