HTML - formタグ - 版の履歴

Wiki: /* aria属性 */

2024-11-27T16:37:29Z

aria属性

← 古い版		2024年11月28日 (木) 01:37時点における版
135行目:		135行目:
	<br>		<br>
	===== aria属性 =====		===== aria属性 =====
	~~role属性およびaria属性を活用することにより、支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。~~<br>		aria属性およびrole属性を活用することにより、スクリーンリーダー等の支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。<br>
	<br>		<br>
	* aria-label		* スクリーンリーダー向け
	*: 要素の説明ラベルを提供する。		** aria-label
	*: 視覚的なラベルがない場合に有効である。		**: 要素の説明ラベルを提供する。
	*: 例: aria-label="会員登録フォーム"		**: 視覚的なラベルがない場合に有効である。
	*: <br>		**: 例: aria-label="会員登録フォーム"
	* aria-labelledby		**: <br>
	*: 別の要素のIDを参照してラベルとして使用する。		** aria-labelledby
	*: <syntaxhighlight lang="html">		**: 別の要素のIDを参照してラベルとして使用する。
			**: <syntaxhighlight lang="html">
	<h2 id="form-title">お問い合わせ</h2>		<h2 id="form-title">お問い合わせ</h2>
	<form aria-labelledby="form-title">		<form aria-labelledby="form-title">
	</syntaxhighlight>		</syntaxhighlight>
	* ~~aria-required~~		**: <br>
	*: 入力必須項目であることを示す。		** aria-describedby
	*: HTML5のrequired属性と併用することが推奨される。		**: 補足説明を提供する要素との関連付け
	*: 例: aria-required="true"		**: <syntaxhighlight lang="html">
	*: <br>
	* ~~aria-invalid~~
	*: 入力値が無効であることを示す。
	*: バリデーションエラー時に使用する。
	*~~: 例:~~ aria-~~invalid="true"~~
	*~~: <br>~~
	* aria-describedby
	*: 補足説明を提供する要素との関連付け
	*: <syntaxhighlight lang="html">
	<input aria-describedby="email-hint">		<input aria-describedby="email-hint">
	<div id="email-hint">会社のメールアドレスを入力してください</div>		<div id="email-hint">会社のメールアドレスを入力してください</div>
	</syntaxhighlight>		</syntaxhighlight>
	* aria-errormessage		**: <br>
	*: エラーメッセージを示す要素との関連付け		** aria-live
	*: <syntaxhighlight lang="html">		**: 動的なコンテンツの更新を通知する。
			<br>
			* 支援技術全般向け (スクリーンリーダー以外も含む)
			** aria-required
			**: aria-required属性を"true"に指定する場合、スクリーンリーダー等の支援技術に対して、入力が必須であることを伝える。
			**: 視覚的な表示には影響しない。
			**: <br>
			**: HTML5のrequired属性は、Webブラウザに対して入力を必須として、フォーム送信時のバリデーションを行う。
			**: また、視覚的なUI表示にも影響する。
			**: したがって、aria-required属性とrequired属性を有効にすることにより、支援技術のユーザへのアクセシビリティを確保して、一般ユーザへのバリデーションも確保することができる。
			**: そのため、aria-required属性とrequired属性は同時に併用することが推奨される。
			**: 例: aria-required="true"
			**: <br>
			** aria-expanded
			**: 展開可能な要素の状態を示す。
			**: アコーディオン形式のフォームで使用する。
			**: 例: aria-expanded="false"
			**: <br>
			** aria-hidden
			**: 支援技術から要素を隠す。
			** aria-disabled
			**: 無効状態を示す。
			**: <br>
			** aria-errormessage
			**: エラーメッセージを示す要素との関連付け
			**: <syntaxhighlight lang="html">
	<input aria-errormessage="email-error">		<input aria-errormessage="email-error">
	<div id="email-error">正しいメールアドレスの形式で入力してください</div>		<div id="email-error">正しいメールアドレスの形式で入力してください</div>
	</syntaxhighlight>		</syntaxhighlight>
	* aria-~~expanded~~		<br>
	*: ~~展開可能な要素の状態を示す。~~		* 状態管理
	*: ~~アコーディオン形式のフォームで使用する。~~		** aria-invalid
	*: 例: aria-~~expanded~~="~~false~~"		**: 入力値が無効であることを示す。
	*: <br>		**: バリデーションエラー時に使用する。
	* aria-controls		**: 例: aria-invalid="true"
	*: 制御対象となる要素のIDを示す。		**: <br>
	*: <syntaxhighlight lang="html">		** aria-checked
			**: チェックボックスの状態
			**: <br>
			** aria-selected
			**: 選択状態
			**: <br>
			** aria-pressed
			**: ボタンの押下状態
			<br>
			* セマンティクス (意味構造) の補完
			** aria-controls
			**: 制御対象となる要素のIDを示す。
			**: <syntaxhighlight lang="html">
	<button aria-controls="address-fields">住所を入力</button>		<button aria-controls="address-fields">住所を入力</button>
	<div id="address-fields">		<div id="address-fields">
