6

不使用图像或 javascript 很难设置提交输入的样式。

据我所知，无法将 HTML 代码直接插入 sumbit 输入值。如果我将提交输入包装在一个 div 元素中（例如添加多个边框），则不是整个区域都是可点击的。

单击标签会导致在所有浏览器中提交表单吗？

<form method="test.rb">
 <input type="text" name="test" id="test" />
 <label for="button">
  <input type="submit" name="button" id="button" value="Send!" />
 </label>
</form>
4

3 回答 3

9

根据W3C 关于关联标签：

label 元素不用于以下内容，因为这些元素的标签是通过 value 属性（用于提交和重置按钮）、alt 属性（用于图像按钮）或元素内容本身（按钮）提供的。

感谢您@Jeremiah Isaacson指出这一点。

旧答案

是的，这会起作用。我无法验证所有浏览器的行为，但这是W3C 规范必须说的：

要将标签与另一个控件隐式关联，控件元素必须在 LABEL 元素的内容内……当 LABEL 元素获得焦点时，它将焦点传递给其关联的控件。

所以，我想通过点击标签，你实际上是在点击提交输入。

感谢@stevelove指出这一点的可行性。

于 2010-11-23T15:24:07.870 回答
3

如果问题是把 HTML 代码放在你的按钮中，你应该使用<button>which 将允许你这样做。

<button type="submit" name="button" id="button"><img src="button.png" />Send!</button>

但是要回答您有关以下内容的问题<label>：不，那是行不通的。显然它会起作用，在考虑一下之后，我认为没有理由不应该这样做。

于 2010-11-23T15:18:09.503 回答
-1

不使用图像或 javascript 很难设置提交输入的样式。

无需使用 javascript 或图像即可轻松设置输入样式。

使用 css - 所有提交按钮的样式 - input[type=submit]或使用input.submit-btn应用于特定元素的类

您可以设置颜色、边框、背景、填充、位置、字体粗细、渐变、阴影......所有使用 css 的效果......

瞧性感按钮 -

   input[type=submit] {
        padding:4px;
        color: #fff;
        margin-top: 10px;
        background-color: #e96000;
        border: none;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
        background:  -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
于 2010-11-23T15:23:17.813 回答