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>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Code of the form where reset button is not working. This a form that gathers information of a student.
It uses Labels, text-fields, text-area, radio-buttons, Check-Box, Submit Button, Reset Button etc.
The reset button is not functioning in this code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label.la {
text-indent: 30px;
color: red;
width: 240px;
display: inline-block;
}
</style>
<style type="text/css">
input.tf {
border-color: green;
border: 2px solid
}
</style>
<style type="text/css">
#b1:hover {
background-color: red;
color: white
}
#b2:hover {
background-color: green;
color: white
}
</style>
</head>
<body style="text-align: center">
<h1>Assignment 3</h1>
<from style="display:inline-block;" action="/action_page.php">
<fieldset>
<legend>
<h3>Student Info</h3>
</legend>
<label class="la">First Name:</label>
<input class="tf" type="text" placeholder="Jadon" required>
<br><br>
<label class="la">Last Name:</label>
<input class="tf" type="text" placeholder="Sancho" required>
<br><br>
<label class="la">Date of Birth:</label>
<input class="tf" type="text" placeholder="1/1/1999" required>
<br><br>
<label class="la">Age:</label>
<input class="tf" type="text" placeholder="20" required>
<br><br>
<label class="la" style="padding-right: 30px">Gender:</label>
<input type="radio" name="Male" value="Male">
<label>Male</label>
<input type="radio" name="Female" value="Female">
<label for="Female">Female</label>
<br><br>
<label style="color:red;display:inline;padding-left: 60px;width: 210px;display: inline-block;margin:-top:20px">Address:</label>
<textarea cols="25" rows="3" placeholder="type here..." style="border-color: green;border:2px solid;margin-top: : 50px"></textarea>
<br><br>
<label class="la" style="padding-left: 55px">Class:</label>
<input type="radio" name="Class" value="F.Y">
<label>F.Y</label>
<input type="radio" name="Class" value="S.Y">
<label>S.Y</label>
<input type="radio" name="Class" value="T.Y">
<label>T.Y</label>
<input type="radio" name="Class" value="B.Tech">
<label>B.Tech</label>
<br><br>
<label class="la" style="padding-left: 95px">Area(s) of Interest:</label>
<input type="checkbox" name="M.L">
<label for="M.L">M.L</label>
<input type="checkbox" name="A.I">
<label for="A.I">A.I</label>
<input type="checkbox" name="H.P.C">
<label for="H.P.C">H.P.C</label>
<input type="checkbox" name="Cyber-Security">
<label for="Cyber-Security">Cyber-Security</label>
<br><br>
<label class="la">E-mail:</label>
<input class="tf" type="text" placeholder="JSancho07#gmail.com" required>
<br><br>
<label class="la">Password:</label>
<input class="tf" type="Password" placeholder="min 8 characters" required>
<br><br>
<input id="b1" type="reset" name="Reset" value="Reset" style="border-color: red;font-size: 20px;border-radius: 15%;margin:10px">
<input id="b2" type="submit" name="submit" style="border-color: green;font-size: 20px;border-radius: 15%;margin: 10px" onclick="myFunction()">
<script>
function myFunction() {
alert("Submission Successful");
}
</script>
</fieldset>
</from>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label.la {
text-indent: 30px;
color: red;
width: 240px;
display: inline-block;
}
</style>
<style type="text/css">
input.tf {
border-color: green;
border: 2px solid
}
</style>
<style type="text/css">
#b1:hover {
background-color: red;
color: white
}
#b2:hover {
background-color: green;
color: white
}
</style>
</head>
<body style="text-align: center">
<h1>Assignment 3</h1>
<form style="display:inline-block;" action="/action_page.php">
<fieldset>
<legend>
<h3>Student Info</h3>
</legend>
<label class="la">First Name:</label>
<input class="tf" type="text" placeholder="Jadon" required>
<br><br>
<label class="la">Last Name:</label>
<input class="tf" type="text" placeholder="Sancho" required>
<br><br>
<label class="la">Date of Birth:</label>
<input class="tf" type="text" placeholder="1/1/1999" required>
<br><br>
<label class="la">Age:</label>
<input class="tf" type="text" placeholder="20" required>
<br><br>
<label class="la" style="padding-right: 30px">Gender:</label>
<input type="radio" name="Male" value="Male">
<label>Male</label>
<input type="radio" name="Female" value="Female">
<label for="Female">Female</label>
<br><br>
<label style="color:red;display:inline;padding-left: 60px;width: 210px;display: inline-block;margin:-top:20px">Address:</label>
<textarea cols="25" rows="3" placeholder="type here..." style="border-color: green;border:2px solid;margin-top: : 50px"></textarea>
<br><br>
<label class="la" style="padding-left: 55px">Class:</label>
<input type="radio" name="Class" value="F.Y">
<label>F.Y</label>
<input type="radio" name="Class" value="S.Y">
<label>S.Y</label>
<input type="radio" name="Class" value="T.Y">
<label>T.Y</label>
<input type="radio" name="Class" value="B.Tech">
<label>B.Tech</label>
<br><br>
<label class="la" style="padding-left: 95px">Area(s) of Interest:</label>
<input type="checkbox" name="M.L">
<label for="M.L">M.L</label>
<input type="checkbox" name="A.I">
<label for="A.I">A.I</label>
<input type="checkbox" name="H.P.C">
<label for="H.P.C">H.P.C</label>
<input type="checkbox" name="Cyber-Security">
<label for="Cyber-Security">Cyber-Security</label>
<br><br>
<label class="la">E-mail:</label>
<input class="tf" type="text" placeholder="JSancho07#gmail.com" required>
<br><br>
<label class="la">Password:</label>
<input class="tf" type="Password" placeholder="min 8 characters" required>
<br><br>
<input id="b1" type="reset" name="Reset" value="Reset" style="border-color: red;font-size: 20px;border-radius: 15%;margin:10px">
<input id="b2" type="submit" name="submit" style="border-color: green;font-size: 20px;border-radius: 15%;margin: 10px" onclick="myFunction()">
<script>
function myFunction() {
alert("Submission Successful");
}
</script>
</fieldset>
</form>
</body>
</html>
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>
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 want to align the input fields shown below, with keep using <label> in a correct way.
The code is as below:
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
I am thinking to separate <label> tags in a <div> and the input fields in another and then with some floating manipulation I make the intended alignment, is this a correct way?
How about this
form > label {
min-width: 185px;
display: inline-block;
}
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
<style>
form{
width: 300px;
float: left;
}
form > label{
width: 50%;
float: left;
margin-bottom: 10px;
}
form > input{
float: right;
width: 50%;
margin-bottom: 10px;
}
</style>
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
For simple UI use this (Using Table):
<form action="add.php" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td>
<label for="refNo">Field1 name (long)</label>
</td>
<td>
<input id="refNo" type="text" name="refNo" value="" />
</td>
</tr>
<tr>
<td>
<label for="name">Field2 name</label>
</td>
<td>
<input id="name" type="text" name="name" value="" /><br>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value=":: Add ::" name="addBtn" />
</td>
</tr>
</table>
</form>
For More good looking and advanced UI try using Bootstrap.
My form views fine in IE7 and IE8 but FireFox does not display the form correctly: The problem is it does not display the form inside my "mainContent1"
Note my code below:
<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
border-style: none;
border-top: 1px solid #BFBAB0;
background-color: #F2EFE9;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
}
label em {
display: block;
color: #060;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}
Try putting a clearing div at the bottom, inside of #mainContent1...
<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
<div style="clear:both"></div>
</div>
Don't use a clearing div, it is cleaner to use the ".clearfix" method of clearing.
.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}
However, for IE you will need to add this to your IE css file:
.clearfix{zoom:1}
Then you simply add the class to the container element to clear the floats correctly.
<div id="mainContent1" class="clearfix">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>
This removes the need for extra empty elements within your HTML.