【HTML5プロフェッショナル認定試験レベル1】試験勉強まとめ（フォーム要素）

HTML5プロフェッショナル認定試験レベル1の試験勉強まとめ（フォーム要素）です。

form要素

ユーザーの入力・選択したデータをサーバーに送るための要素。

form要素に指定できる属性

属性	用途	補足説明
name	フォーム名
action	送信先URL	空文字不可
accept-charset	送信時の文字コード	空文字不可
autocomplete	フォーム内のオートコンプリート機能のon/off	autocomplete="on" または autocomplete="off"
enctype	データの送信形式	MIMEタイプ
method	データ送信時のHTTPメソッド	method="GET" または method="POST"
novalidate	入力・選択内容のチェックをしない	論理属性
target	ブラウジングコンテキストの指定	ブラウジングコンテキスト名またはキーワード

input要素

フォームの入力・選択部品要素。type属性の値（キーワード）によって様々な種類がある。

input要素のtype属性に指定できるキーワード

キーワード	用途	補足説明
text	テキスト入力フィールド（１行）	初期値
password	パスワード用入力フィールド
search	検索用入力フィールド
email	メールアドレス用入力フィールド
url	URL用入力フィールド
tel	電話番号用入力フィールド
number	数値用入力フィールド
range	スライダー
checkbox	チェックボックス
radio	ラジオボタン
submit	送信ボタン
reset	リセットボタン
button	汎用ボタン
image	画像送信ボタン
file	送信ファイルの選択
color	色の入力
date	日付の入力
month	年と月の入力
week	年と週番号の入力
time	時刻の入力
datetime-local	ローカルな日付と時刻
hidden	隠しフィールド	表示しないでテキストを送信することが可能

利用例）

<p>テキスト入力フィールド（１行）<br>
<input type="text" value="text"></p>
<p>パスワード用入力フィールド<br>
<input type="password" value="password"></p>
<p>検索用入力フィールド<br>
<input type="search" value="search"></p>
<p>メールアドレス用入力フィールド<br>
<input type="email" value="test@test.jp">
<p>URL用入力フィールド<br>
<input type="url" value="https://natsumo.hatenablog.com/"></p>
<p>電話番号用入力フィールド<br>
<input type="tel" value="090-1234-5678"></p>
<p>数値用入力フィールド<br>
<input type="number" value="0"></p>
<p>スライダー<br>
<input type="range"></p>
<p>チェックボックス<br>
<input type="checkbox" checked>チェックボックス（選択）<br>
<input type="checkbox">チェックボックス</p>
<p>ラジオボタン<br>
<input type="radio" checked>ラジオボタン（選択）<br>
<input type="radio">ラジオボタン</p>
<p>送信ボタン<br>
<input type="submit" value="送信ボタン"></p>
<p>リセットボタン<br>
<input type="reset" value="リセットボタン"></p>
<p>汎用ボタン<br>
<input type="button" value="汎用ボタン"></p>
<p>画像送信ボタン<br>
<input type="image" value="画像送信ボタン" name="walking" height="100" width="100" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png"></p>
<p>送信ファイルの選択<br>
<input type="file" value="送信ファイルの選択"></p>
<p>色の入力<br>
<input type="color"></p>
<p>日付の入力<br>
<input type="date"></p>
<p>年と月の入力<br>
<input type="month"></p>
<p>年と週番号の入力<br>
<input type="week"></p>
<p>時刻の入力<br>
<input type="time"></p>
<p>ローカルな日付と時刻<br>
<input type="datetime-local" value="ローカルな日付と時刻"></p>
<p>隠しフィールド<br>
<input type="hidden" value="隠しフィールド"></p>
<p>

以下画像ボタンに使う画像：

出力結果）

テキスト入力フィールド（１行）

パスワード用入力フィールド

検索用入力フィールド

メールアドレス用入力フィールド

URL用入力フィールド

電話番号用入力フィールド

数値用入力フィールド

スライダー

チェックボックス
チェックボックス（選択）
チェックボックス

ラジオボタン
ラジオボタン（選択）
ラジオボタン

送信ボタン

リセットボタン

汎用ボタン

画像送信ボタン

送信ファイルの選択

色の入力

日付の入力

年と月の入力

年と週番号の入力

時刻の入力

ローカルな日付と時刻

隠しフィールド

input要素に指定できる属性

属性	用途	補足説明
type	フォーム部品の種類
name	フォーム部品の名前
value	フォーム部品の値
size	幅を文字数で指定	※入力フィールドの場合|
autoforcus	フォーカスする要素の指定	論理属性
disabled	無効にする	論理属性
multiple	複数入力・選択の許可	論理属性
readonly	編集不可	論理属性
required	必須項目	論理属性

利用例）

<input type="text" value="value" size="50"><br>
<input type="text" value="value" disabled><br>
<input type="text" value="value" readonly>

