HTML-フォーム

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

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

テキストフィールド、テキストエリアフィールド、ドロップダウンメニュー、ラジオボタン、チェックボックスなど、さまざまなフォーム要素を使用できます。

HTML <form> タグはHTMLフォームの作成に使用され、次の構文があります-

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

フォーム属性

一般的な属性とは別に、以下は最も頻繁に使用されるフォーム属性のリストです-

シニア番号	属性と説明
1	action 渡されたデータを処理する準備ができたバックエンドスクリプト。
2	method データのアップロードに使用する方法。最も頻繁に使用されるのは、GETメソッドとPOSTメソッドです。
3	target スクリプトの結果が表示されるターゲットウィンドウまたはフレームを指定します。_blank、_self、_parentなどの値を取ります。
4	enctype enctype属性を使用して、ブラウザがデータをサーバーに送信する前にデータをエンコードする方法を指定できます。可能な値は次のとおりです。 application/x-www-form-urlencoded −これは、ほとんどのフォームが単純なシナリオで使用する標準的な方法です。 mutlipart/form-data −これは、画像、Wordファイルなどのファイルの形式でバイナリデータをアップロードする場合に使用されます。

Note−フォームデータのアップロードの仕組みの詳細については、PerlとCGIを参照してください。

HTMLフォームコントロール

HTMLフォームを使用してデータを収集するために使用できるさまざまなタイプのフォームコントロールがあります-

テキスト入力コントロール
チェックボックスコントロール
ラジオボックスコントロール
ボックスコントロールの選択
ファイル選択ボックス
隠しコントロール
クリック可能なボタン
送信およびリセットボタン

テキスト入力コントロール

フォームで使用されるテキスト入力には3つのタイプがあります-

Single-line text input controls−このコントロールは、検索ボックスや名前など、1行のユーザー入力のみを必要とするアイテムに使用されます。HTMLを使用して作成されます<input> 鬼ごっこ。
Password input controls−これも1行のテキスト入力ですが、ユーザーが入力するとすぐに文字がマスクされます。また、HTMl <input>タグを使用して作成されます。
Multi-line text input controls−これは、ユーザーが1文より長い可能性のある詳細を提供する必要がある場合に使用されます。複数行の入力コントロールは、HTMLを使用して作成されます<textarea> 鬼ごっこ。

単一行のテキスト入力コントロール

このコントロールは、検索ボックスや名前など、1行のユーザー入力のみを必要とするアイテムに使用されます。これらは、HTMLの<input>タグを使用して作成されます。

例

これは、姓名を取得するために使用される1行のテキスト入力の基本的な例です。

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

属性

以下は、テキストフィールドを作成するための<input>タグの属性のリストです。

シニア番号	属性と説明
1	type 入力コントロールのタイプを示し、テキスト入力コントロールの場合は次のように設定されます。 text。
2	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
3	value これは、コントロール内で初期値を提供するために使用できます。
4	size テキスト入力コントロールの幅を文字数で指定できます。
5	maxlength ユーザーがテキストボックスに入力できる最大文字数を指定できます。

パスワード入力コントロール

これも1行のテキスト入力ですが、ユーザーが入力するとすぐに文字がマスクされます。これらもHTMLの<input>タグを使用して作成されますが、type属性はに設定されていますpassword。

例

これは、ユーザーパスワードを取得するために使用される単一行のパスワード入力の基本的な例です-

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

属性

以下は、パスワードフィールドを作成するための<input>タグの属性のリストです。

シニア番号	属性と説明
1	type 入力制御のタイプを示し、パスワード入力制御の場合は次のように設定されます。 password。
2	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
3	value これは、コントロール内で初期値を提供するために使用できます。
4	size テキスト入力コントロールの幅を文字数で指定できます。
5	maxlength ユーザーがテキストボックスに入力できる最大文字数を指定できます。

複数行のテキスト入力コントロール

これは、ユーザーが1文より長い可能性のある詳細を提供する必要がある場合に使用されます。複数行の入力コントロールは、HTMLの<textarea>タグを使用して作成されます。

例

これは、アイテムの説明を取得するために使用される複数行のテキスト入力の基本的な例です。

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

属性

以下は、<textarea>タグの属性のリストです。

