1. 创建EasyUI表单及常用控件。
本例创建一个包含jQuery插件的jsp文件，阐述jQuery的页面程序的基本结构。该页面包含一个EasyUI的表单控件、四个textbox文本框、一个combobox组合框和两个linkbutton按钮控件。页面布局使用基本的HTML表格（Table）标签。页面程序在<head>…</head>之间使用<script>标签引用jQuery的几个样式文件和jQuery.min.js、jQuery.EasyUI.min.js、EasyUI-lang-zh_CN.js三个插件库文件。本实例程序运行界面如图2-1所示，完整程序代码见程序2-1。
图2-1 EasyUI表单及常用控件程序运行界面
程序2-1. example01_formbasic.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!doctype html>
<html lang="en">
<style type="text/css">
</style>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="jqEasyUI/themes/default/EasyUI.me.css">
<link rel="stylesheet" type="text/css" href="jqEasyUI/themes/icon.css">
<link rel="stylesheet" type="text/css" href="system/css/icon.css">
<script type="text/javascript" src="jqEasyUI/jQuery.min.js"></script>
<script type="text/javascript" src="jqEasyUI/jQuery.EasyUI.min.js"></script>
<script type="text/javascript" src="jqEasyUI/EasyUI-lang-zh_CN.js"></script>
<script type="text/javascript" src="system/Easyui_functions.js"></script>
</head>
<body>
<h4>EasyUI表单控件基础</h4>
<div class=“easyui-panel" title="注册" style="width:300px">
<div style="padding:10px 10px 10px 30px">
<form id="form1" method="post">
<table cellpadding="5">
<tr>
<td>姓名:</td>
<td><input class=“easyui-textbox" type="text" name="name"
data-options="required:true"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input class=“easyui-textbox" type="text" name="email"
data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>课程:</td>
<td><input class=“easyui-textbox" type="text" name="subject"
data-options="required:true"></input></td>
</tr>
<tr>
<td>备注:</td>
<td><input class=“easyui-textbox" name="message"
data-options="multiline:true" style="height:60px"></input></td>
</tr>
<tr>
<td>语言:</td>
<td>
<select class=“easyui-combobox" name="language">
<option value="cn">中文</option>
<option value="uk">英文</option>
<option value="jp">日文</option>
</select>
</td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class=“easyui-linkbutton" style="width:60px;"
onclick="submitForm()">提交</a>
<a href="javascript:void(0)" class=“easyui-linkbutton" style="width:60px;"
onclick="clearForm()">清空</a>
</div>
</div>
</div>
<script>
function submitForm(){
$('#form1').form('submit'); //jQuery语句
}
function clearForm(){
$('#form1').form('clear'); //jQuery语句
}
</script>
</body>
</html>
主要知识点：
①jQuery+EasyUI插件库的引用及页面文件的总体结构。
②EasyUI控件在HTML中的定义及其class类的名称。
③样式CSS、层DIV的使用及利用表格Table进行页面布局（HTML知识点）。
④EasyUI表单控件中data-options和style选项的设置。例如：data-options="required:true"表示该输入项值不能为空，validType:'email'表示输入项内容必须符合email的基本格式要求。
⑤jQquery控件的表达方式：$('#form1')。
思考题：
①如何设置各个控件的宽度、高度等属性。
②如何设置组合框combobox的选项与组合框的高度。
③如何不使用table进行页面布局。