183行目:		212行目:
	</div>		</div>
	</syntaxhighlight>		</syntaxhighlight>
			**: <br>
			** aria-role
			**: 要素の役割を定義する。
			**: <br>
			** aria-controls
			**: 制御対象の要素を指定する。
			**: <br>
			** aria-owns
			**: 要素間の所有関係を示す。
			<br>
			aria属性は、支援技術だけでなく、アプリケーションの状態管理やテスト自動化のためにも使用されることがある。<br>
			また、WAI-ARIAの仕様に沿って実装することにより、アクセシビリティの向上だけでなく、コードの保守性や再利用性も高まる。<br>
	<br>		<br>
	<u>※注意</u><br>		<u>※注意</u><br>
190行目:		231行目:
	* スクリーンリーダーでの動作確認が推奨される。		* スクリーンリーダーでの動作確認が推奨される。
	<br>		<br>

	==== 使用例 : アクセシブルなフォーム ====		==== 使用例 : アクセシブルなフォーム ====
	以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。<br>		以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。<br>

Wiki: /* formタグ */

2024-11-23T02:54:38Z

formタグ

@@ 40行目: / 40行目: @@
 <br>
 ==== 属性 ====
 ===== action属性 =====
 フォームのデータを送信する先のURLを指定する。<br>

Wiki: /* 送信ボタン */

2024-11-20T21:23:11Z

送信ボタン

@@ 560行目: / 560行目: @@
 == 送信ボタン ==
 ==== 属性 ====
 ===== 送信先URLの指定 =====

Wiki: /* formタグ */

2024-11-19T22:50:29Z

formタグ

@@ 105行目: / 105行目: @@
   <syntaxhighlight lang="html">
   <form accept-charset="UTF-8">
   </syntaxhighlight>
 <br><br>

Wiki: /* 概要 */

2024-11-19T22:28:23Z

概要

@@ 1行目: / 1行目: @@
 == 概要 ==
+<form>タグは、Webページでユーザから情報を収集して、サーバに送信するための仕組みを提供するものである。<br>
 <br><br>

Wiki: /* 概要 */

2024-11-19T22:20:05Z

概要

← 古い版		2024年11月20日 (水) 07:20時点における版
1行目:		1行目:
	== 概要 ==		== 概要 ==

			<br><br>

			== formタグ ==
			<form>タグは、Webページ上でユーザからデータを収集して、サーバに送信するためのHTMLタグである。<br>
			<br>
			<syntaxhighlight lang="html">
			<!-- 基本的な使用例 -->
			<form action="/submit" method="post" name="contactForm">
			<!-- ここにフォーム要素を配置 -->
			</form>
			</syntaxhighlight>
			<br>
			<u>※注意</u><br>
			* ネストして使用することは推奨されない。
			* JavaScriptでフォームの送信を制御する場合は、onsubmitイベントが使用可能である。
			<br>
			==== 属性 ====
			===== action属性 =====
			フォームのデータを送信する先のURLを指定する。<br>
			<syntaxhighlight lang="html">
			<form action="/submit">
			</syntaxhighlight>
			<br>
			===== method属性 =====
			データの送信方法を指定する。<br>
			* GET
			*:URLにデータを付加して送信する。(データはURLに表示)
			* POST
			*: HTTPリクエストのボディにデータを含めて送信する。(データは非表示)
			<syntaxhighlight lang="html">
			<form method="post">
			</syntaxhighlight>
			<br>
			===== enctype属性 =====
			フォームデータのエンコード方式を指定する。<br>
			* application/x-www-form-urlencoded (デフォルト値)
			* text/plain
			*: プレーンテキストとして送信する。
			* multipart/form-data
			*: ファイルアップロード時に使用する。
			<syntaxhighlight lang="html">
			<form enctype="multipart/form-data">
			</syntaxhighlight>
			<br>
			===== name属性 =====
			JavaScript等で参照する場合、フォームの名前を指定する。<br>
			<syntaxhighlight lang="html">
			<form name="loginForm">
			</syntaxhighlight>
			<br>
			===== target属性 =====
			フォーム送信後の結果をどこに表示するかを指定する。<br>
			* _self
			*: 同じウィンドウ、同じタブ (デフォルト)
			* _blank
			*: 新しいタブ、新しいウィンドウ
			* _parent
			*: 親フレーム
			* _top
			*: 最上位フレーム
			<syntaxhighlight lang="html">
			<form target="_blank">
			</syntaxhighlight>
			<br>
			===== autocomplete属性 =====
			フォームの自動補完機能の有効 / 無効を指定する。<br>
			* 値
			*: on または off
			<syntaxhighlight lang="html">
			<form autocomplete="off">
			</syntaxhighlight>
			<br>
			===== novalidate属性 =====
			Webブラウザのデフォルトの検証機能を無効にする。<br>
			<syntaxhighlight lang="html">
			<form novalidate>
			</syntaxhighlight>
			<br>
			===== accept-charset属性 =====
			フォームの文字エンコーディングを指定する。<br>
			<syntaxhighlight lang="html">
			<form accept-charset="UTF-8">
			</syntaxhighlight>
	<br><br>		<br><br>

