HTMLの主要タグ(body内利用【３】フォーム関連のタグ)
ここではお問い合わせフォーム等で利用するフォーム関連のタグをまとめます。
form
<from>
<form>タグはテキストボックスやチェックボックス、ラジオボタン、セレクトなどの入力内容をまとめサーバーに送信するために利用します。以下設定必須のいくつかの属性があります。
action属性
| 属性値 | 説明 |
| 送信先のアドレス | 送信先のアドレスを指定します。(例:http://www.sample.com/sample.php) |
～ 例 ～
<form action="sample.php"></form>
method属性
| 属性値 | 説明 |
| get | HTTP通信の方式をGETに指定します。 |
| post | HTTP通信の方式をPOSTに指定します。 |
～ 例 ～
<form method="post"></form>
enctype属性
| 属性値 | 説明 |
| application/x-www-form-urlencoded(初期値) | URLエンコード。通常この設定です。 |
| multipart/form-data | 送信フォームにファイル送信を含む場合、このエンコードにする必要があります。 |
～ 例 ～
<form enctype="application/x-www-form-urlencoded"></form>
accept-charset属性
| 属性値 | 説明 |
| (文字コード) | UTF-8、Shift_JIS、EUC-JP等送信する文字コードを指定します。 |
～ 例 ～
<form accept-charset="UTF-8"></form>
name属性
| 属性値 | 説明 |
| (名前) | formの名前を指定します。 |
～ 例 ～
<form name="formname"></form>
autocomplete属性
| 属性値 | 説明 |
| on | オートコンプリートを有効にします。表示される候補はブラウザの履歴によります。 |
| off | オートコンプリートを無効にします。 |
～ 例 ～
<form autocomplete="on"></form>
novalidate属性
| 属性値 | 説明 |
| novalidate | バリテーション機能を無効にします。有効にする場合はこの属性自体記述しません。バリテーション機能とはフォームの入力内容をチェックする機能です。チェックする内容はブラウザによります。php等のプログラム側で行うような本格的なバリテーションチェックとは違いますので注意して下さい。 |
～ 例 ～
<form novalidate="novalidate"></form>
<fieldset>、<legend>
<fieldset>タグは入力内容をグループ化するために利用するタグです。一つの<form>タグ内で複数利用することができます。<legend>タグは<fieldset>タグでグループ化された各グループに対してタイトルをつけるために利用します。
<fieldset>タグはそのフィールド自体を無効にするためのdisabled属性が利用できます。
disabled属性
| 属性値 | 説明 |
| disabled | フィールドを無効にします。有効にする場合はこの属性自体記述しません。 |
～ 例 ～
結果
HTML
-
-
/* HTMLの例 */
input
<input>
<input>タグは入力フォームとして利用します。type属性を指定することにより様々なテキストボックスの形式になります。
type属性
| 属性値 | 説明 |
| text | テキストボックス |
| メールアドレス | |
| password | パスワード |
| hidden | 非表示のテキスト |
| tel | 電話番号 |
| date | 日付 |
| datetime-local | 日時(datetimeはUTC[世界標準時]) |
| month | 月 |
| week | 週 |
| time | 時間 |
| number | 数値 |
| checkbox | チェックボックス |
| radio | ラジオボタン |
| file | ファイルアップロード |
| submit | 送信 |
| reset | リセット |
| button | ボタン |
指定したtype属性により利用できない場合もありますが、その他に設定できる主な属性は以下の通りです。
| 属性名 | 説明 |
| name | php等プログラム側でコントロールするための識別名です。 |
| value | 値を指定します。 |
| autocomplete | onでオートコンプリートを有効にします。候補は<datalist>タグで作成します。 |
| maxlength | 最大文字数を指定します。 |
| size | 表示文字数を指定します。 |
| placeholder | テキストボックスの初期値を指定します。 |
| checked | チェックボックスやラジオボタンの場合に初期状態でチェックを入れる場合onを指定します。 |
～ 例 ～
結果
HTML
-
text
email
password
hidden
tel
date
datetime-local
month
week
time
number
checkbox
radio
file
submit
reset
button
-
/* HTMLの例 */
text
email
password
hidden
tel
date
datetime-local
month
week
time
number
checkbox
radio
file
submit
reset
button
その他フォーム関連タグ
<button>
<button>タグはボタンを作成する場合に利用します。
| 属性名 | 説明 |
| name | php等プログラム側でコントロールするための識別名です。 |
| value | 値を指定します。 |
| type | submit、reset、buttonのいずれかを指定します。 |
～ 例 ～
結果
HTML
-
-
/* HTMLの例 */
<textarea>
<textarea>タグは複数行入力できるテキストボックスを作成する場合に利用します。
属性名 説明 name php等プログラム側でコントロールするための識別名です。 cols 一行あたりの文字数です。 rows 行数です。
～ 例 ～
結果
HTML
-
-
/* HTMLの例 */
<select>、<option>、<optgroup>
<select>タグはセレクトボックスを作成する場合に利用します。<option>で候補を登録し、<optgroup>でグループ化します。
～ 例 ～
結果
HTML
-
-
/* HTMLの例 */