HTML フォームガイド

このガイドは、HTML フォームの習得に役立つ記事をそろえています。 HTML フォームは、ユーザとやり取りするための強力なツールです。しかし歴史的および技術的な理由により、その能力を十分に生かして使用する方法は、必ずしも明確ではありません。このガイドで HTML フォームの構造からスタイル、データの扱いからカスタムウィジェットまでのあらゆる側面を網羅します。フォームがもたらす強大な力を享受すべく学びましょう!

記事一覧

  1. 初めての HTML フォーム
  2. HTML フォームの構築方法
  3. ネイティブフォームウィジェット
  4. HTML フォームと CSS
    1. HTML フォームへのスタイル設定
    2. HTML フォームへの高度なスタイル設定
    3. フォームウィジェット向けプロパティ実装状況一覧
  5. フォームデータの送信と取得
  6. データフォームの検証
  7. カスタムウィジェットの作成方法
  8. JavaScript によるフォームの送信
    1. FormData オブジェクトの利用
  9. 古いブラウザでの HTML フォーム

HTML ドキュメント

HTML 要素

要素 関連 DOM インターフェイス 説明
<button> HTMLButtonElement button 要素は、クリック可能なボタンを表します。
<datalist> HTMLDataListElement datalist 要素は、別のフォーム要素の値の候補を表す <option> 要素のセットを内包します。
<fieldset> HTMLFieldSetElement fieldset は、フォーム内でいくつかのフォーム要素をグループ化するために使用します。
<form> HTMLFormElement form 要素は、Web サーバへの情報送信を可能にするインタラクティブな要素を内包する、ドキュメントのセクションを表します。
<input> HTMLInputElement input 要素は、フォームでインタラクティブなコントロールを作成するために使用します。
<keygen> HTMLKeygenElement keygen 要素は、鍵材料の生成や公開鍵を HTML フォームの一部として送信することを容易にするために存在します。
<label> HTMLLabelElement label 要素は、ユーザインターフェイス内のアイテムのタイトルを表します。
<legend> HTMLLegendElement legend 要素は、親 <fieldset> 要素のコンテンツのタイトルを表します。
<meter> HTMLMeterElement meter 要素は、既知の範囲内のスカラー値または小数値を表します。
<optgroup> HTMLOptGroupElement optgroup 要素は、<select> 要素内の選択肢のグループを作成します。
<option> HTMLOptionElement option 要素は <select> 要素、<optgroup> 要素、<datalist> 要素内のアイテムを表すコントロールを作成するために使用します。
<output> HTMLOutputElement output 要素は、なんらかの計算結果を表します。
<progress> HTMLProgressElement progress 要素は、タスクの進捗状況を表示するために使用します。
<select> HTMLSelectElement select 要素は、選択肢のメニューを提供するコントロールを表します。
<textarea> HTMLTextAreaElement textarea 要素は、複数行のプレーンテキスト編集コントロールを表します。

注記: HTML 要素であるすべてのフォーム要素は、HTMLElement DOM インターフェイスをサポートします。

HTML 属性

属性名 要素 説明
accept <form>, <input> サーバが受け入れるタイプ、主にファイルタイプのリストです。
accept-charset <form> サポートする文字セットのリストです。
action <form> フォームから送信された情報を処理するプログラムの URI です。
autocomplete <form>, <input> フォーム内のコントロールがデフォルトで、値をブラウザのオートコンプリートで補完されてもよいかを示します。
autofocus <button>, <input>, <keygen>, <select>, <textarea> ページを読み込んだら、その要素へ自動的にフォーカスを置くようにします。
challenge <keygen> 公開鍵とともに送信するチャレンジ文字列です。
checked <input> ページが読み込まれた時点で要素にチェックを入れておくかを示します。
cols <textarea> テキスト入力エリアの列数を定義します。
data <object> リソースの URL を指定します。
dirname <input>, <textarea>  
disabled <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> ユーザがその要素を使用できるかを示します。
enctype <form> method が POST であるときの、フォームデータの content type を定義します。
for <label>, <output> 自身に付属する要素を示します。
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> 要素のオーナーである form を示します。
high <meter> 上位範囲の下限値を表します。
keytype <keygen> 生成される鍵の種類を指定します。
list <input> ユーザに提案する、あらかじめ定義された選択肢のリストを示します。
low <meter> 下位範囲の上限値を表します。
max <input>, <meter>, <progress> 許容される値の上限値を示します。
maxlength <input>, <textarea> 要素で許容される最大文字数を定義します。
method <form> フォームを送信するときに使用する HTTP メソッドを定義します。GET (既定) または POST を使用できます。
min <input>, <meter> 許容される値の下限を示します。
multiple <input>, <select> type が email または file の input で、複数の値を入力可能かを示します。
name <button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea> 要素の名前です。例えば、送信されたフォームのフィールドをサーバが特定するために使用します。
novalidate <form> フォームを送信するときに検証を行わないことを示します。
optimum <meter> 最適な数値を示します。
pattern <input> 要素の値を検証する際に比較する正規表現を定義します。
placeholder <input>, <textarea> ユーザに対して、フィールドへ何を入力できるかのヒントを提供します。
readonly <input>, <textarea> 要素で編集が可能かを示します。
required <input>, <select>, <textarea> その要素は記入が必須か否かを示します。
rows <textarea> テキスト入力エリアの行数を定義します。
selected <option> ページが読み込まれた時点で選択する値を定義します。
size <input>, <select> 要素の幅を定義します (ピクセル単位)。要素の type 属性が text または password である場合、この属性は文字数を表します。
src <img> 埋め込みコンテンツの URL です。
step <input>  
target <form>  
type <button>, <input> 要素のタイプを定義します。
usemap <img>  
value <button>, <option>, <input>, <meter>, <progress> ページが読み込まれた時点で要素内に表示する既定値を定義します。
wrap <textarea> テキストを折り返すか否かを示します。

規範リファレンス

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, ethertank
 最終更新者: yyss,