整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML表单基本元素的应用之提交按钮和重置按钮

交按钮

提交按钮用来将输入的信息提交到服务器。代码格式如下:

<input type="submit" name="..." value="...">

其中type="submit"定义提交按钮;name属性定义提交按钮的名称;value属性定义按钮的显示文字。通过提交按钮,可以将表单的信息提交给表单里action所指向的文件。

(1)编写代码如下图所示,在<body>标签中加入以下代码。

(2)在浏览器中打开文件,预览效果图如下所示,输入内容按【提交】按钮,即可将表单中的数据发送到指定的文件。

重置按钮

复位按钮用来重置表单中输入的信息。代码格式如下:

<input type="reset" name="..." value="..." >

其中type="reset"定义复位按钮;name属性定义复位按钮的名称;value属性定义按钮的显示文字。

(1)编写代码如下图所示,在<body>标签中加入以下代码。

(2)在浏览器中打开文件,预览效果图如下所示,输入内容后单机【重置】按钮,即可将表单中的数据清空。

文介绍了网页编程中的按钮使用方法。按钮是网页中最常用的控件之一,点击后会触发某些程序。即使没有学习过编程,大家也应该知道按钮的概念。按钮的最大功能是点击后触发程序。这篇文章主要介绍了如何在网页中插入按钮,并讲解了按钮的属性和使用方法。

先来看看今天的实例效果。页面被分为三部分:按钮、按钮和按钮的共有属性。

首先是普通按钮,点击后文本框的内容发生了变化,但页面并没有刷新。接着是重置按钮,点击后文本框的内容恢复到初始状态,但页面仍然没有刷新。提交按钮点击后,页面重新加载,提交了表单中的内容。

接着是按钮,点击后文本框的内容发生了变化,但页面没有刷新。按钮包含一个图片且为灰色状态,无法点击。

现在来看看实现的代码。

输入和按钮的写法非常相似,这里只展示了最基本的写法。对于初学者来说,看一眼就明白了。

按钮有三个类型:普通、重置和提交。按钮的名称和值会提交到服务器端。

提交时提交的是按钮的值。ID和name是控制按钮的命名。

点击按钮时会触发onclick事件。autofocus属性会在页面加载完成后自动获取焦点。

disabled属性可以设置按钮是否可用,不设置时默认可用。

form属性用于设置提交到哪个URL、是否绕过验证、以及表单的相关设置。

相关属性的优先级高于在表单中设置的属性。

以上就是今天的分享内容,希望对大家有所帮助。import和button在网页中插入按钮的功能是相同的,两者的外观也没有明显的区别,但是它们的属性设置却存在一定的重叠。

为什么需要这两个标签呢?而阿里巴巴标签是HTML 5中新增加的标签,它的必要性体现在哪里呢?同学们要注意,阿里巴巴标签不是input,它不是一个封闭的标签,而是一个唯一的标签,可以包含文字或其他标签。

例如,可以使用阿里巴巴标签来插入图片。注意,由于用户使用的浏览器不同,底层的type值是必须填写的,绝对不能使用默认值。

今天的分享就到这里,希望各位同学能够认真练习,做到不看视频也能够正确地写出代码。所有的案例和相关文档都可以向我索取,下期再见,想学编程就关注我吧。

Reset 对象

在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建。

当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

重置按钮在重置表单之前触发 onclick 句柄,并且这个句柄可以通过返回 fasle 来取消。

您可以通过遍历表单的 elements[] 数组来访问某个重置按钮,或者通过使用document.getElementById()。

Reset 对象属性

W3C: W3C 标准。

属性描述W3C
disabled设置或返回重置按钮是否应被禁用。Yes
form返回一个对包含此重置按钮的表单对象的引用。Yes
name设置或返回重置按钮的名称。Yes
type返回重置按钮的表单元素类型。Yes
value设置或返回重置按钮上显示的文本。Yes

标准属性和事件

Reset 对象同样支持标准的 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!