html5——表單元素和屬性

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

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個不僅審美在線，而且實用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。

html原有的表單及表單控件

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

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

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

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

重置按鈕

input核心屬性

checked
設(shè)置單選框、復(fù)選框初識狀態(tài)是否處于選中狀態(tài)，該屬性只能是checked,選中
disabled
b表示該元素禁用，該元素?zé)o法獲得焦點
maxlength
該屬性值是一個數(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 />
    兩個復(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 />
    下面是四個按鈕：<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="無動作" />
</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)可以同時顯示多少個列表項

<!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">
    下面是簡單下拉菜單：<br />
    <select id="skills" name="skills">
        <option value="java">Java語言</option>
        <option value="c">C語言</option>
        <option value="ruby">Ruby語言</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">輕量級Java EE企業(yè)應(yīng)用實戰(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">輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</option>
        </optgroup>
        <optgroup label="其他圖書">
            <option value="struts">Struts 2.1權(quán)威指南</option>
            <option value="ror">RoR敏捷開發(fā)最佳實踐</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">
    簡單多行文本域：<br />
    <textarea cols="20" rows="2"></textarea><br />
    只讀的多行文本域：<br />
    <textarea cols="28" rows="4" readonly="readonly">
瘋狂Java講義
輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)
    </textarea><br />
    <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

html5新增的屬性與元素

form屬性 指定屬于哪一個form
<textarea name="desc" form="addform"></textarea>
formaction  提交到不同的action
<input type="submit" value="注冊" formaction="regist">
formxxx  與formaction相似
<input type="submit"  formaction="regist" formmethod="get">
autofocus 獲得焦點
<input type="text" autofocus>
placeholder 提示信息
<input type="text" placeholder="請輸入用戶名">
list 必須與datalist結(jié)合使用
list用法見下
autocomplete 與list結(jié)合使用
on 打開antocomplete 文本框下方會顯示下拉菜單
<!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">
    請輸入圖書：<input type="text" name="name" list="books"/><br/>
    <input type="submit" value="購買"/>
</form>
<datalist id="books">
    <option value="java">瘋狂Java講義</option>
    <option value="ee">輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</option>
    <option value="android">瘋狂Android講義</option>
</datalist>
</body>
</html>

本文名稱：html5——表單元素和屬性
鏈接地址：http://muchs.cn/article2/ihgjoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、電子商務(wù)、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、網(wǎng)站建設(shè)、小程序開發(fā)

廣告

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

綿陽服務(wù)器托管