文本框是表单域中最基本的元素。基于文本框的应用有很多，我们这里简单的介绍一个：获取和失去焦点改变样式。我们的需求是当文本框获取焦点后，改变它的颜色，当它失去焦点后，则要恢复到原来的样式，此功能使用户的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
font:normal 12px/17px Arial;
}
div {
padding:2px;
}
input, textarea {
width:12em;
border:1px solid #888;
}
input:focus,
textarea:focus {
border:1px solid #f00;
background:#fcc;
}
</style>
</head>
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<lable for="username">名称：</lable>
<input id="username" type="text" />
</div>
<div>
<lable for="pass">密码：</lable>
<input id="pass" type="text" />
</div>
<lable for="msg">详细信息：</lable>
<textarea id="msg" row="2" cols="20"></textarea>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(':input')
.focus(function(){
$(this).addclass('focus');
})
.blur(function(){
$(this).removeClass('focus');
});
});
</script>
</body>
</html>