I need to put an input field and submit button on the same line. The input field should be 100% of the remaining width. The only way I found to achieve something like that cross browser was described here:
<form action="search.php" method="get">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
</form>
From an accessible point of view this solution has some drawbacks. Mainly because pressing the tab key to move from the field to the button doesn't work anymore. Unfortunately I can't just add tabindex="1" to the field and tabindex="2" to the button because that would break the "natural tab order" of the whole page.
So I'm wondering if there is any other way to solve this without having to use flexbox (currently limited browser support). Since input fields can be submitted by pressing "return" I could add a tabindex="-1" to the button. But that doesn't seem to be a great solution either...
I did no cross browser testing, but you could try this:
http://jsfiddle.net/n5ne3L1f/
<form action="search.php" method="get" style='display:table; width:100%;'>
<div style="display:table-cell; width: 100%;">
<input type="text" name="term" style="width: 100%;" />
</div>
<input type="submit" name="search" value="Go" style="display:table-cell;" />
</form>
Related
so I don't know if I'm doing it right, but I wanted to make a button with a link in the submit input, but I don't know how to do that, the code is like this
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<input type="submit" name="" value="Login">`in this part`
I tried to make a link with href and ul, I tried to create the button with div button, but it didn't stay in the position it was when I use the input.
i am new contributor to, i hope to help answer your question, actually I'm not sure what you mean by "a button with a link in the submit input", maybe like this, you can change the type to button
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<input type="button" name="" value="Login" onclick="functionHere()">`in this part`
source : Html input type="button" - W3Schools
I would remove the submit element entirely then. With a little bit of JavaScript, you can get anything to submit the form. It's not the most conventional way to go about things but it does exactly what you need it to do. If you wanted to pass any other data through the submit element, you can simply add invisible elements.
<form class="box" action="index.html" method="post" id="form">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<div class="submit-button" onclick="document.getElementById("form").submit()">
<p>Login</p>
Link
</div>
</form>
I have a simple HTML form with multiple submit buttons and I want my application to act differently on whichever submit button I click.
Example:
<form method="POST">
<input type="submit" value="test" name="test" />
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="text" name="search_query2" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search2" />
<input type="submit" value="GO" name="next" />
</form>
This works for me, and I know how to distinguish which button I clicked. The problem I have is that if I push Enter while editing the text-field then the first submit button gets clicked (the one named test). Is this possible to let the browser know (with HTML only - the whole point of this is to make it work with NO JavaScript) that I pushed Enter and it should send search with POST, not test?
So is there some kind of binding of text field to the submit button?
A solution to this problem would be to have multiple form elements, including your different submit buttons and the corresponding textfields.
I can't think of a solution with just one formular but no Javascript in use.
You could move the one you want to be submitted to first in that list, like so:
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="submit" value="test" name="test" />
<input type="submit" value="GO" name="next" />
</form>
But it seems that your HTML is just poorly formed, I'd recommend Merguez's answer
Since your edit, there is no way to do this without Javascript/jQuery.
This would not be hard to do with PHP.
First: Change your buttons to actual controls:
becomes
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some
text" />
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Search">Search</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Test">Test</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Go">Go</button>
</form>
Now, when the form is submitted, check the returned value of actionB. If it's "Search", then piece together your search URL using the returned value of search_query.
There is NO way to read variables using only HTML. JavaScript is required if you're not going to use a scripting language to do this. You can totally do this in native JavaScript. JQuery is NOT required for this relatively simple function.
<script language="JavaScript">
function checkBtn() {
var btnX=document.getElementById("actionB").value;
if (btnX=="Search") {
// compose your new URL here
}
// repeat for each of the possible buttons
</script>
Hope that helps somewhat!
Steve
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.
ttI know this is a lame question but in order to do it right i need your help.
this is my html code
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
</form>
<div style="width:100%; font-size:14px;text-align:center;">Click here to subscribe
</div>
<div class="subscribe">
</div>
and here is the fiddle
http://jsfiddle.net/V8RB2/
how can i associate the "Click here to subscribe" text and the button with this form?
If i understood you correctly, you want to submit the form when the link is clicked. To do this, you'll have to use JavaScript.
A quick way of doing it is by telling the form to submit itself in the onclick attribute of the link.
<a onclick="form1.submit()" href="#">Click here to subscribe</a>
What happens is, that when the link is clicked, you trap its onclick event and then you tell form1 to submit itself.
The easiest way would make this a button within the form and use CSS to style it however you want.
<input type="submit" id="button1" class="button1" name="subscribe" value="Click here to subscribe!" />
Then to style:
form input.button1 {
style here
}
The below will work.
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
Click here to subscribe
</form>
Change your link's href to:
href="javascript:document.forms['form1'].submit()"
Or add that as an onClick attribute.
Updating with a technique to route around disabled javascript.
<script>document.write('Click here to subscribe</div><div class="subscribe">');</script><noscript><input type="submit" value="submit"></noscript>
I have a text input element and a submit input element that I need to be inline and responsive. The problem is that I can't find a way to get the text input element to be fluid without screwing up the positioning of the button. Any help would be appreciated.
Here is the html structure I'm using.
<div class="search-call-to-action">
<form action="#">
<input type="text" name="search" placeholder="Search charities by keyword or name...">
<input class="btn btn-primary btn-large" type="submit" name="submit" value="Search">
</form>
</div>
Here is a screenshot of what I am trying to achieve. The text input needs to be fluid.
http://i.imgur.com/Ivty5Qq.png
I have provided a jsfiddle with a working demo on how to achieve this. It uses the overflow property. Demo http://jsfiddle.net/kevinPHPkevin/vbdy9/
<form action="search.php" method="get">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
</form>
You can use media queries to achieve this. Then you should create queries for each resolution. Example:
#media (min-width: 320px){
div
{
//some propererties in ems
}