第8章：入力フォームを作る（その2）

前章で取り扱わなかった入力部品の入れ方を取り上げます。

前章で送信ボタンを作ったときとまったく同じ画面です。ということで、詳しい説明は、前章の「送信ボタンの配置」を参照してください。

各項目とも、１行テキストボックスの項を参照。

フォームの属性変更画面で、隠しフィールドタブをクリックする。

項目については、１行テキストボックスの項を参照。名前と値の部分に入力し、登録ボタンをクリックすると隠しフィールドとして登録される。

メニューにない項目のみ解説します。

行数

リストボックスで表示させる行数を指定します。
ここで指定された値は、size属性の値となります。

複数選択を許す

チェックを入れると、選択肢の中から複数を選択できるようにします。
チェックが入ると、multiple属性が追加されます。

以下の表で「メニューから」の項目は、メニュー → 挿入 → フォームと入力部品 からの選択肢のことです。

各入力部品の入力方法

入力部品	メニューから	ツール ボタン	対応タグ・備考
１行テキストボックス	１行テキスト領域		<input type="text"> 入力タイプでテキストを選択
パスワード入力ボックス	１行テキスト領域		<input type="password"> 入力タイプでパスワードを選択
チェックボックス	チェックボックス		<input type="checkbox">
ラジオボタン	ラジオボタン		<input type="radio">
送信ボタン	プッシュボタン→ 送信ボタン		<input type="submit">
リセットボタン	プッシュボタン→ リセットボタン		<input type="reset">
汎用ボタン	プッシュボタン→ 一般ボタン	なし	<input type="button">
画像によるボタン	プッシュボタン→ 画像ボタン	なし	<input type="image">
ファイル選択	ファイル選択領域	なし	<input type="file">
隠しフィールド	なし	なし	<input type="hidden"> form要素の属性変更画面から 隠しフィールドタブで設定
メニュー	オプションメニュー		<select> <option></option> </select> option要素は必要な数だけ入れる
リストボックス	リストボックス		<select size="x"> xは2以上の整数。あとはメニューと同じ
複数行テキストボックス	複数行テキスト領域		<textarea></textarea>

それぞれの入力部品には使用するのに適した場面があります。適切な入力部品を使うことで、フォーム入力の負荷が軽くなると思います。

1行テキストボックス

短い内容の入力。

複数行テキストボックス

長い内容の入力。

チェックボックス

複数の選択肢から複数個を選択する場合、1つの選択肢に対してはい・いいえで選択する場合

ラジオボタン

複数の選択肢から1つだけを選択する場合

メニュー（プルダウンメニュー）

選択肢がある程度予想のつくもの（例：年齢層、都道府県）で、1つだけを選択する場合

リストボックス

限られた表示領域内で、複数の選択肢から複数個を選択させる場合。