Is there any way to use clear like line break e.g.:
<form action="test.html">
<label for="name">What is your name?</label>
<input type="text" id="name" name="name">
</form>
input {
clear: left;
}
Or it used only with floats?
If not what is the best way to break the line befor input in above example? (p, input {display: block;} or smth else?)
According to W3C XHTML Standards, you are not supposed to put <label> and <input /> tags directly inside <form>. So, either you can move them inside a <div>, this way:
<form action="test.html">
<div><label for="name">What is your name?</label></div>
<div><input type="text" id="name" name="name"></div>
</form>
Or, more semantically,
<form action="test.html">
<ul>
<li><label for="name">What is your name?</label></li>
<li><input type="text" id="name" name="name"></li>
</ul>
</form>
And style the <ul> and <li>. Or if you prefer not to change the markup, you can give a style the label or input to be block.
label, input {display: block;}
Set label to display: block. No markup change, only CSS.
Related
thats my code
<form class="contactForm">
<label> Your name
<input type="text" name="name" placeholder="Your name">
</label>
</form>
I want my input element to be shown beneath my label element. Thought its a problem of block element but when i style in css input or label to be shown as a block nothing happens. Thanks for help
While the label can be setup that way, try making it the input's sibling instead of parent. Also, give it the for attribute to match an input's name attribute.
<form class="contactForm">
<label for="name">Your name</label>
<input type="text" style="display:block" name="name" placeholder="Your name">
</form>
Once the label is being used like this, you can see display:block works as intended. Just want to add: in a final solution it's poor practice to use style tags directly, and I recommend creating easy to understand CSS classes.
Hope that helps.
A <span> with display: block set on it should do the trick - and, unlike using a <div>, it's valid HTML. Just make sure the parent label isn't still set to display: inline - which is default.
Example:
label,
label > span {
display: block;
}
<form>
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
Would a <br /> work?
<form class="contactForm">
<label> Your name
<br />
<input type="text" name="name" placeholder="Your name">
</label>
</form>
<form class="contactForm">
<label> Your name
<input style="display:block;" type="text" name="name" placeholder="Your name">
</label>
</form>
The text in the label doesn´t have a tag. If you add a <span>, you can add some style to that.
label span{
display: block;
}
<form class="contactForm">
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
You just have to use the input fields within div
<form class="contactForm">
<label> Your name </label>
<div>
<input type="text" name="name" placeholder="Your name">
</div>
</form>
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;
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
I have a very simple HTML layout I'm trying to implement. It is something like this:
A Label: [Input ]
Another Label: [Input ]
The Last Label: [Input ]
In the past, I'd just go ahead and use a table for this. Otherwise, it's a pain getting the input controls to line up correctly.
Can anyone suggest a simple and reliable way to implement this layout without using a table?
Thanks.
You can use display: inline-block
<style type="text/css">
label { display: inline-block; width: 200px; }
ul { list-style: none; }
</style>
<ul>
<li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
<li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
<li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>
However, in order for this to line up vertically, you either have to wrap the label-input pairs in another tag (such as <li> or <div>) or put linebreaks after the inputs.
<style>
label { width: 200px; float:left; clear:left; }
input { float:left;}
</style>
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
With the added benefit that, if the horizontal space isn't sufficient, the inputs will wrap below the labels.
http://jsbin.com/anuziq (narrow down your browser window)
If you don't actually want them to wrap around, I suggest this approach:
<style>
label { white-space: nowrap; }
span { width: 200px; display: inline-block; }
</style>
<form>
<label>
<span>Full Name:</span>
<input type="text" name="fullname">
</label>
<label>
<span>Email Address:</span>
<input type="text" name="email">
</label>
</form>
From my experience, structuring the HTML like that usually allows for any layout you can possibly think of. Want the inputs always below the label? Use display:block on the span elements. Want the text to the right of the input? Just use float:right on the span.
Bonus here is that you don't need the for and id attributes to connect the label with the input. They're only really necessary, if you can't put the label right next to the input, like in 2 separate table cells.
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.