フォーム
form
フォームの定義
2008/3/26
構文
<form action=”URI”> ~ </form>
説明
form要素は、フォームを表すブロック要素です。
form要素を入れ子にしてはいけません。
form要素のaction要素は必須属性です。
属性
属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
---|---|---|---|---|---|
XHTML 1.0 | XHTML 1.1 | ||||
一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
action="%URI" | フォームから送信されたデータを処理するプログラムのURIを指定。 | STF | S | 必須 | |
method="get" | post" | フォームの送信方法を指定。POST送信の場合は"post"、GET送信の場合は"get"(デフォルト値)を指定。省略した場合はデフォルト値が適用されます。 | STF | S | "get" | |
name="%NMTOKEN" | フォームの名前を指定。 | TF | - | 任意 | |
enctype="%ContentType" | 送信データのMIMEタイプを指定。デフォルトは、"application/x-www-form-urlencoded"。 | STF | S | 任意 | |
onsubmit="%Script" | フォームが送信された時に実行する処理を指定。 | STF | S | 任意 | |
onreset="%Script" | フォームがリセットされた時に実行する処理を指定。 | STF | S | 任意 | |
accept="%ContentType" | action属性で指定したプログラムで処理可能なMIMEタイプを指定。 | STF | S | 任意 | |
accept-charset="%FrameTarget" | action属性で指定したプログラムの送信先のターゲットを指定。 | TF | - | 任意 | JavaScriptで代替。 |
name属性、target属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。
- name属性の代替方法はありません。
- target属性 ⇒ JavaScript(window.open()メソッド)で代替。
サンプル
シンプルなフォームの記述例
<form action="regist.php" method="get" onsubmit="return false;"> <fieldset> <legend>ユーザ登録</legend> <p> <label for="user_name">ユーザー名:</label> <input type="text" id="user_name" name="user_name" size="20" maxlength="30" /> </p> <p> <label for="user_password">パスワード:</label> <input type="password" id="user_password" name="user_password" size="20" maxlength="30" /> </p> <p> <input type="submit" value="登 録" /> </p> </fieldset> </form>
少し複雑なフォームの記述例
<style type="text/css"> span#nickname_err, span#password_err, span#sex_err, span#junk_err, span#job_err, span#message_err { display:none; color:red; padding-right:20px; font-size:.8em; } span#nickname_hint, span#password_hint, span#sex_hint, span#junk_hint, span#job_hint, span#message_hint { display:none; color:blue; padding-right:20px; font-size:.8em; } #frm_form2 dt{ margin:10px 0; float:left; clear:both; width:15em; } #frm_form2 dd{ padding:0 0 0 15em; margin:10px 0; } </style> <script type="text/javascript"> function fShowHint(id,on){ var spanObj=""; alert(id.indexOf("junk_")); if(id.indexOf("junk_")==0){ spanObj=document.getElementById("junk_hint"); }else if(id.indexOf("sex_")==0){ spanObj=document.getElementById("sex_hint"); }else{ document.getElementById(id+"_hint"); } if(on==1){ spanObj.style.display="block"; }else{ spanObj.style.display="none"; } } function chk(){ var elms=["nickname","password","sex","junk","job","message"]; var err=0; for(var e in elms){ var id=elms[e]; switch(id){ case "nickname": case "password": case "message": if(!document.getElementById(id).value){ err++; document.getElementById(id+"_err").style.display="block"; } break; case "sex": for(var i=1,j=0; i<=2; i++){ if(document.getElementById(id+"_"+i).checked==true) j++; } if(j==0){ err++; document.getElementById(id+"_err").style.display="block"; } break; case "junk": break; case "job": break; default: break; } } alert(err); if(err>0){ return false; }else{ return true; } } </script> <form action="/content/demo/test.php" method="post" onsubmit="return chk();" id="frm_form2"> <dl> <dt><label for="nickname">ニックネーム</label></dt> <dd> <input type="text" name="nickname" id="nickname" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> <span id="nickname_hint">※ニックネームは半角英数字で、5文字~20文字まで入力できます。</span> <span id="nickname_err">※ニックネームを入力してください。</span> </dd> <dt><label for="password">パスワード</label></dt> <dd> <input type="password" name="password" id="password" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> <span id="password_hint">※パスワードは半角英数字で、8文字~20文字まで入力できます。</span> <span id="password_err">※パスワードを入力してください。</span> </dd> <dt>あなたの性別は?</dt> <dd> <label for="sex1"><input type="radio" name="sex" id="sex1" value="male" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> 男</label> <label for="sex2"><input type="radio" name="sex" id="sex2" value="female" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> 女</label> <span id="sex_hint">※性別を1つ選択してください。</span> <span id="sex_err">※性別を1つ選択してください。</span> </dd> <dt>よくいくファーストフード店は?</dt> <dd> <label for="junk_1"><input type="checkbox" name="junk_1" id="junk_1" value="mac" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />マクドナルド</label> <label for="junk_2"><input type="checkbox" name="junk_2" id="junk_2" value="kfc" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />ケンタッキー</label> <label for="junk_3"><input type="checkbox" name="junk_3" id="junk_3" value="mos" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />モスバーガー</label> <label for="junk_4"><input type="checkbox" name="junk_4" id="junk_4" value="freshness" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />フレッシュネスバーガー</label> <label for="junk_5"><input type="checkbox" name="junk_5" id="junk_5" value="lotteroa" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />ロッテリア</label> <label for="junk_6"><input type="checkbox" name="junk_6" id="junk_6" value="other" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />その他のファーストフード店</label> <span id="junk_hint">※複数選択可。該当する選択肢がない場合は、「その他のファーストフード店」を選択してください。</span> <span id="junk_err">※よくいくファーストフード店を選択してください。該当する選択肢がない場合は、「その他のファーストフード店」を選択してください。</span> </dd> <dt><label for="job">あなたの職業は?</label></dt> <dd> <select id="job" name="job" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> <option value="" selected="selected">▼ひとつ選択してください</option> <option value="government-employee">公務員</option> <option value="manager">経営者・役員</option> <option value="company-employee">会社員</option> <option value="self-employed">自営業</option> <option value="free-lance">自由業</option> <option value="housewife">専業主婦</option> <option value="part-time">パート・アルバイト</option> <option value="student">学生</option> <option value="other">その他</option> </select> <span id="job_hint">※職業を1つ選択してください。</span> <span id="job_err">※職業を1つ選択してください。</span> </dd> <dt><label for="message">メッセージ</label></dt> <dd> <textarea id="message" name="message" cols="50" rows="5" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)"></textarea> <span id="message_hint">※ご自由にお書きください。</span> <span id="message_err">※メッセージを入力してください。</span> </dd> </dl> <p> <input type="submit" value="送信" /> </p> </form>
isindex
キーワード検索入力欄の埋め込み
2008/3/26
構文
<isindex />
説明
isindex要素は、キーワード検索入力欄の埋め込みを表す要素です。
isindex要素は、空要素のため<isindex />
のように記述します。
head要素内に1回のみ記述できます。
このisindex要素は一般的に使われておらず、通常、検索ボックスを設置する場合はform要素を使用します。
isindex要素は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。 そのためキーワード検索入力欄を設置する場合は、input要素を使用してください。
<form method="get" action="site-search.cgi"> <label for="keyword">キーワード検索:</label> <input type="text" id="keyword" size="50" maxlength="256" /> </form>
属性
属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
---|---|---|---|---|---|
XHTML 1.0 | XHTML 1.1 | ||||
コア属性 | TF | - | 任意 | style属性はCSSで代替。 | |
i18n | TF | - | 任意 | ||
prompt="%Text" | ラベルを指定。 | TF | - | 任意 |
サンプル

<head> <isindex prompt="検索:" action="site-search.cgi"> </head>