出力結果）

属性	用途	補足説明
width	幅
height	高さ
max	最大値	※type属性の値によって異なる
min	最小値	※type属性の値によって異なる
maxlength	最大文字数	※入力フィールドの場合 正の整数
minlength	最小文字数	※入力フィールドの場合 正の整数
size	幅を文字数で指定	※入力フィールドの場合
pattern		指定された形式でない値が入力された場合は送信されない|※入力フィールドの場合 JavaScriptの正規表現
placeholder	入力例や説明	※入力フィールドの場合
dirname	送信する文字表記の方向を示す値	※入力フィールドの場合
list	入力時に選択可能な候補（datalist）の表示	※入力フィールドの場合 datalistのid
inputmode	入力モード（キーワード）	※入力フィールドの場合
autocomplete	オートコンプリート機能のon/off	※入力フィールドの場合 autocomplete="on" または autocomplete="off"（または自動入力詳細トークン）
checked	選択済み	※type="checkbox"またはtype="radio"のみ
accept	受付可能なファイルの種類（MIMEタイプ、拡張子）	※type="file"の場合
alt	画像が表示不可の場合の代替テキスト	※type="image"の場合
src	データのアドレス	URL
step	入力できるデータの間隔の指定	正の浮動小数点数または step="any"

利用例）

<input type="range" min="0" max="100" value="75"><br>
<input type="date" max="2020-09-14">

出力結果）

属性	用途	補足説明
form	form要素との紐付け	form要素のidを指定
formaction	フォーム送信先URL
formenctype	データの送信形式（MIMEタイプ）	formenctype="application/x-www-form-urlencoded" または formenctype="multipart/form-data" または formenctype="text/plain"
formmethod	データ送信時のHTTPメソッド	formmethod="GET" または formmethod="POST"
formnovalidate	入力・選択内容のチェックをしない	論理属性
formtarget	ブラウジングコンテキストの指定	ブラウジングコンテキスト名またはキーワード

inputmode属性に指定できるキーワード

キーワード	用途	補足説明
latin	英字
latin-name	英字	名前の入力
latin-prose	英字	文章の入力
verbatim	半角英数字	文章ではなく短い入力
kana	全角ひらがな
kana-name	全角ひらがな	名前の入力
katakana	全角カタカナ
full-width-latin	全角英字
numeric	数値	※type="number"での利用を推奨
tel	電話番号	※type="tel"での利用を推奨
email	メールアドレス	※type="email"での利用を推奨
url	URL	※type="url"での利用を推奨

textarea要素

複数行テキストの入力フィールド。

textarea要素に指定できる属性

最初の３つ以外はinput要素のtype="text"に共通。

属性	用途	補足説明
cols	１行に入力可能な文字数
rols	行数
wrap	行の折り返し部分に改行コードを入れるかどうか	wrap="soft" または wrap="hard"
name	フォーム名
form	form要素との紐付け	form要素のidを指定
maxlength	最大文字数	正の整数
minlength	最小文字数	正の整数
placeholder	入力例や説明
inputmode	入力モード（キーワード）
autocomplete	オートコンプリート機能のon/off	※入力フィールドの場合 autocomplete="on" または autocomplete="off"（または自動入力詳細トークン）
autoforcus	フォーカスする要素の指定	論理属性
dirname	送信する文字表記の方向を示す値
disabled	無効にする	論理属性
readonly	編集不可	論理属性
required	必須項目	論理属性

利用例）

<textarea cols="50" rows="5" placeholder="textarea"></textarea>

出力結果）

button要素

ボタン。value属性の値ではなく、要素の内容が表示される。

button要素に指定できる属性

menuボタンというのがあるらしい。

属性	用途	補足説明
type	ボタンの種類	type="submit" または type="reset" または type="menu" または type="button"
name	ボタンの名前
value	データ送信時に使用される値
menu	ボタンを表示させるメニューの指定	menu要素のid
autoforcus	フォーカスする要素の指定	論理属性
disabled	無効にする	論理属性
form	form要素との紐付け	form要素のidを指定
formaction	フォーム送信先URL
formenctype	データの送信形式（MIMEタイプ）	formenctype="application/x-www-form-urlencoded" または formenctype="multipart/form-data" または formenctype="text/plain"
formmethod	データ送信時のHTTPメソッド	formmethod="GET" または formmethod="POST"
formnovalidate	入力・選択内容のチェックをしない	論理属性
formtarget	ブラウジングコンテキストの指定	ブラウジングコンテキスト名またはキーワード

利用例）

<button type="submit">ボタン</button>

出力結果）

ボタン

select要素/option要素/optgroup要素

select要素はプルダウン（選択肢から選ぶ）形式。option要素はその選択肢。ogtgroup要素はoption要素をグループ化するもの。

