<form>~</form>
form（フォーム）要素は入力フォームを表します。入力コントロールを配置して、閲覧者が入力した情報などをサーバに送信することができます。
form要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| accept-charset | 代表的な文字エンコーディング UTF-8 Shift_JIS EUC-JP 半角スペース区切りで、複数指定することもできる。 | 文字エンコーディングを指定する属性。 <form action=”sample.php” method=”post” accept-charset=”UTF-8″> <p>入力欄： <input type=”text” name=”sampleInput”></p> <p><input type=”submit” value=”送信”></p> </form> |
| action | URL <form action=”URL”></form> | URLに指定出来る値。 絶対URL。例：http://html5.cyberlab.info 相対URL。例：sample.html |
| autocomplete | on オートコンプリートを有効にする。初期設定値。 off オートコンプリートを無効にする。 | オートコンプリートを有効にするか無効にするかを指定する。 <form autocomplete=”on/off”></form> |
| enctype | application/x-www-form-urlencoded： 全ての文字をURLエンコードする。初期設定値。multipart/form-data： フォームにファイルを送信する機能がある場合に指定する。text/plain： スペースだけ「+」記号に変換する。その他の特殊文字はエンコードしない。 | 送信データのエンコード・タイプを指定する。 form要素のmethod属性がpostのときだけ使用する。 <form enctype=”エンコード・タイプ”></form> |
| method | get URLの後にデータを付け加えて送信。 例： URL?nameA=valueA&nameB=valueB&nameC=valueC 初期設定値。 post URLの後にデータを付け加えないで、ボディ部に格納して送信。 | 送信時のHTTPメソッドを指定する。 <form method=”HTTPメソッド”></form> |
| name | テキスト | フォームの名前を指定する。 <form name=”名前”></form> |
| novalidate | 論理属性 novalidate | フォームの入力内容の検証を無効にするかどうかを指定する。 <form novalidate></form> |
| target | _blank 新規ウィンドウに開く。 _self 現在のウィンドウ、現在のフレームに開く。 _parent 親ウィンドウ、親フレームに開く。 _top ウィンドウ全体に開く。フレームは解除する。 ウィンドウ名 指定したウィンドウ名のウィンドウに開く。 フレーム名 指定したフレーム名のフレームに開く。 | フォームデータ送信先の開き方を指定する。 <form target=”開き方”></form> |
| rel | rel 属性は、現在の文書からみた、リンク先となるリソースの位置づけを表す。 |
HTML Living Standard で定義されているrel属性値
半角スペースで区切ることで、複数の値を指定することも可能。
| 属性値 | 意味 | 使用できる要素 | |||
|---|---|---|---|---|---|
| link | a | area | form | ||
| alternate | 代替文書 （例えば別言語版、別フォーマット版など） | ○ | ○ | ○ | – |
| canonical | 現在の文書の優先URLを指定する | ○ | – | – | – |
| author | 著者情報 | ○ | ○ | ○ | – |
| bookmark | 文書の固定リンク | – | ○ | – | – |
| dns-prefetch | ユーザエージェントがターゲットリソースの生成元の DNS 解決を先行して実施するよう指定 | ○ | – | – | – |
| external | 外部サイトへのリンクであることを示す | – | ○ | ○ | ○ |
| help | ヘルプへのリンク | ○ | ○ | ○ | ○ |
| icon | アイコンをインポートします | ○ | – | – | – |
| modulepreload | ユーザエージェントが先行してモジュールスクリプトをフェッチし、文書のモジュールマップに格納しなければならないことを指定します | ○ | – | – | – |
| license | ライセンス文書 | ○ | ○ | ○ | – |
| next | 連続した文書における次の文書 | ○ | ○ | ○ | – |
| nofollow | 重要でないリンク | – | ○ | ○ | – |
| noopener | target 属性を持つリンクを開く際、Window.opener プロパティを設定しません | – | ○ | ○ | – |
| noreferrer | ユーザーがリンクを移動する際、リファラを送信しません | – | ○ | ○ | – |
| opener | target 属性を持つリンクを開く際、Window.opener プロパティを設定します | – | ○ | ○ | – |
| pingback | Pingback 1.0 仕様に基づき、ピングバック（トラックバック）用の URI を指定します | ○ | – | – | – |
| preconnect | リンク先のリソースにあらかじめ接続するように指定します （link 要素でのみ使用可能） | ○ | – | – | – |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定します （link 要素でのみ使用可能） | ○ | – | – | – |
| preload | リンク先のリソースを事前に読み込むように指定します （link 要素でのみ使用可能） | ○ | – | – | – |
| prerender | リンク先のリソースを読み込んでオフスクリーンでレンダリングしておくように指定します | ○ | – | – | – |
| prev | 連続した文書における前の文書 | ○ | ○ | ○ | – |
| search | 検索機能を提供するリソース | ○ | ○ | ○ | – |
| stylesheet | スタイルシート | ○ | – | – | – |
| tag | 文書に指定されたタグのページ | – | ○ | ○ | – |
使用例
<form action="./search" method="get" role="search">
<fieldset>
<legend accesskey="s">サイト内検索</legend>
<input type="search" name="search" value="" placeholder="検索ワードを入力">
<input type="submit" name="submit" value="検索">
</fieldset>
</form>表示