シニア番号	属性と説明
1	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
2	rows テキストエリアボックスの行数を示します。
3	cols テキストエリアボックスの列数を示します

チェックボックス制御

チェックボックスは、複数のオプションを選択する必要がある場合に使用されます。これらもHTML <input>タグを使用して作成されますが、type属性はに設定されますcheckbox.。

例

これは、2つのチェックボックスがあるフォームのHTMLコードの例です-

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

属性

以下は、<checkbox>タグの属性のリストです。

シニア番号	属性と説明
1	type 入力コントロールのタイプを示し、チェックボックス入力コントロールの場合は次のように設定されます。 checkbox.。
2	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
3	value チェックボックスが選択されている場合に使用される値。
4	checked デフォルトで選択する場合は、チェックに設定します。

ラジオボタンコントロール

ラジオボタンは、多くのオプションのうち、1つのオプションを選択するだけでよい場合に使用されます。これらもHTML <input>タグを使用して作成されますが、type属性はに設定されますradio。

例

これは、2つのラジオボタンがあるフォームのHTMLコードの例です-

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

これにより、次の結果が生成されます-

属性

以下は、ラジオボタンの属性のリストです。

シニア番号	属性と説明
1	type 入力コントロールのタイプを示し、チェックボックス入力コントロールの場合は無線に設定されます。
2	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
3	value ラジオボックスが選択されている場合に使用される値。
4	checked デフォルトで選択する場合は、チェックに設定します。

ボックスコントロールを選択

ドロップダウンボックスとも呼ばれる選択ボックス。ドロップダウンリストの形式でさまざまなオプションを一覧表示するオプションを提供し、そこからユーザーは1つ以上のオプションを選択できます。

例

ドロップダウンボックスが1つあるフォームのHTMLコードの例を次に示します。

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

属性

以下は、<select>タグの重要な属性のリストです-

シニア番号	属性と説明
1	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
2	size これは、スクロールリストボックスを表示するために使用できます。
3	multiple 「複数」に設定すると、ユーザーはメニューから複数の項目を選択できます。

以下は、<option>タグの重要な属性のリストです-

シニア番号	属性と説明
1	value 選択ボックスボックスのオプションが選択されている場合に使用される値。
2	selected このオプションは、ページの読み込み時に最初に選択された値である必要があることを指定します。
3	label オプションにラベルを付ける別の方法

ファイルアップロードボックス

ユーザーがWebサイトにファイルをアップロードできるようにする場合は、ファイル選択ボックスとも呼ばれるファイルアップロードボックスを使用する必要があります。これも<input>要素を使用して作成されますが、type属性はに設定されますfile。

例

これは、1つのファイルアップロードボックスを持つフォームのHTMLコードの例です-

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

属性

以下は、ファイルアップロードボックスの重要な属性のリストです-

シニア番号	属性と説明
1	name 認識されて値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。
2	accept サーバーが受け入れるファイルのタイプを指定します。

ボタンコントロール

HTMLには、クリック可能なボタンを作成するためのさまざまな方法があります。type属性をに設定することにより、<input>タグを使用してクリック可能なボタンを作成することもできます。button。type属性は、次の値を取ることができます-

シニア番号	タイプと説明
1	submit これにより、フォームを自動的に送信するボタンが作成されます。
2	reset これにより、フォームコントロールを初期値に自動的にリセットするボタンが作成されます。
3	button これにより、ユーザーがそのボタンをクリックしたときにクライアント側のスクリプトをトリガーするために使用されるボタンが作成されます。
4	image これによりクリック可能なボタンが作成されますが、ボタンの背景として画像を使用できます。

例

これは、3種類のボタンを持つフォームのHTMLコードの例です-

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-

隠しフォームコントロール

非表示のフォームコントロールは、後でサーバーにプッシュできるページ内のデータを非表示にするために使用されます。このコントロールはコード内に隠れており、実際のページには表示されません。たとえば、現在のページ番号を維持するために、次の非表示のフォームが使用されています。ユーザーが次のページをクリックすると、非表示のコントロールの値がWebサーバーに送信され、渡された現在のページに基づいて、次に表示されるページが決定されます。

例

これは、隠しコントロールの使用法を示すHTMLコードの例です-

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

これにより、次の結果が生成されます-