一个休假申请页对input标签各种属性的用法案例（手机端）
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD 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">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>休假申请</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
body{margin: 0;padding: 0;}
html,body{ font-size:14px; height:100%;}
dl{
width: 220px;
height: auto;
margin: 30px auto;
}
dl dt span{
color: red;
}
dl dd{
width: 100%;
margin: 4px 0 12px;
}
dl dd select,input{
width: 100%;
height:2em;
border-radius: 0;
padding:0;
margin:0;
background-color: transparent;
}
footer{
width: 100%;
}
button.submit{
width: 150px;
height: 2em;
line-height: 2em;
display: block;
margin: 0 auto 20px;
border-radius: 4px;
border: none;
font-weight: bold;
color:#fff;
background-color:#4d8fd8;
font-size:14px;
}
</style>
</head>
<body>
<dl>
<dt>休假类别<span>*</span></dt>
<dd>
<select id="leaveCategory" style="width:217px;">
<s:if test="typeList!=null && typeList.size()>0">
<s:iterator value="typeList" status="s">
<option value="<s:property value="timeItemCode"/>"> <s:property value="timeItemName"/> </option>
</s:iterator>
</s:if>
</select>
</dd>
<dt>休假开始日期时间<span>*</span></dt>
<dd><input type="datetime-local" id="beginTime" style="width:215px;" /></dd>
<dt>休假结束日期时间<span>*</span></dt>
<dd><input type="datetime-local" id="endTime" style="width:215px;" /></dd>
<dt>假期联系电话</dt>
<dd><input type="tel" id="ownTel" maxlength="13" style="width:216px;" /></dd>
<dt>休假事由</dt>
<dd><input type="text" id="reason" maxlength="100" style="width:216px;" /></dd>
<dt>工作交接人（请输入手机号）</dt>
<dd><input type="tel" id="handoverTel" maxlength="20" style="width:216px;" /></dd>
<dt>工作交接情况</dt>
<dd><input type="text" id="situation" maxlength="100" style="width:216px;" /></dd>
<dt>备注</dt>
<dd><input type="text" id="note" maxlength="200" style="width:216px;" /></dd>
</dl>
<footer><button class="submit" onclick="submit()">提交</button></footer> <script>
function submit(){
var leaveCategory = $('#leaveCategory').val();
if(!leaveCategory){
alert("休假类别不能为空");
return
}
var beginTime = $('#beginTime').val().substr(0,16); //时间只取值到分
if(!beginTime){
alert("休假开始日期时间不能为空");
return
}
var endTime = $('#endTime').val().substr(0,16);
if(!endTime){
alert("休假结束日期时间不能为空");
return
}
if(beginTime>=endTime){
alert("休假结束日期时间必须大于休假开始日期时间");
return
}
var ownTel = $('#ownTel').val();
var reason = $('#reason').val();
var handoverTel = $('#handoverTel').val();
var situation = $('#situation').val();
var note = $('#note').val(); $.ajax({
url: '',
type: 'post',
data: {
timeItemCode : leaveCategory,
beginTime : beginTime,
endTime : endTime,
ownTel : ownTel,
reason : reason,
handoverTel : handoverTel,
situation : situation,
note : note
},
dataType: 'json',
success: function(res){},
error: function(){}
})
}
</script>
</body>
</html>
一个休假申请页对input标签各种属性的用法案例（手机端）的更多相关文章
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- select标签multiple属性的用法
前些日子公司让做一个功能模块.对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVh ...
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- HTML中input标签maxlength属性的妙处
HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...
- 关于input标签checkbox属性 和checked
我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ...
- 前端 html input标签 placeholder属性 标签上显示内容
前端 html input标签 的placeholder属性 标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...
- input标签新增属性
<input list='list_t' type="text" name='user' placeholder='请输入姓名' value="" / ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
随机推荐
- Pie POJ 3122 二分搜索
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17324 Accepted: 5835 Special Judge ...
- [bzoj3378][Usaco2004 Open]MooFest 狂欢节_树状数组
MooFest 狂欢节 bzoj-3378 Usaco-2004 Open 题目大意:给定一个n个数的a序列,每两个数之间有一个距离,两个点之间的权值为$max(a[i],a[j])*dis(i,j) ...
- [bzoj4154][Ipsc2015]Generating Synergy_KD-Tree_dfs序
Generating Synergy bzoj-4154 Ipsc-2015 题目大意:给定一棵n个节点树,m个操作,支持:将一个点周围所有距该点距离不超过l的子结点的颜色改成另一种颜色:查询单点颜色 ...
- OpenCV使用GPU
在使用OpenCV2.4.x的时候,以为不用重新编译可以直接使用GPU模块,不过在我使用的时候,发现使用getCudaEnabledDeviceCount()的时候,总是获得是0,于是重新编译Open ...
- 2.1－VLAN/TRUNK/VTP
2.1-VLAN/TRUNK/VTP 注意:配置VLAN时要退出VLAN配置模式才会执行 如果VLAN被删除或者shutdown,那么属于这个vlan的接口将被阻塞(灯一直是橙色,变不了绿色) ...
- Android 绘制圆形图片
经常在项目中,会遇到使用圆形头像. 然而图片往往不是圆形的,我们须要对图片进行处理.以达到圆形图片的效果.这里.我总结了一下经常使用的android圆形图片的绘制的方法. 主要有以下几种方式:1.画布 ...
- $().attr()的使用方法 && $().html()与$().text()的差别
<1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...
- 使用同步适配器（sync adapter）数据传输
在android设备与webserver之间实现数据同步能显著提高你的应用的有用性.让你的应用更受用户的欢迎. 比方说.你的数据上传给webserver,这就有了一个有用的备份.当用户的设备离线工作时 ...
- Codeforces Round #330 (Div. 2) D. Max and Bike 二分
D. Max and Bike For months Maxim has been coming to work on his favorite bicycle. And quite recently ...
- QMessageBox 的四种用法
void MainWindow::on_info_clicked() { //info QMessageBox::information(this, "Title", " ...