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

it2022-05-07  2

第二部分

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

二、

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

formaction 属性覆盖 元素的 action 属性。

注释:formaction 属性适用于 type=“submit” 和 type=“image”。

实例:

First name:

Last name:

三、

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

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

注释:formenctype 属性与 type=“submit” 和 type=“image” 配合使用。

实例:

First name:

四、

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

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

注意:formmethod 属性与 type=“submit” 和 type=“image” 配合使用。

表单数据可被作为 URL 变量的形式来发送(method=“get”)或者作为 HTTP post 事务的形式来发送(method=“post”)。

实例:

First name: Last name:

五、

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

formtarget 属性覆盖 元素的 target 属性。

注意:formtarget 属性可以与 type=“submit” 和 type=“image” 配合使用

_blank

在新窗口/选项卡中显示响应。

_self

在同一框架中显示响应(默认)。

_parent

在父框架中显示响应。

_top

在整个窗口中显示响应。

framename

在指定的 iframe 中显示响应。

实例:

First name: Last name:

六、

Autofocus

实例:

用户名: <input type="text" name="username" autofocus/><br /> 密码:<input type="password" name="password" /><br /> <input type="submit" value="提交"/> </form>

七、

datalist

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

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

请使用 元素的 list 属性来绑定 元素。

<!-- 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 属性适用于下面的 类型:text、search、url、tel、email、password、datepickers、range 和 color。

<!-- 用于设置表单是否支持自动完成功能 如果启动了自动完成功能,浏览器会根据用户上次提交的数据生成列表框供用户选择,或提示自动完成 该属性支持两个属性值 on: 文本框下方会显示下拉菜单 off: 文本框下方不会显示下拉菜单 -->

实例:

用户名: <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的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

实例:

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

实例2效果图:


最新回复(0)