zoukankan      html  css  js  c++  java
  • EasyUI之表单Form

    1、实例背景

         EasyUI常用的Form表单,利用输入框直接提交值;清空按钮,将填写有误的数据进行清空


    2、实例源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>EasyUI之表单Form</title>
    		<link rel="stylesheet" href="../themes/black/easyui.css" />
    		<link rel="stylesheet" href="../themes/icon.css" />
    		<link rel="stylesheet" href="../css/demo.css" />
    		<script type="text/javascript" src="../js/jquery.min.js" ></script>
    		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
    		<script>
    			$(document).ready(function(){
    				//提交事件
    				$("#submitBtn").click(function(){
    					$(this).form("submit");
    				});
    				
    				//重置事件
    				$("#resetBtn").click(function(){
    					$(this).form("clear");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div class="easyui-panel" title="发送邮件" style="400px">
    			<div style="padding:10px 60px 20px 60px">
    			    <form id="ff" 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>电子邮件:</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:100px"></input></td>
    			    		</tr>
    			    		<tr>
    			    			<td>语言:</td>
    			    			<td>
    			    				<select class="easyui-combobox" name="language" style=" 172px;">
    			    					<option value="1">中文简体</option>
    			    					<option value="2">中文繁体</option>
    			    					<option value="3">英语</option>
    			    			    </select>
    			    			</td>
    			    		</tr>
    			    	</table>
    			    </form>
    			    <div style="text-align:center;padding:5px">
    			    	<a href="javascript:void(0)" class="easyui-linkbutton" id="submitBtn" style=" 100px;">提交</a>
    			    	<a href="javascript:void(0)" class="easyui-linkbutton" id="resetBtn" style=" 100px;">清空</a>
    			    </div>
    		    </div>
    		</div>
    	</body>
    </html>
    

    3、实例结果

    (1)点击提交


    (2)点击清空


  • 相关阅读:
    发卡构型高分子的跨膜传输
    《一个数学家的叹息》读后
    匀速拉地毯最少需要多大的力
    桥环形高分子的标度理论——链滴图像
    试验1
    自定义控件EditText
    自定义控件TextView
    HTTP的应用httpclient 和线程
    http的应用httpurlconnection--------1
    学习笔记—Fragement +Actionbar
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314020.html
Copyright © 2011-2022 走看看