form
フォームの定義

2008/3/26

構文

説明

form要素は、フォームを表すブロック要素です。
form要素を入れ子にしてはいけません。
form要素のaction要素は必須属性です。

属性

サンプル

シンプルなフォームの記述例

<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>