HTML におけるフォームとボタン

メモ: この記事のコンテンツは現在不完全です。申し訳ありません！私たちは MDN ウェブ開発の学習の章の改善に努めており、間もなく、 ("TODO") とマークされた場所も完了する予定です。

HTML フォームとボタンは、ユーザーとの操作上のやり取りを行うための強力なツールです。最も一般的な用途としては、ユーザーからのデータ収集やユーザーインターフェイスの制御などがあります。この記事では、フォームとボタンの基本について紹介します。

前提条件: 基本的な HTML の構文に載っている、基本的な HTML に精通していること。見出しと段落およびリストなどのテキストレベルの意味付け。構造化 HTML。

学習成果:

前提条件:	基本的な HTML の構文に載っている、基本的な HTML に精通していること。見出しと段落およびリストなどのテキストレベルの意味付け。構造化 HTML。
学習成果:	ユーザーがウェブサイトと対話する主な手段は、リンクとともに、フォームとボタンであるという認識。よく使われる `<button>` の型。 `button`、`submit`、`reset`。よく使われる `<input>` の型。 `text`、`number`、`file`、`checkbox`、`radio`、`password`、`search`。よく使われる属性。 `name` や `value`。フォームのアクセシビリティの向上 — 正しい意味づけ、 `<label>` 要素、および `for` 属性。その他のコントロール型。`<textarea>`、`<select>`、`<option>`。クライアント側の検証の基本 — `required`、`min`、`max`、`minlength`、`maxlength`、`pattern`。 `<form>` 要素、そしてフォーム送信の基本。

ユーザーがウェブサイトと対話する主な手段は、リンクとともに、フォームとボタンであるという認識。
よく使われる <button> の型。 button、submit、reset。
よく使われる <input> の型。 text、number、file、checkbox、radio、password、search。
よく使われる属性。 name や value。
フォームのアクセシビリティの向上 — 正しい意味づけ、 <label> 要素、および for 属性。
その他のコントロール型。<textarea>、<select>、<option>。
クライアント側の検証の基本 — required、min、max、minlength、maxlength、pattern。
<form> 要素、そしてフォーム送信の基本。

メモ: ここでは明示的に言及されていない入力型やフォーム機能が数多くあります。その目的は、ボタンやフォーム要素に関する一般的な概要を理解し、最も一般的なケースを学ぶことにあります。高度なケースや特殊なケースについては、必要に応じて、ウェブ開発者がキャリアを通じて常に学習を続ける一環として学ぶことができます。

セマンティックHTMLの議論に戻りますが（2.2 優れた文書構造も参照）、正しい要素を正しい目的で使用することがなぜ重要なのかを理解する必要があります。例えば、フォームを送信するには <button> を使用し、<button> のように動作するようにプログラムされた <div> を使用してはいけません。
ブラウザーが既定では <button> やフォーム要素にプログラムする機能と、それらがどれほど重要であるかを理解してください。例えば、キーボードのアクセシビリティ、フォーカスアウトライン、 AT が要素を識別し、その意味を伝えるための意味論的な意味を識別します。

HTML におけるフォームとボタン

ボタン

よく使われる入力型

アクセシビリティのあるフォーム

その他のコントロール型

クライアント側フォーム検証

`<form>` 要素

スキルテスト

まとめ

関連情報