I've been trying to place my inputs and textarea on the right of the screen and my labels on the left. To try and create a structured form. At this moment I have tried using float and position but they seem to conflict and give an ugly result. Is there a better way to do this? thanks in advance :)
edit: I can't use divs for this project
form {
border: 2px solid dimgrey;
display: inline-block;
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);;
}
input, textarea {
display: block;
box-sizing: border-box;
float: right;
}
label {
float: left;
display: inline-block;
}
<form>
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
<label>Type vraag:
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
</label>
<label for="Vraag">Je vraag:
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
</label>
<input type="submit" value="Verzend">
</form>
<form>
<table width="100%">
<tr>
<td>Je naam:</td>
<td align="right">
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
</td>
</tr>
<tr>
<td>Je e-mailadress:</td>
<td align="right">
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
</td>
</tr>
<tr>
<td>Type vraag:</td>
<td align="right">
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
</td>
</tr>
<tr>
<td>Je vraag:</td>
<td align="right">
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
</td>
</tr>
</table>
</form>
it will work for you.
.form-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
<form>
<div class="form-group">
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
</div>
<div class="form-group">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
</div>
<div class="form-group">
<label>Type vraag:</label>
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
</div>
<div class="form-group">
<label for="Vraag">Je vraag:</label>
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
</div>
<input type="submit" value="Verzend">
</form>
Try This
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<style>
form {
border: 2px solid dimgrey;
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);
display: flex;
flex-wrap: wrap;
}
input, textarea,select {
margin-top: 10px;
width: 70%;
border: 1px solid #eee;
padding: 0 10px
}
label {
margin-top: 10px;
width: 30%;
flex-grow: 0;
flex-shrink: 0;
}
input[type=submit] {
margin-left: 30%;
max-width: 150px;
}
</style>
</head>
<body>
<form>
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
<label>Type vraag:</label>
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
<label for="Vraag">Je vraag:</label>
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
<input type="submit" value="Verzend">
</form>
</body>
</html>
You should move inputs and textarea tag outside label tag and set width 50% and add some margin.
form {
border: 2px solid dimgrey;
display: inline-block;
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);;
}
input, textarea, select {
display: block;
box-sizing: border-box;
float: right;
width: 50%;
margin: 10px;
}
label {
float: left;
display: inline-block;
width:50%;
}
<form>
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
<label>Type vraag:
</label>
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
<label for="Vraag">Je vraag:
</label>
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
<input type="submit" value="Verzend">
</form>
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
Im making this webpage and I am almost done its just I have a question regarding the background because the second one is the one that its supposed to look like and the first one is mine. I just want to get rid of that white space in between and have like outer padding. Ive tried playing around with padding and it didnt work for some reason heres the link (https://imgur.com/a/FlVN538) also heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cycling Tours</title>
<style>
body {
font-family: Verdana, sans-serif;
}
form {
width: 700px;
margin: 0 auto;
}
h1 {
text-align: center;
}
fieldset {
background-color: #4681A4;
min-width: 700px;
max-width: 700px;
border: solid white 2px;
}
legend {
color: white;
text-indent: 2em;
}
label {
font-size: 0.9em;
}
textarea {
display: block;
width: 80%;
height: 100px;
min-width: 50%;
max-width: 90%;
}
.buttonstyle {
text-transform: uppercase;
font-weight: bold;
background-color:#FFFFE6;
}
input[type=text], input[type=email], input[type=phonenumber] {
background-color:#ffffe6;
}
</style>
</head>
<body>
<h1>Fall 2018 Reviews</h1>
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<!--<input type="hidden" name="formname" value="Donation Form">
<input type="hidden" name="windowname" value="Donation">-->
<fieldset id="aboutyou">
<legend>About you(optional)</legend>
<label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
<br>
<select name="seasons" id="seasons" size="4" multiple>
<option>Winter</option>
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
</select>
<br>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" >
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="phonenumber">Phone Number</label>
<input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
<br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="name#example.com" size="40">
</fieldset>
<fieldset>
<legend>Trip Reviews</legend>
<div id="trails">
<label for="trailchoice"></label>
<select name="trailchoice" id="trailchoice">
<option value="Alberta Rural">Alberta Rural</option>
<option value="B.C. Coast">B.C. Coast</option>
<option value="Ontario Lake Superior">Ontario Lake Superior</option>
<option value="PEI">PEI</option>
<option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
</select>
<div id="daylength">
<label for="days"></label>
<select name="days" id="days">
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="14 days">14 days</option>
</select>
<div id="credit">
<input type="radio" id="fourstars" value="4" checked>
<label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="threestars" id="threestars" value="3">
<label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="twostars" id="twostars" value="2">
<label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="onestar" id="onestar" value="1">
<label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<label for="feedback">comments</label>
<textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
</div>
</select>
</div>
</fieldset>
<fieldset id="fsfeedback">
<legend>I would be interested in these trips:(check all that apply)</legend>
<input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
<label for="SLC">Sea or lake coast</label>
<br>
<input type="checkbox" name="Rural" id="Rural" value="Rural">
<label for="Rural">Rural</label>
<br>
<input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
<label for="Mountain">Mountains</label>
<br>
<input type="checkbox" name="other" id="other" value="other">
<label for="other" >Other (Please Specify)</label><label for="other"></label>
<input type="text" name="specified" id="specified">
</fieldset>
<input type="submit" value="Send Review" class="buttonstyle">
<input type="reset" value="Cancel" class="buttonstyle">
</form>
</body>
</html>
body {
font-family: Verdana, sans-serif;
}
form {
background: #4681A4;
width: 700px;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;
}
h1 {
text-align: center;
}
fieldset {
border: solid white 2px;
margin: 5px;
margin-bottom: 20px;
}
legend {
color: white;
text-indent: 2em;
}
label {
font-size: 0.9em;
}
textarea {
display: block;
width: 80%;
height: 100px;
min-width: 50%;
max-width: 90%;
}
.buttonstyle {
text-transform: uppercase;
font-weight: bold;
background-color: #FFFFE6;
}
input[type=text],
input[type=email],
input[type=phonenumber] {
background-color: #ffffe6;
}
.buttons {
margin-left: 19px;
}
<h1>Fall 2018 Reviews</h1>
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<!--<input type="hidden" name="formname" value="Donation Form">
<input type="hidden" name="windowname" value="Donation">-->
<fieldset id="aboutyou">
<legend>About you(optional)</legend>
<label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
<br>
<select name="seasons" id="seasons" size="4" multiple>
<option>Winter</option>
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
</select>
<br>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="phonenumber">Phone Number</label>
<input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
<br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="name#example.com" size="40">
</fieldset>
<fieldset>
<legend>Trip Reviews</legend>
<div id="trails">
<label for="trailchoice"></label>
<select name="trailchoice" id="trailchoice">
<option value="Alberta Rural">Alberta Rural</option>
<option value="B.C. Coast">B.C. Coast</option>
<option value="Ontario Lake Superior">Ontario Lake Superior</option>
<option value="PEI">PEI</option>
<option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
</select>
<div id="daylength">
<label for="days"></label>
<select name="days" id="days">
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="14 days">14 days</option>
</select>
<div id="credit">
<input type="radio" id="fourstars" value="4" checked>
<label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img
src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="threestars" id="threestars" value="3">
<label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="twostars" id="twostars" value="2">
<label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="onestar" id="onestar" value="1">
<label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<label for="feedback">comments</label>
<textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
</div>
</select>
</div>
</fieldset>
<fieldset id="fsfeedback">
<legend>I would be interested in these trips:(check all that apply)</legend>
<input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
<label for="SLC">Sea or lake coast</label>
<br>
<input type="checkbox" name="Rural" id="Rural" value="Rural">
<label for="Rural">Rural</label>
<br>
<input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
<label for="Mountain">Mountains</label>
<br>
<input type="checkbox" name="other" id="other" value="other">
<label for="other">Other (Please Specify)</label><label for="other"></label>
<input type="text" name="specified" id="specified">
</fieldset>
<div class="buttons">
<input type="submit" value="Send Review" class="buttonstyle">
<input type="reset" value="Cancel" class="buttonstyle">
</div>
</form>
I'd like to display both label and input in the same line using CSS for the following form. I tried using display, float and clear but not able to get the "look" I was coding for.
The form should look like this form
<header>
<title> Registration form </title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<h2>Register here please ! </h2>
<form id="simpleform">
<fieldset>
<label for="name">Full Name </label>
<input type="text" name="name" id="name">
<label for="age">Age in Years </label>
<input type="number" name="age" id="age">
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female<br>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
<label for="country">Country</label>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select>
<br>
<lable for="comments">Comments</lable>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
<input type="submit">
<input type="reset" value="Start Again">
</fieldset>
</form>
I re-worked on my html and css and got this desired result
*{
margin: 0;
padding: 0;
}
body{
font-family:verdana sans-serif;
background-color: #99ffcc;
}
h2{
margin-top: 100px;
text-align: center;
color: blue;
}
#simpleform{
width: 500px;
margin: auto;
height: 400px;
border: 1px solid red;
background-color: #ccc;
}
label{
text-align: right;
clear: left;
float: left;
padding-right:13px;
margin-top: 12px;
width: 150px;
}
input,textarea {
margin-top: 12px;
width: auto;
}
input[type="email"]{
margin-top:16px;}
input[type="radio"]{
margin-top: 16px;
}
input[type="checkbox"]{
margin-top: 16px;
}
input[type="number"]{
margin-top:16px;
}
select{
margin-top: 13px;
}
#buttons{
margin-left:160px;
}
input[type="submit"]{
margin-right:80px;
background-color: white;
padding: 10px;
border-radius:10px;
border: 1px solid black;
}
input[type="reset"]{
margin-right:80px;
background-color: white;
padding: 10px;
border-radius:10px;
border: 1px solid black;}
input[type="submit"]:hover
{
background-color: aquamarine;
}
input[type="reset"]:hover
{
background-color: aquamarine;
}
input[type="text"],input[type="number"],input[type="email"]{
width:200px;
border: 1px solid black;
}
<html>
<header><title> Registration form </title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<h2>Register here please ! </h2>
<form id="simpleform">
<div>
<label for="name">Full Name </label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">Age in Years </label>
<input type="number" name="age" id="age">
</div>
<div>
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female<br>
</div>
<div>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
</div>
<div>
<label for="country">Country</label>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select><br>
</div>
<div>
<label for="comments" id="lable-comment">Comments</label>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
</div>
<div id="buttons">
<input type="submit">
<input type="reset" value="Start Again"></div>
</form>
</body>
</html>
There are a lot of ways to get a 2-column layout but using a table is probably the most simple and straight-forward, example:
<form id="simpleform">
<fieldset>
<table>
<tr>
<td><label for="name">Full Name</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="age">Age in Years</label></td>
<td><input type="number" name="age" id="age"></td>
</tr>
<tr>
<td><label for="email">Email ID</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="gender">Gender</label></td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td><label for="hobbies">Hobbies</label></td>
<td>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
</td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select>
</td>
</tr>
<tr>
<td><lable for="comments">Comments</lable></td>
<td>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
<input type="reset" value="Start Again">
</td>
</tr>
</table>
</fieldset>
</form>
I am trying to align the input fields of a form like in How it should be actually but I have not been able to get it done.
You can see the code that I have done so far, but still it does not work.
What am I missing?
label.gegevens {
display: inline-block;
float: right;
clear: right;
width: 350px;
text-align: left;
}
input.gegevens {
display: inline-block;
float: left;
clear:left;
text-align:right;
}
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label><span class="client-info">Naam: </span><input type="text" name="FirstName" required></label></p>
<p><label><span class="client-info">Adres: </span><input type="text" name="Adres" required></label></p>
<p><label><span class="client-info">Postcode: </span><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></label></p>
<p><label><span class="client-info">Woonplaats: </span><input type="text" name="Woonplaats" required></label></p>
<p><label><span class="client-info">Email: </span><input type="text" name="Email"></label></p>
<p><label><span class="client-info">Genwenste leverdatum: </span><input id="date" type="date" name="Leverdatum"></label></p>
<p><label><span class="client-info">Bestand: </span><input type="file" name="Bestand"></label></p>
<input type="submit" value="Bestellen">
</form>
Try adding a div around the form and then floating the inputs to the right. Here's what I did:
<div id="box">
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label><span class="client-info">Naam: </span><input type="text" name="FirstName" required></label></p>
<p><label><span class="client-info">Adres: </span><input type="text" name="Adres" required></label></p>
<p><label><span class="client-info">Postcode: </span><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></label></p>
<p><label><span class="client-info">Woonplaats: </span><input type="text" name="Woonplaats" required></label></p>
<p><label><span class="client-info">Email: </span><input type="text" name="Email"></label></p>
<p><label><span class="client-info">Genwenste leverdatum: </span><input id="date" type="date" name="Leverdatum"></label></p>
<p><label><span class="client-info">Bestand: </span><input type="file" name="Bestand"></label></p>
<input type="submit" value="Bestellen">
</form>
and here's the CSS
label.gegevens {
display: inline-block;
float: left;
clear: left;
width: 200px;
text-align: left;
}
input {
display: inline-block;
float: right;
clear:right;
text-align:right;
}
#box {
width:50%
}
Link to jsbin
I have simplified your code a little. One of the problems was label.gegevens while that class wasn't used. I changed it to label.client-info.
I use a flexbox for the layout and vertical alignment of the line elements. To learn more about flexbox have a look here.
I don't use floats to keep all elements in the document flow.
Please note: flexbox may cause issues when using IE11 or lower.
label.client-info {
width: 180px;
}
form p {
display: flex;
align-items: center;
}
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label class="client-info">Naam:</label><input type="text" name="FirstName" required></p>
<p><label class="client-info">Adres:</label><input type="text" name="Adres" required></p>
<p><label class="client-info">Postcode:</label><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></p>
<p><label class="client-info">Woonplaats:</label><input type="text" name="Woonplaats" required></p>
<p><label class="client-info">Email:</label><input type="text" name="Email"></p>
<p><label class="client-info">Genwenste leverdatum:</label><input id="date" type="date" name="Leverdatum"></p>
<p><label class="client-info">Bestand:</label><input type="file" name="Bestand"></p>
<input type="submit" value="Bestellen">
</form>
JSFiddle
input{
position:absolute;
right:50%;
left:200px;
}
label {
display: inline-block;
float: right;
clear: right;
width: 350px;
text-align: left;
}
input {
display: inline-block;
float: right;
clear:left;
text-align:right;
}
I notice you had used both the form element and class name, but you don't need a class name for this CSS. If you would need special CSS properties for an element, then you should use a class.
I managed to get what I wanted to achieve (see codes). Now I do not know how to make it responsive. In shorter viewports, everything gets messy. Any tips for this?
html {
background-image: url(boeken.jpeg);
background-size: cover;
}
span.list {
color:white;
background:black;
padding:4px;
margin-right:5px;
}
input#opt1, input#opt2, input#opt3 {
width:10px;
}
input#karen, input#paula {
width:20px;
border: #03A9F4;
border-style: solid;
border-width: 2px;
margin-left:5px;
}
input#esther {
width:120px;
border-top-width: 0px;
border-bottom-width: 0px;
margin-left:5px;
z-index:10;
}
select#lijst-fail, input#naam, input#adres, input#postcode, input#woonplaats, input#email, input#date {
margin-left: 5px;
}
small {
margin-left:10px;
}
form input {
width: 300px;
border: #03A9F4;
border-style: solid;
border-width: 2px;
}
.button-verzenden {
position:absolute;
top:35%;
padding-left:80%;
z-index:-10;
}
div#section-1 p {display:flex; align-items: center;}
label#karen, label#paula, label#esther, label#suzanne, label#samuel {width:260px;}
div#section-2 p {display:flex; align-items: center;}
div#section-2 label {width:165px;}
input#verzenden {
background-color: #6d4435;
font-size: 25px;
font-weight: bold;
color: white;
border: #03A9F4;
border-style: solid;
border-width: 2px;
cursor:pointer;
}
input[type="file"] {
border: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="boeken_bestellen.css">
<title>Bestel hier uw boeken</title>
</head>
<body>
<main>
<header>
<h1>Boeken bestellen</h1>
<p>Op deze pagina kunt u snel de boeken bestellen die in de top 5 staan. Geef per boek aan hoeveel u er van wilt bestellen. Sommige boeken zijn er populair en daardoor kunnen we slechts een beperkt aantal boeken naar u toesturen. Dit is aangegeven bij het boek.</p>
</header>
<div id="section-1">
<section>
<h2>Bestel hier uw boeken</h2>
<form id="formulier" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><span class="list">1</span><label for="karen" id="karen">Karin Slaughter - Mooie meisjes:</label><input id="karen" name="karen" type="number" value="1" min="1" max="10"><small>Max. 10 exemplaren</small></p>
<p><span class="list">2</span><label for="paula" id="paula">Paula Hawkins - Het meisje in de trein:</label><input id="paula" type="text" name="paula" pattern="[0-9]{2}"><small>Max. 99 exemplaren</small></p>
<p><span class="list">3</span><label for="esther" id="esther">Esther Verhoef - Lieve mama:</label><input id="esther" type="range" min="0" max="15" step="5" list="bereik"><small>Bestel 0, 5, 10 of 15 exemplaren</small>
<datalist id="bereik">
<option value="0">
<option value="5">
<option value="10">
<option value="15">
</datalist></p>
<p><span class="list">4</span><label for="suzanne" id="suzanne">Suzanne Vermeer - Costa del Sol:</label>
<label for="opt1"><input id="opt1" type="radio" name="mw" value="1">1</label>
<label for="opt2"><input id="opt2" type="radio" name="mw" value="10">10</label>
<label for="opt3"><input id="opt3" type="radio" name="mw" value="20">20</label>
</p>
<p><span class="list">5</span><label for="lijst-fail" id="samuel">Samuel Bjork - Ik reis alleen:</label><select id="lijst-fail" name="stijl">
<option value="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></p>
</form>
</section>
</div>
<div id="section-2">
<section>
<h2>Geef hier uw adres gegevens op</h2>
<form id="formulier" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<p><label for="naam">Naam: <abbr title="Vereist">*</abbr></label>
<input id="naam" name="naam" required></p>
<p><label for="adres">Adres: <abbr title="Vereist">*</abbr></label>
<input id="adres" name="adres" required></p>
<p><label for="pc3">Postcode:</label>
<input id="postcode" name="postcode" pattern="[0-9]{4}\s[A-Z]{2}" title="Een postcode bestaat uit 4 cijfers, 1 spatie en 2 hoofdletters" placeholder="1234 AB"></p>
<p><label for="woonplaats">Woonplaats: <abbr title="Vereist">*</abbr></label>
<input id="woonplaats" name="woonplaats" required></p>
<p><label for="email">Email:</label><input id="email" name="email" type="email" placeholder=iemand#domein.nl pattern="^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"> </p>
<p><label for="date">Gewenste leverdatum:</label><input id="date" name="date" type="date"></p>
<p><label for="file">Bestand:</label><input type="file" name="Bestand"></p>
</form>
<div class="button-verzenden">
<input id="verzenden" form="formulier" type="submit" value="Bestellen">
</div>
</section>
</div>
</main>
</body>
</html>
This is what my form looks like:
My css is this:
.form select{
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 200px;
border: 0;
margin: 0 0 15 0px;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
}
.form select:hover,.form select:active,.form select:focus {
background: lightgoldenrodyellow;
}
Form is this:
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 950px;
margin: 0 auto 100px;
padding: 10px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
width: 100%;
}
How do I align this properly? Like labels should be next to drop downs on the left aligned vertically? And the drop downs should also be vertically aligned.
HTML is this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>
<button onclick="printPage()" style="float:right">Print this page</button>
<form name="form" method="POST">
Select Category
<select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
<option value="" disabled selected>Select Category</option>
</select><br>
</form>
<br>
<form method="POST">
Select Item
<select name="item_name" id="item_name" value="item_name" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
<option value="" disabled selected>Select Item</option>
</select><br>
</form>
<form name="form" method="POST">
Select Vendor Name
<select name="vendor_name" id="vendor_name" value="vendor_name" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
<option value="" disabled selected>Select Vendor</option>
</select><br>
</form>
Unit <input type="text" placeholder="Unit" id="Unit"><br>
Price per Unit <input type="text" placeholder="Price per Unit" id="Price_per_Unit"><br>
Quantity <input type="text" placeholder="Quantity" id="Quantity"><br>
VAT <input type="text" placeholder="VAT" id="VAT"><br>
Freight Charges <input type="text" placeholder="Freight charges" id="Freight_charges"><br>
Other Charges <input type="text" placeholder="Other Charges" id="Other_Charges"><br>
Total <input type="text" placeholder="Total" id="Total"><br>
<form method="POST">
<input type="submit" name="submit" value="Update" style="width:150px;padding:10px;">
</form>
This has nothing to do with PHP.
Put the labels and form inputs in divs floating left with fixed width :
<div class="labelContainer">
<label for="input1">Input 1</label>
</div>
<div class="inputContainer">
<select id="input1">
<option>Option 11</option>
<option>Option 12</option>
</select>
</div>
<div class="labelContainer">
<label for="input2">Input 2</label>
</div>
<div class="inputContainer">
<select id="input2">
<option>Option 21</option>
<option>Option 22</option>
</select>
</div>
<div class="labelContainer">
<label for="input3">Input 3</label>
</div>
<div class="inputContainer">
<select id="input3">
<option>Option 31</option>
<option>Option 32</option>
</select>
</div>
CSS :
.labelContainer {
clear: both;
float: left;
width: 200px;
}
.inputContainer {
float: left;
width: 200px;
}
Fiddle
Put your form labels in tag and add "class=form-labels" to them.
then add following code to your css
h4.form-labels
{
font-family: "Roboto", sans-serif;
outline: 0;
width: 200px;
border: 0;
margin:0;
padding:0;
font-size: 14px;
display:inline-block;
}
Here a fiddle with corrections to your css: https://jsfiddle.net/vjeqfuy2/7/
Date:
Print this page
<form name="form" method="POST">
Select Category
<select name="category" id="category" value="category" class="form-control ddplaceholder">
<option value="" disabled selected>Select Category</option>
</select><br>
</form>
<br>
<form method="POST">
Select Item
<select name="item_name" id="item_name" value="item_name" class="form-control ddplaceholder" >
<option value="" disabled selected>Select Item</option>
</select><br>
</form>
<form name="form" method="POST">
Select Vendor Name
<select name="vendor_name" id="vendor_name" value="vendor_name" class="form-control ddplaceholder">
<option value="" disabled selected>Select Vendor</option>
</select><br>
</form>
Unit <input type="text" placeholder="Unit" id="Unit"><br>
Price per Unit <input type="text" placeholder="Price per Unit" id="Price_per_Unit"><br>
Quantity <input type="text" placeholder="Quantity" id="Quantity"><br>
VAT <input type="text" placeholder="VAT" id="VAT"><br>
Freight Charges <input type="text" placeholder="Freight charges" id="Freight_charges"><br>
Other Charges <input type="text" placeholder="Other Charges" id="Other_Charges"><br>
Total <input type="text" placeholder="Total" id="Total"><br>
<form method="POST">
<input type="submit" name="submit" value="Update" style="width:150px;padding:10px;">
</form>
form select{
font-family: "Roboto", sans-serif;
outline: 0;
background: #fff;
width: 200px;
border: 0;
margin: 0 0 15px 0;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
height: 40px;
}
form select:hover, form select:active, form select:focus {
background: lightgoldenrodyellow;
}