スポンサード リンク
form要素
入力した値をサーバーに送るためのフォームを作成します
子要素にブロック要素を配置し、その中にフォームの部品の要素を配置してフォームを作っていきます。フォームの部品になる要素はinput要素、textarea要素、select要素、option要素、optgroup要素、button要素、label要素、fieldset要素、legend要素です
実際にはcgiと連携して動きます
使い方(書式)
<form></form>
form要素
対応ブラウザ | |
要素の種類 | ブロック要素 |
内容となる要素 | ブロック要素、script要素 |
属性 | 説明 |
action属性 | 入力されたフォームデータの送信先を指定します
値には送信先サーバーCGIプログラムのurlを指定します |
method属性 | データを送信する方法を指定します 値には、post、getのいずれかを入力します。postは入力されたデータをブラウザで見えないようにサーバーに送信します。getはブラウザのurlにデータを含めて送信する方法でブラウザのurlに入力された値が表示されます。実際に使うときはpostのほうが圧倒的に多いです |
enctype属性 | method属性にpostが指定されている場合に送信するデータ形式をMIMEタイプを指定します。サーバーに送信するデータを正しく伝えることができます。 cgiをファイルでアップロードする場合は値にmultipart/form-dataを指定します enctype属性の指定がない場合は、application/x-www-form-urlencodedが初期値です |
name属性 | フォームに名前を付け、JavaScriptなどから参照できるようにします。name属性の値は半角英数字で名前を付けます。 name属性はXHTML1.0 strict と XHTML1.1では廃止されました。代わりに共通属性のid属性を使ってください |
accept属性 | input要素のtype属性の値がfileに指定されている場合、サーバーが受け取るMIMEタイプを指定します。画像ファイル、zipファイル、動画ファイルなどの種類を限定するためです |
accept-charset属性 | データの送信先で処理できる文字コードを指定します。カンマ区切って複数指定することも可能です |
target属性 | データの送信後に表示するページの表示方法を指定します 値には_blank(新しくページを開く)、_self(現在のフレーム)、_top(一番上のフレーム)、_parent(親のフレーム) |
共通属性 | html共通属性 |
イベント属性 | htmlイベント属性 |
実際の指定方法
html
<form action="mail.cgi" method="post"> <input type="hidden" name="mode" value="preview"> <input type="hidden" name="id" value="hoge"> <table cellpadding=5> <tr> <td colspan="2"> 連絡先メールフォーム </td> </tr> <tr> <td> メールの件名 </td> <td> <input type="text" name="f1" value="" size="30"> </td> </tr> <tr> <td>訪問元</td> <td> <select name="f4" size="1"><option value="hp-html.jp" selected>hp-html.jp</select> </td> </tr> <tr> <td>※メッセージ</td> <td> <textarea name="f5" cols="50" rows="6"></textarea> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="内容確認画面へ"> <input type="reset" value="リセット"> <input type="checkbox" name="copy" value="on" checked>送信内容のコピーをE-Mailで受信する </td> </tr> </table> </form>
実際の表示
※サンプルのためフォームのみでcgiは動きません