I have a form inside a div. I want to move the div to the right, and I can do that if I use an inline style like this:
<div class="joinform-page" style="margin-left: 30%;>
I want to move it using margin-left: 30% in the css, not as an inline style because inline styles make media queries more difficult. But it ignores any margin changes I make in the css.
Here's the full html:
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
Here's the relevant css class:
.joinform-page {
width: 80%;
padding: 0% 0 0;
margin-top: -2.5%;
margin-left: 30%; }
Why doesn't this div move when I use margin-left in the css,. not as an inline style.
Thanks for any help.
Actually It was working with the same piece of code.
If it still doesn't work, there might be styling for parent element or another styling for same element.
The CSS you have above works as you would expect. Please ensure your CSS is correctly imported like so:
<!-- Where FILE_NAME is the name of your .CSS file -->
<link rel="stylesheet" type="text/css" href="FILE_NAME.css">
.joinform-page {
width: 80%;
padding: 0% 0 0;
/*margin-top: -2.5%;*/
margin-left: 30%;
}
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
Related
I have this HTML form that previously I had the width of the input fields to be 100% but I made some changes and did not know what caused the change.
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2"/>
</form>
I have already added the following CSS in my HTML
.input {
width: 100%;
}
.textarea {
width: 100%;
}
.form {
width: 100%;
}
Fiddle link - https://jsfiddle.net/v83g4003/
input textarea form are HTML tags not a class. You have used . in css before HTML tags which indicates it as a class thats why your css is not working.
Just remove . in your css
Stack Snippet
input {
width: 100%;
}
textarea {
width: 100%;
}
form {
width: 100%;
}
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2" />
</form>
Have a look at this edited jsfiddle: jsfiddle example
Also using width:100% as a html attribute will not work, in html you will need to do it like 'width="100%"'. Though using a CSS is better since it seperates your design from your logic (as you probably already knew)
I'm having trouble getting items to vertically align in my DIV on Mac Chrome. Ideally I'd like to get this to work on browsers that run on Mac, but I'll start with Mac Chrome. My JSFiddle is here -- https://jsfiddle.net/f77ajz4d/ . This is my HTML
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
and here's my style
#search_form
{
background-color:red;
display:table-cell;
text-align: center;
vertical-align:middle;
}
It is not an option to assign a fixed height to the DIV. Given this, what am I missing in order to get my items to vertically align?
You can do something like:
#search_form {
background: red;
padding: 5px;
}
input {
vertical-align: middle;
}
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
This ensures that all input elements are vertically aligned to eachother, with an even padding around them.
this is my code: html
<div class="fieldDate">
<label for="statusEmp">Status of Employee:</label>
<select name="statusEmp" id="statusEmp">
<option value="0">Active</option>
<option value="1">Inactive</option>
</select>
<label for="fromDate">From:</label>
<input type="date" name="fromdate" id="fromDate">
<label for="toDate">To:</label>
<input type="date" name="todate" id="toDate">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<input type="submit">
</div>
css :
.fieldDate{
float: right;
margin-right: 200px;
}
I want to have space between the three fields: status, from/to,search
how do i do it?
they all appear in the same line( which is what i want) without space in between the fields.
<style>
#from,#toDate,#search{width: 30%;float:left;}
</style>
<div class="fieldDate">
<div id="from">
<label for="fromDate">From:</label>
<input type="date" name="fromdate" id="fromDate">
</div>
<div id="toDate">
<label for="toDate">To:</label>
<input type="date" name="todate" id="toDate">
</div>
<div id="search">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
</div>
<input type="submit">
</div>
You have to define three different div(s) and provide width as you require.
Float them all left, and give the first two margin-right (or the last two margin-left) at wish:
<label for="fromDate">From:</label>
<input type="date" name="fromdate" id="fromDate">
<label for="toDate">To:</label>
<input type="date" name="todate" id="toDate">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
input#fromDate, input#toDate, input#search {
float: left;
}
input#fromDate, input#toDate {
margin-right: 10px;
}
In this example, margin-right will "push" elements on the right of it by "10px", thus creating the empty space as you wanted.
use CSS tables and label for a smarter purpose....wrap your fields inside label and assign css to it...no need to use a separate class or id!! :)
Working demo
Please note that display:table is supported IE8 onwards
CSS
#table {
display:table;
width:100%;
}
label {
display:table-cell;
white-space:nowrap;
margin-right:4px;
}
HTML
<div id="table">
<label for="statusEmp">Status of Employee:
<br />
<select name="statusEmp" id="statusEmp">
<option value="0">Active</option>
<option value="1">Inactive</option>
</select>
</label>
<label for="fromDate">From:
<br />
<input type="date" name="fromdate" id="fromDate" />
</label>
<label for="toDate">To:
<br />
<input type="date" name="todate" id="toDate" />
</label>
<label for="search">Search:
<br />
<input type="search" name="search" id="search" />
</label>
</div>
<input type="submit" />
I would like to produce the following form style:
Name Email
[.................] [.................]
Subject
[.................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
The HTML code I have is:
<form name="message" method="post">
<section>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
At the moment it is producing:
Name [...................]
Email [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
What would be the best way to do this? I keep getting in a muddle my floats!
I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.
input, label {
display:block;
}
<form name="message" method="post">
<section>
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div style="float:left;">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
<br style="clear:both;" />
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
Probably a bit late but this worked for me.
i simply used column flex-direction on the label and input elements
HTML
<form id="survey-form">
<label for="name">Name</label>
<input type="text" id="name">
<label>Email</label>
<input type="email" id="email">
</form>
CSS
label,input{
display:flex;
flex-direction:column;
}
You could try something like
<form name="message" method="post">
<section>
<div>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
</section>
<section>
<div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</div>
<div class="full">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</div>
</section>
</form>
and then css it like
form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }
I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.
To avoid this make the divs with the smaller input fields inline-block rather than float left.
This:
<div style="display:inline-block;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
Rather than:
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
I'd prefer not to use an HTML5 only element such as <section>. Also grouping the input fields might painful if you try to generate the form with code. It's always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :
CSS
label, input {
display: block;
}
ul.form {
width : 500px;
padding: 0px;
margin : 0px;
list-style-type: none;
}
ul.form li {
width : 500px;
}
ul.form li input {
width : 200px;
}
ul.form li textarea {
width : 450px;
height: 150px;
}
ul.form li.twoColumnPart {
float : left;
width : 250px;
}
HTML
<form name="message" method="post">
<ul class="form">
<li class="twoColumnPart">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</li>
<li class="twoColumnPart">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</li>
<li>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" type="text" name="message"></textarea>
</li>
</ul>
</form>
There is no need to add any extra div wrapper as others suggest.
The simplest way is to wrap your input element inside a related label tag and set input style to display:block.
Bonus point earned: now you don't need to set the labels for attribute. Because every label target the nested input.
<form name="message" method="post">
<section>
<label class="left">
Name
<input id="name" type="text" name="name">
</label>
<label class="right">
Email
<input id="email" type="text" name="email">
</label>
</section>
</form>
https://jsfiddle.net/Tomanek1/sguh5k17/15/
Using flex-direction: column; on the label elements will place the labels above their boxes, however it will also lock all the boxes in a long column. To get more than one box per line, with the label above the boxes you must pair them with divs. Here is an example of both:
#survey-form1 label {
display:flex;
flex-direction:column;
}
#survey-form2 {
display: flex;
flex-direction: row;
}
.inputPair {
display: flex;
flex-direction: column;
margin-right: 10px
}
<form id="survey-form1">
<label for="name1">Name</label>
<input type="text" id="name1">
<label for="email1">Email</label>
<input type="email" id="email">
</form>
<form id="survey-form2">
<div class="inputPair">
<label for="name2">Name2</label>
<input type="text" id="name2">
</div>
<div class="inputPair">
<label for="email2">Email2</label>
<input type="email" id="email2">
</div>
</form>
10 minutes ago i had the same problem of place label above input
then i got a small ugly resolution
<form>
<h4><label for="male">Male</label></h4>
<input type="radio" name="sex" id="male" value="male">
</form>
The disadvantage is that there is a big blank space between the label and input, of course you can adjust the css
Demo at:
http://jsfiddle.net/bqkawjs5/
OR....you can use flexbox with flex-direction: column on the imputs and they will arrange like bliss.
I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
Put style="float:left" on each of your divs:
<div style="float:left;">...........
Example:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div style="clear:both;"> </div>
Of course, you can also create classes in the CSS file:
.left{
float:left;
}
.clear{
clear:both;
}
And then your html should look like this:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div class="clear"> </div>
More Info:
CSS Float Clear Tutorial
The default display style for a div is "block." This means that each new div will be under the prior one.
You can:
Override the flow style by using float as #Sarfraz suggests.
or
Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
For the sake of bandwidth saving, we shouldn't include <div> for each of <label> and <input> pair
This solution may serve you better and may increase readability
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>
The css for above form would be
.form > label
{
float: left;
clear: right;
}
.form > input
{
float: right;
}
I believe the output would be as following:
I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements.
You can do this in the div tag by inserting:
style="display:inline-block;"
Or in a CSS stylesheet with this method:
div { display:inline-block; }
Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-)
You should put the input for the last name into the same div where you have the first name.
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. For example:
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
You could use the {display: inline-flex;}
this would produce this:
inline-flex