nTIAO
Reputation: 425
How to make input forms of different lines aligned to one another
I am a student who have just started html5 programming recently and I was requested by my teacher to create a form. However I am currently having some problems with it. The problem is that my input fields in a fieldset have to be alligned and I do not understand what is wrong with my code :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="me">
<meta name="description" content="pizza order form">
<title>Pizza order form</title>
</head>
<body>
<style>
body {
background-image: url(Grey-website-background.png);
background-repeat: repeat;
padding:200px;
}
div {
margin:auto;
width:600px;
}
#dateoforder, #email, #name, #phone, #postal code, #time {
display:inline-block;
}
form {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
color:white;
background-image: url("1494002408354-pizza-story.jpg");
border: solid 8px #7F8013;
padding:12px;
width: 700px;
/* text-align: left;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 0.5em/**/
}/*margin auto sets the element to the center of the page*/
</style>
<div>
<form action="">
<h1>Pizza Order Form</h1>
Pizza Type:
<select required><!--select function allows for a html form dropdown list-->>
<option disabled value="" selected>Please select</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input type="number" min="1" max="4"/>
<br>
<fieldset name="Size">
<legend>Size:</legend>
<input type="radio" name="name" value="Small" ">Small
<!--radio buttons are circular buttons that look like options-->
<input type="radio" name="name" required value="Medium">Medium
<input type="radio" name="name" value="Large">Large<!--
By setting up the required attribute for
radio buttons,the user will have to select one of the radio
buttons before he can submit the form(regardless of which one has it. )-->
</fieldset>
<fieldset name="Crust">
<legend>Crust:</legend>
<input type="radio" name="name1" value="Thin" >Thin
<input type="radio" name="name1" required value="Thick">Thick
<input type="radio" name="name1" value="Deep Dish">Deep Dish
</fieldset>
<fieldset name="Toppings">
<legend>Toppings:</legend>
<input type="checkbox" name="Toppings" value="Mushrooms">Mushrooms
<input type="checkbox" name="Toppings" value="Sausage">Sausages
<input type="checkbox" name="Toppings" value="Olives">Olives
</fieldset>
<br>
Addons:
<select>
<option disabled value="Please select addons if required" selected>Please select addons if required</option>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
<fieldset name="Delivery details">
<legend>Delivery to:</legend>
<label for="Name">Name:</label>
<input type="text" name="name of customer" id="name">
<br><br>
<label for="Address">Address:</label>
<textarea cols="30" rows="2"></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" pattern="[0-9]{0,6}" id="postal code"><!--
{0,6} means number of characters must be from 0-6
{.6,}means minimum of 6 but no maximum -->
<br>
<label for="Phone">Phone#:</label>
<input type="text" pattern="[6,8,9][0-9]{0,8}" id="phone"><br>
<!--pattern attribute does not support input type number-->
<br>
<label for="Email address">Email:</label>
<input type="text" placeholder="Enter email addresses" id="email">
<br><br>
<label for="Date">Date:</label>
<input type="date" min="2017-11-01" max="2017-12-31" id="dateoforder">
<!--format of date in html is yyyy-mm-dd even though in chrom browser it shows dd/mm/yyyy
but for coding must use html default format-->
<label for="TOD">Time:</label>
<input type="time" min="10:00" max="22:00" step="900" value="10:00" id="time" required />
</fieldset>
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</div>
</body>
</html>
As you can see ,the fieldset in the "delivery to " fieldset aren't aligned and I need them to be alligned.I have read up on vertical allignment but I don't understand how to use it. Below is a link to a google drive folder of an image of my webpage form and the ideal webpage form template I need:
https://drive.google.com/open?id=0B7oJmOastgcNVWJvSHVMb0l6d00
Upvotes: 0
Views: 57
Answers (2)
Allan
Reputation: 12456
If the input fields are not aligned it is because you have your label (transparent) that are displayed before them as you can see in the picture.
You should put them on different lines and regroup them in one table:
LABEL
INPUT
LABEL
INPUT
...
or if you prefer:
LABEL INPUT
LABEL INPUT
I have fixed your code using the second way:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="me">
<meta name="description" content="pizza order form">
<title>Pizza order form</title>
</head>
<body>
<style>
body {
background-image: url(Grey-website-background.png);
background-repeat: repeat;
padding:200px;
}
div {
margin:auto;
width:600px;
}
#dateoforder, #email, #name, #phone, #postal code, #time {
display:inline-block;
}
form {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
color:black;
background-image: url("1494002408354-pizza-story.jpg");
border: solid 8px #7F8013;
padding:12px;
width: 700px;
/* text-align: left;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 0.5em/**/
}/*margin auto sets the element to the center of the page*/
.wrapper{position:relative;}
.right,.left{width:50%; position:absolute;}
.right{right:0;}
.left{left:0;}
</style>
<div>
<form action="">
<h1>Pizza Order Form</h1>
Pizza Type:
<select required><!--select function allows for a html form dropdown list-->>
<option disabled value="" selected>Please select</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input type="number" min="1" max="4"/>
<br>
<fieldset name="Size">
<legend>Size:</legend>
<input type="radio" name="name" value="Small" ">Small
<!--radio buttons are circular buttons that look like options-->
<input type="radio" name="name" required value="Medium">Medium
<input type="radio" name="name" value="Large">Large<!--
By setting up the required attribute for
radio buttons,the user will have to select one of the radio
buttons before he can submit the form(regardless of which one has it. )-->
</fieldset>
<fieldset name="Crust">
<legend>Crust:</legend>
<input type="radio" name="name1" value="Thin" >Thin
<input type="radio" name="name1" required value="Thick">Thick
<input type="radio" name="name1" value="Deep Dish">Deep Dish
</fieldset>
<fieldset name="Toppings">
<legend>Toppings:</legend>
<input type="checkbox" name="Toppings" value="Mushrooms">Mushrooms
<input type="checkbox" name="Toppings" value="Sausage">Sausages
<input type="checkbox" name="Toppings" value="Olives">Olives
</fieldset>
<br>
Addons:
<select>
<option disabled value="Please select addons if required" selected>Please select addons if required</option>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
<fieldset name="Delivery details">
<legend>Delivery to:</legend>
<table>
<tr align="left">
<th><label for="Name">Name:</label> </th>
<th><input type="text" name="name of customer" id="name"></th>
</tr>
<tr align="left">
<th><label for="Address">Address:</label></th>
<th><textarea cols="30" rows="2"></textarea></th>
</tr>
<tr align="left">
<th><label for="Postal Code">Postal Code:</label></th>
<th><input type="text" pattern="[0-9]{0,6}" id="postal code"></th><!--
{0,6} means number of characters must be from 0-6
{.6,}means minimum of 6 but no maximum -->
</tr>
<tr align="left">
<th><label for="Phone">Phone#:</label></th>
<th><input type="text" pattern="[6,8,9][0-9]{0,8}" id="phone"></th>
<!--pattern attribute does not support input type number-->
<tr align="left">
<th><label for="Email address">Email:</label></th>
<th><input type="text" placeholder="Enter email addresses" id="email"></th>
</tr>
<tr align="left">
<th><label for="Date">Date:</label></th>
<th><input type="date" min="2017-11-01" max="2017-12-31" id="dateoforder"></th>
<!--format of date in html is yyyy-mm-dd even though in chrom browser it shows dd/mm/yyyy
but for coding must use html default format-->
</tr>
<tr align="left">
<th><label for="TOD">Time:</label></th>
<th><input type="time" min="10:00" max="22:00" step="900" value="10:00" id="time" required /></th>
</tr>
</table>
</fieldset>
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</div>
</body>
</html>
Upvotes: 0
Bojan Ivanac
Reputation: 1180
Your best bet to get your "perfect" form would be to rebuild it as a table, which is how I guess the "perfect" one was built. Otherwise, you would most likely have to add special paddings for every single input field which would get out of hand pretty quick.
Upvotes: 1
Related Questions
- html form - make inputs appear on the same line
- HTML/CSS: How to make the certain input fields on the same line in the form?
- Aligning html inputs on same line
- How to align input boxes in 2 lines
- html aligning inputs under each other
- Align Input text fields next to each other
- How to Place Form Inputs on Their Own Lines
- How can I align input fields in css?
- Single-line input fields align
- How to align multiple input using css