トップ ＞ スキル ： Web ＞ HTML5

Web

各要素のリファレンス20

フォーム関連要素（3/4）

button要素（ボタン）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ
コンテンツモデル フレージング・コンテンツ。ただし、インタラクティブ・コンテンツに入れてはいけない。
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 autofocus（ページがロードされた時に自動的にフォーカスが当たるようにする）
disabled（コントロールを無効にする）
form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセット）
formaction（フォーム送信先のアドレスを指定）
formenctype（フォーム送信のMIMEタイプを指定）
formmethod（フォーム送信に使うHTTPメソッドを指定）
formnovalidate（フォーム送信時に入力値のバリデートを行わないようにする）
formtarget（フォームのターゲットを表すブラウジング・コンテキスト名やキーワードを指定）
name（コントロールの名前を指定）
type（ボタンのタイプを指定）
value（ボタンの値を指定）
デフォルトスタイル -

button要素は、ボタンを表しますがtypeコンテンツ属性に指定するキーワードによって、その役割が異なります。

キーワード 役割
submit フォームをサブミットするためのサブミット・ボタン（デフォルト）
reset フォームをリセットするためのリセット・ボタン
button デフォルトのアクションが定義されない汎用的なボタン
■利用例
  <form action="test.cgi" method="post">
  	<p><label>題目：<input type="text" name="title" /></label></p>
  	<p><label>書込み欄：<br /><textarea name="content"></textarea></label></p>
  	<p>
  		<button type="submit" formaction="preview.cgi" formtarget="_blank">
  			プレビュー</button>
  		<button type="submit">投稿</button>
  	</p>
  </form>

利用例では、button要素を使って2つのサブミット・ボタンを用意しています。投稿ボタンを押すと、test.cgiに対してフォーム内容が送られます。しかし、プレビューボタンを押すとformactionコンテンツ属性の値となるpreview.cgiに対してフォームがサブミットされます。

select要素（選択肢フォーム・コントロール）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ
コンテンツモデル 0個以上のoption要素、またはoptgroup要素
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 autofocus（ページがロードされた時に自動的にフォーカスが当たるようにする）
disabled（コントロールを無効にする）
form（この要素を関連付けるフォームのform要素のidコンテンツ属性をセット）
multiple（複数の項目を選択できるようにする）
name（コントロールの名前を指定）
size（コントロールに表示させる選択肢の数を指定）
デフォルトスタイル -

select要素は、選択肢から項目を選択するためのコントロールを表します。選択肢のマークアップには、option要素を使います。

■利用例
  <select name="browser">
  	<option>Internet Explorer</option>
  	<option>Firefox</option>
  	<option>Safari</option>
  	<option>Chrome</option>
  	<option>Opera</option>
  </form>
■ブラウザでのレンダリング結果（Operaの場合）
select要素

利用例のように、選択肢となる項目をoption要素で囲みます。ブラウザでレンダリングされると最初の項目が表示されるが、プルダウンメニューボタンをクリックすると選択候補となる項目が表示されます。

★ sizeコンテンツ属性

sizeコンテンツ属性を指定すると、一度に表示する選択項目数を指定することができます。ただし、このコンテンツ属性には1以上の整数を指定しなければいけません。
利用例に表示項目数を3つにする場合には次のようにマークアップします。

■利用例
  <select name="browser" size="3">
■ブラウザでのレンダリング結果
select要素
★ multipleコンテンツ属性

通常、select要素で選択できる項目は1つですが、複数の項目を選択できるようにするにはmultipleコンテンツ属性をセットします。

■利用例
  <select name="browser" multiple="multiple">
■ブラウザでのレンダリング結果
select要素

複数の項目を選択する方法は、プラットフォームの慣例に依存しますが、例えばWindowsであればCtrlキーを押しながら、該当する項目をクリックします。なお、このコンテンツ属性を指定すると、デフォルトでsizeコンテンツ属性の値が4だとして扱われます。

detalist要素（入力候補選択肢）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ、または0個以上のoption要素
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル datalist{
    display:none;
}

datalist要素は、テキスト・フィールドのサジェストの選択肢をグループ化するために使います。ちなみにサジェストとは、事前に定義しておいた値の候補をリスト形式でユーザに見せ、そこから選択することができるようにするものです。しかし、選択候補だけではなく、ユーザは任意の値を入力することもできます。
サジェストの候補は、datalist要素とoption要素を使います。datalist要素にはidコンテンツ属性をセットしておきます。そして、input要素のlistコンテンツ属性にそのdatalist要素のidコンテンツ属性の値をセットすることで、datalist要素にマークアップされた候補リストと関連付けます。

