一个休假申请页对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" 加上这个属性表示把你上次文件一点 ...
随机推荐
- nyoj_60_谁获得了最高奖学金_201311281117
谁获得了最高奖学金 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取 ...
- 淘宝信海龙 --PHP系统
https://yq.aliyun.com/users/1467229535950742?spm=5176.100239.blogrightarea56002.3.RoToxZ
- Android Notification状态栏通知
没有添加额外的震动及声音效果,这里直接实现了通知的功能,看效果吧: MainActivity.java package com.example.notification; import android ...
- 关于Android开发数据存储的方式（一）
关于Android开发数据存储方式(一) 在厦门做Android开发也有两个月了,快情人节了.我还在弄代码. 在微信平台上开发自己的APP,用到了数据存储的知识,如今总结一下: 整体的来讲.数据存储方 ...
- Office 365 的公共网站的一些限制及解决的办法
当前的SharePoint Online版本是基于SharePoint 2013的,但是很多功能确被阉割掉了. 下面主要列出Office 365公共网站被限制的功能,以及可绕过的解决方案: 内容类型 ...
- 学习笔记——AOP
以下纯属个人刚了解点皮毛,一知半解情况下的心得体会: ==================================================================== AOP( ...
- HDU5567/BestCoder Round #63 (div.2) A sequence1 水
sequence1 Given an array a with length n, could you tell me how many pairs (i,j) ( i < j ) for a ...
- jQuery总结04
1 JavaScript 中的 AJAX 的四个实现步骤分别是? 2 如何处理 XMLHttpRequest 对象的兼容问题? 3 jQuery 中的 AJAX 4 jQuery 选择器包括哪些? 5 ...
- 2749: [HAOI2012]外星人
首先像我一样把柿子画出来或者看下hint 你就会发现其实是多了个p-1这样的东东 然后除非是2他们都是偶数,而2就直接到0了 算一下2出现的次数就好 #include<cstdio> #i ...
- operator[] 重载
#include <iostream>#include <vector>#include <string> class Assoc { struct Pair ...