Question

如果不使用图片或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>

Answer 1

根据the W3C on associating labels：

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

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

旧答案

是的，这会有效。我无法验证所有浏览器的行为，但这里是W3C spec has to say：

将标签与另一个标签相关联控制，隐含地控制元素必须在内容中 LABEL元素......当一个LABEL 元素获得焦点，它通过了专注于其相关的控制。

因此，我想通过单击LABEL，您实际上是单击提交输入。

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

Answer 2

如果问题是将HTML代码放在按钮中，您应该使用<button>，这样就可以实现这一点。

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

但要回答你关于<label>：~~否的问题，那将无效。~~显然它会起作用，经过深思熟虑之后，我认为没有理由说它不应该吨。

Answer 3

在不使用图片或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;
    }

Answer 4

您可以在标签中添加任何html元素，使用此代码，整个标签将作为提交按钮。

 <form method="" name="myForm">
        <input type="text" name="" placeholder="">
        <label for="" class="" onclick="myForm.submit() "></label>
        </form>

使用标签标签提交表单

4 个答案: