html5 input 属性表单属性

全案设计阿斌 發表於 2019-9-17 21:19:00

html5 的input增加了 type为 email  url  tel number  date pickers   range  input等。
  type类型为 email url number  等这些在实际使用中并没有多少不一样主要是在手机端包括安卓和ios 对这些类型有一定的封装，比如说number   手机端就会弹出来只有数字的键盘
 date pickers 则有更大的不同不仅是手机端还是pc端，看起来都比较高大上，下面就举例说明一下吧
为了美观点，引入了 layui
 date
<div class="cnblogs_code">
<pre> <div class="layui-form-item">
 <label class="layui-form-label">date</label>
 <div class="layui-input-block">
 <input type="date" name="title" requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 </div>
</div></pre>
</div>
效果如下 pc和手机端
<img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917203450559-1770890871.gif"><img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917203534910-996000133.jpg">
 
 
 
 
 
 
 
                   
MONTH
<div class="cnblogs_code">
<pre> <div class="layui-form-item">
 <label class="layui-form-label">MONTH</label>
 <div class="layui-input-block">
 <input type="month" name="title" requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 </div>
</div></pre>
</div>
效果如下 pc和手机端  效果同上， 
week
<div class="cnblogs_code">
<pre><div class="layui-form-item">
 <label class="layui-form-label">MONTH</label>
 <div class="layui-input-block">
 <input type="week" name="title" requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 </div>
</div></pre>
</div>
 
效果如下   pc和手机端  手机端选完日期会自动计算第几周 
<img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917204108949-1015206361.png"><img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917204232831-3889344.png">
 
 
 
 
 
 
 time 和 datetime   还有datetime-loacl  基本类似不再一一赘述
需要注意的是  datetime 属性好像已经要被抛弃了，测试了一下，浏览器不兼容，用datetime-loacl 没有问题
接下来  
range  input 类型
<div class="cnblogs_code">
<pre> <div class="layui-form-item">
 <label class="layui-form-label">MONTH</label>
 <div class="layui-input-block">
 <input type="range" name="title" min="1" max="100"requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" >
 </div>
</div></pre>
</div>
   效果如下 
 
<img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917204913764-1894577217.png">
 
 
 
Search inout 类型 
<img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917205111994-81259820.png">
 
 
 
 
Color input  类型 
  <img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917205217411-1965441039.png">
 
 
 
 
表单属性：
1. autocomplete属性
<div class="cnblogs_code">
<pre><form class="layui-form" autocomplete="on" action=""></pre>
</div>
 主要作用就是自动填充，如果在当前页面提交过，下次如果再填写的话，会在输入框下方显示上次提交的内容
 如果不需要，只需要在对应的单独input框加入即可
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
2.autofouse属性
<div class="cnblogs_code">
<pre> <input type="text" name="title" autofocus="autofocus" requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></pre>
</div>
适用于所有的input标签   自动聚焦input框的输入，不需要鼠标点点击，默认打开输入框 
3. multiple 属性 
规定输入域中可选择多个值  适用于<input> 标签的 email和file 
<div class="cnblogs_code">
<pre> <input type="file" name="title" multiple="multiple"requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917210523430-336740967.png">
 
 注意：当使用在邮件上时每个邮件属性需要用英文逗号隔开
4.palceholder  属性 
 提示框   功能很好适用于，  text  search  password  url  email  telephone  
<div class="cnblogs_code">
<pre> <input type="text" name="title" multiple="multiple"requiredlay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></pre>
</div>
  <img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917210943206-1702003889.png">
 
 5. require 属性 
<img src="https://img2018.cnblogs.com/blog/1781660/201909/1781660-20190917211440503-632565236.png">
 
 
 
  这个layui做的比较好   还包括对其类型的筛选，比如只能填写number  string等   
link 可以引入标题栏图标
<link  rel="icon"  href="icon.gif"    type="image/gif"  sizes="16*16">
  
来源：https://www.cnblogs.com/tongcharge/p/11537302.html

頁: [1]

琼殿技术论坛's Archiver

html5 input 属性 表单属性

html5 input 属性表单属性