form要素

TOPページに戻る > html入門

スポンサード リンク

form要素

入力した値をサーバーに送るためのフォームを作成します
子要素にブロック要素を配置し、その中にフォームの部品の要素を配置してフォームを作っていきます。フォームの部品になる要素はinput要素、textarea要素、select要素、option要素、optgroup要素、button要素、label要素、fieldset要素、legend要素です
実際にはcgiと連携して動きます

使い方(書式)

<form></form>

form要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 ブロック要素
内容となる要素 ブロック要素、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は動きません
連絡先メールフォーム
メールの件名
訪問元
※メッセージ
送信内容のコピーをE-Mailで受信する

その他のデザインはcssでスタイルを指定





(C)2012 ホームページ作成無料