HTML网页编程之按钮详解

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

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

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

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

现在来看看实现的代码。

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

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

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

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

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

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

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

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

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

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

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

有现代浏览器都使用了JavaScript的内置支持。很多时候，你可能需要启用或手动禁用此支持。

本教程将让您知道如何启用和禁用JavaScript支持，在您的浏览器：IE浏览器，Firefox和Opera。

JavaScript在InternetExplorer(IE)中：

下面是简单的步骤给打开或关闭JavaScript在您的InternetExplorer：

1、按照从菜单"工具"->"Internet选项"

2、从对话框中选择"安全"选项卡

3、点击"自定义级别"按钮

4、向下滚动，直到找到"脚本选项"

5、选择启用"活动脚本"单选按钮

6、最后点击"确定"，然后退出来

要禁用JavaScript支持在InternetExplorer，需要在“活动脚本”给选择“禁用”单选按钮。

JavaScript在Firefox：

下面是简单的步骤给打开或关闭JavaScript在Firefox：

1、从菜单按照"工具" ->"选项"

2、从对话框的“内容”选项

3、选择启用JavaScript的复选框

4、最后点击确定，然后退出来

要禁用Firefox的JavaScript支持，应该选择禁用JavaScript的复选框。

JavaScript在Opera:

下面是简单的步骤给打开或关闭JavaScript在Opera：

1、从菜单按照"工具"->"首选项"

选择对话框中的"高级"选项

2、从列出的项目选择"内容"选择启用JavaScript 复选框

3、最后点击"确定"，然后退出来

要禁用在Opera中支持JavaScript，那么不要选择启用JavaScript的复选框。

警告对非JavaScript的浏览器：

如果你有使用JavaScript做一些重要的事情，那么可以显示一条警告消息，使用<noscript>标签显示给用户。

可以在脚本块后，如下立即加入noscript noscript 块：

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>

<noscript>
  Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>

12345678910111213141516复制代码类型：[javascript]

现在，如果没有启用用户的浏览器不支持JavaScript或JavaScript，然后</noscript>会在屏幕上显示的消息。

开课吧广场-人才学习交流平台

法1：使用onclick事件

<input type="button" value="按钮"
onclick="javascrtpt:window.location.href='http://www.baidu.com/'" />

或者直接使用button标签

<button onclick="window.location.href = 'https://www.baidu.com/'">百度</button>

方法2：在button标签外套一个a标签

<a href="http://www.baidu.com/">
 <button>百度</button>
</a>

或使用

<a href="http://www.baidu.com/"><input type="button" value='百度'></a>

方法3：使用JavaScript函数

在线咨询

上一篇：谷歌浏览器不显示图片怎么解决
下一篇：html单选按钮默认选中怎么做？input标签的单选按钮实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。