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;
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>
To turn off autocompletion in HTML I use:
<input type="text" name="foo" autocomplete="off" />
But this forces me to specify autocomplete="off" in every input field of my application. Is it possible to define autocomplete="off" in a CSS style?
You can just apply it to the form tag.
Using CSS you cannot achieve it. You can use client side script for example using Jquery
$('input').attr('autocomplete','off');
If you are not using Jquery or scripting language then you have to stick to HTML only.
As TeT Psy said you can apply it in form tag like
<form id="Form" runat="server" autocomplete="off">
you can disable all the autocompletes using form
<form id="Form1" runat="server" autocomplete="off">
U can use autocomplete="off" attribute on form tag. Like
<form id='test' autocomplete="off">
<input ...
<input ..
...
</form>
You can set it on form element if you wants to set autocomplete: off for all input elements of form. And if wants to make it on for some selected input you can apply autocomplete: on on that input.
.form {
padding: 30px 0;
width: 300px;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form" autocomplete="on">
<div class="form-group">
First name:<input type="text" class="form-control" name="fname">
</div>
<div class="form-group">
Last name:<input type="text" class="form-control" name="lname" autocomplete="off">
</div>
<div class="form-group">
E-mail: <input type="email" class="form-control" name="email">
</div>
<input type="submit">
</form>
No you can't do this using css, but there are 2 other ways to do it:
1- you can apply it for the form
<form autocomplete="off" >
<input type="text" name="name">
<input type="text" name="mail">
</form>
2- you can handle it using js
var eles = document.getElementsByTagName('input');
for(i=0; i<eles.length; i++){
eles[i].setAttribute("autocomplete", "off");
}
https://jsfiddle.net/ng1mb77m/1/
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?
i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.
So far i have:
<form action="#">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
http://jsfiddle.net/A8RaG/
So i need inputs on the same line and labels must be on the top of each input.
How do i do that?
Another solution is putting a div around each label/input combination and setting the css to float left
HTML
<form action="#">
<div>
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div>
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
CSS
form div{
float: left
}
jsFiddle
you can put a div around each label and block, and in the css put this div in inline-bloc
like :
<form action="#">
<div class = "css">
<label for="city">City</label>
<input type="text" id="city"/>
</div><div class="css">
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
and in the CSS:
.css{
display : inline-block;
}
You could also just use <br />. It will work for a form as well.
If you use Bootstrap you need to use the css of bootstrap !
Use class="form-horizontal" or class="form-inline"
You can try this with no css added :
<form action="#" class="form-horizontal">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
Simple no ?
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.