这是最后一个小节了，后面将会使用一个小项目来进一步实用讲解；
在之前的什么相关只是点都以及讲过了或者说涉及到过，如datagrid表格，树形菜单，布局面板panel，页签，拖放功能，只是在表格的属性细节没有讲，后面用到将会进一步讲解，好了这一小节，主要是form表单一些属性使用，后续将会以“文章管理系统“这个项目实战，结合php和easyui来细讲；
这节很简单的 ，直接贴出代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>7、easyui 表单</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$("#form1").form({
url:'formdemo.php',
onSubmit:function(){
return $(this).form('validate');
},
success:function(data){
$.messager.alert('Info', data, 'info');
$("#form1").form('clear');
}
});
$("#cb").combobox({
formatter:function(row){
var imagefile = '../../../img/'+row.icon;
return '<img class="item-img" src="'+imagefile+'"/><span class="item-text">'+row.text+'</span>';
}
});
$('#cc').combo({
url:'combobox_data.json',
required:true,
multiple:true
});
$('#cg').combogrid({
panelWidth:450,
value:'006',
idField:'code',
textField:'name',
url:'combobox_data.json',
columns:[[
{field:'code',title:'Code',60},
{field:'name',title:'Name',100},
{field:'addr',title:'Address',120},
{field:'col4',title:'Col41',100}
]]
});
});
</script>
</head>
<body>
<!-- 表单异步以及验证-->
<div>
<form id="form1" method="post">
<p><label for="name">name</label>
<input class="easyui-validatebox" required="true" name="name" type="text"/></p>
<p><label for="sex">sex</label>
<input name="sex" type="text"/></p>
<p><label for="age">age</label>
<input name="age" type="text"/></p>
<p>
<input value="submit" type="submit"/></p>
</form>
</div>
<!--树形下拉框-->
<div id="dlg" style="500px;height:250px;padding:10px 30px;"
title="Register" buttons="#dlg-buttons">
<h2>Account Information</h2>
<form id="ff" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" style="350px;"/></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" style="350px;"/></td>
</tr>
<tr>
<td>City:</td>
<td><select class="easyui-combotree" url="city_data.json" name="city" style="156px;"/></td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()">Submit</a>
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>-->
</div>
<!--格式化下拉框-->
<div>
<input id="cb" valueField="id" textFiled="text" url="combobox_data.json" >
</div>
<!--文本框-->
<div>
<p>文本框：<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="300px"> </p>
<p><input id="tb" class="easyui-textbox" type="text" style="300px" buttonText="Serach" iconCls="icon-man" iconAlign="left"></p>
</div>
<!--自定义下拉框-->
<div>
<input id="cc" value="001">
</div>
<!--数值输入框-->
<div>
<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>
</div>
<!--日期输入框-->
<div>
<input id="dd" type="text" class="easyui-datebox" required="required"></input>
</div>
<!--数据表格下拉框-->
<div>
<input id="cg" name="dept" value="01" />
</div>
</body>
</html>
city_data.json
[{ "id":1, "text":"City", "children":[{ "id":11, "text":"Wyoming", "children":[{ "id":111, "text":"Albin" },{ "id":112, "text":"Canon" },{ "id":113, "text":"Egbert" }] },{ "id":12, "text":"Washington", "state":"closed", "children":[{ "id":121, "text":"Bellingham" },{ "id":122, "text":"Chehalis" },{ "id":123, "text":"Ellensburg" },{ "id":124, "text":"Monroe" }] }] }]
combobox_data.json
[{ "id":1, "text":"Word", "icon":"doc.png" },{ "id":2, "text":"Excel", "icon":"xls.png" },{ "id":3, "text":"Zip", "icon":"zip.png", "selected":true },{ "id":4, "text":"Html", "icon":"html.png" },{ "id":5, "text":"Css", "icon":"css.png" },{ "id":6, "text":"Text", "icon":"txt.png" },{ "id":7, "text":"PowerPoint", "icon":"ppt.png" }]