Html5中的表单新增属性

最新推荐文章于 2022-11-24 15:53:11 发布

豬ふ繌

最新推荐文章于 2022-11-24 15:53:11 发布

阅读量194

点赞数

分类专栏： html5 文章标签：个人笔记

本文链接：https://blog.csdn.net/qq_37276382/article/details/95596663

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. Number类型input标签

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

name:标识表单提交时的key值
min:输入框中的最小值
max:输入框中的最大值
step：增加/减小的步长

2. Email类型input标签

<input type="email" name="email" placeholder="请输入邮箱"/>

文本框会自动校验是否符合邮箱的正则表达式

3. URL类型的input标签

<input type="url" placeholder="请输入网址" name="url"/>

4. Tel类型的input标签

<input type="tel" placeholder="输入电话" name="phone"/>

5. range类型的input标签

<input type="range" min="0" max="50" step="5" name="rangedemo" value="0"/>

效果图：
在这里插入图片描述
显示数字的范围框

<form oninput="output.value=parseInt(range.value)"/>

    <input type="range" min="0" max="100" step="5" name="range" value="0"/>

    <output name="output">0<output/>

</form>

在这里插入图片描述

6. 新的日期、时间、月份、星期input标签

在h5中，不用增加插件，就能实现日历的功能，当前只有谷歌提供了原生的日历
属性值：week（周）,date（日期）,time（时间）,month(月)，dateTime-local(本地时间)。dateTime(时间)

<input type ="week" name="datademo1"/>
<input type="month" name="datademo2"/>
<input type="time" name="datademo3"/>
<input type = "date" name="datademo"  id="datademo"/>

获取日期里面的值

$("#datademo").val()

分别获取日期中的年月日：

var arr= $("#datademo").val().split("-");
             for(i=0;i<arr.length;i++){
                 alert("参数值分别是"+arr[i]);
             }

arr是一个数组，遍历数组获取年月日

截取字符串方法：
使用slice(5,7);左闭右开。

7. 颜色选择input标签

<input type="color" name="colordemo"/>

8. input标签自动完成功能

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />

<datalist id="autoNames">

       <option  value="轻松入门" ></option>

       <option  value="php中文网" ></option>

       <option  value="自学教程" ></option>

</datalist>

只需要输入前面的值，就能显示相应的文字

笔记：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>drop</title>
 <body>
     <script>
      
     
         function show1(){
             alert("完整的日期："+$("#datademo").val())
              var arr= $("#datademo").val().split("-");
             for(i=0;i<arr.length;i++){
                 alert("参数值分别是"+arr[i]);
             }
             var year = $("#datademo").val().slice(0,4)
             alert("年份:"+year);
             var month=$("#datademo").val().slice(5,7);
             alert("月份："+month);
             var day = $("#datademo").val().slice(8,10);
             alert("日子："+day);
             alert("颜色参数值："+$("#colordemo4").val())
             
         }
         
     </script>
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />

<datalist id="autoNames">

 <option value="轻松入门" ></option>

 <option value="php中文网" ></option>

 <option value="自学教程" ></option>

</datalist>

<input type="number" name="demoNumber" min="1" max="100" step="1"/>
<input type="email" name="email" placeholder="请输入邮箱"/>
<input type="url" placeholder="请输入网址" name="url"/>
<input type = "text" autocomplete ="on" name="auto" list="aa"/>
<input type="tel" placeholder="输入电话" name="phone"/>
<input type="range" min ="0" max="50" step="5" name="rangedemo" value="25">
<form oninput ="output.value=parseInt(range.value)"/>
<input type="range" min ="0" max="100" step="5" name="range" value="0"/>
<output name="output">0</output>
<input type= "button" value="获取日期" onclick="show1();"/>
<input type = "date" name="datademo"  id="datademo"/>
</form>

<input type ="week" name="datademo1"/>
<input type="month" name="datademo2"/>
<input type="time" name="datademo3"/>
<input type="color" name="datademo4" id="colordemo4"/>

<input type="text" autocomplete="on" name="democomplete" list="aa">  
<datalist id= "aa">
    <option value="轻松入门"></option>
    <option value="php"></option>
    <option value="hh"></option>
</datalist>
</body>
</html>

豬ふ繌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5中的表单新增属性

1. Number类型input标签<input type="number" name="demoNumber" min="1" max="100" step="1"/>name:标识表单提交时的key值min:输入框中的最小值max:输入框中的最大值step：增加/减小的步长2. Email类型input标签<input type="email" name="e...
复制链接

扫一扫

专栏目录