W tym samouczku nauczymy się, omówimy i zrozumiemy formularz JavaScript. Zobaczymy także implementację formularza JavaScript do różnych celów.
Tutaj nauczymy się metody dostępu do formularza, pobierania elementów jako wartości formularza JavaScript i wysyłania formularza.
Wprowadzenie do formularzy
Formularze to podstawy języka HTML. Do utworzenia pliku używamy elementu formularza HTML JavaScript formularz. Do utworzenia formularza możemy wykorzystać następujący przykładowy kod:
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
W kodzie:
- Znacznik nazwy formularza służy do zdefiniowania nazwy formularza. Nazwa formularza to „Formularz_logowania”. Ta nazwa będzie odwoływana w formularzu JavaScript.
- Znacznik akcji definiuje akcję, a przeglądarka zajmie się formularzem po jego przesłaniu. Tutaj nie podjęliśmy żadnych działań.
- Metodą podjęcia działań może być albo post Lub Dostawać , który jest używany, gdy formularz ma zostać przesłany na serwer. Obydwa typy metod mają swoje własne właściwości i zasady.
- Znacznik typu input definiuje typ danych wejściowych, jakie chcemy utworzyć w naszym formularzu. Tutaj użyliśmy typu wejściowego jako „tekst”, co oznacza, że w polu tekstowym będziemy wprowadzać wartości jako tekst.
- Net, przyjęliśmy typ wejściowy jako „hasło”, a wartością wejściową będzie hasło.
- Następnie przyjęliśmy typ wejściowy jako „przycisk”, którego kliknięcie powoduje otrzymanie wartości formularza i wyświetlenie go.
Oprócz akcji i metod istnieją także następujące przydatne metody udostępniane przez element formularza HTML
Formularze referencyjne
Teraz stworzyliśmy element formularza przy użyciu HTML, ale musimy także zapewnić jego łączność z JavaScript. W tym celu używamy getElementById () metoda odwołująca się do elementu formularza HTML do kodu JavaScript.
Składnia użycia getElementById() metoda jest następująca:
let form = document.getElementById('subscribe');
Używając identyfikatora, możemy utworzyć odniesienie.
Przesyłanie formularza
Następnie musimy przesłać formularz podając jego wartość, do czego używamy metody onSubmit() metoda. Generalnie do przesłania używamy przycisku przesyłania, który przesyła wartość wpisaną w formularzu.
Składnia metody Submit() jest następująca:
Kiedy wysyłamy formularz, akcja jest podejmowana tuż przed wysłaniem żądania do serwera. Pozwala nam dodać detektor zdarzeń, który umożliwia umieszczenie na formularzu różnych walidacji. Na koniec formularz jest gotowy z kombinacją kodu HTML i JavaScript.
Zbierzmy i wykorzystajmy to wszystko, aby stworzyć Forma loginu I Formularz rejestracji i użyj obu.
Forma loginu
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'; } Wynik powyższego kodu po kliknięciu przycisku Zaloguj pokazano poniżej:
Formularz rejestracji
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)>