PageResource.com - Web Development Tutorials

HTML5 Form with CSS

In this tutorial we will combine several of the new form elements we have seen earlier to create a form for “West coast pizza Delivery.” Once we have the form set up in html, we will add a style sheet to make it look nice.

The main form will have 3 sections, an order section, a delivery section and a payment section. Each section will be a <fieldset>. Within each section we will use an unordered list <ul> to list the each individual field. We will use the new placeholder attributes, to give hints to the customer. We will use the new <datalist> to create drop down lists for choices. [Note: This tutorial displays best in the Opera browser]

Here is the html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome to West Coast Pizza</h1>
<form action= "" method= "">
<fieldset id= "order">
<legend> Order </legend>
<ul>
<li><label for= "pizza">Select Pizza: </label><input type=  "text" name= "pizza"  list= "pizza" placeholder= "Click to select" />
<datalist id= "pizza">
<option value= "Veggie Delight" />
<option value= "Meat Madness" />
<option value= "Cheese" />
</datalist>
</li>
<li><label for= "size">Select Size: </label><input type= "text" name= "size"  list= "size" placeholder= "Click to select" />
<datalist id= "size">
<option value= "Large" />
<option value= "Medium" />
<option value= "Small" />
</datalist>
</li>
<li><label for= "quantity">Select Quantity:</label><input type= "number" name= "quantity" id= "quantity" max= "10" min= "1" alue= "1"  /></li>
</ul>
</fieldset>
<fieldset id= "delivery"> <legend>Delivery Information </legend>
<ul>
<li><label for= "Customer">Name: </label><input type= "text" name= "Customer" id= "Customer" /></li>
<li><label for= "Email">Email: </label> <input type= "email" name= "Email" id= "Email" placeholder= "[email protected]" /></li>
<li><label for= "Phone">Phone: </label><input type= "telephone" name= "Phone" id= "Phone" /></li>
<li><label for= "Add">Street Address: </label> <textarea id= "Add" rows= "6"></textarea></li>
<li><label for= "Sate">State: </label> <input type= "text" list= "state" name= "State" id= "State" placeholder= "Pick a State" />
<datalist id= "state">
<option value= "California" />
<option value= "Oregon" />
<option value= "Washington" />
</datalist>
<li><label for= "zip">ZIP Code: </label><input type= "text" id= "zip" /></li>
<li><label for= "time">Delivery Time:</label> <input type= "time" /></li>
</ul>
</fieldset>
<fieldset id= "payment" > <legend>Payment</legend>
<ul>
<li>
<fieldset id= "card">
<legend>Card Type</legend>
<ul>
<li><label for= "visa"> <img src= "images/visa.png" /> </label> <input type= "radio" id= "visa" /></li>
<li><label for= "amx"><img src= "images/amx.png" /> </label><input type= "radio" id= "amx" /></li>
<li><label for= "mc"><img src= "images/mc.png" /> </label><input type= "radio" id= "mc" /></li>
</ul>
</fieldset>
<li><label for= "cardNum">Card Number: </label><input type= "text" id= "cardNum" placeholder= "xxx-xxx-xxx-xxx" /></li>
<li><label for= "security">Security Code: </label><input type= "text" id= "security" placeholder= "Enter 3 digit code" /></li>
<li><input type= "submit" value= "Place Order" id= "send" /></li>
</ul>
</fieldset>
</form>
</body>
</html>

Here is what the form looks like in the browser as plane HTML5.

Now let’s add the style sheet to style the form. Remember the style sheet goes in the head section of the document.

<style type="text/css">
/*————-ALL——————*/
html, body, form, fieldset, legend, ul,
{
margin:0px;
padding:0px;
}
body
{
font-family:Georgia;
background:#faf7e1;
}
h1
{
margin-left:20%;
margin-right:20%;
color:#807740;
}
form
{
width:950px;
}
fieldset
{
border:none;
margin:5px;
padding:20px;
background:#f2e9ae;
}
legend
{
font-size:160%;
color:#c92a06;
}
ul
{
list-style:none;
}
ul li
{
margin-bottom:5px;
}
label
{
float:left;
font-size:80%;
margin-right:5px;
}
/*————-Order Section———*/
#order ul li
{
float:left;
}
#order label
{
padding-top:5px;
width:100px;
}
#order input
{
width:150px;
margin-right:15px;
}
/*————Delivery Section————*/
#delivery label
{
width:100px;
}
#delivery input
{
width:150px;
}
#delivery textarea
{
width:150px;
}
/*————-Payment Section———–*/
#payment label
{
padding-top:5px;
width:100px;
}
#payment #send
{
display:block;
margin-top:10px;
margin-left:130px;
}
/*———-Card SubSection———-*/
#card legend
{
margin-left:130px;
font-size:110%;
}
#card ul li
{
float:left;
margin-right:30px;
}
#card label
{
padding-top:0px;
width:50px;
}
</style>

Here is what the form looks like with the style sheet.

The form includes several dropdown lists. One for the Pizza:

One for Size:

One for State:

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy