cman.jpWEBページ作成
広告
<form> 「入力フォーム域」[読み方：フォーム]
<form>～</form>の間に<input>、<select>、<textarea>などの入力部品を配置することで、サーバのプログラム（CGIなど）に入力内容を引き渡すことが出来ます。
1ページに複数の<form>を指定することが出来ます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<form> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ パルバブルコンテンツ | フローコンテンツを子要素にもてる場所 | フローコンテンツ 但し、<form>は不可 | 不可 |
<form> の属性
【構文】
<form href="送信先URI" name="フォーム名" target="_blank" ・・・>
入力フォーム域
</form>
入力フォーム域
</form>
| 属性 | 意味 | 値のサンプルなど | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| accept-charset="文字コード" | 送信する文字コード | 「UTF-8」「Shift_JIS」など | ||||||||||||
| action="URI" | フォームを送信するURL | 「sample.cgi」 「http://www.cman.co.jp/abc.cgi」など | ||||||||||||
| autocomplete="on" or "off" | オートコンプリートの利用有無 ※HTML5で追加 |
| ||||||||||||
| enctype="値" | 送信時のエンコーディング方法 |
| ||||||||||||
| method="get" or "post" | 送信時のHTTPプロトコル | 「get」、「post」、「dialog」 | ||||||||||||
| name="名前" | フォームの名前 | 「form01」「f001」など | ||||||||||||
| novalidate | 指定するとバリデーションチェックを行わない ※HTML5で追加 | 「novalidate」 | ||||||||||||
| target="値" | フォーム送信後のページ表示方法 |
| ||||||||||||
| rel="値" | リンクの種類 | 「noreferrer」、「noopener」、「opener」 | ||||||||||||
| 廃止された属性 |
| |||||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<form>タグのサンプル
入力内容の送信
ファイルのアップロード
<form action="http://www.cman.jp" name="f01">
<table>
<tbody>
<tr><th>値</th><th>意味</th></tr>
<tr>
<td>テキスト</td>
<td><input type="text" name="s1" value="テキスト入力欄"></td>
</tr>
<tr>
<td>パスワード</td>
<td><input type="password" name="s2" value="パスワード入力欄"></td>
</tr>
<tr>
<td>ラジオボタン</td>
<td><input type="radio" name="s3" value="ラジオボタン"></td>
</tr>
<tr>
<td>チェックボックス</td>
<td><input type="checkbox" name="s4" value="チェックボックス"></td>
</tr>
<tr>
<td>隠しデータ（非表示）</td>
<td><input type="hidden" name="s6" value="NoScreen"> ;</td>
</tr>
<tr>
<td>オプションメニュー</td>
<td><select name="s7">
<option value="Sample001">Sample001</option>
<option value="Sample002">Sample002</option>
<option value="Sample003">Sample003</option>
</select></td>
</tr>
<tr>
<td>オプションメニュー</td>
<td><select name="s8" size="3">
<option value="Sample001">Sample001</option>
<option value="Sample002">Sample002</option>
<option value="Sample003">Sample003</option>
</select></td>
</tr>
<tr>
<td>テキストエリア<br>（複数行入力）</td>
<td><textarea name="s9" cols="30" rows="3">複数行の入力</textarea></td>
</tr>
<tr>
<td>リセットボタン</td>
<td><input type="reset" value="リセットボタン"></td>
</tr>
<tr>
<td>汎用ボタン</td>
<td><input type="button" value="汎用ボタン"></td>
</tr>
<tr>
<td>画像ボタン</td>
<td><input type="image" src="../../../image/image_button.gif" alt="送信ボタン"></td>
</tr>
<tr>
<td>送信ボタン</td>
<td><input type="submit" value="送信ボタン"></td>
</tr>
</tbody>
</table>
</form>
<table>
<tbody>
<tr><th>値</th><th>意味</th></tr>
<tr>
<td>テキスト</td>
<td><input type="text" name="s1" value="テキスト入力欄"></td>
</tr>
<tr>
<td>パスワード</td>
<td><input type="password" name="s2" value="パスワード入力欄"></td>
</tr>
<tr>
<td>ラジオボタン</td>
<td><input type="radio" name="s3" value="ラジオボタン"></td>
</tr>
<tr>
<td>チェックボックス</td>
<td><input type="checkbox" name="s4" value="チェックボックス"></td>
</tr>
<tr>
<td>隠しデータ（非表示）</td>
<td><input type="hidden" name="s6" value="NoScreen"> ;</td>
</tr>
<tr>
<td>オプションメニュー</td>
<td><select name="s7">
<option value="Sample001">Sample001</option>
<option value="Sample002">Sample002</option>
<option value="Sample003">Sample003</option>
</select></td>
</tr>
<tr>
<td>オプションメニュー</td>
<td><select name="s8" size="3">
<option value="Sample001">Sample001</option>
<option value="Sample002">Sample002</option>
<option value="Sample003">Sample003</option>
</select></td>
</tr>
<tr>
<td>テキストエリア<br>（複数行入力）</td>
<td><textarea name="s9" cols="30" rows="3">複数行の入力</textarea></td>
</tr>
<tr>
<td>リセットボタン</td>
<td><input type="reset" value="リセットボタン"></td>
</tr>
<tr>
<td>汎用ボタン</td>
<td><input type="button" value="汎用ボタン"></td>
</tr>
<tr>
<td>画像ボタン</td>
<td><input type="image" src="../../../image/image_button.gif" alt="送信ボタン"></td>
</tr>
<tr>
<td>送信ボタン</td>
<td><input type="submit" value="送信ボタン"></td>
</tr>
</tbody>
</table>
</form>
<form action="http://www.cman.jp" name="f01" enctype="multipart/form-data">
<table>
<tbody>
<tr>
<td>UPLOADファイル</td>
<td><input type="file" name="file1" style="width:300px"></td>
<td><input type="submit" value="アップロードする"></td>
</tr>
</tbody>
</table>
</form>
<table>
<tbody>
<tr>
<td>UPLOADファイル</td>
<td><input type="file" name="file1" style="width:300px"></td>
<td><input type="submit" value="アップロードする"></td>
</tr>
</tbody>
</table>
</form>
留意事項
広告