溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5——表單元素和屬性

發(fā)布時(shí)間：2020-07-04 04:36:14 來(lái)源：網(wǎng)絡(luò) 閱讀：393 作者：叫獸黍黍 欄目：移動(dòng)開發(fā)

html使用表單向服務(wù)器提交請(qǐng)求，表單控件的主要作用就是收集用戶的輸入，當(dāng)用戶提交表單時(shí)，用戶輸入內(nèi)容將被作為請(qǐng)求參數(shù)提交到遠(yuǎn)程服務(wù)器上

html原有的表單及表單控件

form屬性
說明
action
指定當(dāng)單擊表單的確認(rèn)按鈕，該表單被提交到哪個(gè)地址，可以是相對(duì)/絕對(duì)地址
method
指定提交表單時(shí)發(fā)送何種類型的請(qǐng)求 屬性值可以為get post
enctype
對(duì)表單內(nèi)容進(jìn)行編碼所使用的字符集
name
指定表單的唯一名稱，建議該屬性值與id屬性值保持一致
target
使用哪種方式打開目標(biāo)URL，該屬性值可以是_blank _parent _self _top
post:傳送的數(shù)據(jù)量比較大，用戶在地址欄里看不到參數(shù)，安全性較高

get:直接在地址欄中輸入訪問地址所發(fā)送的請(qǐng)求

使用input元素，input元素是表單空間當(dāng)中功能最為豐富，如下幾種輸入元素都是通過<input>元素生成

單行文本框  text
 單行文本框用于接受用戶的輸入
密碼輸入框 password
 密碼框文字不可見
隱藏域 hidden
不接受用戶輸入，也不能生成可視化部分
復(fù)選框 checkbox（radio 單選框）
供用戶選擇
圖像域  p_w_picpath
和提交按鈕的作用基本一樣，單擊表單被提交
文件上傳域 file
允許用戶瀏覽本地磁盤文件，并將該文件上傳到服務(wù)器
提交 submit
提交按鈕
重設(shè) reset

重置按鈕

input核心屬性

checked
設(shè)置單選框、復(fù)選框初識(shí)狀態(tài)是否處于選中狀態(tài)，該屬性只能是checked,選中
disabled
b表示該元素禁用，該元素?zé)o法獲得焦點(diǎn)
maxlength
該屬性值是一個(gè)數(shù)字，指定文本礦中允許輸入的最大字符字?jǐn)?shù)
size
指定該元素的寬度
readonly
文本框中的值不允許用戶更改
src
指定圖像域所顯示圖像的URL

代碼示例：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表單 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
    單行文本框：<input id="username" name="username" type="text" /><br />
    不能編輯的文本框：<input id="username2" 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 />
    兩個(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="p_w_picpath" src="p_w_picpaths/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="cancel" name="cancel" type="reset" value="重填"/>
    <input id="no" name="no" type="button" value="無(wú)動(dòng)作" />
</form>
</body>
</html>

使用label定義標(biāo)簽：

 標(biāo)簽與表單空間關(guān)聯(lián)有兩種方式

①隱式使用for屬性：指定<label>元素的for屬性值為所關(guān)聯(lián)表單空間的id屬性值

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

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> label元素 </title>
</head>
<body>
<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>
</body>
</html>

列表框和下拉菜單:

用于創(chuàng)建列表框或下拉菜單，該元素必須要和<option>元素結(jié)合使用，屬性：multiple設(shè)置是否可以多選，size 指定列表框內(nèi)可以同時(shí)顯示多少個(gè)列表項(xiàng)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> select元素 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="post">
    下面是簡(jiǎn)單下拉菜單：<br />
    <select id="skills" name="skills">
        <option value="java">Java語(yǔ)言</option>
        <option value="c">C語(yǔ)言</option>
        <option value="ruby">Ruby語(yǔ)言</option>
    </select><br /><br /><br />
    下面是允許多選的列表框：<br />
    <select id="books" name="books" 
        multiple="multiple" size="4">
        <option value="java">瘋狂Java講義</option>
        <option value="android">瘋狂Android講義</option>
        <option value="ee">輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</option>
    </select><br />
    下面是允許多選的列表框：<br />
    <select id="leegang" name="leegang" 
        multiple="multiple" size="6">
        <optgroup label="瘋狂Java體系圖書">
            <option value="java" label="aaaaaaaa">瘋狂Java講義</option>
            <option value="android">瘋狂Android講義</option>
            <option value="ee">輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</option>
        </optgroup>
        <optgroup label="其他圖書">
            <option value="struts">Struts 2.1權(quán)威指南</option>
            <option value="ror">RoR敏捷開發(fā)最佳實(shí)踐</option>
        </optgroup>
    </select><br />
    <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

textarea定義文本域：

cols 指定文本域的寬度；

rows 指定文本域的高度；

disabled 指定禁用該文本域

readonly 指定該文本域只讀

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 多行文本域 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="post">
    簡(jiǎn)單多行文本域：<br />
    <textarea cols="20" rows="2"></textarea><br />
    只讀的多行文本域：<br />
    <textarea cols="28" rows="4" readonly="readonly">
瘋狂Java講義
輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)
    </textarea><br />
    <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

html5新增的屬性與元素

form屬性 指定屬于哪一個(gè)form
<textarea name="desc" form="addform"></textarea>
formaction  提交到不同的action
<input type="submit" value="注冊(cè)" formaction="regist">
formxxx  與formaction相似
<input type="submit"  formaction="regist" formmethod="get">
autofocus 獲得焦點(diǎn)
<input type="text" autofocus>
placeholder 提示信息
<input type="text" placeholder="請(qǐng)輸入用戶名">
list 必須與datalist結(jié)合使用
list用法見下
autocomplete 與list結(jié)合使用
on 打開antocomplete 文本框下方會(huì)顯示下拉菜單
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> list屬性 </title>
</head>
<body>
<form method="post" action="buy">
    請(qǐng)輸入圖書：<input type="text" name="name" list="books"/><br/>
    <input type="submit" value="購(gòu)買"/>
</form>
<datalist id="books">
    <option value="java">瘋狂Java講義</option>
    <option value="ee">輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</option>
    <option value="android">瘋狂Android講義</option>
</datalist>
</body>
</html>





向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手