I'm using Bootstrap 3 and I'm trying to increase the width of my form.
My form:
<form accept-charset="UTF-8" action="/users" class="form-inline" role="form" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
<div class="form-group">
<input autofocus="autofocus" class="form-control" id="inputEmail3" name="user[email]" placeholder="Email" type="email" value="">
</div>
<div class="form-group">
<div><input class="btn btn-default" name="commit" type="submit" value="Create my account"></div>
</div>
<br>
</form>
I've tried using the following style:
.form-inline .form-group input {
width:440px;
}
However when I do this all my inputs including the Create My Account button increases its size along with all other inline-forms I have in my app.
Is there anyway possible to change the style for one single input in a particular form instead of all of them?
You can use a whole load of selectors, for example:
.form-inline .form-group input[name=commit] { ... }
#new_user .form-group input:nth-child(1) { ... }
There are many many more
One way is to use col-* on the form-group..
<form accept-charset="UTF-8" action="/users" class="form-inline" role="form" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
<div class="form-group col-sm-4">
<input autofocus="autofocus" class="form-control" id="inputEmail3" name="user[email]" placeholder="Email" type="email" value="">
</div>
<div class="form-group">
<div><input class="btn btn-default" name="commit" type="submit" value="Create my account"></div>
</div>
<br>
</form>
Demo: http://www.bootply.com/117635
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 have this form in my Spring Boot/Thymeleaf/Bootstrap application:
<form action="/person" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<button type="submit" class="btn btn-primary">Create</button></form>
Now the issue is that when I submit the form it just makes a GET request to "/?" url instead of POSTing to "/person".
What could be the reason for that behavior?
<form action="/person" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<input type="submit" class="form-submit">
</form>
How do I remove the bottom left icon from the button to search.
<form action="search.php" method="POST">
<input type="text" id="search" name="search" placeholder="Search something..." required>
<div id="close-icon"></div>
<button type="submit" name="submit-search"></button>
</form>
here is the html
Are you just trying to hide the tiny button on the bottom left? If so, this should sort you out!
<form action="search.php" method="POST">
<input type="text" id="search" name="search" placeholder="Search something..." required>
<div id="close-icon"></div>
<button type="submit" name="submit-search" style="display:none"></button>
</form>
You can also do this in css using the following:
<style>
.display-none { display:none; }
</style>
<form action="search.php" method="POST">
<input type="text" id="search" name="search" placeholder="Search something..." required>
<div id="close-icon"></div>
<button type="submit" name="submit-search" class="display-none"></button>
</form>
I want to make several text fields required with attribute required, but it is not working.
Any idea why? Is it mandatory to do it with JQuery or is there any HTML5 way to do it?
<form method="POST" action="https://my.kendozone.com/tournaments/testlt/users" accept-charset="UTF-8" class="form-horizontal" novalidate="novalidate">
<input type="text" name="firstnames[]" class="form-control" required>
<input type="text" name="firstnames[]" class="form-control" required>
<button type="submit" class="btn btn-primary">Save</button>
</form>
Here is the fiddle
https://jsfiddle.net/xoco70/ezt61gw6/2/
Try this HTML5 Markup
<input type="text" name="firstnames[]" class="form-control" required>
<input type="text" name="firstnames[]" class="form-control" required>
I have a simple form with method="get" and action="?subject=search_result&":
<form class="form" id="searchform" name="searchform" action="?subject=search_result&" method="get">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<button class="btn btn-default" type="submit">Go!</button>
</form>
it only return
?search=blablabla
instead of
?subject=search_result&search=blablabla
You can just do this:
<form class="form" id="searchform" name="searchform" action="" method="get">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<button class="btn btn-default" type="submit">Go!</button>
<input type="hidden" name="subject" value="search_result">
</form>
Notice the <input type="hidden". This will give you both search and search_result inside your URL.
You can use the hidden input field to set the extra parameters and you can remove the action attribute. The default method is GET, that can also be avoided as shown below:-
<form class="form" id="searchform" name="searchform">
<input type="hidden" name="subject" value="search_result">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<button class="btn btn-default" type="submit">Go!</button>
</form>