Šioje pamokoje išmoksime, aptarsime ir suprasime JavaScript formą. Taip pat pamatysime „JavaScript“ formos įgyvendinimą įvairiems tikslams.
Čia sužinosime, kaip pasiekti formą, gauti elementus kaip JavaScript formos vertę ir pateikti formą.
Įvadas į formas
Formos yra HTML pagrindai. Norėdami sukurti, naudojame HTML formos elementą JavaScript forma. Kurdami formą galime naudoti šį pavyzdinį kodą:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
Kode:
- Formos pavadinimo žyma naudojama formos pavadinimui apibrėžti. Formos pavadinimas čia yra „Prisijungimo_forma“. Šis pavadinimas bus nurodytas „JavaScript“ formoje.
- Veiksmo žyma apibrėžia veiksmą, o naršyklė imsis apdoroti formą, kai ji bus pateikta. Čia mes nesiėmėme jokių veiksmų.
- Metodas imtis veiksmų gali būti bet kuris paštu arba gauti , kuris naudojamas, kai forma turi būti pateikta serveriui. Abiejų tipų metodai turi savo savybes ir taisykles.
- Įvesties tipo žyma apibrėžia įvesties tipą, kurį norime sukurti savo formoje. Čia mes naudojome įvesties tipą kaip „tekstą“, o tai reiškia, kad teksto laukelyje įvesime reikšmes kaip tekstą.
- Net, mes pasirinkome įvesties tipą kaip „slaptažodį“, o įvesties reikšmė bus slaptažodis.
- Tada įvesties tipą pasirinkome kaip „mygtuką“, kurį spustelėję gauname formos reikšmę ir bus rodoma.
Be veiksmo ir metodų, yra ir toliau išvardytų naudingų metodų, kuriuos teikia HTML formos elementas
Nuorodų formos
Dabar mes sukūrėme formos elementą naudodami HTML, bet taip pat turime prijungti jį prie „JavaScript“. Tam mes naudojame getElementById () metodas, kuris nurodo html formos elementą į JavaScript kodą.
Naudojimo sintaksė getElementById() metodas yra toks:
let form = document.getElementById('subscribe');
Naudodami ID, galime padaryti nuorodą.
Formos pateikimas
Tada turime pateikti formą, pateikdami jos vertę, kuriai mes naudojame onSubmit () metodas. Paprastai, norėdami pateikti, naudojame pateikimo mygtuką, kuris pateikia formoje įvestą reikšmę.
Metodo submit() sintaksė yra tokia:
Kai pateikiame formą, veiksmas atliekamas prieš pat užklausos išsiuntimą serveriui. Tai leidžia mums pridėti įvykių klausytoją, kuris leidžia formoje pateikti įvairius patvirtinimus. Galiausiai forma paruošiama naudojant HTML ir JavaScript kodų derinį.
Surinkime ir panaudokime visa tai kurdami a Prisijungimo forma ir Prisiregistravimo forma ir naudokite abu.
prisijungimo forma
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'; } Aukščiau pateikto kodo išvestis spustelėjus mygtuką Prisijungti rodoma žemiau:
Registracijos forma
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)>