HTML5表單新增元素和屬性(1)

HTML5表單新增元素和屬性

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對象,代表該元素所綁定的表圈元素所構成的集合。

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章