HTMLデザインフォーム

サイト訪問者からデータを収集する場合は、HTMLフォームが必要です。たとえば、ユーザー登録時に、名前、メールアドレス、クレジットカードなどの情報を収集したい場合。

フォームはサイト訪問者から入力を受け取り、CGI、ASPスクリプト、PHPスクリプトなどのバックエンドアプリケーションに送信します。バックエンドアプリケーションは、内部で定義されたビジネスロジックに基づいて、渡されたデータに対して必要な処理を実行します。アプリケーション。

タグはHTMLでフォームを作成するために使用され、input、textareaなどのさまざまなフォーム要素が含まれています-

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

フォームを作成するには、テキスト、パスワード、生年月日用のフィールド、電話、メール、ボタンなどのフィールドを追加する必要があります。これらはすべて、要素-

で追加できます。

Sr.No	タイプと説明
1	テキスト名目上改行のない自由形式のテキストフィールド。
2	パスワード機密情報用の自由形式のテキストフィールド。名目上は改行がありません。
3	チェックボックス事前定義されたリストからの0個以上の値のセット。
4	ラジオ列挙値。
5	送信ボタンの無料フォームは、フォームの送信を開始します。
6	ファイル MIMEタイプとオプションでファイル名を持つ任意のファイル。
7	画像特定の画像のサイズを基準にした座標で、最後に選択した値である必要があり、フォームの送信を開始するという追加のセマンティクスがあります。
8	非表示通常はユーザーに表示されない任意の文字列。
9	選択無線タイプによく似た列挙値。
10	textarea 名目上改行制限のない自由形式のテキストフィールド。
11	ボタンボタンに関連する任意のイベントを開始できるボタンの自由形式。

ただし、HTML5では要素-

にさらに多くのオプションが導入されました

Sr.No	タイプと説明
1	日時タイムゾーンがUTCに設定されたISO8601に従ってエンコードされた日付と時刻（年、月、日、時、分、秒、小数部）。
2	datetime-local ISO 8601に従ってエンコードされた日付と時刻（年、月、日、時、分、秒、小数部）。タイムゾーン情報はありません。
3	日付 ISO 8601に従ってエンコードされた日付（年、月、日）。
4	月 ISO8601に従ってエンコードされた年と月で構成される日付。
5	週 ISO8601に従ってエンコードされた年と週の番号で構成される日付。
6	時間 ISO 8601に従ってエンコードされた時間（時、分、秒、小数秒）。
7	番号数値のみ受け付けます。 step属性は精度を指定し、デフォルトは1です。
8	範囲範囲タイプは、数値の範囲からの値を含む必要がある入力フィールドに使用されます。
9	メール電子メールの値のみを受け入れます。このタイプは、電子メールアドレスを含める必要がある入力フィールドに使用されます。単純なテキストを送信しようとすると、[email protected]形式の電子メールアドレスのみを入力するように強制されます。
10	url URL値のみを受け入れます。このタイプは、URLアドレスを含む必要がある入力フィールドに使用されます。単純なテキストを送信しようとすると、http：//www.example.com形式またはhttps://example.com形式のいずれかでURLアドレスのみを入力するように強制されます。

例

フォームを作成する例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

出力

これにより、次の出力が生成されます-

HTMLデザインフォーム

例

ここで、フィールドの1つをチェックボックスとして使用してフォームを作成する別の例を示します-

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

これにより、次の出力が生成されます-

HTMLデザインフォーム

HTML<メタ>タグ

HTMLDOMアンカーオブジェクト

HTMLDOM入力範囲フォームプロパティ
HTML DOM入力範囲フォームプロパティは、指定された入力範囲スライダーを含むフォーム参照を返すために使用されます。範囲スライダーがフォームの外にある場合は、単にNULLを返します。このプロパティは読み取り専用です。構文以下は、入力範囲フォームプロパティの構文です。 rangeObject.form 例入力範囲フォームプロパティの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Input range form Property</h1> <form id="FORM
HTMLDOM入力リセットフォームプロパティ
HTML DOM入力リセットフォームプロパティは、指定されたリセットボタンを含むフォーム参照を返すために使用されます。リセットボタンがフォームの外にある場合は、単にNULLを返します。このプロパティは読み取り専用です。構文以下は、入力リセットフォームプロパティの構文です。 resetObject.form 例入力リセットフォームプロパティの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Input reset form Property</h1> <form id="