I have submit and reset buttons for a form, and I cant for the life of me figure out how them to get under the textbox. And then the address element is displaying on the right side aswell.
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
CSS:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}
Surely I'm missing something right?
CSS
#request { display: block; clear: both; }
Working Fiddle
How about a line break after the textarea?
ie:
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
or via css, you could make the first of the 2 buttons clear any previous floats;
input[type="submit"] {
clear: both;
}
Instead of display: inline-block; try display: block; for either your text area (doing this will say "put nothing else on the the same line as this element unless it floats", or for your submit order and cancel buttons.
I'd also suggest putting your two buttons inside of a wrapper div so that way you can manipulate the position of those two buttons as a unit instead of individually.
Also, one last note: don't have more than one element on a page with the same id. For elements you want to apply the same properties to, make the id a class instead.
You can use a div to wrap them.
I don't see "address element", so I can't help you.
<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</div>
You can try this working fiddle!
<form>
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<div class="clear:both"></div>
<textarea name="request" id="request"></textarea>
<div class="clear:both"></div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
Related
This question already has answers here:
Align form elements in CSS
(3 answers)
Closed 5 years ago.
I just started learning HTML and CSS recently and I wanted to try creating a login page. I have managed making something that's pretty basic, however the input boxes and labels are not aligned and it looks unprofessional. If possible I'd like an advice as to how I should fix this using CSS.
Here's my code :
<br /> UserName:
<input type="text" name="user name" size="15" />
<br /> Password:
<input type="text" name="password" size='15' />
<input type="text" hidden name="Password" size="15" /> <br />
<input type="reset" value="Login" />
<input type="submit" value="Cancel" />
https://jsfiddle.net/nxgm33y7/8/
You might have to change your markup a bit so that you get some space to play around with your element positioning. I've created a simple example here, make sure you use classes and ids to select the elements.
What I am doing below is, wrapping all the elements in a div element, think of it as a wrapper, so that whenever you want to move your form in the middle of the page, it will be easy for you to do so.
Next, I use ul and li elements, this will help you render each of the form fields one below the other. Next, we use label tag, so that you can set some default width for them, and your form elements will stay aligned.
Lastly, I am using this selector ul li:last-child input:first-child which you can safely replace with a simple class. It's used to nudge your first button i.e login to align with other form elements.
ul {
list-style-type: none;
}
ul li {
margin-bottom: 10px;
}
ul li:last-child input:first-child {
margin-left: 85px;
}
label {
width: 80px;
display: inline-block;
}
<div>
<ul>
<li>
<label for="username">Username</label>
<input type="text" name="username" id="username">
</li>
<li>
<label for="password">Password</label>
<input type="text" name="password" id="password">
</li>
<li>
<input type="reset" value="Login" />
<input type="submit" value="Cancel" />
</li>
</ul>
</div>
It is better to use Bootstrap for more professional look and it gives responsive layout. Anyway here i have used normal css. Please check out the fiddle: https://jsfiddle.net/NayanaDas/5zg2qqum/ . Try this:
HTML:
<body>
<br />
<div class="form-group">
<label style="width:50%;">UserName:</label>
<input type="text" name="user name" size="15" class="form-input"/>
</div>
<br />
<div class="form-group">
<label style="width:50%;">Password:</label>
<input type="text" name="password" size='15' class="form-pswd"/>
<input type="hidden" name="Password" size="15" /> <br />
</div>
<br>
<div align="center" style="width:100%;">
<input type="reset" value="Login" />
<input type="submit" value="Cancel" />
</div>
</body>
CSS:
.form-group{
width:100%;margin-left:5%;
}
.form-input{
width:50%;margin-left:5%;
}
.form-pswd{
width:50%;margin-left:6%;
}
I want to avoid line break between the buttons login and Register,So that the two buttons come in the same line
<h1>Are You ready to take the quiz</h1>
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
You can use css for that.
form {
display: inline-block;
}
In order to prevent every form element you're using to get inlined, I'd attatch a class to those which you want to inline.
<form class="inline" action="link1">
<input type="submit" value="Login" />
</form>
<form class="inline" action="link2">
<input type="submit" value="Register" />
</form>
form.inline {
display: inline-block;
}
Demo
Here a solution, I used a container : sameLine so evrithing is in that div will be on the same line
.sameLine{white-space: nowrap;}
.sameLine * {
display: inline;
}
<h1>Are You ready to take the quiz</h1>
<div class="sameLine">
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
</div>
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
I have a fieldset with a text input box, with a submit button. I want them to appear in a single row but the fieldset appears in one row, and then the continue appears in the next. Here's my html:
<label><fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>
</label>
I've tried all combinations of making the button or the fieldset inline, inline-block, float:left, float:right. none of them are resulting in what I want. I just want a single row displaying both of these elements. How do I go about doing this?
Not sure why you wrapped your code in a label tag:
http://jsfiddle.net/hyxaK/1/
<fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>
.registration_code { display:inline-block; }
Either you can do this,
<label>
<fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
<input type="button" class="button2" name="Submit" value="Continue"/>
</fieldset>
</label>
or this,
fieldset{
display : inline-block;
}
DEMO
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.