输入属性小结(一)

 
<!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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值