前回は、ラジオボタン・チェックボックス・プルダウンメニューの作成方法につきまして、ソースコードを交えながら記載いたしました。
実際のウェブの制作現場では、単一ページで完結させるランディングページなどで使用することが多々ございます。ユーザーやお客様に、問い合わせを頂く際など、自由にカスタマイズをおこない、色々な選択項目やメニューなどユーザビリティーの観点から、簡単に選択できるようにしておくと、それなりのレスポンスが得られることと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
メニューを作成するselect要素にsize属性を指定すると、リストボックスとして表示されます。
メニューの場合と同様に、リストボックス全体を<select> ～ </select>で囲って示し、その中に選択肢を表す<option> ～ </option>を必要な数だけ配置します。
<option> ～ </option>の範囲には、実際にリストボックスに表示される選択肢のテキストを入れます。また、value属性を省略した場合は、ここに入れたテキスト自体が選択された項目として送信されます。option属性で示される選択肢の数がsize属性で示される表示行数より多い場合は、リストボックスに自動的にスクロールバーが付けられます。
| 行数 | リストボックスの表示行数 |
|---|---|
| 名前 | リストボックスの名前 |
| multiple | 複数の項目を選択可能にする場合に指定 |
| 送信値 | 選択された結果として送信される文字 |
| selected | あらかじめ選択された状態にする場合に指定 |
input要素のtype属性に「file」を指定すると、フォームのデータとして送信するファイルを選択するためのボタンとフィールドになります。
accept属性には、受信プログラムが受け付けることの出来るファイルの種類をMIMEタイプで指定します。複数の種類を受信可能な場合には、それらを「,」で区切って指定することができます。
※この機能を利用する場合、form要素のmethod属性には「post」をenctype属性には「multipart/form-data」を指定する必要があります。
| MIMEタイプ | 受け付け可能な「,」区切りのMIMEタイプリスト |
|---|
fieldset要素は、フォームに含まれる入力項目や選択項目をグループ化します。
<fieldset> ～ </fieldset>の範囲の先頭にはlegend要素を配置して、そのグループのタイトルを付けます。
という事で今回は、リストボックス・ファイルの選択・項目のグループ化につきまして、サンプルコードと共に記載いたしました。
ファイルの選択機能につきまして、やはりこれは便利な機能になる事と思います。実際はcgiと組み合わせ作成することになる事と思いますが、HTML自体はサンプルで記載いたしましたとおり、シンプルで簡単ですね。
コチラもまた前回同様、ソースコードをテンプレート化して保存しておくことをお進めいたします。
また、この辺りのソースコードを自由にカスタマイズできますと、イケてるコーダーといえることと思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
