一个表单有3个基础组成部分
- 表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。
- 表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文本上传框等
- 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
单行文本框应用
<form action="#" method="GET" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称：</label>
<label id="username" type="text"></label>
</div>
<div>
<label for="pass">密码</label>
<label id="pass" type="password"></label>
</div>
<div>
<label for="msg">详细信息 :</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
当文本框获取焦点后，它的颜色需要有变化；当它失去焦点后，则要恢复为原来的样式。此功能可以极大的提升用户体验，使用户的操作可以得到及时的反馈。
CSS：
input:focus , textarea:focus {
border: 1px solid #f00;
background: #fcc;
}
IE6并不支持除超链接以外的元素的:hover伪类选择符，这里我们可以用jQuery：
首先添加一个css样式：
.focus {
border: 1px solid #f00;
background: #fcc;
}
$(function() {
$(":input").focus(function() {
$(this).addClass("focus");
}).blur(function() {
$(this).removeClass("focus");
})
})
多行文本框应用
1. 高度变化
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" cols="20" rows="8">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.
多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.
多行文本框高度变化.
</textarea>
</div>
</div>
</form>
使用放大，缩小按钮控制评论框高度。
$(function() {
var $comment = $("#comment");
$(".bigger").click(function() {
if ($comment.height() < 500) {
// 重新设置高度，在原有的高度上加50
$comment.height($comment.height() + 50);
}
});
$(".smaller").click(function() {
if ($comment.height() > 50) {
// 重新设置高度，在原有基础上减50
$comment.height($comment.height() - 50);
}
})
})
如果想加入动画缓冲效果，修改这里就好了：
$comment.animate({height:"+=50"},400);
2.滚动条高度变化
通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。
$(function() {
var $comment = $("#comment");
$(".down").click(function() {
if (!$comment.is(":animated")) {
$comment.animate({scrollTop : "-=50"},400);
}
})
$(".up").click(function() {
if (!$comment.is(":animated")) {
$comment.animate({scrollTop : "+=50"},400);
}
})
})
复选框应用
对复选框的应用，就是对复习框进行全选、反选和全不选等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。
<form>
你爱好的运动是？<br/>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<input type="button" id="CheckedAll" value="全 选">
<input type="button" id="CheckedNo" value="全 选">
<input type="button" id="CheckedRev" value="反选">
<input type="button" id="send" value="提 交">
</form>
如果需要使复选框处于选中或者不选状态，必须通过控制元素的checked属性来达到目的。
- checked：true 选中
- checked：false 没选中
全选操作就是用户单击全选按钮时，需要将复选框全部选中，此时需要为全选按钮绑定事件，然后使用选择符寻找符合要求的复选框，最后通过attr()方法来设置属性checked值。
$("#CheckedAll").click(function() {
$("[name=items]:checkbox").attr("checked",true);
})
全不选，只需要将复选框的checked属性的值设置为false。
$("#CheckedNo").click(function() {
$("[name=items]:checkbox").attr("checked",false);
})
反选操作稍微复杂，需要循环遍历每一个复选框进行设置，取它们值的相反值。
$("#CheckedRev").click(function() {
$("[name=items]:checkbox").each(function() {
$(this).attr("checked",!$(this).attr("checked"));
});
})
此时用原生JS写更简洁：
$("#CheckedRev").click(function() {
$("[name=items]:checkbox").each(function() {
this.checked = !this.checked;
});
})
复选框被选中后，用户单击提交按钮，需要讲选中的项的值取出，可以通过val()方法获取选中的值。
$("#send").click(function() {
var str = "你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function() {
str += $(this).val() + "\r\n";
});
alert(str);
})
下拉框应用
HTML：
<style>
.centent {
display: inline-block;
margin-left: 50px;
}
span {
background-color: darkturquoise;
display: block;
margin-top: 10px;
}
</style>
<body>
<div class="centent">
<select multiple id="select1" style="width: 100px;height: 160px">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width:100px;height: 160px"></select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
初始效果
需求
- 将选中的选项添加给对方
- 将全部选项添加给对方
- 双击某个选项将其添加给对方
功能1
将选中的选项添加给对方
首先要选取下拉列表中被选中的项，然后将当前下拉列表中选中的选项删除，最后将删除的选项添加给对方。
先将左边的选项添加到右边：
$("#add").click(function() {
var $options = $("#select1 option:selected"); // 获取选中的选项
var $remove = $options.remove(); // 删除下拉列表中选中的选项
$remove.appendTo("#select2");
})
功能2
将全部的选项添加给对方和将选中的选项添加给对方之间的唯一区别就是获取的对象不同，因此只要稍微修改代码就可以实现。
$("#add").click(function() {
var $options = $("#select1 option");
$options.appendTo("#select2");
})
功能3
首先给下拉列表绑定双击事件
$("#select1").dblclick(function() {
// 将选中的选项添加给对方
})
然后可以通过$("option:selected",this)方法来获取被选中的选项。
$("#select1").dblclick(function() {
var $options = $("option:selected",this);
$options.appendTo("#select2");
})
综合：
$("#add").click(function() {
var $options = $("#select1 option:selected");
var $remove = $options.remove();
$remove.appendTo("#select2");
})
$("#add_all").click(function() {
var $options = $("#select1 option");
$options.appendTo("#select2");
})
$("#select1").dblclick(function() {
var $options = $("option:selected",this);
$options.appendTo("#select2");
})
从右边添加到左边也大同小异，在此就不赘述。
表单验证
<form action="" method="POST">
<div class="int">
<label for="username">用户名</label>
<input type="text" id="username" class="required">
</div>
<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required">
</div>
<div class="int">
<label for="personinfo">个人资料：</label>
<input type="text" id="personinfo">
</div>
<div class="sub">
<input type="submit" value="提交" id="send"><input type="reset" id="res">
</div>
</form>
在表单内class属性为required的文本框是必须填写的，因此需要将它与其他的非必须填写表单元素加以区别，即在文本框后面追加一个红色的标识。
$("form :input.required").each(function() {
var $required = $("<strong class='high'> *</strong>");
$(this).parent().append($required);
})
当用户在“用户名”文本框中填写完信息后，将光标的焦点从“用户名”移出时，需要即时判断用户名是否符合验证规则。当光标的焦点从"邮箱“文本框移出时，需要即时判断邮箱填写是否正确，因此需要给表单元素添加失去焦点事件，blur。
$("form :input").blur(function() {
})
验证表单元素步骤：
- 判断当前失去焦点的元素是用户名还是邮箱，分别处理
- 如果是用户名，判断元素的值长度是否小于6，如果小于6，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
- 如果是邮箱，判断元素的值是否符合邮箱的格式，如果不符合，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
- 将提醒信息追加到 当前元素的父元素的最后。
