Form elements by default are block elements, it seems.
JsFiddle here
When I use input text-box & button within form element, button is moved to next line:
<form action="/" method="post"><input class="form-control" id="Email" name="Email" placeholder="Your email address" type="text" value=""> <span class="input-group-btn">
<button class="btn btn-success">Sign up!</button>
</span></form>
When I remove form tag these input & button elements are displayed inline, correctly. What could be wrong?
I tried display:inline css but it did not help.
Are you using "input-group" around your form control and button?
http://jsfiddle.net/49t4xwcs/3/
<form>
<div class="input-group">
<input type="email" class="form-control" placeholder="Your email address"/>
<span class="input-group-btn">
<button class="btn btn-success">Sign up!</button>
</span>
</div>
</form>
Try to add
Style="float:left"
To the search and to the button
Related
I want to display a form in different lines but i am getting it in same line.
Code -
<form action="/compose" method="post" autocomplete="off">
<label for="">Title</label>
<input type="text" name="postTitle">
<label for="">Post</label>
<textarea cols="40" rows="5" name="postPost"></textarea>
<button class="btn btn-sm btn-primary" type="submit" name="submit">Publish</button>
</form>
This is what I am getting. Do i need to add container-fluid class of bootstrap?
Do add each input tag inside its corresponding Label, after that set the label styles to display: block.
<form action="/compose" method="post" autocomplete="off">
<label for="">
Title
<input type="text" name="postTitle">
</label>
<label for="">Post
<textarea cols="40" rows="5" name="postPost"></textarea>
</label>
<button class="btn btn-sm btn-primary" type="submit" name="submit">Publish</button>**strong text**
</form>
There are many ways to do this simplest is to use <br> tag
This tag break the code into line
<form action="/compose" method="post" autocomplete="off">
<label >Title</label>
<input type="text" name="postTitle">
<br/>
<label for="">Post</label>
<textarea cols="40" rows="5" name="postPost"></textarea>
<br/>
<button class="btn btn-sm btn-primary" type="submit" name="submit">Publish</button>
</form>
There are many ways to achieve this.
1. Use a break after each input:
<form>
<label for="title">Title</label>
<br>
<input type="text" name="title" value="">
</form>
2. Use CSS
form {
display: flex;
flex-direction: column;
}
I wanted to add validation to this input
<div class="col-lg-6">
<!-- Content Here -->
<!-- Needs Validation -->
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" href="add_workout_2.php" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</div>
I tried using the required tag but it doesn't seem to work (I can just click the submit button without inputting any value).
Edit:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</form>
In this case the "required" parameter will only trigger, if a valid "submit" event is getting called correctly. Anchor tags has the "type" parameter, but it's not for the same use as an input/button tag. I'd suggest that you convert your anchor tag to a button as follows:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<button class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</button>
</form>
Then you'll get the wanted result. If you don't want the styling of the button, you can work around that with styling. For future reference, you don't need to add "value="" to the input tag for having an empty tag :-)
I hope it helped.
Change your code to this:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" required>
<input class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button" value="+ ADD EXERCISES TO WORKOU">
</form>
This is my HTML:
<form class="form-signin" role="form" action="#" onclick="return signup(this);">
<h2 class="form-signin-heading">Please sign up</h2>
<input type="text" id="name" class="form-control" placeholder="Name" required autofocus>
<input type="email" id="email" class="form-control" placeholder="Email address" required>
<input type="password" id="password" class="form-control" placeholder="Password" required>
<input type="radio" name="member-type" value="student">Student</input> <br>
<input type="radio" name="member-type" value="parent">Parent</input> <br>
<input type="radio" name="member-type" value="alumnus">Alumnus</input> <br>
<br>
<button class="btn btn-lg btn-primary btn-block" type="button">Sign up</button>
</form>
When I click the radio buttons they submit the form. If I put the onclick inside of the button tag then I can no longer use "return signup(this);". Is there a workaround for either of these?
In your return signup function, return false if you do not want your form to submit.
If you do that, you can run specific validation your form. If you want the form to submit, simply return true in your function.
I would also change you button to type="submit" and your onClick parameter to onSubmit in your form tag.
I am using bootstrap v3.1.1 on a HTML form (code below). Previously, the form border was fine - however, when I added the span for icons inside the form fields, the border no longer appears distinctly visible. Is there something besides using a border style on the form fields that I can/should use? Thanks in advance.
<form id="login" method="POST" action="/xyz/login" role="form" novalidate>
<div class="form-group">
<label for="username"> Email Address</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="username" id="username" placeholder="Enter username" autocomplete="on" required data-required-msg="Username is required"
autofocus tabindex="1" class="form-control">
</div>
</div>
<div class="form-group">
<label for="password"> Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" name="password" id="password" placeholder="Enter password" class="form-control"
required data-required-msg="Password is required" tabindex="2" autocomplete="off" class="form-control">
</div>
</div>
<br>
<div class="form-group">
<button id="submit" class="submit" type="submit" tabindex="3" class="btn btn-default">Login</button>
</div>
</form>
pilot error - I had the following rule in my stylesheet which was causing the problem. Removing this rule solved the issue for me.
input[type=text]{
-webkit-appearance:none;
outline:none;
border:none;
}
I've created Bootstrap form with the following code :
<form class="form-inline" role="form" method="GET" action="/startup/searchprojects">
<div class="form-group">
<label class="sr-only" for="keywords">Key words</label> <input
type="text" class="form-control" id="keywords"
placeholder="keywords">
</div>
<div class="form-group example example-countries">
<label class="sr-only" for="localisation">Country</label>
<input class="typeahead" type="text" placeholder="countries">
</div>
<button type="submit" class="btn btn-default">
<fmt:message key="search.button.title" />
</button>
</form>
The form display on the same line. two inputs text with the submit button on the same line.
But when i add Spring MVC form tags, the form changes. Each input went on one line. So i have one line for the keywords input, one line for the input country and one line for the submit button. My form is now vertical.
Here the spring mvc form :
<form:form class="form-inline" role="form" method="GET" commandName="search-form" action="/startup/searchprojects">
<div class="form-group">
<form:label path="keywords" class="sr-only" for="keywords">Key words</form:label>
<form:input path="keywords" type="text" class="form-control" id="keywords"
placeholder="key words"></form:input>
</div>
<div class="form-group example example-countries">
<form:label path="country" class="sr-only" for="localisation">Country</form:label>
<form:input path="country" class="typeahead" type="text" placeholder="countries"></form:input>
</div>
<button type="submit" class="btn btn-default">
<fmt:message key="search.button.title" />
</button>
</form:form>
Try putting style="display: inline" in every div you use
<div style="display: inline"> some content</div>
I adjust width of #search-form. It was problem of width.