html制作关注按钮,关于HTML5表单元素按钮的详解

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 问题描述

在学习HTML5时，我们主要掌握的就是各种元素的使用方法和结构。今天我将向大家详细解释常用表单元素中按钮使用方法。

2 问题分析

首先让我们来看看关键表单元素

元素

作用介绍

form

用于为用户输入创建HTML表单

input

用于搜索用户信息

我们常用的表单元素主要就是这两个。

在结构用法上与相似，一些表单元素以及需要收集用户提供数据的元素都需要放在与中。的用法不好阐述，但很好理解，待会看我使用后你们就明白了。在了解表单关键元素后，就让我们来看看按钮吧。

3 解决方案

在HTML5中按钮有三种表达方式

运行效果

区别

1、“按钮1” 是HTML5与JS的合作，通常和JS一起使用并作为绑定事件处理

2、“按钮2”可以当作任何按钮来使用,功能最多，是使用范围最广泛的，也是我们最常用的。

3、“提交”只用于提交表单时，且必须声明form里面的method属性，最好也添加action属性，内容涉及到PHP所以只做参考。

因为最常用到的是，所以我们就来了解下这个元素吧

标签定义一个按钮。在button 元素内部，您可以放置很多内容，比如文本或图像。这是该元素与使用 input 元素不同之处。 与 标签之间的所有内容都是按钮内的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中插入一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。请始终为按钮规定 type 属性。

以下是type属性的说明

属性

说明

submit

提交按钮

button

按钮是可点击的按钮

reset

重置按钮(清除表单数据)

4 总结

按钮：在适用范围上 button  >  input >  input submit

更多精彩文章：

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发