フォーム(form) | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

  • 2021年1月10日
  • 2021年6月3日
  • 資格

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」をもとに書いています。

form要素

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.01XHTML1.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>

処理の進捗状況:10%

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要素の内容の先頭に入れる必要がある。

>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG