I'm trying to recreate something like this using flexbox so that labels and inputs are on separate lines
<form class="form">
<label> Credit Card Number </label>
<input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
<label>Date</label>
<input type="date" name="date">
<label for="cvc">Cvc</label>
<input type="text" name="cvc" placeholder="809">
<label for="postcode">Zip</label>
<input type="number" name="postcode" placeholder="94100">
<input type="submit" value="Search">
</form>
http://codepen.io/o-sewell/pen/egPGYm?editors=1100
You mean like that?
.label {
display: block;
}
.form {
display: flex;
}
.cell{
float: left;
}
<form class="form">
<div class="cell">
<label> Credit Card Number </label></br>
<input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
</div>
<div class="cell">
<label>Date</label></br>
<input type="date" name="date">
</div>
<div class="cell">
<label for="cvc">Cvc</label></br>
<input type="text" name="cvc" placeholder="809">
</div>
<div class="cell">
<label for="postcode">Zip</label></br>
<input type="number" name="postcode" placeholder="94100">
</div>
<div class="cell">
<input type="submit" value="Search">
</div>
</form>
Thank you i think i figured it out from your answer
<form class="form">
<div class="cell">
<label> Credit Card Number </label>
<input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
</div>
<div class="cell">
<label>Date</label>
<input type="date" name="date">
</div>
<div class="cell">
<label for="cvc">Cvc</label>
<input type="text" name="cvc" placeholder="809">
</div>
<div class="cell">
<label for="postcode">Zip</label>
<input type="number" name="postcode" placeholder="94100">
</div>
<input type="submit" value="Search">
</form>
form {
display: flex;
}
.cell {
display: flex;
flex-direction: column;
flex: 1;
}
Related
I have this form:
I want the last name input to be on the same line as the first name. I used float-left for both of them but it doesn't work.
.first-name {
float: left;
margin-right: 20px;
}
.last-name {
float: left;
}
input,
label {
display: block;
}
<form action="" method="POST">
<section>
<div class="first-name">
<label for="first-name">First name</label>
<input type="text" id="first-name" required> </div>
<div class="last-name">
<label for="last-name">Last name </label>
<input type="text" id="last-name" required></div>
<br style="clear:both;" />
</section>
<section>
<label for="company">Company </label>
<input type="text" id="company" required>
<label for="email">E-mail</label>
<input type="email" id="email" required>
</section>
<input class="submit" type="submit" value="REGISTER">
</form>
Use flexbox to solve this.
section.justify-content-btw {
display: flex;
justify-content: space-between;
}
input,
label {
display: block;
}
<form action="" method="POST">
<section class="justify-content-btw">
<div class="first-name">
<label for="first-name">First name</label>
<input type="text" id="first-name" required> </div>
<div class="last-name">
<label for="last-name">Last name </label>
<input type="text" id="last-name" required></div>
<br style="clear:both;" />
</section>
<section>
<label for="company">Company </label>
<input type="text" id="company" required>
<label for="email">E-mail</label>
<input type="email" id="email" required>
</section>
<input class="submit" type="submit" value="REGISTER">
</form>
I am new to coding and I am trying to make a contact form with the Flex property so that I can place my "name" and "telephone number" horizontally next to each other and my "message" below. They must all be the same width.
I can´t figure it out with CSS.
below is my HTML code:
<div class="contactcontainer">
<form action="">
<div class="input">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
You can achieve this by using flexbox.
And remember to use semantic markup for your forms, e.g. use label for labels instead of p tag.
.contactcontainer label {
display: block;
}
.input {
display: flex;
}
.input > div {
margin-right: 8px;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" name="firstname" placeholder="Your first name...">
</div>
<div>
<label for="pnumber">Phone number</label>
<input id="pnumber" type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<label for="message">Your message</label>
<textarea id="message" type="text" name="message" placeholder="type your message"></textarea>
</div>
</form>
</div>
Here is my solution, Its not perfect, but it will give u starting point
* {
box-sizing: border-box;
}
.contactcontainer {
width: 500px;
}
.input {
display: flex;
}
.message input {
display: block;
width: 100%;
}
.l,
.r {
flex: 1;
}
.l input,
.r input {
width: 100%;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="l">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="r">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
If you want to achieve it using flex then
.input { display: flex; flex-direction: row; flex-wrap: wrap; }
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="inline">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="inline">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
Using FlexBox
.input {
display: flex;
}
input {
width: 100%;
}
.hor{
flex: 1;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="hor">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="hor">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
EDIT:
Use type=Number for number validation
.input {
display: flex;
}
input {
width: 100%;
}
.hor{
flex: 1;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="hor">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="hor">
<p>Phone number</p>
<input type="number" name="pnumber" placeholder="your phone number" min=1>
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
I'm trying to make a contact section with two columns, an lg-8 and lg-3 (EDIT) + 1 buffer column:
First Column: Contact Form
Second Column: A simple text message from me.
I've looked around several places and cannot understand what is wrong with my code. I've done everything [bootstrap][1] resource says to and I'm getting one column underneath the other.
This is in a 'div class="container"'
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
and the CSS
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
I made several changes, both to get it to work as you describe and to get the labels linked to the inputs. It is a little redundant to have the placeholders match the labels, but you can do what you want to with that. You can change the 'xs' back to 'lg' in the grid class names, so they will be more appropriate outside of a small snippet. You may find that you want something in between, such as 'sm', (ex 'col-sm-8') since the classes take effect for the size specified between the dashes and larger.
Also, you know that the width numbers at the end of these bootstrap grid system class names are typically supposed to add up to 12, not 11 for a given screen width specifier, right?
#contactForm label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm" class="col-xs-8">
<label for="inputName" >Name</label>
<input type="text" name="inputName" placeholder="Name" width="100%">
<label for="inputEmail" >Email</label>
<input type="text" name="inputEmail" placeholder="Email" width="100%">
<label for="inputPhone" >Phone</label>
<input type="text" name="inputPhone" placeholder="Phone" width="100%">
<label for="inputMsg" >Message</label>
<textarea rows='5' placeholder='Message' name="inputMsg" > </textarea>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary col-xs-3">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
</div>
Add the following (Although I would recommend adding an id to these divs and styling )
.content-secondary,.content-main{
display:inline-block;
vertical-align:bottom
}
Snippet below
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
.content-secondary,
.content-main {
display: inline-block;
vertical-align: bottom
}
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName"></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail"></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone"></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg">Message</label>
<br>
<textarea rows='5' placeholder='Message'></textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
Use the built in row and column classes:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
</div>
<div class="col-sm-3">
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
</div>
Add float:left to your content-main
.content-main {
.make-lg-column(8);
float:left;
}
https://jsfiddle.net/9Lf16p1c/
I am trying to format a two-column form so that:
the labels are above each input field or text area
everything in class col1 is in the column on the left
everything in class col2 is in the column on the right
everything in class col12 spans both columns
Here is the HTML code I need this to work with:
<div id="contactForm">
<form method="post" action="">
<h3>Contact us</h3>
<p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p>
<fieldset>
<div class="col1">
<label for="form_firstname">Firstname <span class="required">*</span></label>
<input type="text" id="form_firstname" name="form_firstname" value="" />
</div>
<div class="col2">
<label for="form_lastname">Lastname <span class="required">*</span></label>
<input type="text" id="form_lastname" name="form_lastname" value="" />
</div>
<div class="col1">
<label for="form_address">Address</label>
<input type="text" id="form_address" name="form_address" value="" />
</div>
<div class="col2">
<label for="form_city">City</label>
<input type="text" id="form_city" name="form_city" value="" />
</div>
<div class="col1">
<label for="form_email">Email <span class="required">*</span></label>
<input type="text" id="form_email" name="form_email" value="" />
</div>
<div class="col2">
<label for="form_phone">Phone <span class="required">*</span></label>
<input type="text" id="form_phone" name="form_phone" value="" />
</div>
<div class="col12">
<label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label>
<textarea id="form_attachment" name="form_attachment" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<textarea id="form_message" name="form_message" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<input type="submit" value="Send" formnovalidate="formnovalidate" />
</div>
</fieldset>
</form>
</div>
How do I code the CSS to style this HTML as required?
Here is the code on JSFiddle.
Try this CSS:
#contactForm{
width: 80%;
}
label,.col1,.col2,.col12{display: block;}
.col1{ float:right;}
.col2{float:left;}
.col12{clear:both;}
textarea{
display: block;
width: 100%;
}
http://jsfiddle.net/rx2gjpdw/3/
I'm not sure how to go about getting the effect I want here. I have two input boxes that are on the same line and I want to have labels underneath them and aligned to match the respective input box.
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
= <label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</div>
</div>
</form>
Take a look at the jsfiddle here for more info:
http://jsfiddle.net/justinhj/bTVKZ/2/
http://jsfiddle.net/isherwood/bTVKZ/6
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<div class="pull-left">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<br />
<label for="decimal_input">Label 1</label>
</div>
<div>
<input type="text" value="I" width="30" id="input2" class="form-control" />
<br />
<label for="input2">Label 2</label>
</div>
</div>
</form>
</div>
Your new HTML:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<span class="inner-container">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
</span>
=
<span class="inner-container">
<label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</span>
</div>
</div>
</form>
</diV>
Your new CSS (of course I would add a class to the labels):
.container {
margin-top: 10px;
}
.inner-container {
position: relative;
}
label {
top: 25px;
left: 5px;
position: absolute;
}
here's the fiddle
You may try this
Extra CSS:
label {
display:block;
}
.form-group {
display:inline-block;
}
Modified HTML:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<label for="decimal_input">Label 1</label>
</div>
<div class="form-group">
<input type="text" value="I" width="30" id="input2" class="form-control" />
<label for="input2">Label 2</label>
</div>
</form>
</div>
DEMO.