一个表单有3个基本组成部分
表单标签，包含处理表单数据所用的服务器端程序的URL以及数据提交到服务器的方法
表单域，包含文本框，密码框，隐藏域，多行文本，复选框，单选框，下拉选择框和文件上传框
表单按钮，包括提交按钮，复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处

理脚本的处理工作

文本框是表单域中最基本的元素，基于文本框的应用有很多，下面介绍一个获取和失去焦点改变样式的例子

首先在网页中创建一个表单，html代码如下

form action="#" method="post" id="regForm"
<fieldest>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text">
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password">
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg"></textarea>
</div>

当文本框获取焦点后，它的颜色需要变化，当它失去焦点后，则要恢复为原来的样式，此功能可以极大提升用户体验，使用

户的操作可以得到及时的反馈，可以使用css中的伪类选择符来实现以上功能。

input:focus,textarea:focus{
border:1px solid #f00;
backgroud:#fcc;
}

但是ie6并不支持除超链接元素之外的:hover伪类选择符，此时可以用jquery来弥补ie6对css支持的不足

首先在css中添加一个类名为focus的样式

.focus{
border:1px solide #f00;
background:#fcc;
}

然后为文本框添加获取和失去焦点事件，jquery代码如下

$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})

 

})