HTML按钮
在 HTML 中,按钮分为 3 种:
图1:HTML 普通按钮
图2:HTML 提交按钮
在上述代码中,我们并没有为提交按钮设置 value 值。但是通过运行结果可以发现,提交按钮是有默认值的,默认为提交。如果需要改变其默认值,只需要设置 value 属性即可。
图3:HTML 重置按钮
接下来我们看一下点击重置按钮后的效果:
图4:点击 reset 后的效果
通过运行结果发现,数据没有清空。这是为什么呢?
这里需要大家注意的是,reset 按钮只能清空用户在表单中输入的内容,对于提前设置好的内容不会清空。
- 普通按钮
- 提交按钮
- 重置按钮
1. 普通按钮
普通按钮默认没有提交功能,它只是一个可点击的小装置,一般情况下,需要配合 JavaScript 脚本才能实现具体的功能。在 HTML 中,把 <input> 标签的 type 属性设置为 button 用来表示普通按钮。具体语法格式如下:<input type="button" />
普通按钮没有默认内容,我们需要使用 value 属性为其设置具体内容。代码如下:<form action="http://vip.xinbaoku.com/login.php" method="post"> <input type="button" value="普通按钮"/> </form>运行结果如图所示:
图1:HTML 普通按钮
2. 提交按钮
提交按钮可以看成是一种具有特殊功能的普通按钮。当单击提交按钮时,会对表单的内容进行提交。在 HTML 中,当<input> 标签的 type 属性值为 submit 时,用来表示提交按钮。具体语法格式如下:<input type="submit" />
我们通过一段简单的代码来看一下:<form action="http://vip.xinbaoku.com/login.php" method="post"> <input type="submit"/> </form>运行结果如图所示:
图2:HTML 提交按钮
在上述代码中,我们并没有为提交按钮设置 value 值。但是通过运行结果可以发现,提交按钮是有默认值的,默认为提交。如果需要改变其默认值,只需要设置 value 属性即可。
注意:表单中的字段需要设置 name 属性才可以进行提交,但是提交按钮的 name 属性可以根据需求进行设置,一般情况下不使用。当点击提交按钮后,表单中含有 name 属性的数据会发送到表单服务器,后台经过操作便可以拿到用户输入的内容。
3. 重置按钮
重置按钮也可以看成是一种具有特殊功能的普通按钮,单击重置按钮可以清除用户在表单中输入的信息。把 <input> 标签的 type 属性设置为 reset 用来表示重置按钮。重置按钮也有默认值,默认值为重置。具体语法格式如下:<input type="reset" />
示例如下:<form action="http://vip.xinbaoku.com/login.php" method="post"> 用户名 <input type="text" name="username" value="新宝库"/> 密码:<input type="password" name="psd" value="123456"/> <input type="reset"/> </form>运行结果如图所示:
图3:HTML 重置按钮
接下来我们看一下点击重置按钮后的效果:
图4:点击 reset 后的效果
通过运行结果发现,数据没有清空。这是为什么呢?
这里需要大家注意的是,reset 按钮只能清空用户在表单中输入的内容,对于提前设置好的内容不会清空。
不同浏览器对于一些标签会有不同的样式设置,以上均使用谷歌浏览器。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算