「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。
今回は、試験範囲でもある「HTML5.1のフォーム」のまとめ。
ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。
実際に受験してきた時の結果と感想はこちら↓をご覧ください。
先日、「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の認定試験を受験してきました。 これまで20年以上、Webサイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]
form要素
form要素は、フォーム関連の要素をとりまとめ、ユーザーが入力・選択したデータをサーバに送信するための要素。
属性名 | 値の示すもの | 指定可能な値 |
action | フォームの送信先のURL | URL(※空文字は不可) |
accept-charset | フォーム送信時の文字コード | 文字コード(※空白文字区切り) |
autocomplete | フォーム内のオートコンプリート機能のデフォルト値 | autocomplete=”on” または autocomplete=”off” |
enctype | フォームのデータを送信する際のデータ形式をMIMEタイプで指定 | enctype=”application/x-www-form-urlencoded” または enctype=”multipart/form-data” または enctype=”text/plain“ |
method | フォームのデータを送信する際のHTTPメソッドを指定 | method=”GET” または method=”POST” |
name | フォームの名前 | テキスト |
novalidate | 入力(選択)内容のチェックを行わない | 論理属性(属性名だけで指定可) |
target | フォームの送信結果を表示させるブラウジングコンテキスト(ウィンドウやタブなど)を指定 | ブラウジングコンテキスト名 または キーワード |
HTML4.01やXHTML1.0のフォームでは、フォームの送信に関する設定を行う属性ではform要素でしか指定できなかったが、HTML5では同じ機能を持つ属性が送信ボタンにも指定できるようになっている。
<input type=”submit”>
<input type=”image”>
<button></button>
form要素のaction属性 ⇒ formaction属性
form要素のenctype属性 ⇒ formenctype属性
form要素のmethod属性 ⇒ formmethod属性
form要素のnovalidate属性 ⇒ formnovalidate属性
form要素のtarget属性 ⇒ formtarget属性
input要素
input要素は、type属性で指定したキーワードによって様々な種類の入力・選択用部品となる要素。
type=”text”
<input type=”text”>
■指定できる属性
autocomplete
<input type=”password”>
<input type=”search”>
<input type=”email”>
<input type=”tel”>
<input type=”url”>
<input type=”number”>
<input type=”range”>
<input type=”checkbox”>
<input type=”radio”>
<input type=”submit”>
<input type=”reset”>
<input type=”button”>
<input type=”image”>
<input type=”file”>
<input type=”color”>
<input type=”date”>
<input type=”month”>
<input type=”week”>
<input type=”time”>
<input type=”datetime-local”>
<input type=”hidden”>
textarea要素
textarea要素は、複数行のテキスト入力フィールドとなる要素。要素内に入れたテキストは、入力フィールドにあらかじめ入力された状態で表示される。
属性名 | 値 |
form | フォーム部品を特定のform要素(id属性の値で指定)と関連付ける。 id属性の値 |
name | フォーム部品の名前 テキスト |
cols | 1行に入力可能な文字数。 1以上の整数(デフォルトは20) |
rows | 入力欄の行数。 1以上の整数(デフォルトは2) |
maxlength | 最大文字数 整数(負の値は指定不可) |
minlength | 最小文字数 整数(負の値は指定不可) |
autocomplete | autocomplete=”on” または autocomplete=”off” または 自動入力詳細トークン |
inputmode | 入力モードを指定。 latin(英字) latin-name(英字 – 名前の入力用) latin-prose(英字 – 文章の入力用) full-width-latin(全角英字) verbatim(半角英数字 – 文章ではなく短い入力用)kana(全角ひらがな) kana-name(全角ひらがな – 名前の入力用) katakana(全角カタカナ)numeric(数値)※<input type=”number”>を推奨 tel(電話番号)※<input type=”tel”>を推奨 email(Eメール)※<input type=”email”>を推奨 url(URL)※<input type=”url”>を推奨 |
autofocus | ページが読み込まれたら自動的にこの要素にフォーカスする。 論理属性(属性名だけで指定可) |
disabled | フォームの部品を無効にする。 論理属性(属性名だけで指定可) |
readonly | 値の編集(変更)ができないようにする。 論理属性(属性名だけで指定可) |
required | 入力・選択されていることが必須であることを示す。 論理属性(属性名だけで指定可) |
dirname | 文字表記の方向を示す値を送信するフィールドの名前。 テキスト(空文字は不可) |
placeholder | プレースフォルダー(入力すべき値がわかるように入力欄内に表示される入力例や簡単な説明) テキスト |
wrap | フォームのデータを送信する際、入力されたテキストの行の折り返し部分に改行コードを加えるかどうか。 soft … 自動的な折り返しが入ります。しかし、送信される内容にはその改行は反映されません。 hard … 自動的な折り返しが入ります。そして、送信される内容にもその改行が反映されます。 off … 自動的な折り返しは入りません。入力内容が幅を超えた場合は、横にスクロールしていくことになります。 |
<textarea form=”sampleform” name=”naiyo” cols=”50″ rows=”5″ maxlength=”300″ minlength=”1″ autocomplete=”on” inputmode=”kana” placeholder=”初期値” wrap=”hard”>textarea要素内のテキスト</textarea>
button要素
button要素は、要素内容がそのままラベルとして表示されるボタンになる要素。
button要素の内容は、フレージングコンテンツが入れられるが、インタラクティブコンテンツは一切含むことができない。
属性名 | 値 |
type | submit(送信ボタン)※デフォルト reset(リセットボタン) menu(メニューを表示させるボタン) ※menu属性の指定が必要 button(そのままでは何もしないボタン) |
menu | menu要素のid属性の値 |
form | フォーム部品を特定のform要素(id属性の値で指定)と関連付ける。 id属性の値 |
name | フォーム部品の名前 テキスト |
value | フォームのデータを送信する際に使用される値 テキスト |
autofocus | ページが読み込まれたら自動的にこの要素にフォーカスする。 論理属性(属性名だけで指定可) |
disabled | フォームの部品を無効にする。 論理属性(属性名だけで指定可) |
formaction | フォームの送信先のURL URL(空文字は不可) |
formenctype | フォームのデータを送信する際のデータ形式をMIMEタイプで指定 application/x-www-form-urlencoded または multipart/form-data または text/plain |
formmethod | フォームのデータを送信する際のHTTPメソッドを指定 GET または POST |
formnovalidate | 入力(選択)内容のチェックを行わない 論理属性(属性名だけで指定可) |
formtarget | 送信結果を表示させるブラウジングコンテキスト(ウィンドウやタブなど)を指定 ブラウジングコンテキスト名またはキーワード |
select要素
select要素は、選択肢の中から選ぶ形式のフォーム部品になる要素。
選択肢はselect要素の内部でoption要素としてマークアップするが、それらはoptgroup要素でグループ化することもできる。
select要素の要素内容としては、script要素とtemplate要素を入れることもできる。
属性名 | 値 |
form | フォーム部品を特定のform要素(id属性の値で指定)と関連付ける。 form要素のid属性の値 |
name | フォーム部品の名前 テキスト |
multiple | 複数の入力・選択を許可する 論理属性(属性名だけで指定可) |
size | 表示させる項目数 整数(負の値は指定不可) |
autocomplete | autocomplete=”on” または autocomplete=”off” または 自動入力詳細トークン |
autofocus | ページが読み込まれたら自動的にこの要素にフォーカスする。 論理属性(属性名だけで指定可) |
disabled | フォームの部品を無効にする。 論理属性(属性名だけで指定可) |
required | 入力・選択されていることが必須であることを示す 論理属性(属性名だけで指定可) |
option要素
option要素は、select要素またはdatalist要素の選択肢となる要素。
label属性が指定されているとその値が選択肢となる。label属性が指定されていない場合は、要素内容が選択肢となる。
value属性が指定されていると、その値がサーバに送信される。value属性が指定されていない場合は要素内容が送信される。
属性名 | 値 |
label | 要素内容よりも優先して表示される選択肢 |
value | 要素内容よりも優先してサーバーに送信される値 |
selected | デフォルトで選択済みの状態になっていることを示す 論理属性(属性名だけで指定可) |
disabled | フォームの部品を無効にする 論理属性(属性名だけで指定可) |
option要素にlabel属性とvalue属性の両方を指定する場合は、要素内容は空にする。
option要素の終了タグは、次の条件に当てはまる場合に省略可能。
■ 直後に別のoption要素が続くとき
■ 直後にoptgroup要素があるとき
■ 親要素から見て、最後の子要素であるとき
optgroup要素
optgroup要素は、select要素内のoption要素をグループ化して、そこにグループの名前(ラベル)をつける要素。
グループの名前はlabel属性で指定する。label属性は必ず指定する必要がある。
optgroup要素の内容には、0個以上のoption要素のほか、script要素とtemplate要素も入れられる。
属性名 | 値 |
label | グループの名前(ラベル) |
disabled | フォームの部品を無効にする 論理属性(属性名だけで指定可) |
optgroup要素の終了タグは、次の条件に当てはまる場合に省略可能。
■ 直後に別のoptgroup要素が続くとき
■ 親要素から見て、最後の子要素であるとき
meter要素
meter要素は、その名のとおりメーター(ゲージ)として使用する要素。
具体的には、ディスクの使用状況を示す場合など、特定の範囲内での位置を示す場合に使用する。
要素内容には、この要素に未対応のブラウザ向けに、メーターの状態をテキストで表現したものを入れる。対応ブラウザでは要素内容は表示されない。
属性名 | 値 |
value | 要素の現在地 浮動小数点数 |
min | メーターの示す範囲全体の下限 浮動小数点数 |
max | メーターの示す範囲全体の上限 浮動小数点数 |
low | メーターの範囲を「低」「中」「高」の3つに分割した場合の「低」の上限 浮動小数点数 |
high | メーターの範囲を「低」「中」「高」の3つに分割した場合の「低」の下限 浮動小数点数 |
optimum | メーターの示す範囲内での最適地 |
<p>ディスク使用量:
<meter min=”0″ max=”3000000″ value=”2300000″>
容量:3000000バイト<br>
使用領域:2300000バイト
</meter>
</p>
ディスク使用量:
容量:3000000バイト
使用領域:2300000バイト
<p>ディスク使用量:
<meter value=”2700000″ min=”0″ max=”3000000″ low=”1000000″ high=”2500000″ optimum=”1000000″>
容量:3000000バイト<br>
使用領域:2300000バイト
</meter>
</p>
ディスク使用量:
容量:3000000バイト
使用領域:2300000バイト
progress要素
progress要素は、タスク(コンピューターが行っている作業)の進み具合をあわらすための専用要素。
要素内容には、この要素に未対応のブラウザ向けに、現在の状態をテキストで表現したものを入れる。対応ブラウザでは、要素内容は表示されない。
要素内容や属性値を逐次更新するにはスクリプトを利用する。
属性値 | 値 |
value | 現在の込み具合 浮動小数点数 |
max | タスクの全体量 浮動小数点数 |
<p>処理の進捗状況:
<progress id=”pbar” value=”80″ max=”100″><span>10</span>%</progress>
</p>
処理の進捗状況:
datalist要素
datalist要素は、input要素にサジェスト機能を追加する(入力候補の選択肢を与える)要素。
datalist要素の中に入れたoption要素が選択肢となる。
input要素とdatalist要素を関連付けるには、datalist要素のid属性の値をinput要素のlist属性に指定する。
datalist要素の使い方は2つ。
1.datalist要素の中にそのままoption要素を入れて選択肢にする方法
<p> <label> 取得したい資格:<input type="text" name="c" list="certi"> <datalist id="certi"> <option value="HTML5プロフェッショナル認定試験"> <option value="ウェブデザイン技能検定"> </datalist> </label> </p>
2.datalist要素に未対応のブラウザ用に、要素内容としてselect要素を入れ、その中のoption要素を選択肢として使用させる方法
datalist要素に未対応のブラウザでは要素内容がそのまま表示されて使用でき、対応ブラウザでは要素内容は表示されずにoption要素だけが入力候補として使用される。
<p> <label> 取得したい資格:<input type="text" name="c1" list="certi"> </label> <datalist id="certi"> <!--未対応ブラウザの場合--> <br> <label> ※上の入力欄に入力するか、次のメニューから選択してください。 <br> <select name="c2"> <option value=""></option> <option>HTML5プロフェッショナル認定試験</option> <option>ウェブデザイン技能検定</option> </select> </label> </datalist> </p>
output要素
output要素は、計算結果やユーザーの操作による結果を示すための要素。
属性名 | 値 |
for | 計算の元となったフォーム部品を示す 値には、計算の元となった要素のid属性やname属性の値(空白文字区切り) |
name | フォーム部品の名前 値には、テキスト |
form | form要素のid属性の値 |
keygen要素
HTML5で追加されたkeygen要素は、現在仕様から削除する方向で作業が進められている。HTML5.1では、この要素を使用しないことを強く推奨しえいる。
keygen要素は、公開鍵暗号における公開鍵・秘密鍵のペアを生成するフォーム部品。
フォームを送信すると、秘密鍵はローカルに保存され、公開鍵はサーバーに送られる。
属性名 | 値 |
keytype | 生成する暗号鍵の種類 値には、テキスト(rsaなど) |
challenge | 生成・署名された公開鍵とともに送信される文字列 値には、テキスト |
name | ※前述と同じ |
autofocus | ※前述と同じ |
disabled | ※前述と同じ |
form | ※前述と同じ |
label要素
label要素は、その要素内容であるラベル(その部品が何の項目であるのかを示すテキスト)とフォームの部品とを関連付けるための要素。
関連付けられたラベルは、部品と一体化してユーザーの操作に反応するようになる。
ほぼすべてのフォーム部品とラベルを関連付けることができる。
input要素(type=”hidden” を除く)
textarea要素
button要素
select要素
keygen要素
meter要素
progress要素
output要素
label要素の要素内容としては、フレージングコンテンツが入れられるが、label要素自身もしくは関連付け以外のフォーム部品は入れられない。
属性名 | 値 |
for | フォーム部品(id属性の値で指定)とラベルを関連付ける 値には、id属性の値 |
label要素の使い方は2通り。
■上記要素をラベルとともにlabel要素の中に入れる。
<label><input type="checkbox" name="agree"> 同意する</label>
■上記要素にid属性を指定して、その値をlabel要素のfor属性にそのまま指定する。
<input type="checkbox" name="agree" id="ag"> <label for="ag">同意する</label>
fieldset要素
fieldset要素は、フォーム関連の要素をグループ化するための専用要素。
先頭にlegend要素を入れると、その要素内容がグループの名前として表示される。
fieldset要素の要素内容としては、フローコンテンツが入れられるが、legend要素を入れるのであれば必ず先頭に入れる必要がある。
属性名 | 値 |
disabled | フォームの部品を無効にする。 論理属性(属性名だけで指定可) |
form | ※上記説明と同じ |
name | ※上記説明と同じ |
legend要素
legend要素は、fieldset要素によってグループ化されたフォーム関連要素のグループ名(キャプション)を表示させるための要素。
legend要素を使用する場合は、必ずfieldset要素の内容の先頭に入れる必要がある。