Tässä opetusohjelmassa opimme, keskustelemme ja ymmärrämme JavaScript-lomakkeen. Näemme myös JavaScript-lomakkeen toteutuksen eri tarkoituksiin.

Täällä opimme lomakkeen käyttötavan, elementtien saamisen JavaScript-lomakkeen arvoiksi ja lomakkeen lähettämisen.

Johdatus lomakkeisiin

Lomakkeet ovat HTML:n perusasiat. Käytämme HTML-lomakeelementtiä luomiseen JavaScript muodossa. Lomakkeen luomiseen voimme käyttää seuraavaa esimerkkikoodia:

 Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br> 

Koodissa:

• Lomakkeen nimilappua käytetään määrittämään lomakkeen nimi. Lomakkeen nimi tässä on 'Login_form'. Tähän nimeen viitataan JavaScript-lomakkeessa.
• Toimintotunniste määrittää toiminnon, ja selain ryhtyy käsittelemään lomaketta, kun se lähetetään. Tässä emme ole ryhtyneet toimiin.
• Toimintatapa voi olla jompikumpi lähettää tai saada , jota käytetään, kun lomake lähetetään palvelimelle. Molemmilla menetelmillä on omat ominaisuutensa ja säännöt.
• Input type -tunniste määrittää, minkä tyyppisiä syötteitä haluamme luoda lomakkeeseen. Tässä olemme käyttäneet syöttötyyppiä 'tekstina', mikä tarkoittaa, että syötämme arvot tekstinä tekstilaatikkoon.
• Net, olemme ottaneet syöttötyypin 'salasanaksi' ja syöttöarvoksi tulee salasana.
• Seuraavaksi olemme ottaneet syöttötyypin 'painikkeeksi', jota napsauttamalla saamme lomakkeen arvon ja se näytetään.

Toiminnan ja menetelmien lisäksi on olemassa myös seuraavat hyödylliset menetelmät, jotka HTML-lomakeelementti tarjoaa

Lähetä ():Menetelmää käytetään lomakkeen lähettämiseen.nollaa ():Menetelmää käytetään lomakearvojen nollaukseen.

Viittauslomakkeet

Nyt olemme luoneet lomakeelementin HTML:llä, mutta meidän on myös yhdistettävä se JavaScriptiin. Tätä varten käytämme getElementById () menetelmä, joka viittaa html-lomakeelementtiin JavaScript-koodiin.

Käytön syntaksi getElementById() menetelmä on seuraava:

 let form = document.getElementById('subscribe'); 

Id:n avulla voimme tehdä viittauksen.

Lomakkeen lähettäminen

Seuraavaksi meidän on lähetettävä lomake ilmoittamalla sen arvo, jota varten käytämme onSubmit() menetelmä. Yleensä käytämme lähettämiseen lähetyspainiketta, joka lähettää lomakkeelle syötetyn arvon.

Submit()-menetelmän syntaksi on seuraava:

Kun lähetämme lomakkeen, toiminto suoritetaan juuri ennen pyynnön lähettämistä palvelimelle. Sen avulla voimme lisätä tapahtumakuuntelijan, jonka avulla voimme sijoittaa lomakkeeseen erilaisia ​​vahvistuksia. Lopuksi lomake valmistuu HTML- ja JavaScript-koodin yhdistelmällä.

Kerätään ja käytetään kaikkia näitä luomaan a Sisäänkirjautumislomake ja Ilmoittautumislomake ja käytä molempia.

sisäänkirjautumislomake

 Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br> function submit_form(){ alert(&apos;Login successfully&apos;); } function create(){ window.location=&apos;signup.html&apos;; } 

Yllä olevan koodin tulos, kun napsautat Kirjaudu-painiketta, näkyy alla:

Ilmoittautumislomake

 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(&apos;n1&apos;).value; var e=document.getElementById(&apos;e1&apos;).value; var p=document.getElementById(&apos;p1&apos;).value; var cp=document.getElementById(&apos;p2&apos;).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==&apos;&apos;||e==&apos;&apos;||p==&apos;&apos;||cp==&apos;&apos;){ alert(&apos;Enter each details correctly&apos;); } else if(!letters.test(n)) { alert(&apos;Name is incorrect must contain alphabets only&apos;); } else if (!email_val.test(e)) { alert(&apos;Invalid email format please enter valid email id&apos;); } else if(p!=cp) { alert(&apos;Passwords not matching&apos;); } else if(document.getElementById(&apos;p1&apos;).value.length &gt; 12) { alert(&apos;Password maximum length is 12&apos;); } else if(document.getElementById(&apos;p1&apos;).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)>