Html-forms
HTML-フォーム
サイト訪問者からデータを収集する場合は、HTMLフォームが必要です。 たとえば、ユーザー登録中に、名前、メールアドレス、クレジットカードなどの情報を収集したいとします。
フォームは、サイト訪問者からの入力を受け取り、CGI、ASPスクリプト、PHPスクリプトなどのバックエンドアプリケーションに投稿します。 バックエンドアプリケーションは、アプリケーション内で定義されたビジネスロジックに基づいて、渡されたデータに対して必要な処理を実行します。
テキストフィールド、テキストエリアフィールド、ドロップダウンメニュー、ラジオボタン、チェックボックスなど、利用可能なさまざまなフォーム要素があります。
HTML <form> タグはHTMLフォームを作成するために使用され、次の構文があります-
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>フォーム属性
一般的な属性とは別に、最も頻繁に使用されるフォーム属性のリストは次のとおりです-
| Sr.No | Attribute & Description |
|---|---|
| 1 |
action 渡されたデータを処理する準備ができたバックエンドスクリプト。 |
| 2 |
method データのアップロードに使用されるメソッド。 最も頻繁に使用されるのは、GETメソッドとPOSTメソッドです。 |
| 3 |
target スクリプトの結果が表示されるターゲットウィンドウまたはフレームを指定します。 _blank、_self、_parentなどの値を取ります。 |
| 4 |
enctype enctype属性を使用して、ブラウザがデータをサーバーに送信する前にエンコードする方法を指定できます。 可能な値は-
|
注意-フォームデータのアップロードの仕組みの詳細については、リンク：/perl/perl_cgi_programming [Perl＆CGI]を参照してください。
HTMLフォームコントロール
HTMLフォームを使用してデータを収集するために使用できるフォームコントロールにはさまざまな種類があります-
- テキスト入力コントロール
- チェックボックスコントロール
- ラジオボックスコントロール
- ボックスコントロールの選択
- ファイル選択ボックス
- 非表示のコントロール
- クリック可能なボタン
- 送信ボタンとリセットボタン
テキスト入力コントロール
フォームで使用されるテキスト入力の3種類があります-
- 単一行のテキスト入力コントロール-このコントロールは、検索ボックスや名前など、ユーザー入力を1行だけ必要とするアイテムに使用されます。 HTML <input> タグを使用して作成されます。
- パスワード入力コントロール-これも単一行のテキスト入力ですが、ユーザーが入力するとすぐに文字がマスクされます。 また、HTMl <input>タグを使用して作成されます。
- 複数行のテキスト入力コントロール-これは、ユーザーが単一の文よりも長い可能性のある詳細を提供する必要がある場合に使用されます。 複数行入力コントロールは、HTML <textarea> タグを使用して作成されます。
単一行のテキスト入力コントロール
このコントロールは、検索ボックスや名前など、ユーザー入力を1行だけ必要とするアイテムに使用されます。 HTML <input>タグを使用して作成されます。
例
これは、名と姓を取るために使用される単一行のテキスト入力の基本的な例です-
<!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>タグの属性のリストです。
| Sr.No | Attribute & Description |
|---|---|
| 1 |
type 入力コントロールのタイプを示し、テキスト入力コントロールの場合は text に設定されます。 |
| 2 |
name 認識され、値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。 |
| 3 |
value これは、コントロール内の初期値を提供するために使用できます。 |
| 4 |
size テキスト入力コントロールの幅を文字で指定できます。 |
| 5 |
maxlength ユーザーがテキストボックスに入力できる最大文字数を指定できます。 |
パスワード入力コントロール
これも単一行のテキスト入力ですが、ユーザーが入力するとすぐに文字がマスクされます。 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>タグの属性のリストです。
| Sr.No | Attribute & Description |
|---|---|
| 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>タグの属性のリストです。
| Sr.No | Attribute & Description |
|---|---|
| 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>タグの属性のリストです。
| Sr.No | Attribute & Description |
|---|---|
| 1 |
type 入力コントロールのタイプを示し、チェックボックス入力コントロールの場合は* checkbox。*に設定されます。 |
| 2 |
name 認識され、値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。 |
| 3 |
value チェックボックスが選択されている場合に使用される値。 |
| 4 |
checked デフォルトで選択する場合は、_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>これは、次の結果を生成します-
属性
以下は、ラジオボタンの属性のリストです。
| Sr.No | Attribute & Description |
|---|---|
| 1 |
type 入力コントロールのタイプを示し、チェックボックス入力コントロールの場合はラジオに設定されます。 |
| 2 |
name 認識され、値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。 |
| 3 |
value ラジオボックスが選択されている場合に使用される値。 |
| 4 |
checked デフォルトで選択する場合は、_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>タグの重要な属性のリストです-
| Sr.No | Attribute & Description |
|---|---|
| 1 |
name 認識され、値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。 |
| 2 |
size これを使用して、スクロールリストボックスを表示できます。 |
| 3 |
multiple 「複数」に設定すると、ユーザーはメニューから複数の項目を選択できます。 |
以下は、<option>タグの重要な属性のリストです-
| Sr.No | Attribute & Description |
|---|---|
| 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>これは、次の結果を生成します-
属性
以下は、ファイルアップロードボックスの重要な属性のリストです-
| Sr.No | Attribute & Description |
|---|---|
| 1 |
name 認識され、値を取得するためにサーバーに送信されるコントロールに名前を付けるために使用されます。 |
| 2 |
accept サーバーが受け入れるファイルのタイプを指定します。 |
ボタンコントロール
HTMLにはクリック可能なボタンを作成するさまざまな方法があります。 type属性を button に設定することにより、<input>タグを使用してクリック可能なボタンを作成することもできます。 タイプ属性は、次の値を取ることができます-
| Sr.No | Type & Description |
|---|---|
| 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>これは、次の結果を生成します-