• option要素とoptgroup要素は次の次の場合終了タグを省略可能
  • 親要素から見て最後の子要素であるとき
  • 直後に以下の要素が続く場合
    • optionは別のoptionまたはoptgroup
    • optgroupはoptgroup

利用例）

<select>
    <optgroup label="飲み物">
        <option>コーラ</option>
        <option>オレンジジュース</option>
        <option>コーヒー</option>
        <option>紅茶</option>
    </optgroup>
    <optgroup label="軽食">
        <option>サンドウィッチ</option>
        <option>ホットドック</option>
        <option>おにぎり</option>
    </optgroup>
</select>

出力結果）

コーラ オレンジジュース コーヒー 紅茶 サンドウィッチ ホットドック おにぎり

select要素に指定できる属性

属性	用途	補足説明
size	表示させる項目数
form	form要素との紐付け	form要素のidを指定
name	フォーム部品の名前
autocomplete	フォーム内のオートコンプリート機能のon/off	autocomplete="on" または autocomplete="off"
multiple	複数入力・選択の許可	論理属性
required	必須項目	論理属性
autoforcus	フォーカスする要素の指定	論理属性
disabled	部品の無効化	論理属性

option要素に指定できる属性

属性	用途	補足説明
label	選択肢の表示名	要素内容よりも優先して表示される
value	サーバーに送信される値	要素内容よりも優先して送信される
selected	選択済み	論理属性
disabled	部品の無効化	論理属性

ogtgroup要素に指定できる属性

属性	用途	補足説明
label	グループ名
disabled	部品の無効化	論理属性

datalist要素/option要素

datalist要素はinput要素に入力候補の選択肢を与えもの。option要素はその選択肢。
関連付けるにはdatalist要素のid属性を、input要素のlist属性に指定する。

利用例）

<input type="text" list="drink" placeholder="飲み物を選ぶ">
<datalist id="drink">
    <option value="cola">
    <option value="milk">
    <option value="tea">
    <option value="coffee">
</datalist>

出力結果）

meter要素

メータゲージの表示用。input要素のtype="renge"に近い？
ブラウザによるけど３分割した時の色は、最適値と同じ範囲内なら「緑」、隣なら「黄」、離れると「赤」で表示される。

meter要素に指定できる属性

属性	用途	補足説明
value	現在地
min	範囲全体の下限
max	範囲全体の上限
low	範囲を３分割した時の下の上限
high	範囲を３分割した時の上の下限
optimum	最適値

利用例）

<meter min="0" max="100" value="70"></meter><br>
<meter min="0" low="20" high="80" max="100" value="10" optimum="50"></meter><br>
<meter min="0" low="20" high="80" max="100" value="90" optimum="50"></meter><br>
<meter min="0" low="20" high="80" max="100" value="90" optimum="15"></meter>

出力結果）

progress要素

タスクの進み具合を表す要素。

progress要素に指定できる属性

属性	用途	補足説明
value	現在の進捗状況
max	タスクの全体量

利用例）

タスク進捗状況：<progress value="40" max="100"><span>40<span>%</progress>

出力結果）

タスク進捗状況：40%

※progress要素に未対応の場合に備え、内容が表示されるようにしておく。

output要素

計算結果の出力フィールド。

output要素に指定できる属性

属性	用途	補足説明
name	フォーム部品の名前
for	計算元フォーム部品	計算元要素のidやnameの値
form	form要素との紐付け	form要素のidを指定

利用例）

<form onsubmit="return false" oninput="sum.value = a.valueAsNumber + b.valueAsNumber">
    <input type="number" name="a"> + 
    <input type="number" name="b"> =
    <output for="a b" name="sum"></output>
</form>

出力結果）

+ =

label要素

フォーム部品と関係付けするラベルのこと。

label要素に関連付けできるフォーム部品
input要素（type"hidden"を除く）	textarea要素	button要素
select要素	meter要素	progress要素
output要素	keygen要素

label要素に指定できる属性

属性	用途	補足説明
for	ラベルに関連付けるフォーム部品	フォーム部品のid

利用例）ラベルで囲むかidで紐付けるかどちらか

<label>名前：<input type="text" name="name"></label><br>
<label for="namefield">名前：<label><input type="text" name="name" id="namefield">

出力結果）

名前：
名前：

fieldset要素/legend要素

fieldset要素はフォーム関連要素をグループ化するもの。legend要素はfieldset要素のグループ名（キャプション）の表示をするもの。

fieldset要素に指定できる属性

属性	用途	補足説明
name	フォーム部品の名前
form	form要素との紐付け	form要素のidを指定
disabled	無効にする	論理属性

利用例）

<form>
  <fieldset>
    <legend>ログイン</legend>
    <label>名前：　　　<input type="text" name="name"></label><br>
    <label>パスワード：<input type="password" name="password"></label>
  </fieldset>
  <input type="submit" value="送信">
</form>

出力結果）

ログイン

名前：　　　
パスワード：