So i have this form that i quickly made and i got it so that i can make double columns now.
link: http://codepen.io/zomdar/pen/WbXBaq
<head>
</head>
<body>
<fieldset>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
CSS:
fieldset { width: 900px; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
but the problem is that when i put the div tag half and put it in the html....i have to put 2 "half" fields for it to go to the next line. I cant just put 1 half class and another half class right below the half class. Any ideas on how i can do that? add another class maybe?
add a class .clear { clear: both; } like this:
fieldset { width: 500px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.clear { clear: both; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
<head>
</head>
<body>
<fieldset>
<legend>Contact form</legend>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="clear"></div><!-- added div class clear -->
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
Related
I'm trying to make a contact form in Reactjs for my website, but I'm unable to make the form itself be displayed as a block. Right now, the form is being displayed as if it were on the same line, despite the display being set to block.
I'm not sure why I'm having this problem
Relevant Code
ContactPage.js
import React from 'react';
// CSS import statements
import '../css/Base.css';
import '../css/ContactPage.css';
// Component import statements
function Contact() {
return(
<div className='container'>
<div className='contact-form'>
Fields marked with an * are required.
<label for="name">Name *</label>
<input type="text" name="name" />
<label for="email">Email *</label>
<input type="text" name="email" />
<label for="subject">Subject *</label>
<input type="text" name="subject" />
<label for="message">Message *</label>
<input type="text" name="message" />
<button>Submit</button>
</div>
</div>
)
}
export default Contact;
ContactPage.css
.contact-form {
display: block;
padding: 0px 10px;
}
Try this.
ContactPage.js
import React from 'react';
// CSS import statements
import '../css/Base.css';
import '../css/ContactPage.css';
// Component import statements
function Contact() {
return(
<div className='container'>
<div id='contact-form'>
Fields marked with an * are required.
<div className='row'>
<div className="label">
<label for="name">Name *</label>
</div>
<div class="form-input">
<input type="text" name="name" className="form-control"/>
</div>
</div>
<div className='row'>
<div className="label">
<label for="email">Email *</label>
</div>
<div className="form-input">
<input type="text" name="email" className="form-control"/>
</div>
</div>
<div className='row'>
<div className="label">
<label for="subject">Subject *</label>
</div>
<div className="form-input">
<input type="text" name="subject" className="form-control"/>
</div>
</div>
<div className='row'>
<div className="label">
<label for="message">Message *</label>
</div>
<div className="form-input">
<input type="text" name="message" className="form-control"/>
</div>
</div>
<div className='form-button'>
<button>Submit</button>
</div>
</div>
</div>
)
}
export default Contact;
ContactPage.css
#contact-form {
display: block;
padding: 0px 10px;
}
.row:after{
content: "";
display: table;
clear: both;
}
.form-button{
margin-top:10px;
}
.label {
float: left;
width: 15%;
margin-top: 6px;
}
.form-input{
float: left;
width:50%;
margin-top: 6px;
}
Preview --> https://codesandbox.io/s/vigilant-lumiere-ue3k1?file=/src/App.js
Re-edit your contact form structure to this:
HTML
<div className='contact-form'>
Fields marked with an * are required.
<div class="form-group">
<label for="name">Name *</label>
<input type="text" name="name" />
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="text" name="email" />
</div>
<div class="form-group">
<label for="subject">Subject *</label>
<input type="text" name="subject" />
</div>
<div class="form-group">
<label for="message">Message *</label>
<input type="text" name="message" />
</div>
<button>Submit</button>
</div>
Wrap it inside a div called form-group and in your css
ContactPage.css
.contact-form {
display: block;
padding: 0px 10px;
}
.contact-form .form-group {
width:100%;
display:block;
position: relative;
}
.contact-form .button {
display:block;
margin:0 auto;
}
Alright, so I am trying to use Flexbox to align my form on the left hand side of the screen and my image on the right hand of the screen using justify-content: space-between but when I put that on my .container it doesn't work. Here is what I have so far:
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
<div class="image">
<img src="img/city.jpg" alt="">
</div>
</div>
</form>
My style:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
img {
width: 20%;
}
Put the two sections in their own containers, then it can work.
.container {
display: flex;
justify-content: space-between;
}
section:first-child {
background-color: orange;
}
section:last-child {
background-color: lightgreen;
}
.image {
border: 2px dashed black;
height: 100px;
width: 100px;
}
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<section><!-- container one -->
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
</section>
<section><!-- container two -->
<div class="image"> image
<img src="img/city.jpg" alt="">
</div>
</section>
</div>
</form>
I'm creating my first ever html page, and I'm trying to do some alignment for divs and labels.
The labels and the input seem out of position even after spending multiple hours trying different combinations. Some properties are not working, like I used width for label and in chrome it says unknown property.
Below is the code. Any help with this would be appreciated.
Preview of the html/css part:
div.btn-toolbar {
position: relative;
top: 100px;
left: 40%;
width: 400px;
}
div.quote-details {
position: relative;
top: 122px;
left: 250px;
font-weight: bold;
font-size: 15px;
}
div.quote-detail-section-left {
float: left;
margin-top: 145px;
margin-left: 100px;
width: 35%;
}
input.quote-input {
padding: 4px;
}
label.field-label {
float: left;
font-weight: bold;
display: inline-block;
margin-left: 40px;
width: :50px;
clear: both;
}
div.quote-detail-section-right {
float: right;
margin-top: 145px;
margin-right: 80px;
width: 35%;
}
<div class="quote-rec-page">
<div class="quote-details">
<label for="section" class="Segment">Quote Details</label>
</div>
<div class="btn-toolbar">
<button type="button">Edit</button>
<button type="button">Delete</button>
<button type="button">Create PDF</button>
<button type="button">Email Quote</button>
<button type="button">Start Sync</button>
</div>
<form>
<div class="quote-detail-section-left">
<div>
<label for="quoteNum" class="field-label">Quote Number</label>
<input type="text" class="quote-input" tabindex="1" id="quoteNumber" />
</div>
<div>
<label for="quoteName" class="field-label">Quote Name</label>
<input type="text" class="quote-input" tabindex="2" id="quoteName" />
</div>
<div>
<label for="oppName" class="field-label">Opportunity Name</label>
<input type="text" class="quote-input" tabindex="3" id="oppName" />
</div>
<div>
<label for="accName" class="field-label">Account Name</label>
<input type="text" class="quote-input" tabindex="4" id="accName" />
</div>
</div>
<div class="quote-detail-section-right">
<div>
<label for="expDate" class="field-label">Expiration Date</label>
<input type="date" class="quote-input" tabindex="5" id="expDate" />
</div>
<div>
<label for="sync" class="field-label">Syncing</label>
<input type="checkbox" class="quote-input" tabindex="6" id="sync" />
</div>
<div>
<label for="status" class="field-label">Status</label>
<input type="text" class="quote-input" tabindex="7" id="status" />
</div>
<div>
<label for="quoteDesc" class="field-label">Description</label>
<input type="text" class="quote-input" tabindex="8" id="quoteDesc" />
</div>
</div>
</form>
</div>
Html/css including apex code:
<apex:page sidebar="false" showHeader="false">
<head>
<title>Quote Details</title>
</head>
<style>
div.btn-toolbar{
position:relative;
top:100px;
left:40%;
width:400px;
}
div.quote-details{
position:relative;
top:122px;
left:250px;
font-weight:bold;
font-size:15px;
}
div.quote-detail-section-left{
float:left;
margin-top : 145px;
margin-left: 100px;
width:35%;
}
input.quote-input{
padding:4px;
}
label.field-label{
float:left;
font-weight:bold;
display:inline-block;
margin-left : 40px;
width::50px;
clear:both;
}
div.quote-detail-section-right{
float:right;
margin-top : 145px;
margin-right: 80px;
width:35%;
}
</style>
<body>
<div class="quote-rec-page">
<div class = "quote-details">
<label for = "section" class="Segment">Quote Details</label>
</div>
<div class ="btn-toolbar">
<button type="button">Edit</button>
<button type="button">Delete</button>
<button type="button">Create PDF</button>
<button type="button">Email Quote</button>
<button type="button">Start Sync</button>
</div>
<form>
<div class ="quote-detail-section-left">
<div>
<label for="quoteNum" class ="field-label">Quote Number</label>
<input type="text" class="quote-input" tabindex="1" id="quoteNumber"/>
</div>
<div>
<label for="quoteName" class ="field-label">Quote Name</label>
<input type="text" class="quote-input" tabindex="2" id="quoteName"/>
</div>
<div>
<label for="oppName" class ="field-label">Opportunity Name</label>
<input type="text" class="quote-input" tabindex="3" id="oppName"/>
</div>
<div>
<label for="accName" class ="field-label">Account Name</label>
<input type="text" class="quote-input" tabindex="4" id="accName"/>
</div>
</div>
<div class ="quote-detail-section-right">
<div>
<label for="expDate" class ="field-label">Expiration Date</label>
<input type="date" class="quote-input" tabindex="5" id="expDate"/>
</div>
<div>
<label for="sync" class ="field-label">Syncing</label>
<input type="checkbox" class="quote-input" tabindex="6" id="sync"/>
</div>
<div>
<label for="status" class ="field-label">Status</label>
<input type="text" class="quote-input" tabindex="7" id="status"/>
</div>
<div>
<label for="quoteDesc" class ="field-label">Description</label>
<input type="text" class="quote-input" tabindex="8" id="quoteDesc"/>
</div>
</div>
</form>
</div>
</body>
</apex:page>
From Pure CSS I want to combine aligned forms:
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
</div>
</fieldset>
</form>
with grouped inputs:
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<input type="email" placeholder="Email">
</fieldset>
</form>
so that the inputs are stacked while still allowing horizontally aligned labels to be placed to the left. How can I achieve this effect?
I came to a solution by applying the grouped input styling to a modified aligned form layout:
.pure-form-aligned .pure-group .pure-control-group {
margin: 0;
}
.pure-form.pure-form-aligned .pure-group .pure-control-group input {
display: inline-block;
position: relative;
margin: 0 0 -1px;
border-radius: 0;
top: -1px;
}
.pure-form-aligned .pure-group .pure-control-group:first-child input {
top: 1px;
border-radius: 4px 4px 0 0;
margin: 0;
}
.pure-form-aligned .pure-group .pure-control-group:last-child input {
top: -2px;
border-radius: 0 0 4px 4px;
margin: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form pure-form-aligned">
<fieldset class="pure-group">
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
</div>
</fieldset>
</form>
You can wrap the <label>s in a div and place that div on the left side of the <fieldset>. Like this :-
div.labels{
display : inline-block;
height : 100px;
}
div.labels div{
display : flex;
align-items : center;
justify-content : right;
height : 33.33%;
}
fieldset.pure-group{
height : 100px;
display : inline-block;
}
fieldset.pure-group input{
height : 33.33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form">
<div class="labels">
<div>
<label>Name</label>
</div>
<div>
<label>Password</label>
</div>
<div>
<label>Email</label>
</div>
</div>
<fieldset class="pure-group">
<input type="text" id="name" placeholder="Username">
<input type="text" placeholder="Password">
<input type="email" placeholder="Email">
</fieldset>
</form>
I tried to create a form and add some margin between form element in the class formGroup as margin 10px 0;
But it is not working and I am not sure why is that happening. I appreciate your help.
Here is the HTML
<div class="registrationForm">
<h2>Please fill in the form below to register</h2>
<form class="form">
<div class="formGroup">
<label class="formLabel">First Name</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Last Name</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Email Address</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Password</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Phone</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Gender</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Date of birth</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel"></label>
<div class="formField">
<input type="submit">
</div>
</div>
</form>
</div>
and the CSS here
.registrationForm
{
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-bottom: 3%;
overflow: auto;
}
.registrationForm .form
{
margin: 10px auto;
width: 90%;
//border: 1px solid black;
overflow: auto;
}
.registrationForm .form .formGroup
{
width: 100%;
margin: 10px 0;
}
.registrationForm .form .formGroup .formLabel
{
width: 20%;
float: left;
//text-align: right;
}
.registrationForm .form .formGroup .formField
{
width: 80%;
float: left;
}
Thank you
You're just putting the margin-bottom in the wrong place. it should be in formField.
.registrationForm
{
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
overflow: auto;
}
.registrationForm .form
{
margin: 10px auto;
width: 90%;
//border: 1px solid black;
overflow: auto;
}
.registrationForm .form .formGroup
{
width: 100%;
}
.registrationForm .form .formGroup .formLabel
{
width: 20%;
float: left;
//text-align: right;
}
.registrationForm .form .formGroup .formField
{
width: 80%;
float: left;
margin-bottom: 3%;
}
<div class="registrationForm">
<h2>Please fill in the form below to register</h2>
<form class="form">
<div class="formGroup">
<label class="formLabel">First Name</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Last Name</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Email Address</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Password</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Phone</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Gender</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel">Date of birth</label>
<div class="formField">
<input type="text">
</div>
</div>
<div class="formGroup">
<label class="formLabel"></label>
<div class="formField">
<input type="submit">
</div>
</div>
</form>
</div>
You need to clear the floats contained within your .formGroup elements, currently .formGroup has no height so any margin applied is swallowed by the height of the children within it.
Put this on your .formGroup selector
overflow: hidden;
margin: 10px 0;
See this example: https://jsfiddle.net/yuqvu6w4/1/
you only need to add "overflow:hidden" to your class
".registrationForm .form .formGroup"
your final code will be :
.registrationForm .form .formGroup {
width: 100%;
margin: 10px 0;
**overflow: hidden;**
}
it will work without interrupting other code