■利用例
  <p><label>好きなブラウザ：
  	<input type="text" name="browser" list="suggest" /></label></p>
  <datalist id="suggest">
  	<option value="エクスプローラ"></option>
  	<option value="サファリ"></option>
  	<option value="ファイアフォックス"></option>
  	<option value="クローム"></option>
  </datalist>
■ブラウザでのレンダリング結果（Operaの場合）
select要素

datalist要素をサポートしていないブラウザでは、option要素の開始タグと終了タグの間にコンテンツを入れない限り、何も表示されません。

optgroup要素（選択肢のグループ）

カテゴリ なし
コンテンツモデル 0個以上のoption要素
利用可能な場所 select要素の子として
開始タグ 必須
終了タグ 別のoptgroup要素が直後に来る場合、またはselect要素の中で最後となる場合は省略できる
要素固有のコンテンツ属性 disabled（コントロールを無効にする）
label（選択肢グループのラベルを指定）
デフォルトスタイル -

optgroup要素は、select要素の中のoption要素で表される選択肢をグループ化するために使います。選択肢グループのラベルにはlabelコンテンツ属性を使い、必須となります。

■利用例
  <select name="food">
  	<optgroup label="肉類">
  		<option>牛肉</option>
  		<option>豚肉</option>
  		<option>鶏肉</option>
  	</optgroup>
  	<optgroup label="野菜類">
  		<option>キャベツ</option>
  		<option>白菜</option>
  		<option>トマト</option>
  	</optgroup>
  </select>
■ブラウザでのレンダリング結果（Chromeの場合）
optgroup要素

利用例では、肉類と野菜類をグルーピングして、詳細項目を選択させるようにしています。

option要素（選択肢）

カテゴリ なし
コンテンツモデル テキスト
利用可能な場所 select要素、datalist要素、optgroup要素のそれぞれの子として
開始タグ 必須
終了タグ 別のoptgroup要素が直後に来る場合、またはoptgroup要素が直後に続く場合、または親要素の最後に来る場合は省略できる
要素固有のコンテンツ属性 disabled（コントロールを無効にする）
label（選択肢グループのラベルを指定）
selected（事前に選択された状態を表す）
value（選択肢の値を指定）
デフォルトスタイル -

option要素は、選択肢を表します。select要素、optgroup要素の中で使えば、プルダウンメニューも選択肢となり、datalist要素の中で使えば、テキスト・フィールド向けのサジェストの候補となります。

★ valueコンテンツ属性

valueコンテンツ属性を指定すると、その値が適用されます。

■利用例
  <select name="pref">
  	<option value="0">福岡</option>
  	<option value="1">熊本</option>
  	<option value="2">宮崎</option>
  	<option value="3">鹿児島</option>
  </select>

利用例では、valueコンテンツ属性に数値をセットしています。もし仮に、選択肢の中から福岡が選ばれた時は、valueコンテンツ属性の「0」の値が適用され、サーバ側に送信されます。もし、valueコンテンツ属性が指定されていない場合は、option要素で囲まれたテキストが適用されます。

★ labelコンテンツ属性

labelコンテンツ属性を使って、選択肢のラベルをセットすることができます。ラベルとは、その選択肢の表示内容のことです。ブラウザ上には選択肢としてラベルが表示されますが、labelコンテンツ属性をサポートしていないブラウザはoption要素で囲まれたテキスト、または数値が表示されます。

■利用例
  <select name="pref">
  	<option label="福岡">0</option>
  	<option label="熊本">1</option>
  	<option label="宮崎">2</option>
  	<option label="鹿児島">3</option>
  </select>
■ブラウザでのレンダリング結果（Chromeの場合）
option要素

利用例では、labelコンテンツ属性で指定された県名が表示されますが、実際にサブミットされる値はoption要素で囲まれた数値が適用されます。

★ selectedコンテンツ属性

selectedコンテンツ属性は論理属性で、このコンテンツ属性が指定されたoption要素が表す選択肢は、デフォルトで選択された状態となります。

■利用例
  <select name="pref">
  	<option>福岡</option>
  	<option>熊本</option>
  	<option selected="selected">宮崎</option>
  	<option>鹿児島</option>
  </select>

利用例では、ページがロードされた直後は宮崎が選択されている状態で表示されます。

★ disabledコンテンツ属性

disabledコンテンツ属性は論理属性で、このコンテンツ属性が指定されたoption要素が表す選択肢は、無効になります。つまり、選択することができなくなります。

■利用例
  <select name="pref">
  	<option disabled="disabled">福岡</option>
  	<option>熊本</option>
  	<option>宮崎</option>
  	<option>鹿児島</option>
  </select>

利用例では、福岡は選択できなくなる指定になります。
多くのブラウザでは、無効にされた選択肢はグレーになり、選択できなくなります。

【各要素のリファレンス20】