В този урок ще научим, обсъдим и разберем формата на JavaScript. Ще видим също и прилагането на JavaScript формата за различни цели.
Тук ще научим метода за достъп до формуляра, получаване на елементи като стойност на JavaScript формуляра и изпращане на формуляра.
Въведение във формулярите
Формулярите са основите на HTML. Използваме HTML елемент на формуляр, за да създадем JavaScript форма. За създаване на формуляр можем да използваме следния примерен код:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
В кода:
- Етикетът с име на формуляр се използва за определяне на името на формуляра. Името на формуляра тук е 'Login_form'. Това име ще бъде посочено във формата на JavaScript.
- Тагът за действие дефинира действието и браузърът ще се заеме с формуляра, когато бъде изпратен. Тук не сме предприели никакви действия.
- Методът за предприемане на действие може да бъде един от двата пост или получавам , който се използва, когато формулярът трябва да бъде изпратен на сървъра. И двата вида методи имат свои собствени свойства и правила.
- Тагът за тип вход дефинира типа входове, които искаме да създадем в нашата форма. Тук сме използвали тип въвеждане като „текст“, което означава, че ще въвеждаме стойности като текст в текстовото поле.
- Net, взехме тип въвеждане като „парола“ и входната стойност ще бъде парола.
- След това сме взели тип въвеждане като „бутон“, където при щракване получаваме стойността на формуляра и се показва.
Освен действието и методите, има и следните полезни методи, които се предоставят от HTML Form Element
Референтни форми
Сега създадохме елемента на формуляра с помощта на HTML, но също така трябва да направим връзката му с JavaScript. За това използваме getElementById () метод, който препраща елемента на html формуляра към JavaScript кода.
Синтаксисът за използване на getElementById() метод е както следва:
let form = document.getElementById('subscribe');
Използвайки идентификатора, можем да направим препратката.
Изпращане на формуляра
След това трябва да изпратим формуляра, като изпратим неговата стойност, за която използваме onSubmit() метод. Обикновено, за да изпратим, използваме бутон за изпращане, който изпраща стойността, въведена във формуляра.
Синтаксисът на метода submit() е както следва:
Когато изпратим формуляра, действието се предприема точно преди заявката да бъде изпратена до сървъра. Това ни позволява да добавим слушател на събития, който ни позволява да поставяме различни валидации във формуляра. Накрая формулярът се подготвя с комбинация от HTML и JavaScript код.
Нека съберем и използваме всичко това, за да създадем Форма за влизане и Форма за регистрация и използвайте и двете.
форма за влизане
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'; } Резултатът от горния код при щракване върху бутона Вход е показан по-долу:
Формуляр за регистрация
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)>