2014.10.24 [金] textarea要素、option要素、select要素、button要素 他のおさらい（form関連要素編③）
涼しくなってきて過ごしやすい季節になりました。学校ではイベントの多い季節でもあり、トライデントコンピュータ専門学校でも学園祭が11月15日（土）に開催されます。
実行委員会も組織され、模擬店やビンゴ大会など楽しい催しなどもありますので、ぜひお越しください。
さて、3回にわけてまとめてきたHTMLのform関連要素ですが、今回で最終になります。
form要素、label要素、fieldset要素、legend要素のおさらい（form関連要素編①）
input要素のおさらい（form関連要素編②）
textarea要素
textarea要素は、複数行のテキスト入力欄を作成します。
■属性値
- autofocus属性
- 文書読み込み時、自動的にフォーカスさせます。HTML5
- cols属性（初期値は「20」）
- テキスト入力欄を表示する際の横幅を文字数で指定します。
- dirname属性
- 送信データの書字方向に関するクエリ値のクエリ名を指定します。
- disabled属性
- 入力コントールを無効にします。
- form属性
- 任意のform要素に付与されたid属性値を指定することで関連付けを行います。HTML5
- maxlength属性
- 入力可能な最大字数を指定します。HTML5
- name属性
- データが送信される際のクエリ名を指定します。
- placeholder属性
- ダミーテキスト（プレースホルダ）を設定します。HTML5
- readonly属性
- 読み込み専用にします。（リードオンリー）
- required属性
- 入力を必須にします。HTML5
- rows属性（初期値は「2」）
- テキスト入力欄を表示する際の高さを文字数で指定します。
- wrap属性
- 入力欄における、折り返しの指定を行います。HTML5
- 値にsoftを指定すると入力欄の横幅で入力したテキストは自動的に折り返しますが、送信されるクエリには折り返しは反映されません。（初期値）
- 値にhardを指定すると入力欄の横幅で入力したテキストは自動的に折り返しますが、送信されるクエリにもその折り返しが反映されます。
のように表示されます。
optgroup要素
optgroup要素は、option要素で作成する選択肢をグループ化する際に使用します。 select 要素と、option 要素によって作成されるメニューで、その選択肢を任意のグループにまとめることができます。
これにより視認性や操作性を向上させることができます。
■属性値
- label属性（必須属性）
- 選択肢グループにラベルを指定します。空ではない文字列を指定する必要があります。
- disabled属性
- この属性を指定された選択肢グループは、選択できない選択肢のグループになります。
option要素
option要素は、select要素で作成するセレクトボックスで入力候補リストの選択肢を指定する際に使用します。HTML5からや、 datalis要素の選択肢としても利用できるようになりました。
disabled属性は、選択肢を無効にする際に使用します。 option要素の親要素となるoptgroup要素にdisabled属性を指定すると、選択肢グループ全体を無効にすることができます。
■属性値
- disabled属性
- 操作を無効にする（disabled）
- label属性
- 選択肢にラベル（項目名）を付ける
- selected属性
- 選択肢をあらかじめ選択済みにする（selected）
- value属性
- 選択肢の値を指定
select要素
select要素は、セレクトボックスを作成する際に使用します。 一般的なブラウザでは、ドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウとして表示されます。
select要素ででセレクトボックス全体を囲み、 その中にoption要素を配置して個々の選択肢リストを作成します。さらにそのoption要素の選択肢をoptgroup要素で囲むと、選択肢をグループ化することができます。
■属性値
- disabled属性
- 入力コントールを無効にします。
- autofocus属性
- 文書読み込み時、自動的にフォーカスさせます。HTML5
- form属性
- 任意のform要素に付与されたid属性値を指定することで関連付けを行います。HTML5
- multiple属性
- 複数の選択肢を選択を可能にします。
- required属性
- 該当するselect要素を、必ず選択しなければならないプルダウンメニューとします。
- name属性
- データが送信される際のクエリ名を指定します。
- size属性
- 閲覧者に表示する選択肢の数を指定します。初期値は、multiple属性が指定されている場合で「4」、multiple属性が指定されていない場合で「1」です。
select要素、optgroup要素、option要素を利用するとこのように表示されます。
datalist 要素
datalist要素は閲覧者に入力候補のデータリストを提供します。入力候補はoption 要素で提供することができます。要素および内包される要素は、画面上に表示されません。
datalist要素に付与された id 属性値とinput要素のlist属性の値を同じにして入力欄とデータリストを関連付けることができます。この場合、datalist要素はサジェストとして機能します。
output要素HTML5
output要素は計算の結果出力を表します。
JavaScript が実行できない環境では出力の表示ができず、output要素の内容が表示されます。
■属性値
- form属性
- 任意のform要素に付与したid属性値を指定することで、そのフォームとoutput要素を関連付けます。
- for属性
- 入力コントロールに付与したid属性値を指定することで、output要素と入力コントロールを関連付けます。
keygen要素HTML5
keygen要素は、key generatorの略で、フォーム送信時にキーを発行して暗号化する際に使用します。
UAは公開鍵をサーバに送信し、秘密鍵を閲覧者のローカル環境に保存します。サーバ側でクライアント証明書を生成したい場合などに利用できます。
keytypeパラメータは、生成する鍵の種類を指定します。有効な値は "RSA" (既定値)、"DSA"、"EC" です。name属性とchallenge 属性はすべての場合で必要です。
■属性値
- autofocus属性
- オートフォーカスする
- keytype属性
- 暗号化の方式をキーワードで指定します。初期値は 「rsa」だが指定できる値はブラウザによる
- disabled属性
- キーを操作不能にする
- form属性
- 要素と関連付ける
- challenge属性
- 鍵ペアを生成する際に使用されるチャレンジ文字列を指定します。
- name属性
- キーに名前を付ける
button要素
button要素はボタンを表します。button要素でマークアップすることで、内包するテキストや画像などをボタンとして使用することができます。
■属性値
- autofocus属性
- 自動フォーカスを指定する（autofocus）HTML5
- disabled属性
- 操作を無効にする（disabled）
- form属性
- どのフォームと関連付けるかを
- formaction属性
- 送信先URLを指定HTML5
- formenctype属性
- 送信するデータの形式を指定（application/x-www-form-urlencoded・multipart/form-data・text/plain）（初期値はapplication/x-www-form-urlencoded）HTML5
- formmethod属性
- 送信方法（HTTPメソッド）を指定（get・post）（初期値はget）HTML5
- formnovalidate属性
- 入力されたデータの妥当性を確認しない（formnovalidate）HTML5
- formtarget属性
- フォーム送信するターゲット先を指定（_blank・_self・_parent・_top・任意のターゲット名）HTML5
- name属性
- ボタンの名前を指定
- type属性
- ボタンの種類を指定（submit・reset・button）（初期値はsubmit）
- value属性
- 値を指定
PHPなどサーバーサイドプログラムでシステムを構築する場合、データ入力インターフェースになりますので、すぐに書けるといいのですが、やはり手間ですよね。
そんな時はa-blog cmsのカスタムフィールドメーカーなどを利用して大まかに作ってからカスタマイズするのも良いかもしれません。
参考：a-blog cms の カスタムフィールドメーカーつくりました | maki-o memo
さらに、formを理解するために、PHPを使った簡単なシステムを作ってみようと思います。
