I have a question.. I have a div with 3 checkboxes and a textfield, so a form basically. The form is centered but now the checkboxes all align in the centre as well, and it does not look good. Does anyone know, how I can make them below each other?
<div class="forms" align=center>
<form action="/sendmail.php" method="post">
<p><input type="checkbox" name="xy" value="xy"> xy </p>
<p><input type="checkbox" name="zy" value="zy"> zy </p>
<p><input type="checkbox" name="XS" value="XS"> XS </p>
<p>Extra: <textarea name="extra" cols="30" rows="7" wrap="wrap"></textarea></p>
<input type="submit">
<input type="reset">
</form>
</div>
wrap the checkboxes in a div. In my snippet sample they a wrapped inside a div with the class .wrapper.
Then I use CSS attribute width: min-content;to make the width of that div only as wide as the largest content line. However this will cause an unwanted wordbreak behavior that is fixed with white-space: nowrap;.
last but not least, I give it a text-align: left; as the checkboxes are at the left side. That way they align below each other as they are aligned to the left side of the div.
.wrapper {
width: min-content;
white-space: nowrap;
text-align: left;
}
<div class="forms" align=center>
<form action="/sendmail.php" method="post">
<div class="wrapper">
<p><input type="checkbox" name="xy" value="xy"> xy </p>
<p><input type="checkbox" name="zy" value="zy"> zy </p>
<p><input type="checkbox" name="XS" value="XS"> XS </p>
</div>
<p>Extra: <textarea name="extra" cols="30" rows="7" wrap="wrap"></textarea></p>
<input type="submit">
<input type="reset">
</form>
</div>
Related
Suppose I have a web page with a form:
<form>
<label for="FirstName">First:</label>
<input name="FirstName" type="text">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text">
<label for="LastName">Last:</label>
<input name="LastName" type="text">
</form>
If I size the browser window small enough, I get a line break between the label that says "Middle:" and the "MiddleName" input. It would be better to put a break between labels and input fields that are not related, e.g. break between "FirstName" input and label for "MiddleName", and/or between input "MiddleName" and label for "LastName". Obviously I can add <br/> tags, but is there a good way to keep the related items together, and still use only 1 line when the browser window is wide enough?
I realize this is a contrived example, but this is pattern I am having trouble with in several more complicated real world forms.
Put the inputs inside the labels, you don't even need the for attributes. Then style the labels with white-space: nowrap to prevent automatic line breaks.
label { white-space: nowrap; }
<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>
Surround the related elements within an wrapper and then prevent line breaks inside the wrapper with CSS:
.wrapper {
white-space: nowrap;
}
<form>
<span class="wrapper">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrapper">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrapper">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
You can surround each set with a wrapper that is display: inline-block;
.wrap {
display: inline-block;
/* Only include this if
you don't want the text within the spans
to wrap when the window is small enough
*/
white-space: nowrap;
}
<form>
<span class="wrap">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrap">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrap">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
I use getuikit for form styling, they do it with something like this:
HTML
<label>My label</label>
<div class="controls"><input type=text/></div>
CSS
label {
float:left;
margin-top:5px; //to center the label vertically
width: 200px;
}
.controls {
margin-left:200px;
}
It doesn't break semantics. Putting input inside label is little strange :)
I want to display the inputbox with center alignment which is in div tag.Now I did this by using
<div class="nam">
<center><input type="text" name="name"></center>
<center><input type="text" name="pass"></center>
<center>
... </center>
</div>
I want to do this with css code.
Try following
HTML Code:
<div class="nam">
<div>
<input type="text" name="name">
</div><div>
<input type="text" name="pass">
</div>
</div>
CSS:
.nam{
text-align : center;
}
The <center> element was deprecated because it defines the presentation of its contents -- it doesn't describe its contents.
There are different ways of centering the things with CSS.
My suggestions is to adding text-align: center to your class nam.
.nam {
text-align: center;
}
<div class="nam">
<input type="text" name="name">
<input type="text" name="pass">
</div>
I have a <div> with display: inline; property and I want to center it.
If I put margin: 0 auto works without display but I need the display not to take all the space like it's a block.
Html
<div id="login1">
<fieldset id="login2">
<form method="post" action="register.php">
<label>Nombre: </label>
<input type="text" name="nombre" placeholder="Nombre de usuario"><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="LogIn">
<input type="reset" value="Reset">
</form>
</fieldset>
</div>
Css
#login1 {
display: inline-block;
text-align: center;
}
I want to center all the <div>
Some idea?
Put text-align: center on the container (the element that contains your div).
And your div shall be centered.
I'm working on a simple contact form, but I'm having some issues making my content float next to each other.
<article>
<form action="contact.html">
<label for="naam">Naam*:</label>
<input type="text"
id="naam"
required="required"/>
<br/>
<label for="voornaam">Voornaam*: </label>
<input type="text"
id="voornaam"
required="required"/>
<br/>
<label for="straat">Straat: </label>
<input type="text"
id="straat" />
<br/>
/*Some code is left out */
<label for="message">message*: </label>
<textarea rows="4"
cols="16"
required="required">
</textarea>
<br/>
<input type="submit"
value="Verzenden"
id="btnVerzenden" />
</form>
</article>
And this is my current CSS
label
{
width:100px;
float:left;
}
How can I make my "Message" textarea float on the right side of the article while the rest is on the left side?
UPDATE
#PSCoder solved it!
This fiddle shows the solution - http://jsfiddle.net/8PvkV/
Give your label : display: inline-block;
label {display: inline-block}
Here's a sample:
http://jsfiddle.net/Riskbreaker/35Hyh/1/
You want to either move the textarea element before the rest or float the form to the right.
Because of the order that you have entered the elements, the "Message" text box is cleared and then floated.
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.