HTML5表單相關元素與屬性-html教學-PHP中文網

這篇文章主要介紹了關於HTML5表單相關元素和屬性，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

可以指定id、style、class等核心屬性，還可以指定onclick事件屬性。除此之外，還可以指定下列幾個屬性。

action：指定表單提交的URL或URI。

method：指定請求方式，一般為get或post。

enctype：指定表單內容進行編碼所使用的字元集。

name：指定表單的唯一名稱，一般與id的屬性值一致。

target：指定使用哪種方式開啟目標URL。

enctype屬性用於指定表單資料的編碼方式，該屬性有三個屬性值：

application/x-www-form-urlencoded：這是預設的編碼方式，它只處理表單控制項裡面的value屬性值，採用這種編碼方式的表單會將表單控制項的值處理成URL編碼方式。

multipart/form-data：這種編碼方式會以二進位的方式處理表單數據，這種編碼方式會將檔案域指定檔案的內容封裝到請求參數裡。

text/plain：當表單的action屬性值為mailto:URL的形式時使用這種編碼方式適用於直接透過表單傳送郵件的方式。

關於表單控制項轉換成請求參數的規則如下：

每個有name屬性的表單控制項對應一個請求參數，沒有name屬性的表單控制項不會產生請求參數。

如果多個表單控制項有相同的name屬性，則多個表單控制項只會產生一個請求參數，只是該參數有多個值。

表單控制項的name屬性指定請求參數名，而value屬性指定請求參數值。

如果某個表單控制項設定了disabled或disabled="disabled"屬性，則表單控制項不再產生請求參數。

：

單行文字方塊：指定元素的type屬性為text。

密碼文字方塊：指定元素的type屬性為password。

隱藏域：指定元素的type屬性為hidden。

單選框：指定元素的type屬性為radio。

複選框：指定元素的type屬性為checkbox。

圖片域：指定元素的type屬性為image。

檔案上傳網域：指定元素的type屬性為file。

提交、重置、無動作按鈕：分別指定元素的type屬性為submit、reset或button即可。

元素可以指定id，style，class等核心屬性，也可以指定onclick等事件屬性，還可以指定onfocus、onblur等焦點事件屬性。除此之外還可以指定以下屬性：

checked：設定單選框，複選框預設是否選取。

disabled：表示該元素已停用，當type="hidden"時無法指定該屬性。

maxlength：指定輸入框允許輸入的最大字元數。

readonly：指定文字方塊的內容不允許修改。

size：指定該元素的寬度，當type="hidden"時不能指定該屬性。

src：指定影像域所顯示影像的URL，只有當type="image"時才可以指定該屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
    <title>getForm</title>
</head>
<body>
    <form action="http://www.crazyit.org" method="get">
        单行文本框：<input id="username" name="username" type="text" readonly="readonly"/><br/>
        密码框：<input id="password" name="password" type="password"/><br/>
        隐藏域：<input id="hidden" name="hidden" type="hidden"/><br/>
        第一组单选框：<br/>
        <input id="color" name="color" type="radio" value="red"/>
        <input id="color2" name="color" type="radio" value="green"/>
        <input id="color3" name="color" type="radio" value="blue"/><br/>
        第二个单选框：<br/>
        <input id="gender" name="gender" type="radio" value="male"/>
        <input id="gender2" name="gender" type="radio" value="female"><br/>
        两个复选框：<br/>
        <input id="website" name="website" type="checkbox" value="leegang.org"/>
        <input id="website2" name="website" type="checkbox" value="crazyit.org"/><br/>
        文件上传域：<input id="file" name="file" type="file"/><br/>
        图像域：<input type="image" src="img/wjc.gif" alt="疯狂Java联盟"/><br/>
        下面是四个按钮：<br/>
        <input id="ok" name="ok" type="submit" value="提交"/>
        <input id="dis" name="dis" type="submit" value="提交" disabled="disabled"/>
        <input id="cancle" name="cancle" type="reset" value="重填"/>
        <input id="no" name="no" type="button" value="无动作"/>
    </form>
</body>
</html>

登入後複製

讓標籤和表單控制項關聯有兩種方式：

隱含使用for屬性：for屬性為所關聯表單控制項的id屬性值。（建議使用）

顯示關聯：將普通文字、表單控制項一起放在元素內部即可。

<form action="http://www.crazyit.org" method="get">
        <label for="username">单行文本框：</label>
        <input id="username" name="username" type="text"/><br/>
        <label>密码框：<input id="password" name="password" type="password"/></label><br/>
        <input id="ok" type="submit" value="登录疯狂Java联盟"/>
    </form>

登入後複製