当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML 表单中的按钮控件

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-07 09:14:32

在HTML表单中，通过指定<input>元素的type属性的值，可以实现不同的数据输入方式，达到不同的输入目的。

这篇文章将介绍HTML表单中的按钮。

表单提交按钮

当将<input>元素的type属性的值指定为"submit"时，其在浏览器中将呈现为一个按钮的样式，其作用是将表单中的数据提交到指定的动作处理文件，对数据进行加工处理。

其定义形式为：

<input type="submit" value="提交数据" id="btnSave" name="btnSave">

其中：

type属性指定<input>的类型，这里为"submit"，则表示用于用户提交数据的一个可点击按钮。

value属性给出按钮上显示的文本内容，这里是“提交数据”。当忽略该值时，将显示默认值，在中文网页中，默认值为“提交”。

id属性给出该控件的id值。id值可以让javascript脚本获取该控件以便实现客户端控制，也可以通过CSS类来规定其样式。

name属性给出该控件的name值，该属性也可以使javascript脚本获取到该控件以实现相关控制。

表单的重置按钮

<input type="reset">可以实现将用户输入的值重置为控件的默认值。

其定义形式如下：

<input type="reset" id="btnReset" name="btnReset" value="重置表单">

其中：

type属性设置为“reset”，指定该输入控件为重置按钮。

id属性和name属性与 type="submit"相同。

value属性用于给出该按钮上显示的文本。在忽略该属性时，在中文环境中默认为“重置”。

表单中的普通按钮

当将<input>元素的type属性的值设置为button时，将显示一个普通按钮。

普通按钮可以借助JavaScript脚本实现一定的功能，如跳转到指定页，回退到上一页等。

其定义形式如下：

<input type="button" id="btnBack" name="btnBack" value="返回" onclick="history.back(-1);">

其中：

onclick是一个事件处理属性，是指当用户点击该按钮时要执行的javascript脚本，这里的history.back(-1);是回退到上一页。

HTML表单按钮使用示例

<form action="form_example.asp">

 <label for="yourName">姓名：</label>

 <input type="text" id="yourName" name="yourName" value="翔宇亭IT乐园">

 <br>

 <label for="yourAddr">地址：</label>

 <input type="text" id="yourAddr" name="yourAddr" value="www.biye5u.com">

 <br><br>

 <input type="submit" value="提交数据">

 <input type="reset" value="重填数据">

 <input type="button" value="网站首页" onclick="location.href='http://www.biye5u.com';">

</form>