I have HTML code
<form id="answers">
blue
<input id="0" type="radio">
red
<input id="1" type="radio">
pink
<input id="2" type="radio">
<input type="submit">
</form>
and I want to have each element in the new line. I don't want to use stuff like <br>. In CSS file I tried do this: display: block but nothing's changed.
#answers input {display: block;}
this will make every input in its own line.
If you wish to have every input with its label together in a line you should do something like
<form id="answers">
<label>blue <input id="0" type="radio"></label>
<label>red <input id="1" type="radio"></label>
<label>pink <input id="2" type="radio"></label>
<input type="submit">
</form>
css:
#answers label {display: block;}
http://jsfiddle.net/barakedry/y6p54vzg/
You may need to use box-sizing:border-box;.
There's more information on this very topic in this thread: input with display:block is not a block, why not?
Related
I have a form:
<form action="thankyou.php" method="post">
<label>Name:</label>
<input class="contakt-input" type="text" name="firstname"/>
<label for="">E-mail</label>
<input class="contakt-input" type="text" name="secondname"/>
</form>
And I would like to have all elements underneath another, that is, I would like to have it look like this:
Name:
[Field]
E-mail:
[Field]
But right now, everything is just right next to each other - how would I fix this?
Add the following css
label { display:block }
Use display: block in css for each element you want on a new line.
Just use 'br' tag after each line in your code like this
<form action="thankyou.php" method="post">
<label>Name:</label><br>
<input class="contakt-input" type="text" name="firstname"/><br>
<label for="">E-mail</label><br>
<input class="contakt-input" type="text" name="secondname"/>
</form>
Here is a demo.
There are two ways to solve it.
first is this: use the tag <br>. It works like the button "enter" of the keyboard.
<form action="thankyou.php" method="post">
<label>Name:</label><br>
<input class="contakt-input" type="text" name="firstname"/>
<br>
<label for="">E-mail</label><br>
<input class="contakt-input" type="text" name="secondname"/>
</form>
Second is this: you can set the attribute called display to make it like a block element. like this:
<form action="thankyou.php" method="post">
<label>Name:</label><br>
<input class="contakt-input" type="text" name="firstname"/>
<br>
<label for="">E-mail</label><br>
<input class="contakt-input" type="text" name="secondname"/>
</form>
label, input {display: block;}
instead of putting
label {display: block;}
it works for me
input {display: block;}
try this css property in form element
display: table-caption;
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
Browser is Firefox.
I have a list of 15 radio buttons. After displaying them like this:
<div class="abcd" style="margin-left:10px;">
<form id='some'....>
<legend>Select Item type :</legend>
<fieldset style="display:block;float:left;">
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
...
</fieldset>
<p>
<input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
<button type="button" id="xxx" style="width:100;">Process</button>
</p>
</form>
</div>
Everything is displaying in one line. I am not sure how to display the textbox under radio buttons with some space in between.?
pl help.
The problem with your style is the float: left, you have to clear the "floatness".
At the p tag, include the clear:both, it tells the browser that nothing can float at its left or right.
<div class="abcd" style="margin-left:10px;">
<form id='some'>
<fieldset style="display:block;float:left;">
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
</fieldset>
<p style="clear:both">
<input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
<button type="button" id="xxx" style="width:100;">Process</button>
</p>
</form>
</div>
paste
<div style="clear:both"></div>
after the fieldset.
When using the float attribute you have to clear it so that other elements won't appear floating next to it. try adding clear: both to the css of the input box like this:
<input placeholder="Enter Name/Value" name="Name" id="NameID" size="40"
style="clear:both; display:block;"/>
Try adding the css rule to the radio buttons themselves. Like this:
<style type="text/css">
.group0
{
display:block;
}
</style>
This assumes group0 is the group with all the radio buttons.
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.
I have placed a form on a page which looks like this:
<form id="editClassList" name="editClassList" method="get" action="EditClassList">
<label>
<input name="class-to-add" id="class-to-add" size="42" type="text">
</label>
<label>
<input name="save-class-btn" id="save-class-btn" value="Save Class(es)" type="submit">
</label>
</form>
But when it get's rendered by a browser it comes out like this:
<form id="editClassList" name="editClassList" method="get" action="EditClassList">
<label>
<input style="display: none;" name="class-to-add" id="class-to-add" size="42" type="text">
</label>
<label>
<input name="save-class-btn" id="save-class-btn" value="Save Class(es)" type="submit">
</label>
</form>
For some reason style="display: none;" is being added, and I cann't understand why. This results in the text box not displaying.
It sounds like you might have some javascript code that is adding the display:none; tag after the page loads. (Or You could have that in the CSS, but I don't think Firebug would show that in the DOM inspector)