I'm trying to make a Two label and input in one line can anyone help me to build these forms like this. I want to make this like this image. i need to make input below the label and them in one lineImage
.first_line_left,.first_line_right,.first_line_right_far{
float: left;width:50%;box-sizing: border-box;
}
label,input{
width:10%,float:left;box-sizing:border-box;
}
input{
padding: 8px 10px;box-sizing: border-box;
}
.first_line_left,.first_line_right,.first_line_right_far{
width: 33.33%;float: left;padding: 10px;
box-sizing: border-box;
}
<!DOCTYPE>
<html>
<head>
<title>form</title>
</head>
<link rel="stylesheet" type="text/css" href="form.css">
<body>
<h1>Personal Details</h1><hr>
<form action="" method="post">
<div class="First_line_left">
<label for="title">Title</label>
<select>
<option value="0"></option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div class="First_line_right">
<label for="Delegate_First_name">Delegate First</label>
<input type="text" name="Delegate_First_name" placeholder="Delegate First name">
</div>
<div class="First_line_right_far">
<label for="Delegate_last_name">Delegate last Name</label>
<input type="text" name="Delegate_last_name" placeholder="Delegate last Name">
</div>
</div>
</div>
</form>
</body>
</html>
mgur.com/Muvyh.png
You need to use CSS to make the form style like that.
I have created an example code in JS fiddle based on your requirements.
https://jsfiddle.net/rajeevRF/8vu73Lso/8/
.left_half,.right_half{width:50%;float:left;padding:10px;box-sizing: border-box;}
label,input,select{width:100%;float:left;box-sizing: border-box;}
input{padding:8px 10px;box-sizing: border-box;}
.first_left,.first_center,.first_right{width:33.33%;float:left;padding:10px;box-sizing: border-box;}
<html>
<form action="" method="post">
<div class="left_half">
<label>Name</label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="right_half">
<label>Phone</label>
<input type="text" name="phone" placeholder="Enter your phone">
</div>
<div class="first_left">
<label>Email</label>
<input type="text" name="email" placeholder="Enter your email">
</div>
<div class="first_center">
<label>Comments</label>
<input type="text" name="comment" placeholder="Enter your comment">
</div>
<div class="first_right">
<label>Subject</label>
<input type="text" name="subject" placeholder="Enter your subject">
</div>
</form>
</html>
Are you trying to make the label appear beside the input field, or make the input fields appear side by side as seen in your picture?
If you are using bootstrap, you may find this solution helpful: Form inline inside a form horizontal in twitter bootstrap?
Related
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>
I am trying to create a form with simple styling in Google Apps Script.
When adding the Google add-on stylesheet the text input and select boxes become misaligned. I need them to sit side by side.
JS Fiddle example
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
select {
width: 80%;
}
.width-10 {
width: 10%;
}
</style>
<form>
<div class="options" id="option1">
<input type="text" class="width-10" id="user-input1" value="" tabindex=8>
<select id="user-input6" tabindex=1></select><br>
<input type="text" class="width-10" id="user-input2" value="" tabindex=9>
<select id="user-input7" tabindex=2></select><br>
</div>
</form>
Because you are using the official style sheet for Google Add-ons, you can use the inline class. This will put text input fields and select option lists side by side.
<div class="inline form-group">
<label for="email">Your email:</label>
<input type="email" class="form-control" id="email" placeholder="you#gmail.com" value="example#gmail.com" required>
</div>
<div class="inline form-group">
<label for="eventName">What's the topic?</label>
<input type="text" class="form-control" id="eventName" value="App Testing" required>
</div>
You may need to remove your CSS in the <style> tag
I have this html snippet:
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
And I would like to select first fieldset in the form. This what I am doing:
form.job-manager-form:first-child {
background-color: red;
}
But it selects all fieldset elements. How does :first-child works?
JSFiddle is here.
You need to target the element you want and then say it's the first-child.
There is an excellent article explaining how these selectors works:
useful-nth-child-recipies
fieldset:first-child {
background-color: red;
}
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
fieldset:first-child {
background-color: red;
}
This will work. However, your first-child fieldset is set to display:none; so it will not actually show the background color.
It selects an element if it is the first child of its parent.
Your selector doesn't select any fieldsets. It selects the form.
The fieldsets have a (default) transparent background, so you can see the red through them.
To select the fieldset that is the first child of a form you would need:
form.job-manager-form > fieldset:first-child
I have two HTML forms. I want the second one to align to the right of the first one (not below it).
I fiddled (no pun intended) with "display: inline-block;"
The pertinent CSS:
.form {
display: inline-block;
}
The pertinent HTML:
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
</br>
. . .
</form>
<form>
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
</br>
</form>
The whole shebang can be seen here.
Is the solution to place the two forms in a table, or is there a more elegant element solution?
Use float...
form {
float: left
}
Stick a float:right on the 2nd form to align it to the right side.
When you use inline-block a width must be defined as inline just say to browser that you don't want to jump to the next line.
a best practice is to have a container then for each element you want side-by-side you put a percent value corresponding to 100% divided by the number of columns. Example : 100% / 2 columns make columns of 50% each; 100% / 4 columns would make 25% each; etc.
make sure that you columns have padding/margin/border to 0 as it wouldn't work otherwise and if you need padding, place it in a child element inside the column element.
everythings is better with examples so here it is :
input{
width: 100%;
margin: 5px 0 0 -2px;
}
form{
/* we can add geometry to our form */
border: 4px solid #ddd;
margin: 6px;
padding: 10px;
}
.container{
padding: 0;
}
.col{
vertical-align: top;
display: inline-block;
padding: 0;
margin: 0;
border: none;
}
.col:hover{
/* just to see it */
box-shadow: 0 0 2px 0px red;
}
.col-half{
width: 50%;
}
.col-quater{
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>example 1</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Some form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Another form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
<h1>example 2</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>1/2 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>Another 1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
</body>
</html>
Bonus:
Usually, frameworks works on a grid system : If we take bootstrap as an example, they work on a 12 col grid. meaning that if you use the class col-6 6 being half of 12 you get 50% width, and there goes for all other sizes. 12 is very flexible, the more cols your grid have, the more possibility it have (and the more css you must write) in my example, I made a gird of 4. we could rename col-half for col-2 and col-quater for col-1 so that makes sense as a grid system
First of all, you accidently used a .form class instead of using form for your selector.
Second, adding vertical-align: top to your form selector will allow it to align to the right of your first form as long as there is space.
form {
display: inline-block;
vertical-align:top;
}
However, if your view is too narrow it will slide underneath anyways.
You added a . (.form) means class selection but your html tag doesn't contain a class
So remove the . should make your form work correctly.
form {
vertical-align:top;
display:inline-block;
}
Try this :
form {
display: inline-block;
vertical-align:top; // Added
}
What about using Bootstrap and their helper classes to accomplish this? Especially if you already have Bootstrap loaded? Could use their grid to accomplish a 2 column layout.
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" />