HTML5のフォーム関連~optgroup要素、option要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
フォーム関連
optgroup要素
option要素をグループ化してラベル付けができる。
<select> <optgroup label="ラーメン"> <option>醤油ラーメン</option> <option>味噌ラーメン</option> <option>塩ラーメン</option> </optgroup> <optgroup label="焼きそば"> <option>ソース焼きそば</option> <option>塩焼きそば</option> </optgroup> </select>
chromeで表示したとき
カテゴリ
・なし
コンテンツモデル
・0または1つ以上のoption要素、スクリプトサポーティング要素
コンテンツ属性
・グローバル属性
・disabled - フォームコントロールを無効にする(論理属性)
・label - グループ名
タグの記載場所
・select要素の子要素として配置
option要素
select要素またはdatalist要素の選択肢を表す。
<select> <optgroup label="ラーメン"> <option>醤油ラーメン</option> <option selected>味噌ラーメン</option> <option>塩ラーメン</option> </optgroup> </select>
chromeで表示したとき
カテゴリ
・なし
コンテンツモデル
・label属性とvalue属性を持つ場合:なし
・label属性を持つがvalue属性がない場合:テキスト
・label属性を持たず、datalist要素の子要素でない場合:空白以外のテキスト
・label属性を持たず、datalist要素の子要素の場合:テキスト
コンテンツ属性
・グローバル属性
・disabled - フォームコントロールを無効にする(論理属性)
・label - ラベル名。この属性が指定なしなら要素のコンテンツが選択肢となる。
・selected - デフォルトで選択済みする(論理属性)
・value - フォーム送信時に使用する値。この属性が指定なしなら要素のコンテンツがフォーム送信される。
タグの記載場所
・select要素の子要素として配置可能
・datalistの子要素として配置可能
・optgroup要素の子要素として配置可能
HTML5のフォーム関連~button要素、select要素、datalist要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
フォーム関連
button要素
formを送信するボタン(type:submit)、formをリセットするボタン(type:reset)、汎用ボタン(type:button)を作成できる。
<button type="submit">submitボタン</button> <button type="reset">resetボタン</button> <button type="button">汎用ボタン</button>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・インタラクティブコンテンツ
・リスト要素、ラベル付け要素、サブミット要素、再関連付け可能なフォーム関連要素
・パルパブルコンテンツ
コンテンツモデル
・フレージングコンテンツ(ただし、インタラクティブコンテンツ以外)
コンテンツ属性
・グローバル属性
・autofocus - ページがロードされた時フォームコントロールに自動でフォーカルさせるか(論理属性)
・disabled - フォームコントロールを無効にする(論理属性)
・form - そのフォームコントロールをform要素と紐づける(form要素のid)
・formaction - フォーム送信するURL
・formenctype - フォーム送信時のデータエンコーディング(列挙型属性。application/x-www-form-urlencoded、multipart/form-data、text/plain)
・formmethod - フォーム送信時のHTTPメソッド(列挙型属性。get、post、dialog。デフォルトはget)
・formnovalidate - form入力値の検証を無効にする(論理属性)
・formtarget - form送信後のブラウジングコンテキスト(ブラウジングコンテキストのキーワード)
・name - フォームコントロール名
・type - ボタンの種類(submit,reset,buttonを指定可能。デフォルトはsubmit。)
・value - フォーム送信で使用される値
タグの記載場所
・フレージングコンテンツが配置できる場所
select要素
リストの中からオプションを選択するためのコントロール。(プルダウンを作成する。)
<select size="2" multiple autofocus> <option>醤油ラーメン</option> <option>味噌ラーメン</option> <option>塩ラーメン</option> <option>つけ麺(醤油)</option> <option>汁なし担々麺</option> </select>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・インタラクティブコンテンツ
・リスト要素、ラベル付け要素、サブミット要素、リセット要素、再関連付け可能なフォーム関連要素
・パルパブルコンテンツ
コンテンツモデル
・0または1つ以上のoption要素、optgroup要素
コンテンツ属性
・グローバル属性
・autocomplete - フォームの自動補完機能(on、off、自動入力詳細トークンを指定)
・autofocus - ページがロードされた時フォームコントロールに自動でフォーカルさせるか(論理属性)
・disabled - フォームコントロールを無効にする(論理属性)
・form - そのフォームコントロールをform要素と紐づける(form要素のid)
・multiple - 複数の値を指定可能にするかの設定(論理属性)
・name - フォームコントロール名
・required - 必須項目にするかどうか(論理属性)
・size - ユーザに表示するオプションの数(0より大きい整数)
タグの記載場所
・フレージングコンテンツが配置できる場所
datalist要素
他の要素で定義済みのオプションを表す。
実装方法は以下の2つがある。
1つ目は、datalist要素の子要素にoption要素のみ配置
2つ目は、datalist要素に対応していないブラウザのために、datalist要素の子要素にselect要素、さらにその子要素にoption要素を配置
<h3>実装方法その1</h3> <input type="text" list="ramenlist"> <datalist id="ramenlist"> <option>醤油ラーメン</option> <option>味噌ラーメン</option> <option>塩ラーメン</option> </datalist> <h3>実装方法その2</h3> <input type="text" list="ramenlist2"> ←に入力するかまたは→から選択してください <datalist id="ramenlist2"> <select> <option>醤油ラーメン</option> <option>味噌ラーメン</option> <option>塩ラーメン</option> </select> </datalist>
chromeで表示したとき
実装方法その2をIE9で表示したとき(datalist要素に対応していないブラウザ)
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
コンテンツモデル
・フレージングコンテンツ
・0個または1個以上のoption要素、または、スクリプトサポーティング要素
上記どちらか。
コンテンツ属性
・グローバル属性
タグの記載場所
・フレージングコンテンツが配置できる場所
HTML5のフォーム関連~input要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
フォーム関連
input要素
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・type属性がhiddenでなければ、インタラクティブコンテンツ
・type属性がhiddenでなければ、リスト要素、ラベル付け要素、サブミット要素、リセット要素、再関連付け可能なフォーム関連要素
・type属性がhiddenでなければ、パルパブルコンテンツ
・type属性がhiddenならば、リスト要素、サブミット要素、リセット要素、再関連付け可能なフォーム関連要素
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・accept - fileを指定した際に選択できるファイルの種類(audio/*、video/*、image/*、MIMEタイプ、.{ファイル拡張子})
・alt - 画像が利用できない時の代替テキスト
・autocomplete - フォームの自動補完機能(on、off、自動入力詳細トークンを指定)
・autofocus - ページがロードされたらフォーカスする(論理属性)
・checked - 要素をチェック済みにするかどうか(論理属性)
・dirname - 文字の表記方向の値をフォーム送信する(表記方向をサーバサイドで取得したいname属性を指定)
・disabled - フォームコントロールを無効にする(論理属性)
・form - form要素に関連付ける(form要素のid属性値)
・formaction - フォーム送信するURL
・formenctype - フォーム送信時のデータエンコーディング(列挙型属性。application/x-www-form-urlencoded、multipart/form-data、text/plain)
・formmethod - フォーム送信時のHTTPメソッド(列挙型属性。get、post、dialog。デフォルトはget)
・formnovalidate - form入力値の検証を無効にする(論理属性)
・formtarget - form送信後のブラウジングコンテキスト(ブラウジングコンテキストのキーワード)
・height - 高さ
・list - 自動補完リストを指定(datalist要素のid属性値を指定)
・max - 要素に許容される値の範囲(max。type属性のよって定義が異なる)
・maxlength - max文字数
・min - 要素に許容される値の範囲(min。type属性のよって定義が異なる)
・minlength - min文字数
・multiple - 複数の値を指定可能にするかの設定(論理属性)
・name - フォームコントロール名
・pattern - 入力を許可する値のチェック(Javascriptの正規表現で記載)
・placeholder - 入力値に対するヒント
・readonly - 読むだけつまり編集不可能にするかどうか(論理属性)
・required - 必須項目にするかどうか(論理属性)
・size - ユーザが値を編集している間に見える範囲を文字数で指定(0より大きい値)
・src - リソースのアドレス
・step - 許容値の制限をする。例えば"3"なら、1つ目、3つ目、6つ目、9つ目・・が選択可能になる。
・type - フォームコントロールの種類※下記にtype属性値を記載
・value - フォームコントロールの値
・width - 横幅
・pattern属性を指定している時、title属性に入力パターンが一致していない旨を記載可能
タグの記載場所
・フレージングコンテンツが配置できる場所
<form action="" method="post"> <p><input type="hidden"></p> <p><input type="text"></p> <p><input type="search"></p> <p><input type="tel"></p> <p><input type="url"></p> <p><input type="email"></p> <p><input type="password"></p> <p><input type="date"></p> <p><input type="month"></p> <p><input type="week"></p> <p><input type="time"></p> <p><input type="datetime-local"></p> <p><input type="number"></p> <p><input type="range"></p> <p><input type="color"></p> <p><input type="checkbox"></p> <p><input type="radio"></p> <p><input type="file"></p> <p><input type="submit" value="value属性値に入れてるよ"></p> <p><input type="image" src="submit.png"></p> <p><input type="reset" value="value属性値に入れてるよ"></p> <p><input type="button" value="value属性値に入れてるよ"></p> </form>
type属性値 | chromeで表示したとき |
---|---|
hidden | ー |
text | |
search | |
tel | |
url | |
password | |
date | |
month | |
week | |
time | |
datetime-local | |
number | |
range | |
color | |
checkbox | |
radio | |
file | |
submit | |
image | |
reset | |
button |
※passwordは入力すると点で表示される
※date、month、week、datetime-localは選択するとカレンダーが表示される
※colorは選択するとカラーピッカーが表示される
HTML5のフォーム関連~form要素とlabel要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
フォーム関連
<form action="" method="post"> <P> <label for="fravor">ラーメンの種類</label> <input id="fravor" type="text" name="ramenfravor"> </P> <P> <label>トッピング<input type="text" name="ramentopping"></label> </P> </form>
chromeで表示したとき
form要素
フォーム関連要素のコレクションを表す。
カテゴリ
・フローコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・フローコンテンツ(ただし、form要素は子孫にできない)
コンテンツ属性
・グローバル属性
・accept-charset - form送信に使用する文字エンコード
・action - form送信に使用するURL
・autocomplete - formの自動入力のデフォルト設定(onかoffを指定)
・enctype - form送信に使用するエンコーディングタイプ
・method - form送信に使用するHTTPメソッド
・name - document.forms APIで使用するform名
・novalidate - form入力値の検証なしの設定(論理属性で指定)
・target - form送信後のブラウジングコンテキスト
タグの記載場所
・フローコンテンツが配置できる場所
label要素
フォームコントロールにラベル付けすることができる。
ラベル付けするには、for属性を使用するか、label要素の子孫としてフォームコントロールを配置する。
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・インタラクティブコンテンツ
・フォーム関連要素(button fieldset input label object output select textarea img)
・パルパブルコンテンツ
コンテンツモデル
・フレージングコンテンツ
(ただし、label要素を子孫に持つことは不可能。
また、label要素で関連付けしていない関連付け可能なフォーム関連要素も子孫に持つことは不可能。)
コンテンツ属性
・グローバル属性
・for - フォームコントロールとlabelを関連付ける。(フォームコントロールにはid属性で指定)
タグの記載場所
・フレージングコンテンツが記載可能な場所。
HTML5のテーブル系~thead要素とtbody要素とtfoot要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
テーブル関連
<table> <thead> <tr> <th>メニュー</th> <th>プレーンドーナツ</th> <th>チョコドーナツ</th> </tr> </thead> <tbody> <tr> <th>値段</th> <td>100円</td> <td>120円</td> </tr> <tr> <th>カロリー</th> <td>380kcal</td> <td>390kcal</td> </tr> </tbody> <tfoot> <tr> <th>メニュー</th> <th>プレーンドーナツ</th> <th>チョコドーナツ</th> </tr> </tfoot> </table>
chromeで表示したとき
ピンク:thead グレー:tbody ブルー:tfoot
thead要素
親要素であるtable要素のヘッダーの行グループを表す。
カテゴリ
・なし
コンテンツモデル
・0個以上のtr要素
・script要素、template要素
コンテンツ属性
・グローバル属性
タグの記載場所
・table要素の子要素として、caption要素やcolgroup要素の後、かつtbody要素やtfoot要素やtr要素の前に配置。
(ただし、table要素の子であるthead要素が他にない場合)
tbody要素
親要素であるtable要素の本体部分の行グループを表す。
カテゴリ
・なし
コンテンツモデル
・0個以上のtr要素
・script要素、template要素
コンテンツ属性
・グローバル属性
タグの記載場所
・table要素の子要素として、caption要素やcolgroup要素やthead要素の後に配置。
(ただし、table要素の子であるtr要素がない場合)
tfoot要素
親要素であるtable要素のフッター部分の行グループを表す。
カテゴリ
・なし
コンテンツモデル
・0個以上のtr要素
・script要素、template要素
コンテンツ属性
・グローバル属性
タグの記載場所
・table要素の子要素として、caption要素やcolgroup要素やthead要素やtbody要素やtr要素の後に配置。
(ただし、table要素の子であるtfoot要素が他にない場合)
HTML5のテーブル系~colgroup要素とcol要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
テーブル関連
colgroup要素
テーブル内の1つ以上の列のグループを表す。
<table> <caption>とあるラーメン屋のメニュー</caption> <colgroup span="1"></colgroup> <colgroup span="3"></colgroup> <tr> <th>メニュー</th> <th id="shouyu">醤油ラーメン</th> <th id="miso">味噌ラーメン</th> <th id="sio">塩ラーメン</th> </tr> <tr> <th id="price">値段</th> <td>800円</td> <td>850円</td> <td>800円</td> </tr> <tr> <th>カロリー</th> <td>420kcal</td> <td>570kcal</td> <td>480kcal</td> </tr> </table>
chromeで表示したとき※グループごとに色分けした
カテゴリ
・なし
コンテンツモデル
・span属性がある場合:なし
・span属性がない場合:0個以上のcol要素とtemplate要素
コンテンツ属性
・グローバル属性
・span - またがる列数を指定。ゼロより大きい正の整数を指定。
タグの記載場所
・table要素の子要素として、caption要素の後かつ、thead要素・tbody要素・tfoot要素・tr要素の前に配置可能。
col要素
テーブル内の1つ以上の列のグループを表す。
<table> <caption>とあるラーメン屋のメニュー</caption> <colgroup><col></colgroup> <!-- ➀ --> <colgroup><col><col><col></colgroup> <!-- ➁ --> <!-- ➀と➁は以下でも同じ結果になる <colgroup><col span="1"></colgroup> <colgroup><col span="3"></colgroup> --> <tr> <th>メニュー</th> <th id="shouyu">醤油ラーメン</th> <th id="miso">味噌ラーメン</th> <th id="sio">塩ラーメン</th> </tr> <tr> <th id="price">値段</th> <td>800円</td> <td>850円</td> <td>800円</td> </tr> <tr> <th>カロリー</th> <td>420kcal</td> <td>570kcal</td> <td>480kcal</td> </tr> </table>
chromeで表示したとき※グループごとに色分けした
カテゴリ
・なし
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・span - またがる列数を指定。ゼロより大きい正の整数を指定。
タグの記載場所
・span属性を持っていないcolgroup要素の子要素として配置可能。
HTML5のテーブル系~tr要素とth要素とtd要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
テーブル関連
<table> <tr> <th scope="row">メニュー</th> <th id="shouyu">醤油ラーメン</th> <th id="miso">味噌ラーメン</th> <th id="sio">塩ラーメン</th> </tr> <tr> <th id="price">値段</th> <td headers="shouyu price">800円</td> <td headers="miso price">850円</td> <td headers="sio price">800円</td> </tr> <tr> <th>カロリー</th> <td>420kcal</td> <td>570kcal</td> <td>480kcal</td> </tr> </table>
chromeで表示したとき
tr要素
テーブル内のセルの行を表す。
カテゴリ
・なし
コンテンツモデル
・0個以上のtd,th,またはスクリプトサポーティング要素
コンテンツ属性
・グローバル属性
タグの記載場所
・theadの子要素、tbodyの子要素、tfootの子要素として配置可能。
・tbodyの子要素として、caption,colgroup,theadの後に配置可能。(ただし、table要素内にtbody要素がない場合に限る)
th要素
テーブル内のヘッダーセルを表す。
カテゴリ
・なし
コンテンツモデル
・フローコンテンツ(ただし、header要素,footer要素,セクショニングコンテンツ,ヘッディングコンテンツ要素以外)
コンテンツ属性
・グローバル属性
・colspan - またがるセルの列数
・rowspan - またがるセルの行数
・headers - 属性を指定したセルに対応するヘッダーセルのidを指定
・scope - ヘッダーセルをどのセルに指定するか指定。row, col, rowgroup, colgroup, autoの5つの状態があり、デフォルトはauto。auto以外はキーワードとして指定。
・abbr - 他のコンテキストでセルを参照するときにヘッダーセルに使用する代替ラベル
タグの記載場所
・tr要素の子要素として配置
td要素
テーブル内のデータセルを表す。
カテゴリ
・セクショニングルート
コンテンツモデル
・フローコンテンツ
コンテンツ属性
・グローバル属性
・colspan - またがるセルの列数
・rowspan - またがるセルの行数
・headers - 属性を指定したセルに対応するヘッダーセルのidを指定
タグの記載場所
・tr要素の子要素として配置