您的位置:首页> 前端教程> HTML教程
文章导航

HTML input time calendar 控件

2019-1-31 20:22| 作者: admin| 查看: 1740| 评论: 0|来自: 蚂蚁部落

HTML5之前,实现时间控件通常要使用JavaScript,比较困难。

虽然有很多现成的插件可以使用,但总归要使用若干JavaScript和CSS代码。

当前,只要将input的type属性值设置为"time"即可创建一个time控件,非常简单快捷,并且功能也很实用。

特别说明:时间控件只包括小时字段和分钟字段,因为时间通常指的就是小时与时间或者秒,如果加上日期的话,那么通常会包括年、月或者日,这一差别大家可以体会一下。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间:<input type="time" name="time">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202245u11mfsznf88n3f1t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先对控件的主要特点做一下说明:

(1).可以通过CSS对齐一些属性进行控制。

(2).分为前后小时与分钟两个字段,当然提交表单时只有一个包含时间与分钟的value值。

(3).鼠标悬浮会出现叉号与上下箭头按钮,点击叉号能够清空控件,点击上下箭头可以设置小时和分钟的值。此控件还有若干属性,下面介绍一下比较常用的几个属性:

(1).value:控件value值,通过此属性可以设置或者获取空间的时间值。

(2).required(HTML5):规定控件内容是必填的。

(3).list(HTML5):规定输入域的datalist,具体参阅HTML datalist选项列表一章节。

(4).form(HTML5):规定输入域所属的一个或多个表单。

(5).autofocus(HTML5):规定在页面加载时,域自动地获得焦点。

(6).disabled:设置控件为不可用状态,在这个状态下,控件的值也不会被提交。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间:<input type="time" value="02:59" name="time">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202324w9hnaeqzuoheqou6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过value属性可以设置控件的值,有一点需要特别注意,value值的格式要规范:

(1).值分为两部分,用冒号分隔,左边表示小时,右边表示分钟。

(2).每一部分的数字必须是两位,也就是二十四小时制,如果是个位数,前面补零,否则无效。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间:<input type="time" required name="time">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202347gmrrohomrnrmhngr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

required属性规定控件为必填,也就是value值不能为空,否则报错。

特别说明:required属性无需属性值。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="time" list="softwhy" required name="time">
  <datalist id="softwhy">
    <option  value="02:59" />
    <option  value="02:50" />
    <option  value="02:40" />
    <option  value="02:20" />
  </datalist>   
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202418tyka6cavf2qkpqtp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).将time控件的list属性值设置为datalist控件的id属性值,即可将两者关联起来。

(2).datalist的子元素option可以设置设置备选的时间列表,与select下拉菜单比较类似。

(3).option的value属性值同样必须遵守一定的格式,与time控件value属性值格式相同。

(4).鼠标悬浮于time控件,右侧会出现向下的箭头,点击可以弹出option预定义的时间列表。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表单"/>
</form>
日期:<input form="ant" type="time" required name="time"> 
</body>
</html>

form属性引用所属表单的id,于是虽然控件在<form>之外,但依然是该表单的一部分。

autofocus与disabled属性就不再演示了,比较简单,autofocus属性规定当页面加载完毕之后,控件会自动获取焦点,disabled规定控件处于不可用状态,与readonly属性区分一下,不可以用状态不但不可以编辑,而且控件的值也不能够被提交到服务器,但是只读可以被提交。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部