HTMLのフォームタグ
この記事では、HTMLのフォームタグについて学習します。これは、入力フィールドを囲むために使用されるタグであり、入力操作を通じて人々がサーバーにデータを送信するのに役立ちます。
ほとんどのウェブサイトには、登録、ログイン、連絡、注文、カート支払いの機能があります…これらの機能はすべてformタグを使用する必要があります。
1. HTMLのフォームタグは何に使用されますか？
formタグは、ユーザーが入力するHTMLフォームを作成し、フォーム送信アクションを作成してデータをサーバーに送信します。フォーム内には、次の要素を含めることができます。
- <入力>
- <textarea>
- <ボタン>
各インターフェイスに応じて、適切なカードを選択します。 HTML5では、以下の例に示すように、多くの入力タグが提供されますが、それらはすべてフォームタグの子タグ要素になります（フォームタグ構造は入力構造全体を包含します）。
フォームタグを書き込むための構文：
<form method="" action=""></form>その中で：
- action-フォームがデータを送信するパス。
- method -POST、GETなどのデータを送信するメソッド。
htmlのformタグには、style、id、classなどの基本的な属性があります。ただし、idまたはクラスは主にフォームタグのスタイルを設定するために使用されます。フォームの2つの最も重要な属性は、アクションとメソッドです。
つまり、クライアント側からサーバーにデータを送信する必要がある場合は、POSTまたはGETメソッドを使用して、フォームタグを入力タグと組み合わせて使用してデータを入力する必要があります。
2.HTMLでformタグを使用する方法
例： formタグを使用してデータ入力インターフェイスを作成します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> </head> <body> <form method="GET" action=""> <div> <label for="inputvanban">text</label> <input id="inputvanban" name="vanban" type="text" placeholder="nhap van ban vao" required /> </div> <div> input text regex <input type="text" name="email" placeholder="nhap email vao" pattern="([a-z0-9_.-]+)@([da-z.-]+).([az.]{2,6})" required /> </div> <div> input number <input type="number" /> </div> <div> input link <input type="url" autofocus /> </div> <div> input email <input type="email" required /> </div> <div> input range <input type="range" min="0" max="100" /> </div> <div> input date <input name="ngaythang" type="date" min="2022-03-06"/> </div> <div> input date <input type="week"/> </div> <div> input month <input type="month"/> </div> <div> input time <input type="time"/> </div> <div> input date time <input type="datetime-local"/> </div> <div> input date time <input type="color"/> </div> <h4>Nhap lua chon radio</h4> <input id="opt1" name="monhoc" type="radio" value="html"/> <label for="opt1">html</label> <input id="opt2" name="monhoc" type="radio" value="css"/> <label for="opt2">css</label> <input id="opt3" name="monhoc" type="radio" value="js"/> <label for="opt1">js</label> <h4>Check box</h4> <input type="checkbox" value="fb" name="channel" /> <label for="opt1">facebook</label> <input type="checkbox" value="inst" name="channel" /> <label for="opt1">insta</label> <input type="checkbox" value="utb" name="channel" /> <label for="opt1">youtube</label> <input type="checkbox" value="twt" name="channel" /> <label for="opt1">twitter</label> <textarea name="vanbannhieudong">sdfsdfsdfsdfsdf sdfsdfsdfsdff </textarea> <input type="submit" value="gửi dữ liệu" /> </form> <script> document.addEventListener("keyup", function(e){ var data = e.target.value; console.log(data); }); document.querySelector('input[type=range]').addEventListener("change",function(e){ var data = e.target.value; console.log(data); }); </script> </body> </html> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
