I have the following form that I write:
<form class="form-margin cart-container">
<div style="flex-direction: column">
<app-cart-item class="cart-item" *ngFor="let pr of productRecordList" [productRecord]="pr"></app-cart-item>
</div>
<div class="cart-item-details">
<textarea name="fullname" id="fullname" cols="35" rows="2" placeholder="(minimum 3 characters)">Full name</textarea>
<textarea name="address" id="address" cols="35" rows="2" placeholder="(minimum 6 characters)">Address</textarea>
<textarea name="creditcard" id="creditcard" cols="35" rows="2" placeholder="(16-digits number)">
Credit card number</textarea
>
<input type="submit" class="btn btn-primary" name="Submit" />
</div>
</form>
Is it okay to have the <input> inside a <div> like the code provided or do I need to make sure that <form> is the direct parent like below?
<form>
<div>
........................................
........................................
</div>
<input type="submit" class="btn btn-primary" name="Submit" />
</form>
Structuring your form with divs is completely valid and not a bad practice at all. Although I wouldn't go to crazy with nesting, your form seems completely fine to me.
It's good to use like that, but for the view of readability it's better to be under a parent form and refer that field with 'class' or 'id'.
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>
Im using a search form that contains a text box and submit button...For some reason, I have a alignment issue with the 2 elements(input=text and button on the top of the div) particularly in chrome..
Can you please let me know what is the issue?
HTML & CSS
<form id="bigsearchform_new" method="post" >
<input id="search_string" name="search_string" type="text" class="startnewsearch rounded" placeholder="Search..." maxlength="500" /><input id="bigsearchbutton_new" type="button" class="searchButton" title="Click here to search the database"/>
<input type="hidden" name="antiCSRF" value="{{acsrf}}" />
<input type="hidden" name="session_id" value="{{session_id}}" />
<input type="hidden" name="commodity_id" id="commodity_id" />
</form>
</div>
JSFiddle
Input elements are vertically misaligned as they have inline layout and different heights. One of the options is to use vertical-align property with middle/bottom/top (for example) value :
input {
vertical-align : middle;
}
Example
Your button is missing the value property:
<input id="bigsearchbutton_new"
type="button"
class="searchButton"
title="Click here to search the database"
value="Go" />
See Fiddle
My code for a button wont work. My goal is to get the width longer, but it has no effect. Here is a snippet of code from it, where the errors should be:
<form action="http://kindust.com/test.html">
<input type="submit" value="Shop" width="150">
</form>
CSS
.btn{
width: 150px;
}
HTML
<form action="http://kindust.com/test.html">
<input class="btn" type="submit" value="Shop">
</form>
How can I horizontally align a form? For example:
<form>
<input type="email" placeholder="example#ravvel.com">
<div>
<input class="enter" type="submit" value="Send"/>
</div>
</form>
Will give boxes as such:
email
send
Whereas I want them to appear in this fashion:
email send
remove div tag like this :
<form>
<input type="email" placeholder="example#ravvel.com">
<input class="enter" type="submit" value="Send"/>
</form>
Simple way:
<form>
<input type="email" placeholder="example#ravvel.com">
<input class="enter" type="submit" value="Send"/>
</form>
More style-ish way:
<form>
<div style="float:left"><input type="email" placeholder="example#ravvel.com"></div>
<div style="float:left"><input class="enter" type="submit" value="Send"/></div>
</form>
Get rid of your DIV. You don't need it.
<form>
<input type="email" placeholder="example#ravvel.com">
<input class="enter" type="submit" value="Send"/>
</form>
You can add a float: left style to each div that wraps the form elements.
Add the CSS property display with the value inline to the DIV:
#yourdiv
{
display: inline;
}
Well, simply put - if you use float:left on your div elements, it should align them horizontally and get you on your way.
<form>
<input type="email" placeholder="example#ravvel.com" style="float:left;">
<div>
<input class="enter" type="submit" value="Send" style="float:left;"/>
</div>
</form>
<input type="text"/>
<input type="submit"/>
Input elements are inline-block, meaning they're always on the same line, the reason why you got 2 lines, is because the div element is a block element, in order for it to be able to be aligned with other elements in the same "line", it must be floated, or positioned not relatively.
example
If you want all fields inside a form aligned, you can add display:inline as a CSS rule to the containing elements. I generally like to use paragraph tags to separate each label+input tag, or an un ordered list. To update your example:
<form>
<ul>
<li><input type="text" type="email" placeholder="example#example.com" /></li>
<li><input type="text" type="submit" value="send" /></li>
</ul>
</form>
<style type="text/css" media="screen">
form ul {
list-style:none;
}
form li {
display:inline;
}
</style>
This will work for each field you add as a new list item.
Strangely, in my case, simply removing 'div' did not help. I have to explicitly put "float:left" to each input in order to get everything in one line. Hopefully it helps someone who falls in the same situation.