标签: htmlbutton

我想创建一个像按钮一样的HTML按钮.因此,当您单击该按钮时,它会重定向到页面.我希望它尽可能地易于访问.

我也很喜欢它,所以URL中没有任何额外的字符或参数.

我怎样才能做到这一点？

根据到目前为止发布的答案,我目前正在这样做:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

但问题是在Safari和Internet Explorer中,它在URL的末尾添加了一个问号字符.我需要找到一个不会在URL末尾添加任何字符的解决方案.

还有另外两种解决方案:使用JavaScript或样式化链接看起来像一个按钮.

使用JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

但这显然需要JavaScript,因此屏幕阅读器不易访问.链接的要点是转到另一个页面.因此,尝试使按钮像链接一样是错误的解决方案.我的建议是你应该使用一个链接并将其设置为看起来像一个按钮.

<a href="/link/to/page2">Continue</a>

我一直在使用Twitter Bootstrap构建一个网站,它的很多功能都依赖于包装内容<a>,即使它们只是要执行Javascript.我对href="#"Bootstrap的文档建议的策略有问题,所以我试图找到一个不同的解决方案.

但后来我尝试完全删除该href属性.我一直在使用<a class='bunch of classes' data-whatever='data'>,并让Javascript处理其余的事情.它有效.

然而有些东西告诉我,我不应该这样做.对？我的意思是,技术上<a>应该是某种东西的链接,但我不完全确定为什么这是一个问题.或者是吗？

这很奇怪.我看到@ Html.Button()的引用,但是当我输入Intellisense没有找到这样的帮助时......有下拉列表,隐藏,编辑等等,但没有按钮!

那是怎么回事？

我想<button>在ASP.NET网站中使用较新的标签,除其他外,它允许CSS样式的文本并在按钮内嵌入图形.asp:Button控件呈现为<input type="button">,有没有办法让预先存在的控件渲染到<button>？

从我读过的内容来看,当按钮位于a中时<form>,IE发布按钮的标记而不是value属性是不兼容的,但是在ASP.NET中它将使用onclick事件来触发__doPostBack,所以我不喜欢认为这将是一个问题.

我有什么理由不这样做吗？如果没有,您将如何使用asp:Button或基于它的新服务器控件来支持它？如果可以避免,我宁愿不编写自己的服务器控件.

起初该<button runat="server">解决方案有效,但我立即遇到了需要具有CommandName属性的情况,HtmlButton控件没有该属性.看起来我将需要创建一个从Button继承的控件.

我需要做什么才能覆盖渲染方法并使其呈现我想要的东西？

UPDATE

DanHerbert的回复让我有兴趣再次寻找解决方案,所以我花了一些时间来研究它.

首先,有一种更容易的方法来重载TagName:

public ModernButton() : base(HtmlTextWriterTag.Button)
{
}

Dan的解决方案存在的问题是标记的innerhtml被放置在value属性中,这会导致回发时出现验证错误.一个相关的问题是,即使你正确地渲染value属性,IE的<button>标签的braindead实现也会发布innerhtml 而不是值.因此,任何实现都需要覆盖AddAttributesToRender方法才能正确呈现value属性,并且还为IE提供某种解决方法,因此它不会完全搞砸回发.

如果要利用数据绑定控件的CommandName/CommandArgument属性,IE问题可能是不可克服的.希望有人可以为此建议解决方法.

我在渲染方面取得了进展:

ModernButton.cs

这将呈现为<button>具有正确值的正确html ,但它不适用于ASP.Net PostBack系统.我已经写了一些我需要提供的Command事件,但它没有激发.

当用常规的asp:Button并排检查这个按钮时,它们看起来与我需要的差异相同.所以我不确定Command在这种情况下ASP.Net是如何连接事件的.

另一个问题是,不呈现嵌套的服务器控件(正如您可以使用ParseChildren(false)属性看到的那样).在渲染过程中将文字html文本注入控件非常容易,但是如何允许支持嵌套服务器控件呢？

我有一个使用事件处理程序调用javascript函数的按钮.出于某种原因,事件处理程序被调用两次.

这是我的按钮(我使用php对象生成代码,这就是为什么有很多空标签):

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

这是我的事件处理程序:

$('.addToCartButton').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

在这里,我收到两次警报.

我试过在按钮的onclick属性中调用函数addToCart,但如果我这样尝试,我会收到此错误:

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

我也尝试过event.preventDefault()和event.stopPropagation(),但都没有用.

任何想法为什么会这样,或者我可以做些什么来阻止它执行两次,或者如果我从onclick =""调用javascript函数我可能会收到错误？

我正在使用w3schools Tryit编辑器中的按钮,我正在尝试弄清楚当我点击"取消"按钮时我的浏览器重定向到URL.

这是我尝试过的:

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
  <button type="cancel" onclick="javascript:window.location='http://stackoverflow.com';">Cancel</button>
</form>

但它不起作用.有任何想法吗？

a button与type="button"vs 之间有区别type="submit"吗？是否存在功能差异,或者它只是一个描述性名称,以便更轻松地阅读代码？

这有input什么不同吗？

我有一个包含一些可点击<div>元素的页面,我想将它们更改为<button>s,以便通过jQuery更容易识别它们.但是当我将<div>s改为<button>s时,它们的大小会发生变化.(我将它们设置为固定的宽度和高度,但按钮呈现的宽度和高度与div不同.)

这是一个重现问题的jsfiddle:http://jsfiddle.net/AjmGY/

这是我的CSS:

.styled {
    border: 4px solid black;
    background: blue;
    width: 100px;
    height: 100px;
}

我的HTML:

<div class="styled"></div>
<button class="styled"></button>

我希望看到两个相同尺寸的盒子,但是底盒(the <button>)明显更小.这种行为在我尝试过的所有浏览器中都是一致的,包括Windows(Chrome,FireFox,IE,Opera)和Android(内置浏览器和Dolphin).

我尝试添加display: block;到样式,认为这可能使它们都使用相同的规则渲染(即,使button渲染像一个div因为它现在是块元素),但这没有效果 - 按钮保持较小.

当我增加边框宽度时,差异会增加.它看起来好像按钮的border是内部的width,而不是超出其width作为与<div>.据我了解,这违反了盒子模型,尽管W3C确实说:

用户代理可以与"普通"元素不同地呈现某些用户界面元素(例如,按钮,菜单等)的边界.

是否正常/记录/预期行为button的边界在其宽度和高度的内侧,而不是在外面？我可以依靠这种行为吗？

(我的页面使用HTML5文档类型,如果相关的话.)

我试图将webview的html按钮点击检测到java代码(In activity).
我在Android WebView中通过javascript引用了另一个SO
Detect点击HTML按钮

但是没有用.我的代码:

的index.html

<html>
    <head>
        <script language="javascript">
            function js1() {
                document.loginform.method="post";
                document.loginform.action = "https://example.com/chechlogin.asp";
            }
        </script>  
    </head>
    <body>
        <form name="loginform">
            <input type="text" name="empcode" value="58686" /><br/>
            <input type="password" name="emppassNTL" />
            <input type="submit" name="submit" id="submit_id" onclick="login.performClick();" />    
        </form>
    </body>
</html>

MainActivity.java

package com.example.webview;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends …

我有一个标题元素,需要在单击时触发一些JavaScript.我知道我应该只<a>在页面实际更改时使用标签,并且这<button>是JS功能的首选,但由于某种原因,它只是感觉不对

<h2><button onclick="myFunction();">My Title</button></h2>

我无法理解为什么那种语义不正确.只有我吗？