前端基础小标签5 H5的一些新标签属性

第二部分

部分图片和内容摘要于网络

二、

formaction 属性规定当表单提交时处理输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

注释：formaction 属性适用于 type="submit" 和 type="image"。

实例：

<form action="demo-form.php">

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

Last name: <input type="text" name="lname"><br>

<input type="submit" value="提交"><br>

<input type="submit" formaction="demo-admin.php" value="提交">

</form>

三、

formenctype 属性规定当表单数据提交到服务器时如何编码（仅适用于 method="post" 的表单）。

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

注释：formenctype 属性与 type="submit" 和 type="image" 配合使用。

实例：

<form action="demo-post-enctype.php" method="post">
First name: <input type="text"
name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

四、

formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性。

注意：formmethod 属性与 type="submit" 和
type="image" 配合使用。

表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）。

实例：

<form
action="demo-form.php" method="get">
First name: <input type="text"
name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post"
formaction="demo-post.php" value="使用 POST 提交">
</form>

五、

formtarget 属性规定表示提交表单后在哪里显示接收到响应的名称或关键词。

formtarget 属性覆盖 <form> 元素的 target 属性。

注意：formtarget 属性可以与 type="submit" 和
type="image" 配合使用

_blank	在新窗口/选项卡中显示响应。
_self	在同一框架中显示响应（默认）。
_parent	在父框架中显示响应。
_top	在整个窗口中显示响应。
framename	在指定的 iframe 中显示响应。

实例：

<form
action="demo-form.php">
First name: <input type="text"
name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

六、

Autofocus

<!-- 该属性表示打开页面时该组件会自动获取焦点

整个页面上最多只能有一个表单空间可以设置该属性

-->

实例：

<form action="01_form.html" method="post">

用户名: <input type="text"
name="username" autofocus/><br />

密码:<input type="password"
name="password" /><br />

<input type="submit"
value="提交"/>

</form>

七、

datalist

datalist> 标签规定了
<input> 元素可能的选项列表。

<datalist> 标签被用来在为
<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<!--

1.list属性必须和datalist元素结合使用

2.list属性是一个看不见的select标签

3.datalist所包含的子元素和select的子元素完全相同

-->

实例：

<form action="01_form.html"
method="post">

请输入水果的种类: <input type="text"
name="fruit" id="fruit"
list="fruits" /><br />

<input type="submit"
name="" id=""
value="购买" />

</form>

<datalist
id="fruits">

<option value="apple">苹果</option>

<option value="banana">香蕉</option>

<option value="orange">橘子</option>

</datalist>

八、

Autocomplete

定义和用法

autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注意：autocomplete 属性适用于下面的 <input> 类型：text、search、url、tel、email、password、datepickers、range 和
color。

---

<!-- 用于设置表单是否支持自动完成功能

如果启动了自动完成功能,浏览器会根据用户上次提交的数据生成列表框供用户选择,或提示自动完成

该属性支持两个属性值

on: 文本框下方会显示下拉菜单

off: 文本框下方不会显示下拉菜单

-->

实例：

<form action="01_form.html"
method="get" autocomplete="on">

用户名: <input type="text"
name="username" autocomplete="on"/><br />

住址: <input type="text"
name="address" id="address"
autocomplete="off"/>  <br />

<input type="submit"
value="提交"/>

</form>

九、

Label

<label for="element_id">

<!--

主要作用用于在JavaScript脚本中访问该label元素所关联的表单元素

-->

实例：

Label的control属性

点击姓名光标会出现在所关联的input

<form action="01_form.html"
method="post" autocomplete="on">

<label id="lb"
for="name">姓名:</label>

<input type="text"
id="name" /><br />

<input type="button"
value="点击" onclick="document.getElementById('lb').control.value = 'Hello';"/>

</form>

十、

文本框selectionDirection属性

实例：

<form action="01_form.html" method="post" autocomplete="on">

<label id="lb" for="name">姓名:</label>

<input type="text"
name="name" id="name"
/>

<input type="button"
value="获取" onclick="alert(document.getElementById('lb').control.selectionDirection);"/>

</form

实例：

<script>

function AD() {

var
control=document.forms[0]['test'];

var
Direction=control.selectionDirection;

alert(Direction);

}

</script>

<form>

<input type="test"
name="test">

<input 
type="button"  value="点击一下"   onclick="AD()">

</form>

实例2效果图：