How to Place Form Inputs on Their Own Lines - html

I am doing some work and have a form which I want to look like a list (think <ul> format, just without the bullets).
However, right now all the inputs are inline with each other:
Item 1 Item 2 Item 3 etc
I want it to look like:
Item 1
Item 2
Item 3
etc
Code:
<form action = "display.php" method = "post">
<h1>My form</h1>
<input type="checkbox" name="movie[]" value="action" />
<label for="male">action</label>
<br><br>
<input type="checkbox" name="movie[]" value="adv" />
<label for="male">adv</label>
<br><br>
<h1>My form</h1>
<input type="checkbox" name="movie[]" value="com" />
<label for="male">com</label>
<br><br>
<input type="checkbox" name="movie[]" value="rom" />
<label for="male">rom</label>
<br><hr>
<input type="submit" id="submitbutton" name="search" value="Submit">
</form>
I was also wondering if I could move the submit button and put it at the bottom of the page, so the form was on the top half of the page and then I wanted to move the button in the middle, how that would be possible? Right now the form is in a perfect position, but I would like to move the button so it's on the bottom half of the page in the middle.
Thanks again for the help.

TL:DR; http://codepen.io/anon/pen/YqQvoE (here is the code you need)
Long(er) explanation:
I would recommend just putting <br /> tags between your lines. There are several ways to go about it, but that is the easiest way.
As for the button being centered at the bottom, just apply the following CSS to it (and make sure to set the id of the button accordingly):
#submitbutton {
display:block;
margin:auto;
}
(also, your <form> tag needs to be closed)
By the way, as a best practice issue, make sure the for="" for each <label> is different. It should correspond to the name="" of the label's associated <input>.

You need to close your form as well as your div. Also, surround the button in its own special span or div that has absolute positioning. Check out this example:
<form action = "display.php" method = "post">
<input type="checkbox" name="movie[]" value="action" />
<label for="male">action</label>
<input type="checkbox" name="movie[]" value="adv" />
<label for="male">adv</label>
<input type="checkbox" name="movie[]" value="com" />
<label for="male">com</label>
<input type="checkbox" name="movie[]" value="rom" />
<label for="male">rom</label>
<span style="position: absolute; bottom: 0px; right: 0px; left: 0px; text-align: center;">
<input type="submit" name="search" value="Submit">
</span>
</form>

Related

Check Radio box when pressing label

I have some radio buttons and i would like them to be checked after i click their label.
this is my code before it has been rendered.
div class="btn-group-vertical max-width-100 btn-group-for-partial row col-xs-12" data-toggle="buttons">
#foreach (var x in #Model.dwom.Options)
{
<label for="#x"><input type="radio" name="elu.Answer" id="#x" value="#x"/>#x</label><br />
}
</div>
this is my code after it has been rendered.
<label for="Poinsettia">
<input type="radio" name="elu.Answer" id="Poinsettia" value="Poinsettia" />Poinsettia</label>
<br />
<label for="Mistletoe">
<input type="radio" name="elu.Answer" id="Mistletoe" value="Mistletoe" />Mistletoe</label>
<br />
<label for="Ivy">
<input type="radio" name="elu.Answer" id="Ivy" value="Ivy" />Ivy</label>
<br />
<label for="Holly">
<input type="radio" name="elu.Answer" id="Holly" value="Holly" />Holly</label>
<br />
now on my site it doesn't work for some reason, but in this jsFiddle it does: jsFiddle.
the weird thing is that you can see it being clicked, as in it gets that bevel they do before you release the click.
Hopefully someone here can help me in the right direction to get this working again.
Okay nevermind i was an idiot.
the solution was the data-toggle that my outside div had, it shouldn't have buttons inside it.

How do I change the position of a radio button in html?

