logo

TechCodeview

ЈаваСцрипт образац

У овом водичу ћемо научити, дискутовати и разумети ЈаваСцрипт форму. Такође ћемо видети имплементацију ЈаваСцрипт обрасца за различите сврхе.

Овде ћемо научити метод за приступ обрасцу, добијање елемената као вредности ЈаваСцрипт обрасца и слање обрасца.

Увод у форме

Обрасци су основе ХТМЛ-а. Користимо ХТМЛ елемент обрасца да бисмо креирали ЈаваСцрипт форму. За креирање обрасца можемо користити следећи пример кода:

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

у коду:

  • Ознака имена обрасца се користи за дефинисање имена обрасца. Назив обрасца овде је 'Форм_пријаве'. Ово име ће бити референцирано у ЈаваСцрипт обрасцу.
  • Ознака акције дефинише радњу, а претраживач ће предузети да се позабави обрасцем када се пошаље. Ево, нисмо ништа предузели.
  • Метод за предузимање акције може бити било који пошта или добити , који се користи када образац треба да се пошаље серверу. Обе врсте метода имају своја својства и правила.
  • Ознака типа уноса дефинише тип улаза које желимо да креирамо у нашем обрасцу. Овде смо користили тип уноса као 'текст', што значи да ћемо уносити вредности као текст у оквир за текст.
  • Нет, узели смо тип уноса као 'пассворд' и улазна вредност ће бити лозинка.
  • Затим смо узели тип уноса као 'дугме' где кликом, добијамо вредност обрасца и бићемо приказани.

Осим акције и метода, постоје и следеће корисне методе које обезбеђује ХТМЛ елемент обрасца

    прихвати ():Метод се користи за подношење обрасца.ресетовати ():Метода се користи за ресетовање вредности обрасца.

Референтни облици

Сада смо креирали елемент обрасца користећи ХТМЛ, али такође морамо да успоставимо његову повезаност са ЈаваСцрипт-ом. За ово користимо гетЕлементБиИд () метод који упућује на хтмл елемент обрасца на ЈаваСцрипт код.

Синтакса коришћења гетЕлементБиИд() метод је следећи:

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

Користећи Ид, можемо направити референцу.

Подношење обрасца

Затим треба да пошаљемо образац тако што ћемо доставити његову вредност, за шта користимо онСубмит() методом. Генерално, да бисмо послали, користимо дугме за слање које шаље вредност унету у образац.

Синтакса методе субмит() је следећа:

Када пошаљемо образац, радња се предузима непосредно пре него што се захтев пошаље серверу. Омогућава нам да додамо слушалац догађаја који нам омогућава да поставимо различите валидације на образац. Коначно, образац се припрема комбинацијом ХТМЛ и ЈаваСцрипт кода.

Хајде да прикупимо и употребимо све ово да направимо а Образац за пријаву и Образац за регистрацију и користите обоје.

образац за пријаву

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

Излаз горњег кода након клика на дугме Пријава је приказан испод:

ЈаваСцрипт образац

Образац за регистрацију

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