チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

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で表示したとき
f:id:chooringo:20190812123306p:plain

カテゴリ
・なし

コンテンツモデル
・0または1つ以上のoption要素、スクリプトサポーティング要素

コンテンツ属性
・グローバル属性
・disabled - フォームコントロールを無効にする(論理属性)
・label - グループ名

タグの記載場所
・select要素の子要素として配置

option要素

select要素またはdatalist要素の選択肢を表す。

<select>
    <optgroup label="ラーメン">
        <option>醤油ラーメン</option>
        <option selected>味噌ラーメン</option>
        <option>塩ラーメン</option>
    </optgroup>
</select>

chromeで表示したとき
f:id:chooringo:20190812123400p:plain

カテゴリ
・なし

コンテンツモデル
・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で表示したとき
f:id:chooringo:20190803170202p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
インタラクティブコンテンツ
・リスト要素、ラベル付け要素、サブミット要素、再関連付け可能なフォーム関連要素
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ(ただし、インタラクティブコンテンツ以外)

コンテンツ属性
・グローバル属性
・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で表示したとき
f:id:chooringo:20190803170943p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
インタラクティブコンテンツ
・リスト要素、ラベル付け要素、サブミット要素、リセット要素、再関連付け可能なフォーム関連要素
・パルパブルコンテンツ

コンテンツモデル
・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で表示したとき
f:id:chooringo:20190803173043p:plain
f:id:chooringo:20190803173054p:plain
実装方法その2をIE9で表示したとき(datalist要素に対応していないブラウザ)
f:id:chooringo:20190803173138p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・フレージングコンテンツ
・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 f:id:chooringo:20190727192137p:plain
search f:id:chooringo:20190727192137p:plain
tel f:id:chooringo:20190727192137p:plain
url f:id:chooringo:20190727192137p:plain
email f:id:chooringo:20190727192137p:plain
password f:id:chooringo:20190727192137p:plain
date f:id:chooringo:20190727192523p:plain
month f:id:chooringo:20190727201052p:plain
week f:id:chooringo:20190727201110p:plain
time f:id:chooringo:20190727201138p:plain
datetime-local f:id:chooringo:20190727201150p:plain
number f:id:chooringo:20190727201227p:plain
range f:id:chooringo:20190727201931p:plain
color f:id:chooringo:20190727203249p:plain
checkbox f:id:chooringo:20190727202000p:plain
radio f:id:chooringo:20190727202015p:plain
file f:id:chooringo:20190727202056p:plain
submit f:id:chooringo:20190727202114p:plain
image f:id:chooringo:20190727202136p:plain
reset f:id:chooringo:20190727202114p:plain
button f:id:chooringo:20190727202114p:plain

※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で表示したとき
f:id:chooringo:20190720171904p:plain

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
f:id:chooringo:20190706180510p:plain

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で表示したとき※グループごとに色分けした
f:id:chooringo:20190629171732p:plain

カテゴリ
・なし

コンテンツモデル
・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で表示したとき※グループごとに色分けした
f:id:chooringo:20190629171732p:plain

カテゴリ
・なし

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性
・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で表示したとき
f:id:chooringo:20190622210722p:plain

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要素の子要素として配置