我可以在不使用 <input> 元素的情况下提交表单，还是 <input> 元素可以包含两个 <p> 元素？答案

【问题标题】：Can I submit a form without using <input> element, or can the <input> element contains two <p> elements?我可以在不使用 <input> 元素的情况下提交表单，还是 <input> 元素可以包含两个 <p> 元素？
【发布时间】：2016-04-06 15:14:29
【问题描述】：

在<form> 中，我想要一个type=submit 的input，它有一个固定的width，比如150px，并提交这个<form>。在这个按钮中，我想在最左边有文字，在最右边有一个> 符号，像这样：

 ---------------------------------
| Let's go                      > |
 ---------------------------------

最初我通过将input 包含在div 中然后在CSS 中，使用:after 伪选择器在@987654334 之后添加> 符号（并给它一个float:right）来做到这一点@ . 但问题在于，如果用户点击div 中的任何位置，form 将不会提交，input 文本除外。

我真的很想有两个spans（一个用于文本，一个用于>）或两个p，但是必须提交表单，所以必须使用input , 而input 里面不能有spans 或ps 等。

我该怎么办？

【问题讨论】：

尝试使用<button type="submit"> ...您可以在其中嵌套元素。
@Solace，希望您主要需要不输入 type="submit" 来进行样式设置。让我们知道

标签： css html forms html-input

【解决方案1】：

您可以使用<button type="submit></button> 并使其成为width: 100%：

.btn-wide {
  width: 100%;
  text-align: left;
  padding: 10px;
  font-size: 20px;
}
.btn-wide .icon {
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<br><br><br>

<button type="submit" class="btn btn-wide">
  <span class="label">Save</span>
  <i class="icon fa fa-angle-right"></i>
</button>

【讨论】：

【解决方案2】：

将此添加到您的 div 中

<div id="submit" onclick="submitForm()">

Javascript

function submitForm()
 {
      document.getElementById('YourFormId').submit();
 }

【讨论】：

这不是 Solace 期望的！
这是她可以使用的众多解决方案之一。让 Solace 决定@Venkatraman

【解决方案3】：

像这样

#target:after{
  content:'>'
}

<button id='target' type='submit'>
Let's Go&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
</button>

因为您想要固定宽度，所以这是另一种涉及填充的解决方案

#target:after{
  content:'>'
}
#target span{
  padding-right:300px;
}

<button id='target' type='submit'>
<span>Let's Go</span>
</button>

【讨论】：

注意我使用 padding 在 span 中添加一些空格