Wiki: /* カレンダー */

2024-11-19T21:57:03Z

カレンダー

@@ 200行目: / 200行目: @@
   <syntaxhighlight lang="html">
   <input type="text" autofocus>
   </syntaxhighlight>
 <br><br>

Wiki: /* その他属性 */

2024-11-19T21:22:06Z

その他属性

@@ 134行目: / 134行目: @@
   <syntaxhighlight lang="html">
   <input type="time">
   </syntaxhighlight>
 <br>
@@ 147行目: / 188行目: @@
   <syntaxhighlight lang="html">
   <input type="text" placeholder="例: 山田太郎">
   </syntaxhighlight>
 <br>

Wiki: /* バリデーション関連 */

2024-11-19T21:06:44Z

バリデーション関連

@@ 166行目: / 166行目: @@
   <input type="text" autofocus>
   </syntaxhighlight>
 <br><br>

Wiki: /* 数値入力 */

2024-11-19T21:01:01Z

数値入力

← 古い版		2024年11月20日 (水) 06:01時点における版
97行目:		97行目:
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
			==== 数値入力 (rangeの使用) ====
	rangeは、スライダーによる数値入力するものである。<br>		rangeは、スライダーによる数値入力するものである。<br>
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<input type="range" min="0" max="100">		<!-- JavaScriptの関数を分離して記述する場合 -->
			<input type="range" min="0" max="100" value="50" oninput="updateValue(this.value)">
			<input type="text" id="rangeValue" value="50" readonly>

			<script>
			function updateValue(value) {
			document.getElementById('rangeValue').value = value;
			}
			</script>

			<!-- JavaScriptの関数を直接HTML属性に記述する場合 -->
			<div>
			<input type="range" min="0" max="100" value="50" oninput="document.getElementById('rangeValue').value = this.value">
			<input type="text" id="rangeValue" value="50" readonly> <!-- readonly属性を使用して、テキストボックスの値を直接編集できないようにしている -->
			</div>
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>

	==== 電話番号入力 ====		==== 電話番号入力 ====
	telは、電話番号入力用のテキストボックスである。<br>		telは、電話番号入力用のテキストボックスである。<br>

2024年11月19日 (火) 20:43にWikiによる

2024-11-19T20:43:26Z

差分を表示

Wiki: Wiki がページ「HTML - form」を「HTML - formタグ」に、リダイレクトを残さずに移動しました

2024-11-08T19:48:06Z

Wiki がページ「HTML - form」を「HTML - formタグ」に、リダイレクトを残さずに移動しました

← 古い版		2024年11月9日 (土) 04:48時点における版
(相違点なし)

Wiki: /* ラジオボタン */

2024-11-08T18:40:04Z

ラジオボタン

@@ 3行目: / 3行目: @@
 == ラジオボタン ==
 ==== グループ化 ====
 ラジオボタンをグループ化するには、同じname属性値を設定する。<br>

Wiki: ページの作成:「== 概要 ==

== ラジオボタン == ==== グループ化 ==== ラジオボタンをグループ化するには、同じname属性値を設定する。

各ラジオボタンには個別のid属性値とvalue属性値を設定する。

labelタグを使用して、ラジオボタンにラベルを付ける。
labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。

2024-11-08T18:33:56Z

ページの作成:「== 概要 == <br><br> == ラジオボタン == ==== グループ化 ==== ラジオボタンをグループ化するには、同じname属性値を設定する。<br> <br> 各ラジオボタンには個別のid属性値とvalue属性値を設定する。<br> <br> labelタグを使用して、ラジオボタンにラベルを付ける。<br> labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。<br> <br> <syntax…」

新規ページ
== 概要 ==
<br><br>

== ラジオボタン ==
==== グループ化 ====
ラジオボタンをグループ化するには、同じname属性値を設定する。<br>
<br>
各ラジオボタンには個別のid属性値とvalue属性値を設定する。<br>
<br>
labelタグを使用して、ラジオボタンにラベルを付ける。<br>
labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。<br>
<br>
<syntaxhighlight lang="html">
<form>
<div>
<p>好きな色を選んでください：</p>

<input type="radio" id="red" name="color" value="red">
<label for="red">赤</label>

<input type="radio" id="blue" name="color" value="blue">
<label for="blue">青</label>

<input type="radio" id="green" name="color" value="green">
<label for="green">緑</label>
</div>
</form>
</syntaxhighlight>
<br>
グループ化を視覚的にも明確にする場合は、fieldsetおよびlegendを使用する。<br>
これにより、グループに枠線が付き、legendでグループのタイトルが表示される。<br>
<syntaxhighlight lang="html">
<form>
<fieldset>
<legend>好きな色を選んでください：</legend>

<input type="radio" id="red" name="color" value="red">
<label for="red">赤</label>

<input type="radio" id="blue" name="color" value="blue">
<label for="blue">青</label>

<input type="radio" id="green" name="color" value="green">
<label for="green">緑</label>
</fieldset>
</form>
</syntaxhighlight>
<br><br>

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

FORCETOC
[[カテゴリ:Web]]