フォーム


formタグ

 フォームはユーザがデータを入力して、コンピュータに何か処理させるとき使います。フォームにはテキストボックス、チェックボックスやボタンなどが含まれます。フォームはformタグを用いて作ります。formタグはコンテナで、中にボタンなどのコントロールを含む必要があります。下にフォームの例を示します。

<form>
名前 <input type="text" name="Name" /><button>送る</button>
</form>
名前


formタグの属性

formタグは以下の固有属性を持ちます。

属性説明
accept-charset(例) accept-charset="utf-8"受付可能な文字コード。
action(例) action="/cgi-bin/doit.cgi"フォームデータの送り先。省略したときは、自分自身(自ページのURL)になる。
autocompleteon
off
(例) autocomplete="off"
オートコンプリートの指定。
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
(例) enctype="multipart/form-data"
ファイルアップロードのときはmultipart/form-dataを指定する。
methodget
post
(例) method="post"
送るデータが多い時は必ずpostを指定する。デフォルトはget。
name (例) name="form1" フォームの名前。これは、サーバ側で使用される。
novalidatenovalidateデータを送信するとき、データの評価を行わない。
target_blank
_self
_parent
_top
(例) target="_blank"
データ送信後のページをどう開くかの指定。

グローバル属性, イベント属性

formのサンプル

 formタグは単なるコンテナのため、内部のタグは左から右に流れます(フローレイアウト)。そのため、見やすくするためには下のサンプルのようにtableタグを併用するといいです。また、必要に応じてスタイルを設定するとさらに見やすくなります。

<form name="form1" method="post" action="http://localhost/cgi-bin/login.cgi">
<table style="background-color: silver; border: solid 1px black; margin-left: auto; margin-right: auto; padding: 6px;">
<tr><td>ユーザID </td><td><input type="text" name="userid" /></td></tr>
<tr><td>パスワード </td><td><input type="password" name="password" /></td></tr>
<tr><td style="height: 30px;"></td><td><input type="submit" value="ログイン" />
 <input type="reset" value="リセット" />
</td></tr>
</table>
</form>

(注意) このフォームはサンプルのため、実際には動作しません。

ユーザID 
パスワード 

フォームで使われるコントロール

input

 inputタグはtype属性によりさまざまなコントロールを表示できます。次にinputタグの固有属性を示します。古いブラウザなどでは正しく表示できないものもあります。

