表单标签<form>和表格标签<table>
表单标签<form>
1、定义:表单标签用于创建供用户输入的 HTML 表单。
2、使用:标签中可包含一个或多个表单元素
3、常见表单元素:<input>,<option>,<select>,<button>,<textarea>
4、注意:一般情况下我们会用使用axios方法将数据提交给服务端,但是axios默认数据类型是json格式,而<form>标签封装的数据格式是表单格式,如果不修改在跨域时会出现问题。故
(1)方法一:导入qs库,将表格形式的数据类型转成json格式
this.$http.post('/user/login', this.$qs.stringify(this.loginForm)
).then(res => {
if(res.status != 200)return this.$message.error("登录失败")
this.$message.success("登录成功")
// 1、将登录成功之后的token保存到客户端的sessionStrage[]
// 1.1 项目中出了登录之外的其他挨批接口,必须在登录时才能访问
// 1.2 token只应在当前网站打开期间生效,所以token要保存在sessionStrage[]
window.sessionStorage.setItem('token', res.data.token)
console.log(res.data.token)
// 2、通过编程式导航跳转到后台主页,路由地址是/home
this.$router.push('/home')
}).catch(err => {
console.log(err)
})`
(2)将axios的信息头的传输数据的类型改成application/x-www-form-urlencoded
输入标签<input>
1、定义:规定了用户可以在其中输入数据的输入字段。
2、使用:<input>标签一般与<form>成对出现,用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变,取决于 type 属性。
3、常用属性:type、method、required、formenctype、formmethod、formaction、accept等
4、与<button>标签的区别:
(1)<input>标签是单个标签,而<button>标签使用时必须以</button>结束
(2)<input>不可在标签内添加样式,而<button>可以添加
(3)需要给<input type=“button”>添加按钮名称需要在其添加value属性,而<button>可直接写在标签内部
(4)<button>标签可嵌套其他元素,而<input>不可
表格标签<table>
1、定义:一般用于创建规整化表格
2、使用:一个<table>可包含一个或多个<tr>,<td>,<th>,<tb>标签,其中<tr>标签定义表格行,<td>标签定义表格列,<th>标签定义表头;<tb>标签定义表格单元
3、常用属性:border:规定表格是否有边框。
区别
1、<form>标签一般用于封装数据,<table>标签一般用于布局设计
2、应用范围不同:
(1)<form>标签一般是将数据统一发送到服务器,比较常见的是登录注册功能,点击提交后,<form>标签封装数据并提交,若不点击则不会提交。
(2)<table>标签一般用于静态页面展示,比如个人简历的展示。
(3)<form>标签内文本框及其文本内容不会整齐排布,故一般情况下会在<form>标签内嵌套一个<table>标签