<form> …… フォームを表す
広告
<form>タグは、フォームを表す際に使用します。
form要素はフォーム関連の各種要素と組み合わせることで、
サーバーにデータ送信するためフォームや、他のページへ移動するハイパーリンクなどを作成します。
form要素のname属性は、フォームの名前を指定します。
name属性で指定する値は、文書内やフォーム群内の他のフォームと区別がつくように一意である必要があります。
name属性の値に空文字は指定できません。
action属性、enctype属性、method属性、novalidate属性、target属性は、
フォーム送信を制御する際に使用する属性です。
■属性
- accept-charset属性
-
フォーム送信に使用する文字エンコーディングを指定します。
accept-charset属性を指定する場合、値は大文字と小文字を区別せずに「UTF-8」と一致する必要があります。 - action属性
- フォーム送信に使用するURLを指定します。
- autocomplete属性
-
フォーム内のコントロールの自動入力機能のデフォルト設定を指定します。
指定できるキーワード値は on と off のいずれかで、指定を省略すると初期値はon状態となります。- on …… on状態は、フォーム内のコントロールの自動入力機能がデフォルトで有効となります。
- off …… off状態は、フォーム内のコントロールの自動入力機能がデフォルトで無効となります。
- enctype属性
- フォーム送信に使用するエントリリストのエンコードタイプを指定します。
- method属性
- フォーム送信に使用するバリアントを指定します。
- name属性
- フォームの名前を指定します。
- novalidate属性
- フォーム送信時のフォームコントロールの検証をバイパスします。
- target属性
- フォーム送信のターゲット先を指定します。
- rel属性
- form要素が作成するリンクの種類をキーワードで指定します。
form要素のrel属性に指定できる値は、以下の通りです。- external …… 参照ドキュメントが現在のドキュメントと同じサイトの一部ではないことを示します。
- help …… そのコンテキストに応じたヘルプへのリンクを提供します。
- license …… 現在のドキュメントの主な内容が、参照ドキュメントに記載されている著作権ライセンスの対象であることを示します。
- next …… 現在のドキュメントがシリーズの一部であり、シリーズの次のドキュメントが参照ドキュメントであることを示します。
- nofollow …… 現在のドキュメントの元の作成者または発行者が参照ドキュメントを承認していないことを示します。
- noopener …… ハイパーリンクが補助的な(つまり、適切なターゲット属性値を持つ)コンテキストを作成する場合、非補助の閲覧コンテキストを持つトップレベルのトラバース可能オブジェクトを作成します。
- noreferrer …… ヘッダーに「Referer」を含みません。さらに、noopenerと同じ効果があります。
- opener …… ハイパーリンクが非補助ブラウジングコンテキスト(つまり、ターゲット属性値として “_blank” を持つ)を使用してトップレベル横断の可能なオブジェクトを作成する場合、補助ブラウジングコンテキストを作成します。
- prev …… 現在のドキュメントがシリーズの一部であり、シリーズの前のドキュメントが参照ドキュメントであることを示します。
- search …… 現在のドキュメントとその関連ページを検索するために使用できるリソースへのリンクを提供します。
■使用例
以下のサンプルは、form要素やinput要素を使って検索フォームを作成しています。
HTMLソース
<form action="https://www.google.com/search" method="get">
<label>Google: <input type="search" name="q"></label> <input type="submit" value="Googleでウェブ検索">
</form>
<form action="https://www.bing.com/search" method="get">
<label>Bing: <input type="search" name="q"></label> <input type="submit" value="Bingでウェブ検索">
</form>
↓↓↓
ブラウザ上の表示
■関連項目
- <form> …… フォームを表す
- <label> …… フォーム入力欄のキャプションを表す
- <input> …… フォーム入力欄を表す
- <input type=hidden> …… 非表示データを表す
- <input type=text> …… 1行プレーンテキストの入力欄を表す
- <input type=search> …… 検索用テキストの入力欄を表す
- <input type=tel> …… 電話番号の入力欄を表す
- <input type=url> …… URLの入力欄を表す
- <input type=email> …… 電子メールアドレスの入力欄を表す
- <input type=password> …… パスワードの入力欄を表す
- <input type=date> …… 日付の入力欄を表す
- <input type=month> …… 月の入力欄を表す
- <input type=week> …… 週の入力欄を表す
- <input type=time> …… 時刻の入力欄を表す
- <input type=datetime-local> …… ローカル日時の入力欄を表す
- <input type=number> …… 数値の入力欄を表す
- <input type=range> …… レンジ入力欄を表す
- <input type=color> …… 色の入力欄を表す
- <input type=checkbox> …… チェックボックスの入力欄を表す
- <input type=radio> …… ラジオボタンの入力欄を表す
- <input type=file> …… 選択ファイルを表す
- <input type=submit> …… フォーム送信ボタンを表す
- <input type=image> …… 画像ボタンを表す
- <input type=reset> …… リセットボタンを表す
- <input type=button> …… 汎用ボタンを表す
- <input maxlength=文字数> …… 入力を許容する最大文字数を指定する
- <input minlength=文字数> …… 入力を許容する最小文字数を指定する
- <input size=サイズ> …… 入力欄のサイズを指定する
- <input readonly> …… 読み取り専用にする
- <input required> …… 入力必須にする
- <input multiple> …… 複数選択可にする
- <input pattern=入力パターン> …… 入力を許容するパターンを指定する
- <input min=数値> …… 入力を許容する最小値を指定する
- <input max=数値> …… 入力を許容する最大値を指定する
- <input step=ステップ値> …… 入力のステップ値を指定する
- <input list=データリストID> …… データリストを紐づける
- <input placeholder=入力ヒント> …… 入力の際のヒントを表す
- <button> …… ボタンを表す
- <select> …… セレクトボックスを表す
- <datalist> …… 選択肢のデータリストを表す
- <optgroup> …… 選択肢グループを表す
- <option> …… 選択肢を表す
- <textarea> …… 複数行プレーンテキストの入力欄を表す
- <output> …… 実行結果の出力を表す
- <progress> …… タスクの進行状況を表す
- <meter> …… 既知の範囲内の測定値を表す
- <fieldset> …… フォームグループを表す
- <legend> …… フォームグループのキャプションを表す
広告