一个休假申请页对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" 加上这个属性表示把你上次文件一点 ...
随机推荐
- N天学习一个linux命令之ss
用途 输出socket统计,无任何参数时默认显示的是已建立socket连接的列表 用法 ss [options] [ FILTER ] 常用选项 -h, --help 显示帮助信息 -V, --ver ...
- 认识GIT之入门
前言 GIT是非常优秀的源代码版本管理工具,经过几年的发展,已经变得非常成熟以及流行,不同于其他的源代码管理系统,值得使用.GIT官网下载在线安装包,经常会中途退出,很有可能的原因是被墙了,所以建议使 ...
- mybatis sql语句#{}和${}区别联系
1.说白了就是,#{}用于引用字符变量,如varchar,string.因为sql语句执行过程中要给string varchar加‘’来执行. 2.${}用来引用int型等不需要添加单引号的值 3.具 ...
- cocos2d-x 3.7 win7 32+Android 环境配置
之前用的cocos2d-x 2.2.6 版本号,近期换成了3.7.眼下的最新版.整个过程中也碰到了不少问题.如今已经成功移植到手机上了. 分享下整个过程,希望能帮到别人.(所需软件已打包) [下载软件 ...
- Android系统升级那些事儿【转】
本文转载自:http://blog.csdn.net/chenyufei1013/article/details/12705719 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?) ...
- bzoj2303
并查集+数学 这道题网上好像有两种解法. 这位写的很可读:http://blog.csdn.net/unicornt_/article/details/51901225 然后看完大概就懂了做法,但是实 ...
- centos vi和vim用法
所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正 ...
- bzoj1593 [Usaco2008 Feb]Hotel 旅馆(线段树)
1593: [Usaco2008 Feb]Hotel 旅馆 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 758 Solved: 419[Submit ...
- Java调用JavaWebService
1.pom配置 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&g ...
- SHRINK SPACE Command : Online Segment Shrink for Tables, LOBs and IOTs
ORACLE-BASE - ALTER TABLE ... SHRINK SPACE Command : Online Segment Shrink for Tables, LOBs and IOTs ...