Šajā apmācībā mēs uzzināsim, apspriedīsim un sapratīsim JavaScript veidlapu. Mēs redzēsim arī JavaScript formas ieviešanu dažādiem mērķiem.

Šeit mēs uzzināsim, kā piekļūt veidlapai, iegūt elementus kā JavaScript veidlapas vērtību un iesniegt veidlapu.

Ievads veidlapās

Veidlapas ir HTML pamati. Mēs izmantojam HTML formas elementu, lai izveidotu JavaScript formā. Veidlapas izveidei varam izmantot šādu koda paraugu:

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

Kodā:

• Veidlapas nosaukuma atzīme tiek izmantota, lai definētu veidlapas nosaukumu. Veidlapas nosaukums šeit ir 'Login_form'. Šis nosaukums tiks norādīts JavaScript formā.
• Darbības tags nosaka darbību, un pārlūkprogramma veiks, lai apstrādātu veidlapu, kad tā tiks iesniegta. Šeit mēs neesam veikuši nekādas darbības.
• Darbības metode var būt jebkura pastu vai gūt , ko izmanto, kad veidlapa ir jāiesniedz serverim. Abiem metožu veidiem ir savas īpašības un noteikumi.
• Ievades tipa tags nosaka ievades veidu, ko mēs vēlamies izveidot savā veidlapā. Šeit mēs esam izmantojuši ievades veidu kā 'tekstu', kas nozīmē, ka mēs tekstlodziņā ievadīsim vērtības kā tekstu.
• Net, mēs esam izvēlējušies ievades veidu kā 'paroli', un ievades vērtība būs parole.
• Tālāk mēs esam izvēlējušies ievades veidu kā 'pogu', kur, noklikšķinot, mēs iegūstam formas vērtību un tiek parādīta.

Papildus darbībai un metodēm ir arī šādas noderīgas metodes, kuras nodrošina HTML veidlapas elements

Iesniegt ():Veidlapas iesniegšanai tiek izmantota metode.atiestatīt ():Metode tiek izmantota, lai atiestatītu formas vērtības.

Atsauces veidlapas

Tagad esam izveidojuši veidlapas elementu, izmantojot HTML, taču mums ir arī jāveido tā savienojamība ar JavaScript. Šim nolūkam mēs izmantojam getElementById () metode, kas atsaucas uz html formas elementu uz JavaScript kodu.

Izmantošanas sintakse getElementById() metode ir šāda:

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

Izmantojot ID, mēs varam veikt atsauci.

Veidlapas iesniegšana

Pēc tam mums ir jāiesniedz veidlapa, norādot tās vērtību, kurai mēs izmantojam onSubmit() metodi. Parasti, lai iesniegtu, mēs izmantojam iesniegšanas pogu, kas iesniedz veidlapā ievadīto vērtību.

Metodes submit() sintakse ir šāda:

Kad mēs iesniedzam veidlapu, darbība tiek veikta tieši pirms pieprasījuma nosūtīšanas uz serveri. Tas ļauj mums pievienot notikumu uztvērēju, kas ļauj veidlapā ievietot dažādas validācijas. Visbeidzot, veidlapa tiek sagatavota, izmantojot HTML un JavaScript koda kombināciju.

Apkoposim un izmantosim visus šos, lai izveidotu a Pieteikšanās forma un Pieteikšanās forma un izmantojiet abus.

Pieteikšanās forma

 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;; } 

Iepriekš minētā koda izvade, noklikšķinot uz pogas Pieteikties, ir parādīta zemāk:

Pieteikšanās veidlapa

 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)>