HTML5表單相關元素與屬性
- 不言原創
- 2018-05-03 15:19:311470瀏覽
這篇文章主要介紹了關於HTML5表單相關元素和屬性，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
ff9c23ada1bcecdd1a0fb5d5a0f18437:
可以指定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"屬性，則表單控制項不再產生請求參數。
d5fd7aea971a85678ba271703566ebfd：
單行文字方塊：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為text。
密碼文字方塊：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為password。
隱藏域：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為hidden。
單選框：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為radio。
複選框：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為checkbox。
圖片域：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為image。
檔案上傳網域：指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為file。
提交、重置、無動作按鈕：分別指定0f0306f9b187f2e363126bc29c8b1420元素的type屬性為submit、reset或button即可。
0f0306f9b187f2e363126bc29c8b1420元素可以指定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>bfdf57554631c62e63917d588904f58a:
讓標籤和表單控制項關聯有兩種方式：
隱含使用for屬性：for屬性為所關聯表單控制項的id屬性值。 （建議使用）
顯示關聯：將普通文字、表單控制項一起放在bfdf57554631c62e63917d588904f58a元素內部即可。
<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>de935b9c153fbe5d6ad7df96bd65d7b8:
內部可以包含普通文字、文字格式化標籤、圖像等內容，功能比input按鈕更豐富。
de935b9c153fbe5d6ad7df96bd65d7b8元素可以指定id、style、class等核心屬性，還可以指定onclick等事件回應屬性。除此之外還可以指定以下屬性：
disabled：是否停用按鈕。
name：指定按鈕唯一的名稱。
type：指定該按鈕屬於哪一個按鈕，屬性值只能為button、reset或submit。
value：指定該按鈕的初始值。
<form action="http://www.crazyit.org" method="get">
<button type="button"><b>提交</b></button><br/>
<button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/></button><br/>
</form>815c08aea17433a6272b681dc1d34168:
可以指定id、style、class等核心屬性，該元素只可以指定onchange事件屬性。除此之外還可以指定以下屬性：
disabled：設定停用該列錶框和下拉式選單。
multiple：設定多選。
size：指定該列錶框可以同時顯示多個清單項目。
815c08aea17433a6272b681dc1d34168元素裡，只能包含以下兩種元素：
d8f14978b2105a39d07c390b6142b1e4：用來定義清單項目和選單項目。
ab954e0f6bf894bea018459b7fa67ae0：用來定義清單項目和選單項目組，該元素只能包含d8f14978b2105a39d07c390b6142b1e4子元素。
43d7dfa79a91949688a1bed28448d8e3:
43d7dfa79a91949688a1bed28448d8e3 elements can specify core attributes such as id, style, and class, as well as onclick, onselect, and onchange event attributes. In addition, this element can also specify the following attributes:
cols: Specify the width of the text field.
rows: Specify the height of the text field.
disabled: Disable this text field.
readonly: The specified text is read-only.
Related recommendations:
Introduction to knowledge points related to HTML forms
HTML5 form attribute tutorial examples
以上是HTML5表單相關元素與屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！