1、什么是表单
在项目开发过程中，凡是需要用户填写的信息都需要用到表单。
./images
#2、form标签
在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。
<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
</form>
vue禁止form默认发送请求方式
<form v-on:submit.prevent>
<div>
<input type="search" name="search" required v-model='inputVaule'>
</div>
<div>
<input type="submit" name="submit" @click='search' value="提交">
</div>
</form>
#3、name和value
在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那就带来一个问题，服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……？
很简单，给每个数据都起一个『名字』，发送数据时用『名字』携带对应的数据，接收数据时通过『名字』获取对应的数据。
在各个具体的表单标签中，我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。
但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。
这么看来这样的关系很像我们Java中的Map，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[]>。
name属性就是Map的键，value属性就是Map的值。
有了上面介绍的基础知识，下面我们就可以来看具体的表单标签了。
#4、单行文本框
#①代码
个性签名：<input type="text" name="signal"/><br/>
#②显示效果
./images
#5、密码框
#①代码
密码：<input type="password" name="secret"/><br/>
#②显示效果
./images
#6、单选框
#①代码
你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/><br/>
你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹
#②效果
./images
#③说明
- name属性相同的radio为一组，组内互斥
- 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
- 设置checked="checked"属性设置默认被选中的radio
#7、多选框
#①代码
你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
#②效果
./images
#8、下拉列表
#①代码
你喜欢的运动是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>
#②效果
./images
#③说明
- 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
- name属性在select标签中设置。
- value属性在option标签中设置。
- option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
- 通过在option标签中设置selected="selected"属性实现默认选中的效果。
#9、按钮
#①代码
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
#②效果
./images
#③说明
| 类型 | 功能 |
|---|---|
| 普通按钮 | 点击后无效果，需要通过JavaScript绑定单击响应函数 |
| 重置按钮 | 点击后将表单内的所有表单项都恢复为默认值 |
| 提交按钮 | 点击后提交表单 |
#10、表单隐藏域
#①代码
<input type="hidden" name="userId" value="2233"/>
#②说明
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
#11、多行文本框
#①代码
自我介绍：<textarea name="desc"></textarea>
#②效果
./images
#③说明
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收集表单数据</title>
</head>
<body>
<div id="root">
<!-- 设置表单提交事件回调，并且阻止了表单提交的默认行为 -->
<form @submit.prevent="printForm">
<!-- 普通的文本输入框，如果使用ajax进行请求的发送，name属性不要也罢，这个没什么要注意的，主要是使用v-model来进行数据的双向绑定 -->
<label>账号：</label><input type="text" name="account" v-model="account"> <br><br>
<label>密码：</label><input type="password" name="password" v-model="password"><br><br>
<!-- 单选框：
1. 如果需要在多个数据中进行选择，需要为每个input单选框设置value属性值。
2. 同一类型的单选框要设置一样的name属性。
3. 如果只是一个单选框，用于勾选是否，比如是否同意某个协议等，值只有false和true，无需name，value，并且双向绑定数据为布尔值，
true为选中，false为不选中。 -->
<label>性别：</label>
男<input type="radio" name="gender" v-model="gender" value="man">
女<input type="radio" name="gender" v-model="gender" value="woman"><br><br>
<!-- 多选框：
1. 如果需要在多个数据中进行选择，需要为每个input单选框设置value属性值。
2. 同一类型的单选框要设置一样的name属性。
3. 与该表单元素进行双向绑定的数据类型要为数组。
4. 如果只是一个多选框，用于勾选是否，比如是否同意某个协议等，值只有false和true，无需name，value，并且双向绑定数据为布尔值，
true为选中，false为不选中。 -->
<label>爱好：</label>
学习<input type="checkbox" name="hobby" v-model="hobby" value="学习">
游泳<input type="checkbox" name="hobby" v-model="hobby" value="游泳">
听音乐<input type="checkbox" name="hobby" v-model="hobby" value="听音乐"><br><br>
<!-- 下拉框：
1. v-model双向绑定要在select标签完成。
2. 每个option子标签要设置value -->
<label>所在地区：</label>
<select name="address" v-model="address">
<option value="">请选择地区</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
<br><br>
<!-- 多行输入：与单行输入类似 -->
<label>其他信息：</label>
<textarea v-model="otherInfo" ></textarea><br><br>
<!-- 多选框的另外一种使用方式，仅仅用于判断是否勾选。 -->
<label>是否同意协议：</label>
<input type="checkbox" v-model="isAgree">阅读并接受<a href="https://www.baidu.com" target="_blank">用户协议</a><br><br>
<button>控制台输出收集的表单数据</button>
</form>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#root",
data:{
account:"",
password:"",
gender:"",
hobby:[],
address:"",
otherInfo:"",
isAgree:false
},
methods: {
printForm(){
console.log(JSON.stringify(this._data));
}
},
})
</script>
</body>
</html>
网友评论