HTML5新增的表单标签（元素）

最新推荐文章于 2023-12-27 18:19:28 发布

仙鹤__

最新推荐文章于 2023-12-27 18:19:28 发布

阅读量911

点赞数

文章标签： html5 html css javascript

本文链接：https://blog.csdn.net/weixin_52629158/article/details/128274650

版权

datalist标签规定输入域的选项列表特点：

1.datalist元素规定输入域的选项列表。

2.datalist标签和input标签结合在一起使用，<input>元素使用<datalist>预定义值。

3.注意：

input身上的属性： <input list="cityList" name="cityList">

datalist身上的属性：<datalist id="cityList">

4.datalist标签里的列表项option带尾标签或不带尾标签即可。例如：

 <!-- datalist标签 规定 输入域 的 选项列表 
  （1）要结合input一起用
  （2）input输入域 要有属性 list="cityList"
  （3）datalist选项列表 要有属性id="cityList"
  -->
    <div>
        <input type="text" name="" id="" list="cityList">
        <datalist id="cityList">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="合肥">合肥</option>
        </datalist>
    </div>

预览：

kengen标签存储私钥，发送公钥<keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）

output输出显示数据标签

特点：

1.<output> 元素用于不同类型的输出，比如计算或脚本输出。

2.name="result"定义对象的唯一名称（表单提交时使用）。

当前output标签的属性name="result"，代表数据输出显示的位置。

3.<form method="post" oninput="reult.value=num1.value+num2.value">

当前数据计算输出 num1.value+num2.value ，这样的输出，是一个字符串，连上另一个字符串，变成一个大字符串。

我们应该调整，把字符串转数字。parseInt()

    <!-- output输出显示数据 标签 -->
    <!-- oninput 事件在用户输入时触发。 -->
    <form method="post" oninput="result.value = parseFloat(num1.value)+parseFloat(num2.value)" >
        <div>
            <input type="text" name="" id="num1">+
            <input type="text" name="" id="num2">
            =
            <output id="result" name="result" for="num1 num2"></output>
        </div>
    </form>

4.for="num1 num2" output的for属性，用来指明参与计算的元素的id,元素与元素之间用空格分隔。

预览：

优化

<form>
        <div>
            <input type="text" name="" id="num1">+
            <input type="text" name="" id="num2">
            <input type="submit" value="=" id="btn">
            <output id="result" for="num1 num2"></output>
        </div>
    </form>

  <script>
            //抓取元素
             var num1=document.getElementById('num1')
             var num2=document.getElementById('num2')
             var result=document.getElementById('result')
             var btn=document.querySelector('#btn')
             


            btn.onclick=function(){
            console.log(num1);

            console.log(num1.value);
             var n1=parseFloat(num1.value);
             var n2=parseFloat(num2.value);

                if(num1.value.length == 0){
                 alert('请输入数字1')
                 num1.focus();
                 return false;
             }
                if(num2.value.length == 0){
                 alert('请输入数字2')
                 num2.focus();
                 return false;  
                }
                console.log(n1,n2);
               
                result.value=n1+n2;
                return false;

             }
       

             
         
    </script>

预览：

1.1 html5表单控件新增属性

1.placeholder属性

特点：

1).placeholder属性提供一种提示（hint），描述输入域所期待的值。（为我们提供输入框所期待的提示性文本）

2).在placeholder属性里的值，默认是灰色。获取焦点时候，在placeholder属性里的值还在。当你输入文本的时候，这里的值会消失掉。

2.required属性

特点：

1.required属性是一个 boolean属性.

2.required属性规定必须在提交之前填写输入域（不能为空）。

3.当你给文本框添加required这个属性。你在点击“提交按钮”时，文本框内没有填写内容。该文本框会出现友情提示“请填写此字段”。

4.required="required" 这个属性，如果给值，里面还是写"required"。所以，一般我们只写属性。

  <!--placeholder属性 作用： 描述输入域所期待的值。 -->
    <div>
        <form action="">
            <div>
                <label for="">用户名</label>
                <input type="text" name="" id="" placeholder="请输入用户名" required="required">
            </div>
             <br>
            <div>
                <input type="submit" value="提交">
            </div>
        </form>

预览：

3.step属性

特点：

1.间隔、步长

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值

4.min和max属性

特点：

1.在很多html5标签上都可以使用，主要是设置值的取值范围。最小临界点和最大临界点。

1.2 html5表单控件type属性新增的值

( ----14个)

type="email" 电子邮件地址(控件)

type="color" 颜色面板(控件)

type="url" 网址(控件) ,用户输入网址的时候，不带协议头，点击提交按钮，会有提示消息“请输入网址”。

type="number" 数字(控件)

type="range" 滑动条、滑竿(控件)

type="search" 搜索(控件)

type="tel" 电话号码(控件)

type="date" 日期(控件) 包括年、月、日，不包括时间(有显示的时间面板可供选择)

type="datetime" 日期(控件) (没有显示日期的面板可供选择)

type="datetime-local" 日期(控件) (有显示的时间面板可供选择，精确到小时分钟)

type="week" 日期(控件) ---表示一年里的第几周

type="year" 日期(控件)

type="month" 日期(控件) ---表示一年里的第几个月

type="time" 时间(控件) ---表示时：分时的取值范围：00-23 分的取值范围：00-59

 <div>
        <form method="post" onsubmit="return false">
            <div>
                <label for="">邮件：</label>
                <input type="email" name="" id="">
            </div>
           
            <div>
                <label for="">颜色面板：</label>
                <input type="color" name="" id="mycolor" >
            </div>
            <div>
                <label for="">网址：</label>
                <input type="url" name="" id="">
            </div>
            <div>
                <label for="">数字：</label>
                <input type="number" name="" id="" min="0" max="5">
            </div>
            <div>
                <label for="">搜索：</label>
                <input type="search" name="" id="">
            </div>
            <div>
                <label for="">电话：</label>
                <input type="tel" name="" id="">
            </div>
            <div>
                <label for="">日期：</label>
                <input type="date" name="" id="">
            </div>
            <div>
                <label for="">日期：</label>
                <input type="datetime" name="" id="">
            </div>
            <div>
                <label for="">日期：</label>
                <input type="datetime-local" name="" id="">
            </div>
            <div>
                <label for="">周：</label>
                <input type="week" name="" id="">
            </div>
            <div>
                <label for="">年：</label>
                <input type="year" name="" id="">
            </div>
            <div>
                <label for="">月：</label>
                <input type="month" name="" id="">
            </div>
            <div>
                <label for="">时间：</label>
                <input type="time" name="" id="">
            </div>
            <div>
                <input type="submit" value="提交">
            </div>
        </form>
    </div>

<script>
        //抓取元素
        var mycolor=document.getElementById('mycolor')
        mycolor.onchange=function(){
            console.log(this.value);

        }
    </script>

预览：