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 单选和多选

您的项目需求