CODEWITHSUNDEEP
csshtmlformshtml-input
Solace
Solace

Reputation: 9010

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

Inside a <form>, I want to have a input of type=submit which has a fixed width, say 150px, and which submits this <form>. In this button, I want to have text on the extreme left side, and a > symbol on the extreme right side, like this:

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

Initially I did it by enclosing the input in a div and then in CSS, using the :after pseudo selector to add the > symbol (and gave it a float:right) after the input . But the problem with that is that the form is Not submitted if the user clicks anywhere in the div Except the input text.

I would really like to have two spans (one for text and one for >) or two p's, but the form has to be submitted, so the input has to be used, and input can not have spans or ps etc. inside it.

What should I do?

Upvotes: 2

Views: 419

Answers (3)

repzero
repzero

Reputation: 8412

Like this

#target:after{
  content:'>'
}
<button id='target' type='submit'>
Let's Go&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
</button>

Since you would like fixed width instead this is another solution that involves padding

#target:after{
  content:'>'
}
#target span{
  padding-right:300px;
}
<button id='target' type='submit'>
<span>Let's Go</span>
</button>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You can use <button type="submit></button> and make it 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>

Upvotes: 3

Hasta Tamang
Hasta Tamang

Reputation: 2263

Add this to your div

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

Javascript

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

Upvotes: 1

Related Questions