ASP.NET Web Forms-數據綁定

們可以使用數據綁定（Data Binding）來完成帶可選項的列表，這些可選項來自某個導入的數據源，比如數據庫、XML 文件或者腳本。

數據綁定

下面的控件是支持數據綁定的列表控件：

asp:RadioButtonList
asp:CheckBoxList
asp:DropDownList
asp:Listbox

以上每個控件的可選項通常是在一個或者多個 asp:ListItem 控件中定義，如下：

<html>

<body>

<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>

然而，我們可以使用某種獨立的數據源進行數據綁定，比如數據庫、XML 文件或者腳本，通過數據綁定來填充列表的可選項。

通過使用導入的數據源，數據從 HTML 中分離出來，并且對可選項的修改都是在獨立的數據源中完成的。

在下面的三個章節中，我們將描述如何從腳本化的數據源中綁定數據。

單屬性匯總：

1 name屬性

服務器會識別不同的name屬性，并根據name屬性來捕獲不同元素內的數據。

2 value屬性

value 屬性為 input 元素設定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;

3 type屬性

它決定了<input>標簽在頁面中的表現樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設置列表框顯示的行數；

文本框和密碼框會使用size屬性設置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數據提交到服務器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區域)，用來禁止輸入任何信息；

可以將數據提交到服務器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(如單選按鈕和復選框)

但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用selected屬性；

7 placeholder屬性

規定幫助用戶填寫輸入字段的提示。

表單對象：

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屬性默認值：輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器；

off(也可寫成wrap)：不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器；(默認值)

physical：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理；

關于如何限制文本域輸入字符串的長度見javascript|語法|設置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當在表單中提交時, textarea 中的文本不換行, 默認值。

hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。

當使用 "hard" 時, 必須規定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3

多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起；

必需的屬性:type name value

5 復選框

<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2

通過設置相同的name屬性可以把多個復選框捆綁在一起；

必需的屬性: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元素中不設置size屬性,則該元素會顯示為下拉菜單樣式

<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屬性指定列表框的高度(顯示幾個選項);

還可以通過mutiple屬性定義列表框是否為多選(默認是單選)；

通過<optgroup>標簽把相關的選項組合在一起：

<select>
<optgroup label="PHP版塊">
<option value="resource">資源共享</option>
<option value="study">學習交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value="resource">資源共享</option>
<option value="study">學習交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標簽。

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來使用;

關于控制表單提交按鈕見: javascript|語法|控制表單提交

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標簽

在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發送到電子郵箱時，enctype的值必須設為"text/plain",否則將會出現亂碼。

發送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 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="" 表示傳遞到當前腳本文件

target 指定提交到哪一個窗口

_blank 打開新窗口

_self 當前的窗口,默認值

_parent 上一層窗口

_top 最上層窗口

框架名稱指定指定窗口或框架名稱

label標簽

作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。

PHP實例：創建發送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發送表單</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>郵件內容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

Vue3.0中，事件處理用v-on指令，表單輸入綁定則用v-model指令。v-model指令在表單<input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

9.1 文本輸入

在HTML標簽中，文本輸入有單行(text)和多行(textarea)輸入。溫馨提醒:v-model 會忽略所有表單元素的value的初始值而總是將當前活動實例的數據作為數據來源。你應該通過 JavaScript 該組件的 data 選項中聲明初始值。

<!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>單行輸入結果: {{ msg }}</p>
    <hr style="background-color: #4CAF50;height: 1px"/>
    <textarea v-model="msg2" placeholder="多行輸入"></textarea>
    <p>多行輸入結果: {{ msg2 }}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                msg: '',
                msg2: ''
            }
        }
    }).mount("#app")
</script>
</body>
</html>

輸出結果

9.2 單選和多選

在開發產品時，單選按鈕，用于多選一，在選擇性別時常見；單個復選框常在勾選協議中見到；在多個已知選項中，多選一時，可用select。

多個復選框，常在選擇個人興趣愛好等見到。復選框，單選時，綁定到布爾值，多選時，綁定到同一個數組。如果要選擇項很多，那可用多選下拉菜單，以節約布局空間。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0表單綁定</title>
    <script src="vue.global.js"></script>
</head>
<body>
<div id="app">
    快來，選擇你喜歡的編程語言
    <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>你選擇的語言: {{ 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('你沒有選擇喜歡的編程語言.')
                } else if (this.gender=='') {
                    alert('性別選擇一下，又會怎么樣呢?')
                } else if (this.selected=='') {
                    alert('沒有選擇你所愛的.')
                } else if (this.agree==false) {
                    alert('勾選協議，才可以提交.')
                } else {
                    alert('恭喜你，數據提交成功!')
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>

輸出結果

好了，有關Vue3.0表單輸入的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。我在分享Python，前端、Java和App方面的干貨。關注我，沒錯的。

#前端##Vue.js##JavaScript##程序員##Web#

在線咨詢

上一篇：HTML5簡史：距離成熟還有多久？
下一篇：輕輕松松學會用JavaScript操作Html中的c

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

ASP.NET Web Forms-數據綁定

9.1 文本輸入

9.2 單選和多選

您的項目需求