HTML5表單相關(guān)元素和屬性有哪些-創(chuàng)新互聯(lián)

小編給大家分享一下HTML5表單相關(guān)元素和屬性有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)長(zhǎng)期為數(shù)千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為隆陽(yáng)企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)，隆陽(yáng)網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

<form>:

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

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

method：指定請(qǐng)求方式，一般為get或post。

enctype：指定表單內(nèi)容進(jìn)行編碼所使用的字符集。

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

target：指定使用哪種方式打開(kāi)目標(biāo)URL。

enctype屬性用于指定表單數(shù)據(jù)的編碼方式，該屬性有三個(gè)屬性值：

application/x-www-form-urlencoded：這是默認(rèn)的編碼方式，它只處理表單控件里面的value屬性值，采用這種編碼方式的表單會(huì)將表單控件的值處理成URL編碼方式。

multipart/form-data：這種編碼方式會(huì)以二進(jìn)制的方式處理表單數(shù)據(jù)，這種編碼方式會(huì)將文件域指定文件的內(nèi)容封裝到請(qǐng)求參數(shù)里。

text/plain：當(dāng)表單的action屬性值為mailto:URL的形式時(shí)使用這種編碼方式適用于直接通過(guò)表單發(fā)送郵件的方式。

關(guān)于表單控件轉(zhuǎn)換成請(qǐng)求參數(shù)的規(guī)則如下：

每個(gè)有name屬性的表單控件對(duì)應(yīng)一個(gè)請(qǐng)求參數(shù)，沒(méi)有name屬性的表單控件不會(huì)生成請(qǐng)求參數(shù)。

如果多個(gè)表單控件有相同的name屬性，則多個(gè)表單控件只生成一個(gè)請(qǐng)求參數(shù)，只是該參數(shù)有多個(gè)值。

表單控件的name屬性指定請(qǐng)求參數(shù)名，而value屬性指定請(qǐng)求參數(shù)值。

如果某個(gè)表單控件設(shè)置了disabled或disabled="disabled"屬性，則該表單控件不再生成請(qǐng)求參數(shù)。

<input>：

單行文本框：指定<input/>元素的type屬性為text。

密碼文本框：指定<input/>元素的type屬性為password。

隱藏域：指定<input/>元素的type屬性為hidden。

單選框：指定<input/>元素的type屬性為radio。

復(fù)選框：指定<input/>元素的type屬性為checkbox。

圖像域：指定<input/>元素的type屬性為image。

文件上傳域：指定<input/>元素的type屬性為file。

提交、重置、無(wú)動(dòng)作按鈕：分別指定<input/>元素的type屬性為submit、reset或button即可。

<input/>元素可以指定id，style，class等核心屬性，也可以指定onclick等事件屬性，還可以指定onfocus、onblur等焦點(diǎn)事件屬性。除此之外還可以指定如下屬性：

checked：設(shè)置單選框，復(fù)選框默認(rèn)是否選中。

disabled：表示該元素被禁用，當(dāng)type="hidden"時(shí)不能指定該屬性。

maxlength：指定輸入框允許輸入的大字符數(shù)。

readonly：指定文本框的內(nèi)容不允許修改。

size：指定該元素的寬度，當(dāng)type="hidden"時(shí)不能指定該屬性。

src：指定圖像域所顯示圖像的URL，只有當(dāng)type="image"時(shí)才可以指定該屬性。

<!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/>
        第二個(gè)單選框：<br/>
        <input id="gender" name="gender" type="radio" value="male"/>
        <input id="gender2" name="gender" type="radio" value="female"><br/>
        兩個(gè)復(fù)選框：<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聯(lián)盟"/><br/>
        下面是四個(gè)按鈕：<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="無(wú)動(dòng)作"/>
    </form>
</body>
</html>

<label/>:

讓標(biāo)簽和表單控件關(guān)聯(lián)有兩種方式：

隱式使用for屬性：for屬性為所關(guān)聯(lián)表單控件的id屬性值。（推薦使用）

顯示關(guān)聯(lián)：將普通文本、表單控件一起放在<label/>元素內(nèi)部即可。

<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聯(lián)盟"/>
    </form>

<button/>:

內(nèi)部可以包含普通文本、文本格式化標(biāo)簽、圖像等內(nèi)容，功能比input按鈕更豐富。

<button/>元素可以指定id、style、class等核心屬性，還可以指定onclick等事件響應(yīng)屬性。除此之外還可以指定如下屬性：

disabled：是否禁用按鈕。

name：指定按鈕唯一的名稱(chēng)。

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>

<select/>:

可以指定id、style、class等核心屬性，該元素僅可以指定onchange事件屬性。除此之外還可以指定如下屬性：

disabled：設(shè)置禁用該列表框和下拉菜單。

multiple：設(shè)置多選。

size：指定該列表框可以同時(shí)顯示多個(gè)列表項(xiàng)。

<select/>元素里，只能包含如下兩種元素：

<option/>：用來(lái)定義列表項(xiàng)和菜單項(xiàng)。

<optgroup/>：用來(lái)定義列表項(xiàng)和菜單項(xiàng)組，該元素只能包含<option/>子元素。

<textarea/>:

<textarea/>元素可以指定id、style、class等核心屬性，還可以指定onclick、onselect、onchange事件屬性。除此之外，該元素也可以指定如下幾個(gè)屬性：

cols：指定文本域的寬度。

rows：指定文本域的高度。

disabled：禁用該文本域。

readonly：指定文本只讀。

以上是“HTML5表單相關(guān)元素和屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容