So I have created a form with different type of elements (including radio, checkbox, text input etc.) and I cannot figure out how to make the whole form look neat. Ideally I want all labels aligned on the left side, except labels for radio buttons which should be aligned with the input fields.
My pen:
https://codepen.io/andreas-soteriou/pen/NWwEywR?editors=1100
I coloured the labels and inputs, for me to visualise as I am fairly new to this!
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type"submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
header, body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,input, select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color:red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color:blue;
margin-top: 2px;
}
header,
body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,
input,
select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color: red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color: blue;
margin-top: 2px;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
Here's a simple starting point using CSS Grid
We are going to use two different grid layouts using the fieldset element and our grid container.
For simple Label | Input pairs the grid's first column will be the label taking 25% of the available space with the input occupying the rest.
For the radio button or check box groups, we will add a class to the fieldset then use three columns with 25% for the group label, auto for the input width, with the input label occupying the rest
fieldset {
border: none;
/*Set up base grid*/
display: grid;
/*Set Columns, first column is 25% the second takes up the rest*/
grid-template-columns: 25% 1fr;
row-gap: 0.5em;
}
/*Label styling*/
fieldset label {
text-align: right;
padding-right: 0.25em;
}
/*Additional set up for button group*/
fieldset.button-group {
/*For out button group rows we want the first col 25% ,
control minimum space, then next col take the rest*/
grid-template-columns: 25% auto 1fr;
}
/*Addditional stylings for the button/checkbox labels*/
fieldset.button-group label:not(:first-of-type) {
text-align: left;
}
/*Bump the buttons & check boxes to second column*/
fieldset.button-group input {
grid-column-start: 2;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<fieldset>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
</fieldset>
<!--RADIO--->
<fieldset class="button-group">
<label>Size of print:</label>
<input id="print_size_199" type="radio" name="print_size" value="10x10">
<label for="print_size_199">10x10 199:-</label>
<input id="print_size_299" type="radio" name="print_size" value="20x20">
<label for="print_size_299">20x20 299:-</label>
<input id="print_size_399" type="radio" name="print_size" value="40x40">
<label for="print_size_399">40x40 399:-</label>
<input id="print_size_599" type="radio" name="print_size" value="80x80">
<label for="print_size_599">80x80 599:-</label>
</fieldset>
<!--CHECKBOX--->
<fieldset class="button-group">
<label>Additional features:</label>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</fieldset>
<!--TEXTAREA--->
<fieldset>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</fieldset>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
Related
I have 2 questions really. How can I align my radio buttons and checkboxes to the left of my already centered form-group in css.They are currently all center, but I want the checkboxes and radio buttons to be aligned to the left, but still in center. Also how can I make my form take up the whole page with a scroll bar like the example I will provide. everything current just sits at the top of page. Please let me know of any questions, really am stuck here and just need a little nudge. Thanks.
Example: https://survey-form.freecodecamp.rocks/
.text-center {
text-align: center;
margin: auto;
}
.form-group {
text-align: center;
margin: auto;
}
.clue {
text-align: center;
}
.input-checkboxes {
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;
}
body {
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container {
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1 {
margin-bottom: 5px;
}
.checkbox,
.radio-button {
display: block;
}
.form-grou>.inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div class="form-group">
<label> Based on my portfolio/resume, would you say that I am job ready?<br/>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div class="form-group">
<p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
You gave the div with the radio buttons the class .form-group. This class has a property align-center if you remove that from the div the buttons will align to the left.
If you give the .text-center to the <p> the tekst will align center
.text-center{
text-align: center;
margin: auto;
}
.form-group{
text-align: center;
margin: auto;
}
.clue{
text-align: center;
}
.input-checkboxes{
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;}
body{
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container{
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1{
margin-bottom: 5px;
}
.checkbox, .radio-button {
display: block;
}
.form-grou > .inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Survey</title>
</head>
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div>
<label> <p class="text-center">Based on my portfolio/resume, would you say that I am job ready?<br/> </p>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div>
<p class="text-center" >What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea
name="comments"
id="comments"
rows="3"
cols="30"
class="input-textarea"
placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button
type="submit"
id="submit"
class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
Remove the css of .text-center and .form-group
And I used margin-right:-9rem; in input element. But it didn't sound its good approach to me, idk why. But is there a better option how do do it? I was just trying my radio button and checkboxes near the boxes.
I have been trying to do survey form to practice my html and css knowledge. Please help me.
body {
background-color: rgb(25, 230, 161);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-weight: bold;
color: white;
margin-top: 2rem;
}
#description, #welcome {
font-style: italic;
font-size: 1.1rem;
}
main {
width: 60%;
border: 2px solid red;
margin: 0 auto;
text-align: left;
padding: 1rem 2rem; /*margin moves the border, padding changes the inside elements, not position of border.*/
}
label {
display: block; /*make labels one under the other */
padding-bottom: .3rem;
padding-top: 1rem;
}
input {
width:20rem;
margin-right: -9rem;
}
[for="dropdown"] {
margin-top: 1rem;
}
p {
margin-bottom: 0;
}
<body>
<h1 id="title">LearningHtmlCss Course Survey Form</h1>
<p id="description">This survey page is built for gathering information about people taking this course. So that we can improve our site.</p>
<p id="welcome">Thank you for taking time to help us improve the platform</p>
<main>
<form id="survey-form">
<label for="name" id="name-label">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email" id="email-label">Email</label>
<input type="email" id="email" name="email" placeholder="username#gmail.com" pattern=".+#gmail.com" title="Please provide only gmail address" placeholder="Enter your email" required> <!--email validation-->
<label for="age" id="number-label">Age</label>
<input type="number" id="age" min="7" max="99" placeholder="between 7, and 99" required>
<label for="dropdown">Which option best describes your current role?</label>
<select name="current role" id="dropdown">
<option>Select current role</option>
<option value="student">Student</option>
<option value="job">Full time job</option>
<option value="learner">Full time learner</option>
<option value="not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
<p>Would you recommend LearningHtmlCss course to a friend?</p>
<label>
<input type="radio" name="option" value="Definitely" checked>Definitely
</label>
<label>
<input type="radio" name="option" value="Maybe">Maybe
</label>
<label>
<input type="radio" name="option" value="Not sure">Not sure
</label>
<p>What would you like to see improved?</p>
<label>
<input type="checkbox" name="front-end" value="front-end">Front-end projects
</label>
<label>
<input type="checkbox" name="back-end" value="back-end">Back-end projects
</label>
<label>
<input type="checkbox" name="forum" value="forum">Forum
</label>
<label>
<input type="checkbox" name="videos" value="videos">Videos
</label>
<label>
<input type="checkbox" name="city-meetups" value="city-meetups">City Meetups
</label>
<label>
<input type="checkbox" name="additional" value="additional">Additional courses
</label>
<label for="comments">Any comments or suggestions?</label>
<input type="textarea" name="comment" id="comments" placeholder="Enter your comment here...">
<button type="submit">Submit</button>
</form>
</main>
</body>
In order to correct the position of the radio and the checkbox of the buttons, you need to replace the css rules of this input:
input {
width: 20rem;
margin-right: -9rem;
}
Replace with this one:
input {
width: auto;
margin: 0 5px 0 0;
}
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
I have a given HTML which I can't touch:
<fieldset>
<label for="username" class="text">
Dein Benutzername<span class="req">*</span>
</label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">
Vorname<span class="req">*</span>
</label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label ....
and I need to output that one with 2 same-width columns where the label is above the corresponding div-block and the next input-div-block and their corresponding label is besides it.
I added an image to show exactly what I want it to be. I run into problems because the label-tag sits within the same hierarchy-level as the div-block and I therefore can't use inline-block nor - due to my lack of knwoledge - flexbox as it's a mix between column and row in flex-direction
Could somebody please guide me on that one?
You can still use flexbox and put the elements into a new order. It is not a elegant way but the only solution i can
think of if you cant touch the HTML
.text,
.div_text {
width: 50%;
display: block;
}
fieldset {
display: flex;
flex-wrap: wrap;
}
label {
display: block;
}
label[for=username] {
order: 1;;
}
label[for=first_name] {
order: 2;
}
fieldset div:nth-of-type(1){
order: 3;
}
fieldset div:nth-of-type(2){
order: 4;
}
label[for=sur_name] {
order: 5;
}
label[for=example] {
order: 6;
}
fieldset div:nth-of-type(3){
order: 7;
}
fieldset div:nth-of-type(4){
order: 8;
}
<fieldset>
<label for="username" class="text">Dein Benutzername<span class="req">*</span></label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">Vorname<span class="req">*</span></label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label for="sur_name" class="text">Nachname<span class="req">*</span></label>
<div class="div_text">
<input name="sur_name" type="text" id="sur_name" value="" class="textbox" required="">
</div>
<label for="example" class="text">Weiters Beispiel<span class="req">*</span></label>
<div class="div_text">
<input name="example" type="text" id="example" value="" class="textbox" required="">
</div>
</fieldset>
Hoping you are not using any css framework, please have a look at the below-working snippet with custom markup and css, hope it helps :)
body {
font-size: 14px;
font-family: sans-serif;
}
fieldset {
clear: both;
max-width: 500px;
border: 1px dashed deeppink;
}
legend {
color: #fff;
font-size: 14px;
padding: 5px 10px;
background: deeppink;
margin: 0 0 10px 15px;
}
.form-group {
width: 45%;
float: left;
padding: 0 2.5%;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
font-size: 14px;
padding: 5px 3px;
margin-bottom: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
<fieldset>
<legend>Fieldset Container</legend>
<div class="form-group">
<label for="labelX">Label x</label>
<input id="labelX" type="text" placeholder="Label X" />
</div>
<div class="form-group">
<label for="labelY">Label y</label>
<input id="labelY" type="text" placeholder="Label Y" />
</div>
<div class="form-group">
<label for="labelZ">Label z</label>
<input id="labelZ" type="text" placeholder="Label Z" />
</div>
<div class="form-group">
<label for="labelXX">Label xx</label>
<input id="labelXX" type="text" placeholder="Label XX" />
</div>
</fieldset>
I am trying to get my form to center on desktop. It's currently to the left side.
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
The picture below shows the issue and I'll add a snippet and a fiddle to help. Thanks in advance.
Jsfiddle: https://jsfiddle.net/r87h2L6n/
/*********FORMS CSS*************/
form {
display: block;
margin-left: auto;
margin-right: auto;
}
form.contact label {
display: block;
}
span {
display: block;
border: none;
color: white;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
fieldset {
width: 45%;
float: left;
border: none;
}
input.checks {
width: auto;
}
.left {
width: 45%;
float: left;
}
.right {
width: 45%;
float: right;
}
input {
border: none;
border-bottom: 2px solid #959595;
width: 300px;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
}
.bottom {
border: none;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
width: 300px;
}
.fa {
margin-right: 10px;
}
legend {
color: white;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
.button:hover {
background-color: #670809
}
.button:active {
background-color: #670809;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="http://weknowyourdreams.com/images/kitten/kitten-08.jpg" alt="example web page">
</div>
<h2>Student Review 3</h2>
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured” -Papa Smurf
</p>
</section>
</div>
</section>
<div class="center clearfix">
<h1 id="fourth">Contact</h1>
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset>
<legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span>
<input name="first_name" type="text" value="" placeholder="First Name" required/>
</label>
<label><span>
</span>
<input name="last_name" type="text" value="" placeholder="Last Name" required/>
</label>
<label><span> </span>
<input name="date_of_birth" type="date" value="" placeholder="Date of Birth" required/>
</label>
<label><span>
</span>
<input type="number" name="quantity" min="1" max="6" placeholder="number of years until next degree">
</label>
<label><span></span>
<input name="level_of_education" type="hidden" value="" placeholder="level of education" required/>
</label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>
</fieldset>
<fieldset>
<legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information
<hr class="style2">
</legend>
<label><span>
</span>
<input class="ghost-input" name="email" value="" type="email" placeholder="youremail#email.com" autocomplete="off" />
</label>
<label><span></span>
<input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
</label>
<label><span></span>
<input name="website" value="" type="url" placeholder="https://yourwebsite.com" />
</label>
</fieldset>
</section>
<section class="clearfix column">
<fieldset>
<legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests
<hr class="style2">
</legend>
<section class="clearfix column left">
<label class="bottom span"><span><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span>
</label>
</section>
<section class="clearfix column left">
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span>
</label>
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>
</fieldset>
<fieldset>
<legend><i class="fa fa-volume-control-phone" aria-hidden="true">
</i>
Follow Up
<hr class="style2 toosmall">
</legend>
<section class="clearfix column left">
<legend class="smaller">You can contact me by:</legend>
<br>
<div class="squish">
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span>
</label>
<br>
</div>
</section>
<section class="clearfix column left">
<legend class="smaller">I'm interested in:</legend>
<br>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span>
</label>
</section>
</fieldset>
</section>
<input class="button" name="submit_to_programmer" type="submit" value="Submit" />
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
To add to Michael_B`s answer your form is set to take up the full width of the page as its a block element by default and you have set it as well. Margin auto only works for elements that are block or inline-block elements and they width of either must be set to a specified value for it to work.
To address your problem now, looking at your source code, you can get the result you expect by removing the float set on your fieldset element in your CSS and setting Margin to auto in that element. I am not sure what the purpose of the float in that CSS rule but you cannot center something that you have set to float. Hope this helps
The reason it's not centering is that your form element is a block level container and, therefore, it's occupying 100% width of the page. As a result, there no space left for centering.
As you wrote:
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
Well, if you give an element display: block it consumes all available horizontal space. Hence, margin-left: auto and margin-right: auto have no effect.
Try defining a width for the form (e.g. width: 30em), removing float rules and/or giving the form text-align: center, which centers the child elements.
It's not your form that is the issue here, it is your fieldset...again. Give this a whirl.
fieldset {
width: 45%;
margin: 0 auto;
/* float: left; -- DELETE float: left if you want this centered */
border: none;
}
UPDATE:
If you also want that submit button to be centered, here is the css for that.
.button {
margin: 0 auto; /* ADDED THIS */
display: block; /* Took inline-block out, just use block */
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
LIVE DEMO