HTML5表单新增元素和属性(1)

来源：互联网发布：ios pdf阅读器源码编辑：程序博客网时间：2024/05/22 12:51

HTML5表单新增元素和属性

HTML5表单新增元素和属性
- form属性和formaction属性
- formaction属性
- formmethod
- formenctype
- formtarget元素
- autofocus属性
- required属性
- labels属性

form属性和formaction属性

指定一个form属性，属性值为改表单的id，这样就可以声明该元素从属于指定的表单了。

<html>    <head>        <meta charset="UTF-8">        <title>form</title>    </head>    <body>        <form>            <input type = "text">            <textarea from = "testform"></textarea>        </form>        <!--            作者：offline            时间：2017-10-09            描述：html5新增写法        -->        <form id = 'testform'>            <input type = "text" />        </form>        <textarea form = "testform"></textarea>    </body></html>

formaction属性

<html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <form id= "testform">            <input type= "submit" name="s1" value="v1" formaction="http://localhost:8080/helloJSP/test01.jsp" />提交到第一个页面            <input type= "submit" name="s2" value="v3" formaction="http://localhost:8080/helloJSP/test02.jsp" />提交到第二个页面            <input type= "submit" name="s3" value="v3" formaction="http://localhost:8080/helloJSP/test03.jsp" />提交到第三个页面        </form>    </body></html>

formmethod

使用 formmethod属性来对每一个表单元素分别指定不同的提交方法

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <form id="testform">            <input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/helloJSP/test01.jsp"/>提交            <input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/helloJSP/test02.jsp"/>提交        </form>    </body></html>

注意post和get方法的区别

formenctype

使用formenctype属性对表单元素分别制定不同的编码方式

    <form id="testform">            <input type="text" formenctype="text/plain"/>            <input type="text" formenctype="multipart/form-data"/>        </form>

formtarget元素

可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <form id= "testform">            <input type= "submit" name="s1" value="v1" formtarget="_blank"  />提交到第一个页面            <input type= "submit" name="s2" value="v3" formtarget="_parent"  />提交到第二个页面            <input type= "submit" name="s3" value="v3" formtarget="_self"/>提交到第三个页面            <input type= "submit" name="s3" value="v3" formtarget="_top"/>提交到第三个页面            <input type= "submit" name="s3" value="v3" formtarget="framename"/>提交到第三个页面        </form>    </body></html>

 _blank 在空白页中打开 _parent 在当前框架的父框架打开 _self 相同框架的frame中打开 _top 在当前窗口中打开 framename 在指定框架中打开

autofocus属性

为文本框、选择框或者按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <form>            <input type="text" />            <input type="text" autofocus/>        </form>    </body></html>

把光标焦点放在第二个框上

这里写图片描述

required属性

应用在大多数输入元素上，在提交时，如果元素内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <form action="http://localhost:8080/helloJSP/test01.jsp">            <input type="text" required="required" />            <button  type="submit">提交</button>        </form>    </body></html>

这里写图片描述

labels属性

在html5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NOdeList对象，代表该元素所绑定的表圈元素所构成的集合。

这里写图片描述

阅读全文

0 0