In questo tutorial impareremo, discuteremo e comprenderemo il modulo JavaScript. Vedremo anche l'implementazione del modulo JavaScript per scopi diversi.
Qui impareremo il metodo per accedere al modulo, ottenere elementi come valore del modulo JavaScript e inviare il modulo.
Introduzione ai moduli
I moduli sono le basi dell'HTML. Utilizziamo l'elemento del modulo HTML per creare il file JavaScript modulo. Per creare un modulo, possiamo utilizzare il seguente codice di esempio:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
Nel codice:
- Il tag del nome del modulo viene utilizzato per definire il nome del modulo. Il nome del modulo qui è 'Login_form'. Questo nome verrà fatto riferimento nel modulo JavaScript.
- Il tag di azione definisce l'azione e il browser impiegherà ad affrontare il modulo quando verrà inviato. Qui non abbiamo intrapreso alcuna azione.
- Il metodo per agire può essere uno dei due inviare O Ottenere , che viene utilizzato quando il modulo deve essere inviato al server. Entrambi i tipi di metodi hanno le proprie proprietà e regole.
- Il tag input type definisce il tipo di input che vogliamo creare nel nostro modulo. Qui abbiamo utilizzato il tipo di input come 'testo', il che significa che inseriremo i valori come testo nella casella di testo.
- Net, abbiamo preso il tipo di input come 'password' e il valore di input sarà password.
- Successivamente, abbiamo preso il tipo di input come 'pulsante' dove facendo clic, otteniamo il valore del modulo e viene visualizzato.
Oltre all'azione e ai metodi, ci sono anche i seguenti metodi utili forniti dall'elemento modulo HTML
Moduli di riferimento
Ora abbiamo creato l'elemento del modulo utilizzando HTML, ma dobbiamo anche connetterlo a JavaScript. Per questo usiamo getElementById () metodo che fa riferimento all'elemento del modulo html al codice JavaScript.
La sintassi dell'utilizzo di getElementById() il metodo è il seguente:
let form = document.getElementById('subscribe');
Usando l'Id, possiamo fare il riferimento.
Invio del modulo
Successivamente, dobbiamo inviare il modulo inviando il suo valore, per il quale utilizziamo il file su Invia() metodo. Generalmente, per inviare, utilizziamo un pulsante di invio che invia il valore inserito nel modulo.
La sintassi del metodo send() è la seguente:
Quando inviamo il modulo, l'azione viene eseguita subito prima che la richiesta venga inviata al server. Ci consente di aggiungere un ascoltatore di eventi che ci consente di inserire varie convalide sul modulo. Infine, il modulo viene preparato con una combinazione di codice HTML e JavaScript.
Raccogliamo e utilizziamo tutti questi per creare un Modulo di accesso E Modulo di iscrizione e usarli entrambi.
Modulo di accesso
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'; } L'output del codice precedente facendo clic sul pulsante Accedi è mostrato di seguito:
Modulo di iscrizione
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)>