logo

TechCodeview

Форма JavaScript

У цьому підручнику ми вивчимо, обговоримо та зрозуміємо форму JavaScript. Ми також побачимо реалізацію форми JavaScript для різних цілей.

Тут ми навчимося методу доступу до форми, отримання елементів як значення форми JavaScript і надсилання форми.

Вступ до форм

Форми є основами HTML. Ми використовуємо елемент форми HTML для створення JavaScript форму. Для створення форми ми можемо використати такий приклад коду:

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

У коді:

  • Тег імені форми використовується для визначення назви форми. Назва форми тут — «Форма_для входу». На це ім’я буде посилання у формі JavaScript.
  • Тег дії визначає дію, і браузер обробить форму, коли вона надсилається. Тут ми не вжили жодних заходів.
  • Спосіб вжиття заходів може бути будь-яким пост або отримати , який використовується, коли форму потрібно надіслати на сервер. Обидва типи методів мають свої властивості та правила.
  • Тег типу введення визначає тип вводів, які ми хочемо створити у нашій формі. Тут ми використали тип введення як «текст», що означає, що ми будемо вводити значення як текст у текстове поле.
  • Net, ми взяли тип введення як «пароль», а значення введення буде паролем.
  • Далі ми взяли тип введення як «кнопку», натиснувши на яку ми отримуємо значення форми та відображаємо його.

Крім дій і методів, існують такі корисні методи, які також надаються елементом форми HTML

    подати ():Метод використовується для подання форми.скинути ():Метод використовується для скидання значень форми.

Довідкові форми

Тепер ми створили елемент форми за допомогою HTML, але нам також потрібно підключити його до JavaScript. Для цього використовуємо getElementById () метод, який посилається на елемент форми html на код JavaScript.

Синтаксис використання getElementById() метод полягає в наступному:

 let form = document.getElementById(&apos;subscribe&apos;);

Використовуючи ідентифікатор, ми можемо зробити посилання.

Подання форми

Далі нам потрібно надіслати форму, надіславши її значення, для якого ми використовуємо onSubmit() метод. Зазвичай для надсилання ми використовуємо кнопку надсилання, яка надсилає значення, введене у форму.

Синтаксис методу submit() такий:

Коли ми надсилаємо форму, дія виконується безпосередньо перед надсиланням запиту на сервер. Це дозволяє нам додати слухач подій, який дає змогу розміщувати різні перевірки у формі. Нарешті, форма готується з поєднанням коду HTML і JavaScript.

Давайте зберемо та використаємо все це, щоб створити a Форма входу і Форма реєстрації і використовувати обидва.

Форма входу

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

Результат коду вище після натискання кнопки «Вхід» показано нижче:

Форма JavaScript

Форма реєстрації

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