Vue 高效清空表单，一键清空表单

段时间在租个后台的项目，有两处需要一键清空表单数据

一、表单筛选后，需要可以一键清空或者恢复初始化筛选条件

初始化查询数据：

1.在created钩子深拷贝了一份数据模板：

这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份

2.在清空按钮事件触发后，再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch

注意：这里一定还要是深拷贝，

this.userFormSearch = this.defaultUserFormSearch;(这种做法是错误的); 如果清空的时候不深拷贝备份的数据this.defaultUserFormSearch，那么this.defaultUserFormSearch将会和this.userFormSearch关联上，

后面清空之后修改了this.userFormSearch会牵扯到this.defaultUserFormSearch也被修改，再去清空就会有问题

我们每个页面查询条件都很多，这里只是拿了最少的一个举例子，如果查询条件更多，我们清空的当然也可以采用下面的方式，

这种方式也可以，只不过当里面项目比较多的时候，我们也要写好多代码

或者我们直接把this.userFormSearch = {}，我们status如果有默认值，那么这种暴力清除的方式也是不可以用的

二、我们编辑弹窗，取消后或者关闭后，同样可以采用这种办法来清空哦。

欢迎看到的同学或者前辈吐槽，或者告诉我还有更好的办法~

转自：麻麻怪大侠（https://www.cnblogs.com/mamaguai/p/8143391.html）

篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：

输入类控件
菜单类控件

输入类组件 —— input

此类控件有很多种类型，使用<input type="类型">语法，常见类型如下：

type 值	含义
text	文字字段
password	密码域，用户看不到明文，以*代替
radio	单选按钮
checkbox	多选按钮
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像域，用图像作为背景的提交按钮
hidden	隐藏域，不可见的输入框
file	文本域，用于上传文件等非文本数据

文本输入框和密码框

除了显示形式不一样，其它属性一样，有以下属性：

name —— 定义文字字段名称，用于和其它控件区别，不能包含特殊字符，也不可使用html 标签名称
maxlength —— 定义文本框可输入字符最大长度
size —— 定义文本框在页面中显示的长度
vaule —— 定义文本框中默认的值

如下是文本输入框和密码框制作一个登录表单

html代码：

<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用户名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密码:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

显示效果：

HTML5 输入类型

除了以上几种类型，HTML5 还增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代码：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  数字类型（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 选择颜色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  时间：
  <input type="time" name="usr_time"><br>
  一定范围
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能够在被提交时自动对电子邮件地址进行验证<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  电话：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 类型。<br>
  url：
  <input type="url" name="url">
  提交时能够自动验证 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

单选和多选按钮

使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。

如下实例：

<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form> 
</body>
</html>

显示效果：

单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按钮、提交按钮、重置按钮

普通按钮：type = “button”，一般配合脚本使用，语法如下：

<input type="button" name="名称" value="按钮值" onclick="脚本程序" />

value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

单击您好按钮

提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。

如刚才的登录表单，提交后会返回结果：

重置按钮：type="reset"，用于清除表单数据，也是一种特殊按钮。

输入数据

点击重置按钮后，表单数据清空

重置清空数据

HTML5 按钮

除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form>

其它输入类控件

隐藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隐藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

显示效果

可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。

文本域 —— textarea

除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。

如下示例：

<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。

下拉菜单和多选列表

下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：

<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：

<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。

如下代码：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

显示效果：

这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：

到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。

还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！

上篇：前端入门——html 表单

下篇：前端入门 —— 网页中使用窗口框架

、HTML标签：表单标签

1.1 表单概念：用于采集用户输入的数据的。用于和服务器进行交互。

1.2 语法：

form：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围

属性：

action：指定提交数据的URL

method：指定提交方式

method分类：一共7种，2种比较常用

get：

1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。

2. 请求参数大小是有限制的。

3. 不太安全。

post：

1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)

2. 请求参数的大小没有限制。

3. 较为安全。

注意：表单项中的数据要想被提交：必须指定其name属性

二、表单项标签：

2.1 input：可以通过type属性值，改变元素展示的样式

2.1.1 type属性：

text：文本输入框，默认值

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

password：密码输入框

radio:单选框

注意：

1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。

2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

3. checked属性，可以指定默认值

checkbox：复选框

注意：

1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

2. checked属性，可以指定默认值

file：文件选择框

hidden：隐藏域，用于提交一些信息。

按钮：

submit：提交按钮。可以提交表单

button：普通按钮

image：图片提交按钮

src属性指定图片的路径

label：指定输入项的文字描述信息

注意：

label的for属性一般会和 input 的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select: 下拉列表，子元素option，指定列表项

textarea：文本域，cols指定列数，每一行有多少个字符，rows默认多少行。

三、CSS：页面美化和布局控制

3.1 概念： Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

3.2 好处：

1. 功能强大

2. 将内容展示和样式控制分离

3. 降低耦合度。解耦

4. 让分工协作更容易

5. 提高开发效率

3.3 CSS的使用：CSS与html结合方式

3.3.1 内联样式：在标签内使用style属性指定css代码

如：<div style="color:red;">hello css</div>

3.3.2 内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码

如：

<style>

div{

color:blue;

}

</style>

<div>hello css</div>

3.3.3 外部样式

1. 定义css资源文件。

2. 在head标签内，定义link标签，引入外部的资源文件

如：

a.css文件：

div{

color:green;

}

html文件：

<div>hello css</div>

注意：

1,2,3种方式 css作用范围越来越大

1方式不常用，后期常用2,3

3.4 css语法：

3.4.1 格式：

选择器 {

属性名1:属性值1;

属性名2:属性值2;

...

}

* 选择器:筛选具有相似特征的元素

* 注意：

* 每一对属性需要使用；隔开，最后一对属性可以不加；

3.5 css选择器：筛选具有相似特征的元素

3.5.1 分类：

1. 基础选择器：

1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

* 语法：#id属性值{}

2. 元素选择器：选择具有相同标签名称的元素

* 语法：标签名称{}

* 注意：id选择器优先级高于元素选择器

3. 类选择器：选择具有相同的class属性值的元素。

* 语法：.class属性值{}

* 注意：类选择器选择器优先级高于元素选择器

2. 扩展选择器：

1. 选择所有元素：

* 语法： *{}

2. 并集选择器：

* 选择器1,选择器2{}

3. 子选择器：筛选选择器1元素下的选择器2元素

* 语法：选择器1 选择器2{}

4. 父选择器：筛选选择器2的父元素选择器1

* 语法：选择器1 > 选择器2{}

5. 属性选择器：选择元素名称，属性名=属性值的元素

* 语法：元素名称[属性名="属性值"]{}

6. 伪类选择器：选择一些元素具有的状态

* 语法：元素:状态{}

* 如： <a>

* 状态：

* link：初始化的状态

* visited：被访问过的状态

* active：正在访问状态

* hover：鼠标悬浮状态

3.6 css属性：

1. 字体、文本

* font-size：字体大小

* color：文本颜色

* text-align：对其方式

* line-height：行高

2. 背景

* background：

3. 边框

* border：设置边框，符合属性

4. 尺寸

* width：宽度

* height：高度

5. 盒子模型：控制布局

* margin：外边距

* padding：内边距

* 默认情况下内边距会影响整个盒子的大小

* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

* float：浮动

* left

* right

在线咨询

上一篇：HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(……)
下一篇：纯CSS实现轮播图效果，你不知道的CSS3黑科技

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Vue 高效清空表单，一键清空表单

输入类组件 —— input

文本域 —— textarea

下拉菜单和多选列表

您的项目需求