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
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('Login successfully'); } function create(){ window.location='signup.html'; } 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('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)>