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

Question

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

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

最初我是通过将 input 包含在 div 中然后在 CSS 中来实现的，使用 :after 伪选择器添加 > input 之后的符号（并给它一个 float:right）。 但问题在于，如果用户单击 div 中除 input 文本以外的任何地方，form 将不会提交。

我很想有两个span（一个用于文本，一个用于>）或两个p，但是必须提交表格，所以input必须使用，input里面不能有span或p等。

我该怎么办？

Answer 1

将此添加到您的 div

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

Javascript

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

Answer 2

您可以使用 <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>

Answer 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>

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

Can I submit a form without using <input> element, or can the <input> element contains two <p> elements?

html

css

forms

html-input