<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--input-->
<!--时间选择器
date 选取年月日
month 选取年月
week 选取周和年
time 选取时间 小时和分钟
datetime 选取年月日 UTC时间
datetime-local 选取本地时间
-->
<input type="week" name = "date" id = "date">
<!--搜索框 -->
<form action="#" method="post" name="form" id="form">
<input type="search" name="search">
<input type="submit" id="submit" value="提交">
</form>
<!--
input 还可以用来做电话号码
tel 和color
-->
<input type="color" name="color">
<!--选取一种颜色-->
<!--html5 新增的输入属性-->
<!--autocomplete 自动完成输入内容-->
<h2>输入你喜欢的城市的名称</h2>
<input type="text" id="city" list="citylist">
<datalist id="citylist" style="display: none">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="changzhou">常州</option>
<option value="shenzhen">深圳</option>
</datalist>
<!--还有表单重新属性 form-->
<!--list属性 在上面datalist的时候已经演示过了 可以参考-->
<!--min max step属性
适用于number date picker range
在下面演示的时候要有一个form表单 然后错误信息只有在提交的时候会出现
-->
11
<form action="" method="get">
<input type="number" id="number" min="2" max="20" step="2">
<input type="submit" value="提交" >
</form>
<input type="file" id="file" multiple>
<!--multiple 支持一次性选择多个文件 file默认是一次只能传一个文件
也支持新增的email属性
-->
<!--pattern
用于验证输入框中用户输入的内容是否与自定义正则表达式匹配
-->
<form action="">
<input type="tel" id="tel" pattern="[0-11]{11}">
<input type="submit" value="提交">
</form>
<!--新增的空间html5
datalist 里面的内容由option创建 option必须设置value 这是显示的内容
kegen元素 是秘钥生成器 用户提交表达的时候会生成两个秘钥 一个客户端存储 一个发到服务器存储
-->
<form action="">
请输入用户名:
<input type="text" name="usre_name">
<br>
请选择加强密度
<input type="keygen">
<keygen name="security"></keygen>
<input type="submit" value="提交">
</form>
<!--output 在浏览器中显示计算结果或者输出 包含完整的开始和结束标签-->
<output name="">text</output>
<script>
window.onload = function () {
a = parseInt(prompt("请输入第一个数字:",5));
b = parseInt(prompt("请输入第二个数字:",5));
document.forms["form"]["result"].value = a*b;
}
</script>
<form action="" method="get" name="form">
两个数的乘积为:
<output name="result"></output>
</form>
<!--新增的表单属性 、、
novalidate 取消对整个表单的验证
-->
</body>
</html>
输入属性小结(一)
最新推荐文章于 2021-05-31 02:33:53 发布