html5新增属性----表单元素新属性、input新属性、地理定位

Bertha 。 2022-11-30 04:05 233阅读 0赞

## HTML5 表单元素 ##

`< datalist >` 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。  
`< keygen >` 规定用于表单的密钥对生成器字段。  
`< output >` 定义不同类型的输出，比如脚本的输出。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

> < datalist > 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

## HTML5 新的表单属性 ##

HTML5 的 `<form>` 和 `<input>`标签添加了几个新属性.

< form > / < input > autocomplete 属性

> autocomplete 属性规定 form 或 input 域应该拥有自动完成功能  
> 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项  
> autocomplete 属性有可能在 **form元素中是开启**的，而在**input元素中是关闭**的。

< form > novalidate 属性

> novalidate 属性是一个 boolean属性  
> novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

< input > autofocus 属性  
autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

First name:<input type="text" name="fname" autofocus>

![在这里插入图片描述][2020082300280942.png_pic_center]  
< input> form 属性  
form 属性规定输入域所属的一个或多个表单。

<form id="form1">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="提交">
    </form>
     
    Last name: <input type="text" name="lname" form="form1">

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):  
![在这里插入图片描述][20200823003135295.png_pic_center]  
< input > formaction 属性  
The formaction 属性用于描述表单提交的URL地址.

The formaction 属性会覆盖 元素中的action属性

< input > formenctype 属性  
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

< input > formmethod 属性  
formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 元素的 method 属性

> 注意：该属性与 type=“submit” 和 type=“image” 配合使用。

< input > formnovalidate 属性  
novalidate 属性是一个 boolean 属性.

novalidate属性描述了 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 元素的novalidate属性.

> **注意**: formnovalidate 属性与type="submit一起使用

< input > formtarget 属性  
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 元素的target属性.

> **注意**: formtarget 属性与type=“submit” 和 type="image"配合使用

< input > height 和 width 属性  
height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。

> 注意: height 和 width 属性只适用于 image 类型的 标签

< input > list 属性  
list 属性规定输入域的 datalist。（datalist 是输入域的选项列表。）

< input > min 和 max 属性  
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

> 注意: min、max 和 step 属性适用于以下类型的 < input > 标签：date pickers、number 以及 range。

< input > multiple 属性  
multiple 属性是一个 boolean 属性.

multiple 属性规定 元素中可选择多个值。

> 注意: multiple 属性适用于以下类型的 < input > 标签：email 和 file

< input > pattern 属性  
pattern 属性描述了一个正则表达式用于验证 元素的值。

< input > placeholder 属性  
placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

![在这里插入图片描述][20200823004035970.png_pic_center]  
< input > required 属性  
required 属性是一个 boolean 属性.

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

Username: <input type="text" name="usrname" required>

![在这里插入图片描述][2020082300412033.png_pic_center]  
< input > step 属性  
step 属性为输入域规定合法的数字间隔。

如果 step=“2”，则合法的数是 -2,0,4,6 等

## HTML5 Geolocation（地理定位） ##

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。  
使用 `getCurrentPosition()`方法 来获得用户的位置。  
例如：

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
    <button onclick="getLocation()">点我</button>
    <script>
    var x=document.getElementById("demo");
    function getLocation()
    { 
        if (navigator.geolocation)
        { 
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else
        { 
            x.innerHTML="该浏览器不支持获取地理位置。";
        }
    }
    
    function showPosition(position)
    { 
        x.innerHTML="纬度: " + position.coords.latitude + 
        "<br>经度: " + position.coords.longitude; 
    }
    </script>

![在这里插入图片描述][20200823004540649.png_pic_center]

*  检测是否支持地理定位
 *  如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
 *  如果getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
 *  showPosition() 函数获得并显示经度和纬度

getCurrentPosition() 方法 - 返回数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/e61b58c586e24ce99910a891d410378c.png
[2020082300280942.png_pic_center]: /images/20221124/fbdd0190e07b428faf20f3f1322da448.png
[20200823003135295.png_pic_center]: /images/20221124/55ce70027daa49848f4c1aeb46e78982.png
[20200823004035970.png_pic_center]: /images/20221124/61134e490ab24fafaad4bb9a038a8c07.png
[2020082300412033.png_pic_center]: /images/20221124/a35f936697694e68b2bc949dc5ddb46e.png
[20200823004540649.png_pic_center]: /images/20221124/ac0cc1059c9746c98fa919ecc36f4956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/27542677b98c4676b2a61d9839fc292b.png