這篇文章主要介紹了關於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>:
內部可以包含普通文字、文字格式化標籤、圖像等內容，功能比input按鈕更豐富。
元素可以指定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="/static/imghwm/default1.png" data-src="images/wjc.gif" class="lazy" alt="crazyit.org"/></button><br/>
</form>:
可以指定id、style、class等核心屬性，該元素只可以指定onchange事件屬性。除此之外還可以指定以下屬性：
disabled：設定停用該列錶框和下拉式選單。
multiple：設定多選。
size：指定該列錶框可以同時顯示多個清單項目。
元素裡，只能包含以下兩種元素：
：用來定義清單項目和選單項目。
：用來定義清單項目和選單項目組，該元素只能包含子元素。
:
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中文網其他相關文章！
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AMHTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
HTML：建立網頁的結構Apr 14, 2025 am 12:14 AMHTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AMHTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。
了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Dreamweaver Mac版
視覺化網頁開發工具
WebStorm Mac版
好用的JavaScript開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