属性説明
accept ファイルの拡張子 (例) accept=".jpg"
audio/* (例) accept="audio/mpeg"
video/* (例) accept="video/mp4"
image/* (例) accept="image/png"
メディアタイプ (例) accept="application/xhtml+xml"
サーバが受け付けるファイル種別。
alt文字列 (例) alt="Alternative"type="image"のときの代替文字列。
autocompleteon / off (例) autocomplete="off"オートコンプリート
autofocusautofocus
(例) <input type="button" value="OK" autofocus />
自動的にフォーカスを得るかどうか。
checkedchecked
(例) <input type="checkbox" name="check1" checked />
type="checkbox"またはtype="radio"の場合、チェック状態にする。
disableddisabled
(例) <input type="text" name="text1" disbaled />
コントロールを無効状態にする。
formフォームID (例) form="form1" フォームの外にコントロールがあるとき、指定したフォームに関連付ける。

<form id="form1">
...
</form>
<input type="button" value="OK" form="form1" />
formactionURL
(例)
<form action="/cgi-bin/action1.cgi"> ....
<input type="submit" value="OK" />
<input type="submit" value="Apply" formaction="/cgi-bin/action2.cgi" />
</form>
フォームの代替送信先。例えば、type="submit"でformactionが指定されていると、action属性で指定したURLでなくformaction属性で指定したURLへ送信される。
type="submit"またはtype="image"のみ有効
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
(例) formenctype="multipart/form-data"
フォームデータをどうエンコードするかの指定。
type="submit"またはtype="image"のみ有効
formtarget _blank
_self
_parent
_top
フレーム名
(例) formtarget="_blank"
フォーム送信後、応答ページをどう開くかの指定。
type="submit"またはtype="image"のみ有効
height(例) height="32px"type="image"のときの画像の高さ。
list(例) list="list1"datalistタグのidを指定する。
max(例) max="2050-12-28"数値または日付の最大値を指定する。
maxlength(例) maxlength="100"最大文字数
min(例) max="2000-01-01"数値または日付の最小値を指定する。
multiple (例) 複数のファイルをアップロードする
<input type="file" name="file1" multiple />
複数のファイルを選択可能か指定。
name名前 (例) name="userid"サーバへ送信する値の名前。id属性と似ているがid属性はサーバへ送信されない。
pattern正規表現 (例) pattern="^\d+"ユーザが入力したデータをチェックするため使用する。
数字のみ
<form>数字のみ <input type="text" pattern="^\d+" /><input type="submit" /></form>
placeholder短いヒント (例) placeholder="年齢"下のようにplaceholderの値が表示される。
readonly(例) <input type="text" readonly />読み出し専用であることを指定する。
required(例) <input type="text" required />空欄であると送信できないことを示す。
size
src(例) <input type="text" size="20" />入力フィールドの長さ (表示文字数) を指定する。
step(例) <input type="number" step="2" />type="number"のときのステップ値を指定する。
type 以下のどれかの値だが、ブラウザにより対応していないものがある。ブラウザの対応状況はFindmebyIPで知ることができる。
button
checkbox
color (HTML5)
date (HTML5)
datetime (HTML5)
datetime-local (HTML5)
email (HTML5)
file
hidden
image
month (HTML5)
number (HTML5)
password
radio
range (HTML5)
reset
search (HTML5)
submit
tel (HTML5)
text
time (HTML5)
url (HTML5)
week (HTML5)
下で詳細を説明。
value(例) value="送信"テキストボックスやボタンの表示文字列
width(例) width="32px"type="image"のときの画像の幅

グローバル属性, イベント属性


type="button"

 一般の押しボタンを表します。

<input type="button" name="button1" value="Click" onclick="alert('Clicked')" />


type="checkbox"

 チェックボックスを表します。(参考) labelタグと併用するとラベルのクリックでチェックのON/OFFができます。

<input type="checkbox" name="check1" checked /> ON/OFF
ON/OFF

type="color" (HTML5)

 色選択用のダイアログを開くためのボタンが表示されます。

<input type="color" name="color1" />


type="date" (HTML5)

 日付選択のためのコントロールが表示されるはずですが、IEやFirefoxは未対応です。Chromeでは下のように表示されます。

Chromeでの表示例
date

<input type="date" name="date1" />


type="datetime" (HTML5)

 日付時刻選択のためのコントロールが表示されるはずですが、主要ブラウザは未対応です。

<input type="datetime" name="datetime1" />


type="datetime-local" (HTML5)

 日付時刻選択のためのコントロールが表示されるはずですが、IEやFirefoxは未対応です。Chromeでは下のように表示されます。

Chromeでの表示例
datetime

<input type="datetime-local" name="datetime1" />


type="email" (HTML5)

 Eメール入力のためのコントロールです。外観はテキストボックスと同じです。

<input type="email" name="email1" />

type="file"

 ファイルアップロードのためのファイルを選択するためのコントロールを表示します。HTML5ではmultiple属性を指定すると複数ファイルを選択できます。ファイルアップロードのためには、formタグのenctype属性を"multipart/form-data"に、method属性を"post"に設定する必要があります。

<form enctype="multipart/form-data" method="post">
<input type="file" name="file" multiple /> <input type="submit" value="Upload" />
</form>

type="hidden"

 画面に表示されないデータを保持するためのコントロールです。ユーザの入力が不要なデータを送信するのに使います。

<p>type="hidden"なので表示されません。<input type="hidden" name="data1" value="ABC" /></p>

type="hidden"なので表示されません。


type="image"

 type="button"やtype="submit"と同じですが、画像をボタンの代わりに表示できます。

<input type="image" name="button1" src="button1.png" onclick="alert('Clicked')" />


type="month" (HTML5)

 「月」を入力するためのコントロールですが、IEやFirefoxではサポートされていません。Chromeでは下のように表示されます。

Chromeの例

<input type="month" name="month1" />


type="number" (HTML5)

 数を入力するためのUpdownコントロールです。IEではサポートされていません。

<input type="number" name="updown1" />


type="password"

 パスワードを入力するためのコントロールです。ログインのときなどよく見かけます。

<input type="password" name="password1" />


type="radio"

 ラジオボタンを表示します。ボタンのグループ化はname属性で指定します。
(参考) labelタグと併用するとラベルのクリックでチェックのON/OFFができます。

男 <input type="radio" name="sex" value="m" checked /><br />
女 <input type="radio" name="sex" value="f" />



type="range" (HTML5)

 範囲を入力するために使う「スライダー」です。

<input type="range" name="range1" min="0" max="100" />


type="reset"

 フォームのデータをクリアするためのボタンです。

<form>
名前 <input type="text" name="text1" /><br />
電話 <input type="text" name="text1" /><br />
<input type="submit" value="Submit" /> 
<input type="reset" value="Reset" />
</form>

名前
電話
 

type="search" (HTML5)

 文字列を検索するためのコントールです。主要ブラウザではテキストボックスと同じです。

<input type="search" name="search1" />


type="submit"

 ボタンが表示されますが、type="button"と違い直ちにフォームデータをサーバへ送信します。

<form>
<input type="text" name="text1" />
<input type="submit" value="送信" />
</form>


type="tel"

 電話番号を入力するためのコントロールです。外観はテキストボックスと同じです。

<input type="tel" name="tel" />


type="text"

 文字列を入力するためのコントロールです。size属性を省略すると20文字分の長さになります。

<input type="text" name="text1" size="50" />


type="time" (HTML5)

 時刻を入力するためのコントロールです。IEとFirefoxではサポートされていません。Chromeでは下のように表示されます。

Chromeの例

<input type="time" name="time1" />


type="url"

 URLを入力するためのコントロールです。外観はテキストボックスと同じです。

<input type="url" name="url1" size="80" />


type="week" (HTML5)

 週を入力するためのコントロールです。IEとFirefoxではサポートされていません。Chromeでは下のように表示されます。

Chromeの例

<input type="week" name="week1" />


 

button

 buttonタグはボタンを表示します。inputのtype="button"などと同じですが、ブラウザによってデフォルトの動作が違う可能性があるので、typeは指定したほうがよさそうです。

<button type="submit">button1</button>

buttonタグの属性

属性説明
autofocus(例) <button type="button" autofocus>自動的にフォーカスを得るかどうか。
disabled(例) <button type="button" disbled>コントロールを無効状態にする。
formフォームID (例) form="form1" フォームの外にコントロールがあるとき、指定したフォームに関連付ける。
(例)
<form id="form1">
...
</form>
<button type="submit" form="form1">submit</button>
formaction URL
(例)
<form action="/cgi-bin/action1.cgi"> ....
<input type="submit" value="OK" />
<input type="submit" value="Apply" formaction="/cgi-bin/action2.cgi" />
</form>
フォームの代替送信先。例えば、type="submit"でformactionが指定されていると、action属性で指定したURLでなくformaction属性で指定したURLへ送信される。
type="submit"またはtype="image"のみ有効
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
(例) formenctype="multipart/form-data"
フォームデータをどうエンコードするかの指定。
type="submit"またはtype="image"のみ有効
formmethod postまたはget (例) method="post" フォームを送信する際のHTTPメソッド。
formnovalidateformnovalidate フォームを送信する際にデータの検証を行わない。type="submit"のときのみ有効。
formtarget _blank
_self
_parent
_top
フレーム名
(例) formtarget="_blank"
フォーム送信後、応答ページをどう開くかの指定。
type="submit"のみ有効
nameボタンの名前 (例) name="userid" ボタンの名前を指定する。id属性と似ているがid属性はサーバへ送信されない。
type button
reset
submit
(例) type="submit"
ボタンの動作を指定する。
value(例) value="b"ボタンの値(クリックしたときサーバへ送信される)
グローバル属性, イベント属性

 

select

 selectはオプションを選択するためのコントロールを表示します。height属性を指定することでリストボックスのようなスタイルにも変更できます。オプションはoptionタグで指定します。

<select name="select1">
<option>金魚</option>
<option>メダカ</option>
<option>カメ</option>
<option>ザリガニ</option>
</select>

 下の例では、size属性とmultiple属性を設定しています。size属性により縦方向に4行分の高さにしています。multiple属性を指定しているので、複数の項目を選択できます。(Ctrl+項目で選びます)
 さらにスタイルで幅も変更しています。
 optionタグではvalue属性を使用しています。これによりサーバへはラベルの代わりにvalue属性の値が送信されます。

<select name="select2" size="4" multiple width="220px">
<option value="1">金魚</option>
<option value="2">メダカ</option>
<option value="3">カメ</option>
<option value="4">ザリガニ</option>
</select>

selectタグの属性

属性説明
autofocus(例) <select autofocus>自動的にフォーカスを得るかどうか。
disabled(例) <select disabled>コントロールを無効状態にする。
formフォームID (例) form="form1" フォームの外にコントロールがあるとき、指定したフォームに関連付ける。
(例)
<form id="form1">
...
</form>
<select name="select1" form="form1">
...
multiple(例) <select multiple>複数のオプションを選択可能にする。
name(例) name="select1"選択コントロールの名前を指定する。id属性と似ているがid属性はサーバへ送信されない。
require(例) <select required>必ずオプションを選択する必要があることを指定する。
size(例) size="5"縦の長さ(行数を指定する)。

グローバル属性, イベント属性

optionタグの属性

属性説明
disabled disabled
(例) <option disbaled>金魚</option>
このoptionを無効状態にする。
label(例) <option label="宇田川町">東京都渋谷区宇田川町</option>短いラベルを定義する。これはドロップダウンリストで表示される。
selected(例) <option selected>メダカ</option>既定で選択状態にする。
value(例) <option value="2">メダカ</option>サーバへ送信される値

グローバル属性, イベント属性

 

texarea

 textareaタグは複数行テキストを操作できるコントロールを作成します。

<textarea name="textarea1" cols="50" rows="8">
初期値はここに書きます。
</textarea>

textareaタグの属性

属性説明
autofocus(例) <textarea autofocus>自動的にフォーカスを得るかどうか。
cols(例) cols="5"行数を指定する。
disabled(例) <textarea disabled>コントロールを無効状態にする。
formフォームID (例) form="form1" フォームの外にコントロールがあるとき、指定したフォームに関連付ける。
(例)
<form id="form1">
...
</form>
<textarea name="memo1" form="form1">
...
maxlength(例) maxlength="10000"最大文字数
name(例) name="memo1"テキストエリアの名前を指定する。id属性と似ているがid属性はサーバへ送信されない。
placeholder(例) placeholder="入力してください。"何も入力されてないとき、表示される文字列。
readonly(例) <textarea readonly>読み出し専用であることを設定する。
required(例) <textarea required>値が空欄のとき送信できないように設定する。
rows(例) rows="5"行数を指定する。
wrap hard
soft
(例) wrap="soft"
英文でのワードラップの指定。

グローバル属性, イベント属性

 


その他の関連タグ

datalist

 datalistをテキストボックスに設定するとテキストボックスをクリックしたとき、オプションが表示されます。固有の属性はありません。inputタグとの接続はinputのlist属性にdatalistのid属性の値を設定することで行います。

<input list="list1">
<datalist id="list1">
 <option value="午前" />
 <option value="午後" />
 <option value="夜" />
 <option value="深夜" />
 <option value="早朝" />
</datalist>

 

fieldset, legend

 fieldsetタグはフォーム内のコントロールをグループ化します。legendタグはグループの名前を表示します。

<form>
 <fieldset>
 <legend>プロファイル入力</legend>
 氏名 <input type="text" name="name" /><br />
 住所 <input type="text" name="name" /><br />
 性別 <input type="radio" name="sex" value="m" checked /> 男 <input type="radio" name="sex" value="f" />女<br />
 電話 <input type="tel" name="tel" /><br />
 </fieldset>
</form>
プロファイル入力 氏名
住所
性別
電話

fieldsetタグの属性

属性説明
disabled(例) <textarea disabled>コントロールを無効状態にする。
formフォームID (例) form="form1" フォームの外にコントロールがあるとき、指定したフォームに関連付ける。
(例)
<form id="form1">
...
</form>
<fieldset name="set1" form="form1">
...
name(例) name="fs1" fieldsetの名前を指定する。id属性と似ているがid属性はサーバへ送信されない。

label

 labelはラジオボタンやチェックボックスのラベルを定義します。これらのボタンを直接クリックせず、ラベルをクリックしても状態が変化します。

<label><input type="checkbox"> ON/OFF</label>

 古いブラウザではfor属性を使う必要があります。

<label for="check1">ON/OFF</label><input id="check1" type="checkbox">


keygen

 フォーム送信時にキーを発行してフォームデータを暗号化するのに使用します。keygenは、HTML5で追加されたタグです。次の例はkeygenでクライアントから公開キーを送信するものです。

<form>
<keygen name="key" />
<button type="submit">Submit</button>
</form>

グローバル属性, イベント属性

 

 

このページの先頭へ戻る