サイト内検索  

第8章:入力フォームを作る(その2)

前章では、実際にメールフォームを作りながら、フォームの作り方を説明しました。ですが、フォームの用途によっては、前章で紹介した入力部品以外も使う必要が出てきます。

本章では、以下の内容について取り上げます。

その他の入力部品の入れ方

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

リセットボタン/汎用ボタン/画像ボタン

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

ファイル選択

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

隠しフィールド

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

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

リストボックス

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

行数
リストボックスで表示させる行数を指定します。
ここで指定された値は、size属性の値となります。
複数選択を許す
チェックを入れると、選択肢の中から複数を選択できるようにします。
チェックが入ると、multiple属性が追加されます。

ページの先頭へ

各入力部品の入れ方まとめ

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

各入力部品の入力方法
入力部品 メニューから ツール
ボタン
対応タグ・備考
1行テキストボックス 1行テキスト領域 1行テキストボックス挿入 <input type="text">
入力タイプでテキストを選択
パスワード入力ボックス 1行テキスト領域 1行テキストボックス挿入 <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つだけを選択する場合
リストボックス
限られた表示領域内で、複数の選択肢から複数個を選択させる場合。

ページの先頭へ

お疲れさまでした。ここまで学んだことを生かせば、よりよいHTMLソースで書かれたWebページを作成することが出来るはずです。

後は、実践あるのみです。皆さんがよいWebページを作ってくれることをお祈りします。

次章以降はホームページ・ビルダーで実際にサイトを作って、自分のWebスペースにページをアップロードするということを行います。お楽しみに!