H5表单元素

Posted 2020-08-22

一、input类型

       1、电子邮件类型

               (1)功能描述：输入E-mail地址的文本框

               (2)语法：<input type="email" /> 

       2、搜索类型

               (1)功能描述：输入搜索关键字操作的文本框

               (2)语法：<input type="search" />

       3、URL类型

           (1)功能描述：输入Web站点的文本框

               (2)语法：<input type="url" />

       4、电话号码类型

            (1)功能描述：主要针对电话号码的输入能够指示浏览器根据不同的设备进行调整

                (2)语法：<input type="tel" />

       5、数字类型

                (1)功能描述：只能接收数字值

                (2)语法：<input type="number" />

                (3)属性：
                    --min：当前域能接受的最小值

                    --max：当前域能接受的最大值

                    --step：决定了域所接受值的递增或递减的步长，默认为1

       6、范围类型

                (1)功能描述:允许用户选择一个范围的数值

                (2)语法：<input type="range" min="10" max="1000" value="50" />

                (3)属性：

                    --min：范围的下限值

                    --max：范围的上限值

                    --step：声明该值递增或递减的步长

                    --value：设定初始值

       7、颜色类型 

               (1)功能描述：预定义的颜色拾取控件

               (2)语法：<input type="color" />

       8、日期类型               (1)功能描述：创建一个日期输入域

               (2)语法：<input type="date" />

       9、周类型

               (1)功能描述：与date类型相似，但是只能选择周

               (2)语法：<input type="week" />

       10、月类型

                 (1功能描述：与date类型很相似，但是只能选择一个月份

                 (2)语法：<input type="month" />

 

二、新表单元素

     1、<datalist>元素

             --是一个表单特有的元素，它可以使用list属性预创建一组列表项，后面可以为输入框的输入提示

     2、<progress>元素

             --表示一个任务的完成进度，而且通常这些任务都在表单中启动和处理

             --属性：

                      value：任务执行的进度

                      max：声明任务完成后达到的值

     3、<meter>元素

             --与<progress>元素类似，可用于显示刻度，而非进度

             --属性：

                      min和max：设置范围的边界

                      value：确定测量的值

                      low、high和opimum讲范围划分为不同的部分和设置最佳位置

     4、<output>元素

             --通常用于显示表单元素处理的结果值

             --属性：

                      for：讲output元素与参与计算的源元素相关联，目的为了提高代码可读性