このチュートリアルでは、JavaScript フォームについて学び、議論し、理解します。さまざまな目的のための JavaScript フォームの実装についても説明します。
ここでは、フォームにアクセスし、JavaScript フォームの値として要素を取得し、フォームを送信する方法を学びます。
フォームの概要
フォームは HTML の基本です。を作成するために HTML フォーム要素を使用します。 JavaScript 形状。フォームを作成するには、次のサンプル コードを使用できます。
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
コード内:
- フォーム名タグはフォームの名前を定義するために使用されます。ここでのフォームの名前は「Login_form」です。この名前は JavaScript フォームで参照されます。
- アクション タグはアクションを定義し、フォームが送信されるとブラウザーがフォームにアクセスします。ここでは、何もアクションを起こしていません。
- アクションを実行する方法は次のいずれかです 役職 または 得る 、フォームをサーバーに送信するときに使用されます。どちらのタイプのメソッドにも、独自のプロパティとルールがあります。
- input type タグは、フォーム内に作成する入力のタイプを定義します。ここでは、入力タイプを「テキスト」として使用しています。これは、テキストボックスに値をテキストとして入力することを意味します。
- ネットでは、入力タイプを「パスワード」として取り、入力値はパスワードになります。
- 次に、入力タイプを「ボタン」として取り、クリックするとフォームの値を取得して表示します。
アクションとメソッド以外にも、HTML フォーム要素によって提供される次の便利なメソッドがあります。
フォームの参照
これで、HTML を使用してフォーム要素を作成しましたが、JavaScript への接続も行う必要があります。このために、私たちは使用します getElementById() HTML フォーム要素を JavaScript コードに参照するメソッド。
を使用する構文は、 getElementById() 方法は次のとおりです。
let form = document.getElementById('subscribe');
ID を使用して参照を作成できます。
フォームの送信
次に、値を送信してフォームを送信する必要があります。これには、 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)>