在表单上制作HTML按钮

使用输入标签来提交表单

HTML表单是为您的网站添加交互性的最基本的方法之一。 您可以提问并征求读者的答案,提供数据库的其他信息,设置游戏等等。 您可以使用许多HTML元素来构建表单。 一旦你建立了你的表单,有很多不同的方法可以将这些数据提交给服务器或者只是启动表单动作运行。

您可以通过以下几种方式提交表单:

INPUT元素

INPUT元素是提交表单最常见的方式,您只需选择一种类型(按钮,图像或提交),并在必要时添加一些脚本以提交表单操作。

元素可以像这样写。 但是如果你这样做,你将在不同的浏览器中获得不同的结果。 大多数浏览器都会显示一个按钮,提示“提交”,但Firefox会创建一个按钮,提示“提交查询”。要更改按钮的说明,应该添加一个属性:

值=“提交表单”>

元素是这样写的,但是如果你忽略所有其他属性,所有将在浏览器中显示的都是空的灰色按钮。 要向按钮添加文本,请使用value属性。 但除非您使用JavaScript,否则此按钮不会提交表单。

的onclick = “提交();”>

类似于按钮类型,它需要一个脚本来提交表单。 除了不是文本值,您需要添加图片源URL。

SRC = “submit.gif”>

按钮元素

BUTTON元素需要一个开始标记和一个结束标记当您使用它时,您标记在内部的任何内容都将被包含在一个按钮中。 然后你用脚本激活按钮。

提交表格

您可以将图像包含在按钮中,或者合并图像和文字以创建更有趣的按钮。

提交表格

COMMAND元素

COMMAND元素是HTML5新增的。 它不需要使用FORM,但它可以充当表单的提交按钮。 除非你真的需要表单,否则这个元素允许你创建更多的交互式页面而不需要表单。 如果你想让这个命令说出一些东西,你可以将这些信息写入一个标签属性中。

label =“提交表单”>

如果您希望您的命令由图像表示,则使用icon属性。

图标= “submit.gif”>

本文是HTML Forms教程的一部分。 阅读完整的教程,了解如何使用HTML表单。

正如您在上一页所了解的,HTML表单有几种不同的提交方式。 其中两种方法是INPUT标签和BUTTON标签。 有充分的理由使用这两个元素。

INPUT元素

标签是提交表单最简单的方法。 它除了标签本身之外什么都不需要,甚至没有价值。 当客户点击按钮时,它会自动提交。 您不需要添加任何脚本,浏览器知道在单击提交INPUT标记时提交表单。

问题在于这个按钮非常难看,很简单。 你不能添加图像。 你可以像任何其他元素一样对其进行设计,但它仍然可能感觉像一个丑陋的按钮。

即使在关闭了JavaScript的浏览器中也必须使用INPUT方法。

按钮元素

BUTTON元素为提交表单提供了更多选项。 您可以将任何内容放在BUTTON元素中并将其转换为提交按钮。 大多数人通常使用图像和文字。 但是如果你愿意的话,你可以创建一个DIV并将整个事件作为一个提交按钮。

BUTTON元素最大的缺点是它不会自动提交表单。 这意味着需要某种类型的脚本来激活它。 因此它比INPUT方法更难以访问。 任何没有打开JavaScript的用户将无法提交只有BUTTON元素的表单才能提交。

在不重要的表单上使用BUTTON方法。 此外,这是在一种表单中添加其他提交选项的好方法。

本文是HTML Forms教程的一部分 。 阅读它以了解更多关于如何使用HTML表单的信息