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)点击清空


  • 相关阅读:
    Entity Framework Code First 数据迁移
    Tekla Structures 使用类库概览
    从IT的角度思考BIM(三):敏捷开发
    在 IIS MIME 类型中添加 md 扩展名
    使用 windows 计划任务播放音乐文件
    Win10 IIS以及ASP.NET 4.0配置问题日志
    从IT的角度思考BIM(二):模式与框架
    最小生成树算法总结(Kruskal,Prim)
    最短路径算法总结(floyd,dijkstra,bellman-ford)
    大整数运算模板总结
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314020.html
Copyright © 2011-2022 走看看