HTML辞典 label要素、fieldset要素、legend要素、keygen要素の解説

HTML辞典 HTML辞典
この記事は約11分で読めます。

入力コントロールにおける項目名を表す<label>タグ、入力コントロールの内容をまとめる<fieldset>タグ、グループに見出しをつける<legend>タグ、公開鍵暗号の鍵ペアを生成する<keygen>タグの基本的な使用方法を掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

label要素
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ
  • フローコンテンツ
  • そのlabel要素によってラベル付けされていない、ラベル付け可能なフォーム関連要素を子孫要素に持つことは不可
fieldset要素
  • セクショニングルート
  • パルパブルコンテンツ
  • フローコンテンツ
  • リスト可能なフォーム関連要素
  • フローコンテンツ
  • 任意でlegend要素を1つ
legend要素 なし フレージングコンテンツ
keygen要素
  • インタラクティブコンテンツ
  • サブミット可能なフォーム関連要素
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ
  • ラベル付け可能なフォーム関連要素
  • リスト可能なフォーム関連要素
  • リセット可能なフォーム関連要素

グローバル属性(共通)

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

label要素 書式・概要

<label 属性="属性値">~</label>

label要素はフォーム関連要素の項目名を表します。項目名を表すには、

使用できる属性

for

入力コントロールに付与したid属性値を指定することで関連付けを行います。

form

任意のform要素に付与したid属性値を指定することで関連付けを行います。

fieldset要素 書式・概要

<fieldset 属性="属性値">~</fieldset>

fieldset要素は、フォームの内容をまとめます。fieldset要素によってまとめられた入力コントロールの内容グループには、legend要素によって見出しを指定できます。

使用できる属性

disabled(ディスエーブルド)

入力コントロールに付与したid属性値を指定することで関連付けを行います。

form

任意のform要素に付与したid属性値を指定することで関連付けを行います。

name

入力コントロールの内容グループに名前を付与します。

legend要素 書式・概要

<legend>~</legend>

legend要素は、fieldset要素によってまとめられたグループの見出しを表します。fieldset要素の最初の子要素として1つだけ使用できます。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>datalistタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <div>
	          <fieldset>
	              <legend>氏名</legend>
	              <label for="last-name">苗字:</label>
	              <input type="text" id="last-name" name="name">
	              <label for="first-name">名前:</label>
	              <input type="text" id="first-name" name="name">
	          </fieldset>
          </div>
          <div>
	          <fieldset>
	              <legend>性別</legend>
	              <input type="radio" id="gender-male" name="sex" value="男性">
	              <label for="gender-male">男性</label>
	              <input type="radio" id="gender-female" name="sex" value="女性">
	              <label for="gender-female">女性</label>
	          </fieldset>
          </div>
          <div>
              <input type="submit" value="送信">
          </div>
      </form>
  </body>
</html>

chrome 実行サンプル

Firefox 実行サンプル

edge 実行サンプル

opera 実行サンプル

keygen要素 書式・概要

<keygen 属性="属性値">~</keygen>

keygen要素は公開鍵暗号方式における鍵ペアの生成を定義します。生成された鍵ペアは、この要素が関連付けられたフォームを送信する際に使用されます。ブラウザーは公開鍵をサーバーに送信し、秘密鍵を閲覧者のローカル環境に保存します。対応しているブラウザーで表示した場合は、暗号の強度を選択できるプルダウンメニューが表示されます。

2022/05/20時点では、chrome、Firefox、edge、operaでは対応していません。

使用できる属性

autofocus(オート・フォーカス)

【論理属性】

Webページが読み込まれた際に、自動的にボタンにフォーカスが移ります。

<keygen autofocus>~</keygen>

challenge(チャレンジ)

keygen要素によって鍵ペアを生成する際に使用されるチャレンジ文字列を指定します。

form

任意のform要素に付与したid属性値を指定することで、関連付けを行います。対応ブラウザでは、form要素の外にボタンがあった場合でも、送信が可能です。※以前はJavaScriptで対応して部分になります。

disabled(ディスエーブルド)

【論理属性】

ボタンを無効にします。

<keygen disabled>~</keygen>

keytype

keygen要素による暗号化の方式をキーワードで指定します。初期値は「rsa」

name

データ送信する際に使用されるクエリ名です。

<keygen name="xxxxxx">~</keygen>

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>keygenタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <p>公開鍵暗号の鍵ペアを生成する</p>
          <p><keygen name="key" challenge="sunarin"></p>
          <p><input type="submit" value="発行"></p>
      </form>
  </body>
</html>

コメント

タイトルとURLをコピーしました