I need to separate a form into 2 pieces. 3 fields on one site and the other field and submit button on the other. I gave them all one class called "contactform" exept for the button. I'm working with drupal, that means that i can ONLY work with the CSS. So i cant add any other HTML tag a class other then the inputfields.
What i have
What i'm trying to achieve
The only code i can provide is the HTML code inside "Inspect element", which i cant post here so i'll post in in a comment below
I hope you guys can help me out with this and thank you in advance!
This is what i can give you. Its a whole mess of code but there's nothing more i can do:
<form class="webform-client-form webform-client-form-14" action="/drupal/contact-0" method="post" id="webform-client-form-14" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield webform-component--naam form-group form-item form-item-submitted-naam form-type-textfield form-group"><input required="required" placeholder="Uw naam" class="contactform form-control form-text required" type="text" id="edit-submitted-naam" name="submitted[naam]" value="" size="50" maxlength="40" /> <label class="control-label element-invisible" for="edit-submitted-naam">Naam <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-email webform-component--email form-group form-item form-item-submitted-email form-type-webform-email form-group"><input required="required" class="email contactform form-control form-text form-email required" placeholder="Uw emailadres" type="email" id="edit-submitted-email" name="submitted[email]" size="50" /> <label class="control-label element-invisible" for="edit-submitted-email">Email <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textfield webform-component--onderwerp form-group form-item form-item-submitted-onderwerp form-type-textfield form-group"><input required="required" placeholder="Uw onderwerp" class="contactform form-control form-text required" type="text" id="edit-submitted-onderwerp" name="submitted[onderwerp]" value="" size="50" maxlength="255" /> <label class="control-label element-invisible" for="edit-submitted-onderwerp">Onderwerp <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textarea webform-component--bericht form-group form-item form-item-submitted-bericht form-type-textarea form-group"><div class="form-textarea-wrapper"><textarea required="required" placeholder="Uw bericht" class="contactform2 form-control form-textarea required" id="edit-submitted-bericht" name="submitted[bericht]" cols="50" rows="5"></textarea></div> <label class="control-label element-invisible" for="edit-submitted-bericht">Bericht <span class="form-required" title="This field is required.">*</span></label>
</div><input type="hidden" name="details[sid]" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-4vEZg04Y8Zevfr2GC6ONWVw8UI_4vxf3AL8NRrCFWtg" />
<input type="hidden" name="form_token" value="gNUgTXDR4TC0WhrHOwB7IaYOMOR6Nxz01qjuvrsVPPQ" />
<input type="hidden" name="form_id" value="webform_client_form_14" />
<div class="form-actions"><button class="webform-submit button-primary btn btn-primary form-submit" type="submit" name="op" value="Submit">Submit</button>
</div></div></form>
</section>
The CSS
.webform-client-form-14 {
float: left;
width: 45%;
margin-top: 20px;
margin-bottom: 30px;
}
.contactform {
border-radius: 0;
border: none;
}
The issue is that you set the whole form to 45% width, but we only want elements within it to be 45% width. Without being able to add wrappers to the html, you will need to target each input group one-by-one with either the :nth-child(n) css selector or the field group's custom class, eg: .webform-component--bericht.
Example:
.webform-client-form-14 .form-item:nth-child(1) {
width:45%;
display:block;
float:left;
}
try giving the text area display: block;
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 have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
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" />
can anyone help me?
I need to place a div after a textbox in a html form.
ie.label,textbox,and new div is in same line
please see my html code .i didn't add div code yet.
please can any one help me to add a div in same line without any modification to this codes.
because i made several css codes for aligning this labels and text boxes
<form action="operates/signup.php" method="post" name="signupform" id="signupform">
<label id="fnamelabel" for="fnam">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" />
<p>
<label id="lnamelabel" for="lnam">Last Name :</label>
<input type="text" name="lnam" id="lnam" tabindex="2" />
</p>
<p>
<label id="yemail" for="email">Your Email :</label>
<input type="text" name="email" id="email" tabindex="3" />
</p>
<p>
<label id="reemail" for="remail">Re-enter Email :</label>
<input type="text" name="remail" id="remail" tabindex="4" />
</p>
<p>
<label id="npass" for="password">New Password :</label>
<input type="text" name="password" id="password" tabindex="5" />
</p>
<p>
<label id="mskill" for="bskill">Main Skill :</label>
<select name="bskill" id="bskill" tabindex="6">
</select>
</p>
<p>
<input type="checkbox" name="termsanc" id="termsanc" tabindex="6" />
<label id="terms" for="termsanc">I agreed the Terms and Conditions</label>
</p>
<div id="signupbutton" onclick="document.forms.signupform.submit()"></div>
</form>
Thank you
You can style the div as inline, but you should rather use a span.
<label id="fnamelabel" for="fnam" style = "display:inline">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" style = "display:inline" />
<div id="newDiv" style = "display:inline"></div>
normally I wouldn't use in-line CSS like that, but as you didn't post the css i felt it'd be necessary.
First of all, let's work on that markup!
<form action="operates/signup.php" method="post" name="signup_form">
<label>First Name:
<input name="first_name"></label>
<label>Last Name:
<input name="last_name"></label>
<label>Your Email:
<input type="email" name="email"></label>
<label>Please Reenter Your Email:
<input type="email" name="validate_email"></label>
<label>New Password:
<input type="password" name="password"></label>
<label>Main Skill:
<input name="main_skill"></label>
<label><input type="checkbox" name="terms_and_conditions">I agreed the Terms and Conditions</label>
<button type="submit">Submit</button>
</form>
<style type="text/css">
form {
display: block;
width: 400px;
}
label {
display: block;
padding: 5px;
margin: 5px;
}
form label input {
float: right;
}
input[type=checkbox] {
float: none;
}
</style>
There, now doesn't that look much better?
As for the original question, don't use a div, div is a completely-unsemantic block-level element. If you want an inline element (i.e. to show on the same line), use a span, which is a completely-unsemantic inline-level element.
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.