I am programming a webpage that uses a series of radio buttons and drop down menus to change the data that is displayed on the screen. Each radio corresponds to one of the drop down menus and I want to line them up but I can't figure out how to get the third one to appear to the right of the other two instead of below them. Can anyone help?
Here's my code:
<form action="" style="float: left">
<input type="radio" name="yearLessGreaterOption" value="<" onchange="setYearLessGreaterFilter(this.value)"><
<input type="radio" name="yearLessGreaterOption" value="=" onchange="setYearLessGreaterFilter(this.value)" checked>=
<input type="radio" name="yearLessGreaterOption" value=">" onchange="setYearLessGreaterFilter(this.value)">>
</form>
<form action="">
<input type="radio" name="roundLessGreaterOption" value="<" onchange="setRoundLessGreaterFilter(this.value)"><
<input type="radio" name="roundLessGreaterOption" value="=" onchange="setRoundLessGreaterFilter(this.value)" checked>=
<input type="radio" name="roundLessGreaterOption" value=">" onchange="setRoundLessGreaterFilter(this.value)">>
</form>
<form action="">
<input type="radio" name="goalsH1LessGreaterOption" value="<" onchange="setGoalsH1LessGreaterFilter(this.value)"><
<input type="radio" name="goalsH1LessGreaterOption" value="=" onchange="setGoalsH1LessGreaterFilter(this.value)" checked>=
<input type="radio" name="goalsH1LessGreaterOption" value=">" onchange="setGoalsH1LessGreaterFilter(this.value)">>
</form>
Here's a picture of the page in question:
Is there a reason you want them in form tags? If you remove the tags, they will appear aligned. Otherwise, adding style="float:left;" to the other form tags will do the trick.
In your case, adding the style="float: left" on the other forms should do what you want.

Radio buttons and text on same line

I am trying to put a bunch of radio buttons in a form. Each has a label, and all the way to the right of the label should be an X (hence the class:pull-right). For some reason, each time I add a new radio button, the X gets pulled more and more towards the center of the form. Here is the code; see link below for what it produces. Can someone please explain what is happening/how I can fix the alignments? Note: each successive X is shifting by an additional 8px, which happens to be the border-radius of the form; not sure if this is just a coincidence.
Edit: what I have tried: putting each set of input/label/p tags in its own row, and also span; neither worked. I have tried playing with the pull-right class but when I remove it, the X's actually get sent to the next line below.
<form style="border:2px black solid; border-radius: 8px; padding:5px;">
<input style="margin-left:5px;line-height:30px" id="labelA" type="radio" name="letter" value="A" checked="true"></input>
<label for="labelA" style="font weight:normal">A</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>
<input style="margin-left:5px;line-height:30px" id="labelB" type="radio" name="letter" value="B" checked="true"></input>
<label for="labelB" style="font weight:normal">B</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>`
<input style="margin-left:5px;line-height:30px" id="labelC" type="radio" name="letter" value="C" checked="true"></input>
<label for="labelC" style="font weight:normal">C</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
</form>
Output: http://imgur.com/zADCGRY
Removed the styles just to show what I did in a simple manner.
Generally I would not recommend using pull-right/left as it's effects will occur down the ENTIRE HTML until you call something like div class="clear" />.
Just use float if possible.
JSFiddle Demo
HTML
<form style="border:2px black solid; border-radius: 8px;">
<input id="labelA" type="radio" name="letter" value="A" checked="true" />
<span>A</span>
<span class="x">X</span>
<br>
<input id="labelB" type="radio" name="letter" value="B" checked="true" />
<span>B</span>
<span class="x">X</span>
<br>
<input id="labelC" type="radio" name="letter" value="C" checked="true" />
<span >C</span>
<span class="x">X</span>
</form>
CSS
.x {
float:right
}
Some further advice, one thing I have learned is if I am having issues styling stuff and I am jamming styles on individual elements, I am most likely thinking wayyy to hard on it. Try to keep CSS simple. :)

CSS style=display:block not working

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.

Place Radio Button Label Above Using CSS

I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?
THanks!
I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.
label {
float: left;
padding: 0 1em;
text-align: center;
}
<label for="myChoice1">Choice 1<br />
<input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>
<label for="myChoice2">Choice ABC<br />
<input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>
<label for="myChoice3">Choice qwerty<br />
<input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>
<label for="myChoice4">Choice--final<br />
<input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>
...and then use your own clearing method to move to the next line.
(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)
Instead of the following:
<label>Label <input type="radio" id="val" name="val" value="hello"></label>
You can use this and style the two separately:
<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">
I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)
<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>
So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.