jQuery
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("form").submit(function(){
if($("input[name='name']").val() == ""){
//afterで何個も追加されないようにする
if($("span").css("color") != "red"){
$("input[name='name']")
.css("border","1px solid #FF0000")
.after("<span>お名前を入力してください</span>");
$("span").css("color","#FF0000");
}
return false;
}
});
});
</script>
<body>
<form action="check.html" method="POST">
<dl>
<dt>お名前<em>（必須）</em></dt>
<dd><input type="text" name="name"></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="gender" value="男性" id="gender_man">
<label for="gender_man">男性</label>
<input type="radio" name="gender" value="女性" id="gender_woman">
<label for="gender_woman">女性</label>
</dd>
<dt>年齢</dt>
<dd>
<select name="age">
<option>選択してください</option>
<option value="10代">10代</option>
<option value="20代">20代</option>
<option value="30代">30代</opiton>
<option value="40代以上">40代以上</option>
</select>
</dd>
<dt>スキル</dt>
<dd>
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml">
<label for="xhtml">XHTML</label>
<input type="chekcbox" name="css" value="CSS" id="css">
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript">
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php">
<label for="php">PHP</label>
</dd>
<dt>コメント</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<input type="submit" value="送信">
</dl>
</form>
</body>
</html>