<!DOCTYPE html PUBLIC "-W3CDTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<style type="text/css">
label{
width:120px;
display:block;
}
</style>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
function loaddata1(){
$('#ff').form('load','form_data.json');
}
function loaddata2(){
$('#ff').form('load',{
name:'name2',
email:'moc.liamg|liamym#moc.liamg|liamym',
subject:'subject2',
message:'message2',
language:5,
dd:'1/12/2011'
});
}
function cleardata(){
$('#ff').form('clear');
}
</script>
</head>
<body>
<h1>Form Demo</h1>
<div>
<a href="#" onclick="loaddata1()">Load1</a>
<a href="#" onclick="loaddata2()">Load2</a>
<a href="#" onclick="cleardata()">Clear</a>
</div>
<div style="background:#fafafa;padding:10px;width:300px;height:300px;">
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name" required="true"></input>
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email" validType="email"></input>
</div>
<div>
<label for="subject">Subject:</label>
<input class="easyui-validatebox" type="text" name="subject"></input>
</div>
<div>
<label for="message">Message:</label>
<textarea name="message" style="height:60px;"></textarea>
</div>
<div>
<label for="date">date:</label>
<input name="dd" id="dd" class="easyui-datebox" required="true"></input>
</div>
<div>
<label for="language">Language:</label>
<input class="easyui-combobox"
name="language"
url="combobox_data.json"
valueField="id"
textField="text"
panelHeight="auto">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>