`

html中的按钮标签及input标签

    博客分类:
  • html
 
阅读更多

在HTML中,我们经常会用到按钮。

而我们常用的按钮标签有以下几种:

1):button标签

例:

<button >按钮</button>

<button>标签定义一个按钮。

在button元素内部,可以放置内容,如文本或者图像。

<button>与</button>标签之间的所有内容都是按钮的内容,其中包括文本和多媒体内容。

.button {
    font-size: 15px;
    height: 50px;
    width: 110px;
    background-color: black;
    color: #FFFFFF;
    border: 0px;
    background-image: url(../images/shopping_cart.png);
    background-repeat: no-repeat;
    background-size: 19px 19px;
    background-position: 10px 14px;
}

    <button onclick="javascript:window.location.href='abc.html';">这是一个按钮</button> 

    <button onclick="window.open('pos_home.html','_blank');">主页</button>

    看到abc.html了吗?改成你想要链接到的页面URL

         如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。所以在HTML中使用 input 元素来创建按钮。

2):a标签:

<a>标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

用A标签来写

html:

<a href="###">按钮</a>

css:

a{background-color:blue;}    /*默认时a标签是蓝色的*/

a:hover{background-color:red;}    /*鼠标放上去的时候a标签变成红色*/

a:active{background-color:black;}    /*鼠标按下去时a标签变成黑色*/

3):input标签

1.如果让本页转向新的页面则用:

<input type=button onclick="window.location.href('连接')"> 

2.如果需要打开一个新的页面进行转向,则用:

<input type=button onclick="window.open('连接')">

分享到:
评论

相关推荐

    input框添加图片按钮

    在网页设计中,为了优化用户体验及提升界面美观度,经常会遇到需要在`input`框旁边或内部加入图标按钮的情况。例如,一个登录表单中的“显示密码”按钮或者搜索框旁边的放大镜图标。本文将详细介绍如何在`input`框中...

    input多标签插件 按回车生成新的标签

    在IT领域,尤其是在前端开发中,"input多标签插件 按回车生成新的标签"是一个常见的功能需求。这个功能通常应用于用户需要输入多个标签,例如在社交媒体、博客平台或者内容管理系统中,用户可以使用此功能快速创建或...

    input 标签的属性

    在HTML中,`&lt;input&gt;`标签是最常用的表单元素之一,用于收集用户输入的数据。它通过`type`属性定义了不同的输入控件类型,比如文本框、密码框、按钮等。本文将详细介绍`&lt;input&gt;`标签的各种类型及其相关属性,并通过...

    HTMLFORM表单,input标签的说明.pdf

    在表单中,`&lt;input&gt;` 标签是最常用的控件之一,它可以以多种类型 (`type`) 出现,以满足不同需求。以下是一些常见的 `input` 类型: 1. **单行文本输入框 (input type="text")**:允许用户输入一行文本。例如: ``...

    input标签样式

    在HTML中,`&lt;input&gt;`标签是一个非常基础且重要的元素,用于创建用户界面中的交互控件,如文本框、按钮、复选框等。当我们谈论`&lt;input&gt;`标签的样式时,我们通常指的是如何通过CSS(层叠样式表)来改变这些控件的外观...

    上传图片问题(html标签实现input/file功能),及uploadify插件

    HTML中的`&lt;input type="file"&gt;`标签是实现这一功能的基础,但它的样式和交互性往往有限。本篇将详细介绍如何在非`&lt;input&gt;`标签(如`&lt;span&gt;`)上模拟`&lt;input type="file"&gt;`的功能,并探讨uploadify插件的使用,以提升...

    HTML标签解释大全

    - **说明**:`&lt;button&gt;` 标签用于指定其中所含的HTML要被渲染为一个按钮。例如: ```html 点击我 ``` ##### 标签:caption - **说明**:`&lt;caption&gt;` 标签用于指定表格的简要描述。例如: ```html 销售数据 ...

    jQuery Input文本框创建标签代码

    3. 删除标签:为每个生成的标签添加一个删除按钮,允许用户移除不再需要的标签。 4. 样式优化:通过CSS对标签样式进行定制,如颜色、边框、内边距等。 这个简单的jQuery插件展示了如何使用JavaScript和DOM操作来...

    html表单a标签,input标签等几种请求ajax提交数据给后台小结

    这两种方法的核心在于使用`&lt;input type="button"&gt;`或`&lt;a&gt;`标签的`onclick`事件来触发AJAX请求,并且通过JavaScript获取表单中的数据,将其转换为JSON格式,然后发送到服务器端。这种方法不仅提高了页面的交互性,还...

    JSP源码 网页中文本框自校验的标签_input.rar

    `&lt;input&gt;`标签是HTML表单中常用的一个元素,用于创建文本框、按钮、复选框等。在本例中,我们关注的是文本框,其基本结构如下: ```html &lt;input type="text" id="username" name="username"&gt; ``` 3. 自动校验...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    在HTML中,它通过`&lt;input type="file"&gt;`标签实现。 2. **Customizing the Button Text**:由于HTML本身并没有直接提供修改该按钮文本的方法,因此我们需要通过一些技巧来实现这一目标。 #### 实现方法 为了实现...

    HTML框架标签超链接标签控件标签PPT教案.pptx

    `&lt;input&gt;`标签用于创建各种交互式控件,如文本输入框、复选框、单选按钮、按钮和文件选择器等。例如,`&lt;input type="text"&gt;`创建了一个可编辑的文本输入框。`&lt;select&gt;`标签用于创建下拉菜单,通过`&lt;option&gt;`标签定义...

    input按钮onclick事件大全

    在Web开发中,`&lt;input&gt;`标签是HTML文档中最常用的元素之一,常用于创建各种交互式按钮、输入框等。`onclick`属性则允许我们在用户点击这些元素时执行特定的JavaScript代码。下面将详细介绍在给定文件中的各个`&lt;input...

    html标签和属性总结

    超链接是HTML标签中非常重要的一部分,它可以实现从一个页面指向另一个页面的跳转。超链接的语法包括: * 文字超链接:”被访问的路径” target=”何处打开文档” title=”显示额外信息”&gt;名字 * 图像超链接:”...

    方向键盘控制table内的input标签焦点

    "方向键盘控制table内的input标签焦点"这一主题关注的是如何通过键盘导航提高用户在表格内输入数据的效率。在传统的网页交互中,用户通常通过鼠标点击来切换输入框的焦点,但通过键盘的上下左右箭头键进行导航能提供...

    input type=file 显示的浏览 改成英文

    在网页设计中,`&lt;input type="file"&gt;` 是HTML元素的一个重要部分,它用于创建一个文件上传控件。默认情况下,这个控件的文本提示和按钮是根据用户的操作系统语言来显示的,例如,在中文环境下会显示“浏览”或“选择...

    输入框回车生成标签的demo

    在IT领域,特别是前端开发中,"输入框回车生成标签的demo"是一个常见的功能,它主要用于用户输入信息并以标签形式展示,便于管理和展示数据。这个功能在很多应用场景下非常实用,比如社交媒体、论坛、博客评论等,...

    [其他类别]网页中文本框自校验的标签_input.zip

    本主题聚焦于HTML中的`&lt;input&gt;`标签,它是实现网页中文本框自校验的核心元素。在这个压缩包文件"网页中文本框自校验的标签_input.zip"中,很可能包含了一系列示例或教程,用于演示如何利用`&lt;input&gt;`标签进行有效的自...

    html实现图片按钮的两种简单方法

    HTML的`&lt;input&gt;`标签可以创建各种类型的输入元素,包括图像提交按钮。以下是如何使用`&lt;input&gt;`标签创建一个图片按钮: ```html &lt;form action="submit_page.html"&gt; &lt;input type="image" src="images/button.png" ...

    把图片做成input提交按钮

    示例代码中的`&lt;input&gt;`标签即展示了如何定义这样一个按钮: ```html &lt;input type="submit" id="submit" align="right" width="80" height="40" style="background:url(&lt;%=path%&gt;/img/confirmorder/submitbtn....

Global site tag (gtag.js) - Google Analytics