[XHTML]応募フォームっぽい入力項目のメールフォーム

求人情報の応募フォームにありそうな入力項目のXHTMLフォームのコピペ用サンプル。

classやIDは一切使ってないのでスニペットとしても使えると思います。
テーブル使用。注釈はsmall。
結構手抜いてます。

<form action="" method="post">
<table cellpadding="0" cellspacing="0" border="1">
	<tr><th scope="row">お名前</th>
	<td><input name="name" type="text" size="50" /><small>(全角)</small></td></tr>
	<tr><th scope="row">ふりがな</th>
	<td><input name="name2" type="text" size="50" /><small>(全角)</small></td></tr>
	<tr><th scope="row">生年月日</th>
	<td><input name="birth" type="text" size="20" /><small>(例:1980/04/01)</small></td></tr>
	<tr><th scope="row">性別</th>
	<td><input name="sex" type="radio" value="男性" />男性
	<input name="sex" type="radio" value="女性" />女性</td></tr>
	<tr><th scope="row">E-Mail</th>
	<td><input name="email" type="text" size="50" /></td></tr>
	<tr><th scope="row">電話番号</th>
	<td><input name="tel" type="text" size="50" /><small>(例:1234-56-7890)</small></td></tr>
	<tr><th scope="row">携帯電話・PHS番号</th>
	<td><input name="tel2" type="text" size="50" /><small>(例:090-1234-5678)</small></td></tr>
	<tr><th scope="row">郵便番号</th>
	<td><input name="postcode" type="text" size="10" /><small>(例:507-0000)</small></td></tr>
	<tr><th scope="row">住所</th>
	<td><input name="address" type="text" size="50" /></td></tr>
	<tr><th scope="row">現在役職の有無</th>
	<td><input name="businesspost" type="radio" value="あり" />あり
	<input name="businesspost" type="radio" value="なし" />なし</td></tr>
	<tr><th scope="row">最終学歴</th>
	<td><input name="schoolcareer" type="text" size="50" /></td></tr>
	<tr><th scope="row">資格</th>
	<td><textarea name="license" cols="70" rows="3"></textarea></td></tr>
	<tr><th scope="row">職務経歴</th>
	<td><textarea name="history" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">自己PR</th>
	<td><textarea name="message" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">入社希望時期</th>
	<td><input name="enter" type="text" size="50" /></td></tr>
	<tr><th scope="row">その他希望条件</th>
	<td><textarea name="other" cols="70" rows="5"></textarea></td></tr>
</table>
<p><button type="submit">送信</button><button type="reset">リセット</button></p></form>

サンプルのCSSは続きにあります。

table {
	border-collapse:collapse;
	border-color:#AAABAB;
	font-size:93%;
}
th {
	background-color:#EAEFF8;
	border-color:#AAABAB;
	padding:5px 5px 5px 10px;
	text-align:left;
}
td {
	padding:5px;
}
td small {
	font-size:85%;
	margin-left:5px;
}
label input {
	margin:0 3px;
	border:none;
}
button {
	padding:0.2em 1.5em;
	margin:0 10px;
}
form p {
	text-align:center;
}

zeromail用のnameと名称設定配列

$inputs = array(
	'name'=>'お名前',
	'name2'=>'ふりがな',
	'birth'=>'生年月日',
	'sex'=>'性別',
	'email'=>'E-Mail',
	'tel'=>'電話番号',
	'tel2'=>'携帯・PHS番号',
	'postcode'=>'郵便番号',
	'address'=>'住所',
	'businesspost'=>'現在役職の有無',
	'schoolcareer'=>'最終学歴',
	'license'=>'資格',
	'history'=>'職務経歴',
	'message'=>'自己PR',
	'enter'=>'入社希望時期',
	'other'=>'その他希望条件'
);

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください