整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們可以使用數(shù)據(jù)綁定（Data Binding）來(lái)完成帶可選項(xiàng)的列表，這些可選項(xiàng)來(lái)自某個(gè)導(dǎo)入的數(shù)據(jù)源，比如數(shù)據(jù)庫(kù)、XML 文件或者腳本。
數(shù)據(jù)綁定
下面的控件是支持?jǐn)?shù)據(jù)綁定的列表控件：
asp:RadioButtonList
asp:CheckBoxList
asp:DropDownList
asp:Listbox
以上每個(gè)控件的可選項(xiàng)通常是在一個(gè)或者多個(gè) asp:ListItem 控件中定義，如下：
<html>
<body>
<form runat="server">
<asp:RadioButtonList id="countrylist" runat="server">
<asp:ListItem value="N" text="Norway" />
<asp:ListItem value="S" text="Sweden" />
<asp:ListItem value="F" text="France" />
<asp:ListItem value="I" text="Italy" />
</asp:RadioButtonList>
</form>
</body>
</html>
然而，我們可以使用某種獨(dú)立的數(shù)據(jù)源進(jìn)行數(shù)據(jù)綁定，比如數(shù)據(jù)庫(kù)、XML 文件或者腳本，通過(guò)數(shù)據(jù)綁定來(lái)填充列表的可選項(xiàng)。
通過(guò)使用導(dǎo)入的數(shù)據(jù)源，數(shù)據(jù)從 HTML 中分離出來(lái)，并且對(duì)可選項(xiàng)的修改都是在獨(dú)立的數(shù)據(jù)源中完成的。
在下面的三個(gè)章節(jié)中，我們將描述如何從腳本化的數(shù)據(jù)源中綁定數(shù)據(jù)。
單屬性匯總：
1 name屬性
服務(wù)器會(huì)識(shí)別不同的name屬性，并根據(jù)name屬性來(lái)捕獲不同元素內(nèi)的數(shù)據(jù)。
2 value屬性
value 屬性為 input 元素設(shè)定值。
對(duì)于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值
注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。
注釋：value 屬性無(wú)法與 <input type="file"> 一同使用。
注意：?jiǎn)芜x框和復(fù)選框傳遞數(shù)據(jù)到數(shù)據(jù)庫(kù)時(shí)一定要設(shè)置value, 否則插入數(shù)據(jù)失敗;
3 type屬性
它決定了<input>標(biāo)簽在頁(yè)面中的表現(xiàn)樣式和功能
text 文本框
password 密碼框
radio 單選框
checkbox 復(fù)選框
file 文件域
hidden 隱藏域
image 圖像域
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
4 size屬性
列表框中size屬性用來(lái)設(shè)置列表框顯示的行數(shù)；
文本框和密碼框會(huì)使用size屬性設(shè)置域的顯示寬度；
5 disabled屬性
定義disabled屬性可以禁止使用該元素；
無(wú)法將數(shù)據(jù)提交到服務(wù)器處理;
6 readonly屬性
常用在輸入性表單對(duì)象中(如文本框、密碼框、文本區(qū)域)，用來(lái)禁止輸入任何信息；
可以將數(shù)據(jù)提交到服務(wù)器處理;
7 checked屬性
它與disabled屬性一樣沒(méi)有屬性值，常用在選擇性表單對(duì)象中，定義對(duì)象處于被選中狀態(tài)(如單選按鈕和復(fù)選框)
但在列表框或者下拉式菜單中，為了表示被選中的項(xiàng)目，可使用selected屬性；
7 placeholder屬性
規(guī)定幫助用戶填寫輸入字段的提示。
表單對(duì)象：
1 文本框
<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">必需的屬性:name type
2 密碼域
<input type="password" name="passwordfield" id="passwordfield">必需的屬性:name type
3 文本域
<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>必需的屬性:name cols rows
wrap屬性 默認(rèn)值：輸入的文本會(huì)自動(dòng)換行。當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會(huì)隨輸入的文本一同被提交到服務(wù)器；
off(也可寫成wrap)：不自動(dòng)換行, 當(dāng)輸入的內(nèi)容超出文本區(qū)域右邊界時(shí), 文本將向左滾動(dòng), 并顯示滾動(dòng)條。
如果希望換行，必須手動(dòng)輸入回車鍵才能將插入點(diǎn)移到下一行；
virtual：文本能夠自動(dòng)換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會(huì)隨輸入文本一同提交到服務(wù)器；(默認(rèn)值)
physical：文本能夠自動(dòng)換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符將會(huì)隨輸入的文本一同被提交到服務(wù)器進(jìn)行處理；
關(guān)于如何限制文本域輸入字符串的長(zhǎng)度 見javascript|語(yǔ)法|設(shè)置文本框
HTML5中wrap中屬性值修改為hard|soft
soft 當(dāng)在表單中提交時(shí), textarea 中的文本不換行, 默認(rèn)值。
hard 當(dāng)在表單中提交時(shí), textarea 中的文本換行(包含換行符)。
當(dāng)使用 "hard" 時(shí), 必須規(guī)定 cols 屬性
4 單選按鈕
單選按鈕傳遞的信息簡(jiǎn)單，如1或0、True或False。
<input type="radio" name="radio" value="1"/>選項(xiàng)1
<input type="radio" name="radio" value="2"/>選項(xiàng)2
<input type="radio" name="radio" value="3"/>選項(xiàng)3多個(gè)單選按鈕通過(guò)定義相同的name屬性, 以實(shí)現(xiàn)捆綁在一起；
必需的屬性:type name value
5 復(fù)選框
<input type="checkbox" name="checkbox[]" value="1"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="2"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="3"/>選項(xiàng)2通過(guò)設(shè)置相同的name屬性可以把多個(gè)復(fù)選框捆綁在一起；
必需的屬性:type name value
6 列表框/下拉菜單
<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>如果select元素中不設(shè)置size屬性,則該元素會(huì)顯示為下拉菜單樣式
<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個(gè)選項(xiàng));
還可以通過(guò)mutiple屬性定義列表框是否為多選(默認(rèn)是單選)；
通過(guò)<optgroup>標(biāo)簽把相關(guān)的選項(xiàng)組合在一起：
<select>
<optgroup label="PHP版塊">
<option value="resource">資源共享</option>
<option value="study">學(xué)習(xí)交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value="resource">資源共享</option>
<option value="study">學(xué)習(xí)交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
</select>注意：其中PHP版塊和IOS版塊不能被選中
所有主流瀏覽器都支持 <optgroup> 標(biāo)簽。
7 文件域
<input type="file" name="file"/>
<input type="file" name="file" multiple/>8 按鈕
提交按鈕
<input type="submit" name="" value="提交"/>name值必須給出
重置按鈕
<input type="reset" name="" value="重置"/>普通按鈕
<input type="button" name="" value="普通按鈕"/>它一般是配合javascript來(lái)使用;
關(guān)于控制表單提交按鈕見: javascript|語(yǔ)法|控制表單提交
9 圖像域
<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>10 隱藏域
限制上傳文件大小
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />傳遞ID值
<input type="hidden" name="id" value="<?php echo $result['id'];?>" />11 button標(biāo)簽
在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。
<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來(lái)使用, 默認(rèn)值
提交按鈕<button type="submit">提交按鈕</button>
重置按鈕<button type="reset">重置按鈕</button>
提交表單
enctype屬性
該屬性包含兩種方式:
application/x-www-form-urlencoded 是默認(rèn)編碼類型
multipart/form-data
multipart/form-data編碼方式可以用來(lái)傳輸二進(jìn)制數(shù)據(jù)或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性
multipart: 多部件的
multiple: 多重的
text/plain
text/plain將表單屬性發(fā)送到電子郵箱時(shí)，enctype的值必須設(shè)為"text/plain",否則將會(huì)出現(xiàn)亂碼。
發(fā)送電子郵件的表單程序
<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>action 表單提交的腳本
如果傳遞到本頁(yè)面，則直接輸入控制 action=""
表單提交方式method:post/get
<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>id=5是get傳， name="100" 是post傳！ //高洛峰解釋
action="" 表示傳遞到當(dāng)前腳本文件
target 指定提交到哪一個(gè)窗口
_blank 打開新窗口
_self 當(dāng)前的窗口,默認(rèn)值
_parent 上一層窗口
_top 最上層窗口
框架名稱 指定指定窗口或框架名稱
label標(biāo)簽
作用: 擴(kuò)大觸控區(qū)域, 為了提升用戶體驗(yàn), 點(diǎn)擊文字也能選中表單
<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請(qǐng)輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請(qǐng)輸入地址" />
</form>for與id一致
<input type="radio" id="sec" name="sex"> <label for="sex">男</label>簡(jiǎn)化寫法:
<label><input type="checkbox"/>周杰倫-晴天</label>注意: "for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把"for"屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
PHP實(shí)例：創(chuàng)建發(fā)送郵件信息的html表單
代碼：
<html>
<head>
<title>簡(jiǎn)單郵件發(fā)送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內(nèi)容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發(fā)送">
</td>
</tr>
</table>
</form>
</body>
</html>simpleEmail.php
Vue3.0中，事件處理用v-on指令，表單輸入綁定則用v-model指令。v-model指令在表單<input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。
在HTML標(biāo)簽中，文本輸入有單行(text)和多行(textarea)輸入。溫馨提醒:v-model 會(huì)忽略所有表單元素的value的初始值而總是將當(dāng)前活動(dòng)實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò) JavaScript 該組件的 data 選項(xiàng)中聲明初始值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0表單綁定</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg" placeholder="單行輸入"/>
<p>單行輸入結(jié)果: {{ msg }}</p>
<hr style="background-color: #4CAF50;height: 1px"/>
<textarea v-model="msg2" placeholder="多行輸入"></textarea>
<p>多行輸入結(jié)果: {{ msg2 }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
msg: '',
msg2: ''
}
}
}).mount("#app")
</script>
</body>
</html>輸出結(jié)果
在開發(fā)產(chǎn)品時(shí)，單選按鈕，用于多選一，在選擇性別時(shí)常見；單個(gè)復(fù)選框常在勾選協(xié)議中見到；在多個(gè)已知選項(xiàng)中，多選一時(shí)，可用select。
多個(gè)復(fù)選框，常在選擇個(gè)人興趣愛好等見到。復(fù)選框，單選時(shí)，綁定到布爾值，多選時(shí)，綁定到同一個(gè)數(shù)組。如果要選擇項(xiàng)很多，那可用多選下拉菜單，以節(jié)約布局空間。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0表單綁定</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
快來(lái)，選擇你喜歡的編程語(yǔ)言
<div>
<input type="checkbox" id="Python" value="Python" v-model="likes"/>
<label for="Python">Python</label>
<input type="checkbox" id="Java" value="Java" v-model="likes"/>
<label for="Java">John</label>
<input type="checkbox" id="web" value="前端" v-model="likes"/>
<label for="web">前端</label>
<br/>
<span>你選擇的語(yǔ)言: {{ likes.length > 0 ? likes : '' }}</span>
</div>
<div>
<input type="radio" id="boy" value="程序猿" v-model="gender"/>
<label for="boy">程序猿</label>
<br/>
<input type="radio" id="girl" value="程序媛" v-model="gender"/>
<label for="girl">程序媛</label>
<br/>
<input type="radio" id="no" value="不男不女" v-model="gender"/>
<label for="no">不男不女</label>
<br/>
<span>你是: {{ gender }}</span>
</div>
<div>
<select v-model="selected">
<option disabled value="">你愛帥哥還是美女</option>
<option>帥哥</option>
<option>美女</option>
</select>
<br/>
<span>你愛: {{ selected }}</span>
</div>
<div> 你確定就勾選：<input type="checkbox" id="checkbox" v-model="agree"/>
</div>
<br/>
<div>
<button @keyup.enter="submit" type="submit" @click="submit">
提交</button>
</div>
</div>
<script>
Vue.createApp({
data() {
return {
likes: [],
gender: '',
selected: '',
agree: false
}
},
methods: {
submit() {
if (this.likes.length==0) {
alert('你沒(méi)有選擇喜歡的編程語(yǔ)言.')
} else if (this.gender=='') {
alert('性別選擇一下，又會(huì)怎么樣呢?')
} else if (this.selected=='') {
alert('沒(méi)有選擇你所愛的.')
} else if (this.agree==false) {
alert('勾選協(xié)議，才可以提交.')
} else {
alert('恭喜你，數(shù)據(jù)提交成功!')
}
}
}
}).mount("#app")
</script>
</body>
</html>輸出結(jié)果
好了，有關(guān)Vue3.0表單輸入的內(nèi)容，老陳講完了，如果覺得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。我在分享Python，前端、Java和App方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。
#前端##Vue.js##JavaScript##程序員##Web#
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
