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>
网友评论