HTML/CSS/Form Style/form
Содержание
- 1 Add BR to table cell to layout the form controls
- 2 Add form controls to paragraph
- 3 Align the form controls
- 4 A login form with submit button
- 5 Define style based on form id
- 6 Disable a form control
- 7 Form for registration
- 8 Form layout
- 9 form margin: 3em auto
- 10 form starts the form, gives the method of sending information and the location of form scripts
- 11 form width: 75%
- 12 Introducing Form Design
- 13 Layout form controls with table
- 14 Layout form with CSS
- 15 Registration Form
- 16 Set margin, padding and border for form
- 17 simple form with label, text field and submit button
- 18 styleless order form
- 19 Styling text in form controls
- 20 Table and Form Example
- 21 Use DIV to wrap form control
- 22 Use DL, DT to layout the form controls
- 23 Use table to align the form controls
- 24 Use table to layout form controls
- 25 Use UL and LI to layout form controls
- 26 Wizard form
- 27 Wrap form controls in a DIV and set style to float left and padding
Add BR to table cell to layout the form controls
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
}
</style>
</head>
<body>
<form action="login.asp" method="post" name="frmLogin">
<table>
<tr>
<td align="right">
Account name: <br />
Password:
</td>
<td>
<input type="text" name="txtLogin" size="20" /><br />
<input type="password" name="txtPwd" size="20" />
<input type="submit" value="Log in" />
</td>
</tr>
</table>
</form>
</body>
</html>
Add form controls to paragraph
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Forms</title>
<style type="text/css" media="screen">
div {
margin-bottom: 30px;
}
#divID p {
margin: 6px 0;
}
</style>
</head>
<body>
<div id="divID">
<form action="" method="post">
<p>
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="submit" />
</p>
</form>
</div>
</body>
</html>
Align the form controls
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Reply to ad</title>
</head>
<body>
<h2>Reply to ad</h2>
<p>Use the following form to respond to the ad:</p>
<form action="" method="post" name="frmRespondToAd">
<table>
<tr>
<td><label for="emailTo">To</label></td>
<td><input type="text" name="txtTo" readonly="readonly" id="emailTo" size="20" value="Star seller" /></td>
</tr>
<tr>
<td><label for="emailFrom">To</label></td>
<td><input type="text" name="txtFrom" id="emailFrom" size="20" /></td>
</tr>
<tr>
<td><label for="emailSubject">Subject</label></td>
<td><input type="text" name="txtSubject" id="emailSubject" size="50" /></td>
</tr>
<tr>
<td><label for="emailBody">Body</label></td>
<td><textarea name="txtBody" id="emailBody" cols="50" rows="10"> </textarea></td>
</tr>
</table>
<input type="submit" value="Send email" />
</form>
</body>
</html>
A login form with submit button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>A login form with submit button</title>
</head>
<body>
<form method="post" action="">
<p><label for="username">Your Username:</label> <input type="text" id="username" name="username" /></p>
<p><label for="password">Your Password:</label> <input type="password" id="password" name="password" /></p>
<p><input type="submit" name="login" value="Log In" /></p>
</form>
</body>
</html>
Define style based on form id
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Aligning labels</title>
<style type="text/css">
ul { list-style: none; margin: 0; padding: 0; }
li { margin: .2em 0; }
#info label {
float: left;
width: 200px;
margin-right: 15px;
text-align: right;
}
</style>
</head>
<body>
<form id="info" method="post" action="">
<ul>
<li><label>Your name</label> <input type="text" /></li>
<li><label>Your E-mail address</label> <input type="text" /></li>
<li><label>Your telephone number</label> <input type="text" /></li>
</ul>
</form>
</body>
</html>
Disable a form control
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Disabled form control</title>
</head>
<body>
<form>
<p><input type="button" onclick="this.disabled=true;" onkeypress="this.disabled=true;" value="submit" /></p>
</form>
</body>
</html>
Form for registration
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Try it out</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 12pt;
}
fieldset {
font-size: 12px;
font-weight: bold;
padding: 10px;
width: 500px;
}
td {
font-size: 12px;
}
td.label {
text-align: right;
width: 175px;
}
td.form {
width: 350px;
}
div.submit {
width: 450px;
text-align: right;
padding-top: 15px;
}
span.small {
font-size: 10px;
}
span.required {
font-weight: bold;
font-size: 20px;
color: #ff0000;
}
input {
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #f2f2f2;
}
.steps {
width: 500px;
}
td.stepOn,td.stepOff {
width: 100px;;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding: 5px;
font-size: 14px;
}
td.stepOff {
background-color: #efefef;
}
.proceed {
text-align: right;
}
</style>
</head>
<body>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Register with us:</legend>
<table>
<tr>
<td class="label">
<label for="fname">First name: <span class="required">*</span></label></td>
<td class="form"><input type="text" name="txtFirstName" id="fname" size="12" /></td>
</tr>
<tr>
<td class="label"><label for="lname">Last name: <span class="required">*</span></label></td>
<td class="form"><input type="text" name="txtLastName" id="lname" size="12" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="label"><label for="email">E-mail address: <span class="required">*</span></label></td>
<td class="form"><input type="password" name="txtEmail" id="email" size="20" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="label"><label for="pwd">Password: <span class="required">*</span></label></td>
<td class="form"><input type="password" name="txtPassword" id="pwd" size="12" /><span class="small"> must be between 6 and 12 characters long</span></td>
</tr>
<tr>
<td class="label"><label for="pwdConf">Confirm password: <span class="required">*</span></label></td>
<td class="form"><input type="password" name="txtPasswordConf" id="pwdConf" size="12" /></td>
</tr>
</table>
<div class="submit"><input type="submit" value="Register" /><br /></div>
<span class="required">*</span> = required
</fieldset>
</form>
</body>
</html>
Form layout
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
color: black;
border: 1px solid black;
}
th {
width: 200px;
text-align: right;
padding-right: 12px;
padding-top: .75em;
padding-bottom: .75em;
vertical-align: top;
border-top: 1px solid black;
font-family: Verdana;
font-size: .7em;
}
td {
vertical-align: middle;
background-color: pink;
border-bottom: 1px solid white;
color: white;
border-left: 4px solid grey;
padding: 4px;
font-family: Verdana;
font-size: .7em;
}
.required {
color: red;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
border-bottom: 2px solid grey;
border-top: 2px solid black;
}
#buttonSubmit {
margin-left: 220px;
margin-top: 4px;
}
</style>
</head>
<body>
<form action="" method="post">
<table cellspacing="0">
<tr class="header">
<th colspan="2">Account Information</th>
</tr>
<tr class="required">
<th scope="row">Login Name*</th>
<td> <input name="uname" type="text" size="12" maxlength="12" /> </td>
</tr>
<tr class="required">
<th scope="row">Password*</th>
<td><input name="pword" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Confirm Password* </th>
<td><input name="pword2" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Email Address*</th>
<td><input name="email" type="text" /></td>
</tr>
<tr class="header">
<th colspan="2">Contact Information</th>
</tr>
<tr class="required">
<th scope="row">First Name* </th>
<td><input name="fname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Last Name* </th>
<td><input name="lname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Address 1*</th>
<td><input name="address1" type="text" size="11" /></td>
</tr>
<tr>
<th scope="row">Address 2 </th>
<td><input type="text" name="address2" /></td>
</tr>
<tr class="required">
<th scope="row">City* </th>
<td><input type="text" name="city" /></td>
</tr>
<tr class="required">
<th scope="row">State or Province*</th>
<td><select name="state">
<option selected="selected" disabled="disabled">Select...</option>
<option value="alabama">Alabama</option>
</select></td>
</tr>
<tr class="required">
<th scope="row">Zip*</th>
<td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td>
</tr>
<tr class="required">
<th scope="row">Country*</th>
<td><input type="text" name="country" id="country" /></td>
</tr>
<tr class="required">
<th scope="row">Gender*</th>
<td> <input type="radio" name="sex" value="female" />
Female
<input type="radio" name="sex" value="male" />
Male </td>
</tr>
<tr class="header">
<th colspan="2">Misc. </th>
</tr>
<tr>
<th scope="row"> Income </th>
<td>
<select name="income" size="1" >
<option selected="selected" disabled="disabled">Select...</option>
<option value="notsay">no</option>
</select> </td>
</tr>
<tr>
<th scope="row">Interests</th>
<td><input name="interests" type="checkbox" value="shopping-fashion" />
Shopping/fashion
<input name="interests" type="checkbox" value="sports" />
Sports
<input name="interests" type="checkbox" value="travel" />
Travel</td>
</tr>
<tr>
<th scope="row">Eye Color</th>
<td><input name="eye" type="checkbox" value="red" />
Red
<input name="eye" type="checkbox" value="green" />
Green
<input name="eye" type="checkbox" value="brown" />
Brown
<input name="eye" type="checkbox" value="blue" />
Blue Gold</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" id="buttonSubmit" />
<input type="reset" name="Submit2" value="Reset" id="buttonReset" />
</form>
</body>
</html>
form margin: 3em auto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example form</title>
<style rel="stylesheet" type="text/css" media="screen">
form {
margin: 3em auto;
width: 75%;
}
</style>
</head>
<body>
<form id="" action="" method="post">
<fieldset id="name">
<legend>Name</legend>
<label>Title
<select id="title1" name="title1">
<option selected="selected">Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</label>
<label>First name
<input id="first-name" name="first-name" type="text" />
</label>
<label>Last name
<input id="las-name" name="last-name" type="text" />
</label>
<br />
</fieldset>
<fieldset id="address">
<legend>Address</legend>
<label>Street
<input id="street" name="street" type="text" />
</label>
<br />
<label>City
<input id="city" name="city" type="text" />
</label>
<label>State
<input id="state" name="state" type="text" />
</label>
<label>Zip code
<input id="zip" name="zip" type="text" />
</label>
<br />
<label>Country
<input id="country" name="country" type="text" />
</label>
<br />
</fieldset>
<fieldset id="payment">
<legend>Payment option</legend>
<fieldset id="credit_card">
<legend>Credit card</legend>
<label><input id="visa" name="visa" type="radio" /> Visa</label>
<label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
<label><input id="discover" name="discover" type="radio" /> Discover</label>
<br />
</fieldset>
<label>Card number
<input id="card_number" name="card_number" type="text" />
</label>
<label>Expiration date
<input id="expiration" name="expiration" type="text" />
</label>
<br />
<input class="submit" type="submit" value="Submit" />
<br />
</fieldset>
</form>
</body>
</html>
form starts the form, gives the method of sending information and the location of form scripts
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = "">
<p><label>Name:
<input name = "name" type = "text" size = "25"
maxlength = "30" />
</label></p>
<p>
<input type = "submit" value = "Submit Your Entries" />
<input type = "reset" value = "Clear Your Entries" />
</p>
</form>
</body>
</html>
form width: 75%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example form</title>
<style rel="stylesheet" type="text/css" media="screen">
form {
margin: 3em auto;
width: 75%;
}
</style>
</head>
<body>
<form id="" action="" method="post">
<fieldset id="name">
<legend>Name</legend>
<label>Title
<select id="title1" name="title1">
<option selected="selected">Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</label>
<label>First name
<input id="first-name" name="first-name" type="text" />
</label>
<label>Last name
<input id="las-name" name="last-name" type="text" />
</label>
<br />
</fieldset>
<fieldset id="address">
<legend>Address</legend>
<label>Street
<input id="street" name="street" type="text" />
</label>
<br />
<label>City
<input id="city" name="city" type="text" />
</label>
<label>State
<input id="state" name="state" type="text" />
</label>
<label>Zip code
<input id="zip" name="zip" type="text" />
</label>
<br />
<label>Country
<input id="country" name="country" type="text" />
</label>
<br />
</fieldset>
<fieldset id="payment">
<legend>Payment option</legend>
<fieldset id="credit_card">
<legend>Credit card</legend>
<label><input id="visa" name="visa" type="radio" /> Visa</label>
<label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
<label><input id="discover" name="discover" type="radio" /> Discover</label>
<br />
</fieldset>
<label>Card number
<input id="card_number" name="card_number" type="text" />
</label>
<label>Expiration date
<input id="expiration" name="expiration" type="text" />
</label>
<br />
<input class="submit" type="submit" value="Submit" />
<br />
</fieldset>
</form>
</body>
</html>
Introducing Form Design
<HTML>
<HEAD>
<TITLE> - Forms</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin">
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "d@d.ru">
<INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form">
<INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name:</STRONG>
<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries">
<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
</FORM>
</BODY>
</HTML>
Layout form controls with table
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Voting</title>
<style type="text/css">td {width:100; text-align:center;}</style>
</head>
<body>
<h2>Register your opinion</h2>
<form action="" method="get" name="frmRespondToAd">
<table>
<tr>
<td><input type="radio" name="radVote" value="1" id="vpoor" /></td>
<td><input type="radio" name="radVote" value="2" id="poor" /></td>
<td><input type="radio" name="radVote" value="3" id="average" checked="checked" /></td>
<td><input type="radio" name="radVote" value="4" id="good" /></td>
<td><input type="radio" name="radVote" value="5" id="vgood" /></td>
</tr>
<tr>
<td><label for="vpoor">1 <br />Very Poor</label></td>
<td><label for="poor">2 <br />Poor</label></td>
<td><label for="average">3 <br />Average</label></td>
<td><label for="good">4 <br />Good</label></td>
<td><label for="vgood">5 <br />Very Good</label></td>
</tr>
</table>
<input type="submit" value="Vote now" />
</form>
</body>
</html>
Layout form with CSS
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input {
width: 175px;
margin-bottom: 10px;
}
label {
display: block;
text-align: right;
float: left;
width: 75px;
padding-right: 20px;
}
.checkbox {
width:1em;
}
br {
clear: left;
}
.buttonSubmit {
width: 75px;
margin-left: 95px;
}
</style>
</head>
<body>
<form action="" method="post">
<label for="uname">User Name</label>
<input type="text" name="uname" id="uname" value="" /><br />
<label for="pname">Password</label>
<input type="text" name="uname" id="uname" value="" /><br />
<label for="recall">Remember you?</label>
<input type="checkbox" name="recall" id="recall" class="checkbox" />
<br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
</form>
</body>
</html>
Registration Form
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Registration</title>
</head>
<body>
<h2>User Registration</h2>
<form action="" method="post"
name="frmRegister">
<fieldset>
<legend accesskey="y">About <u>Y</u>ou (ALT + Y)</legend>
<table>
<tr>
<td><label for="userName">User name:</label></td>
<td><input type="text" name="txtUserName" size="20" id="userName" /></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="pwdPassword" size="20" id="password" /></td>
</tr>
<tr>
<td><label for="confPassword">Confirm Password:</label></td>
<td><input type="password" name="pwdPasswordConf" size="20" id="confPassword" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label for="firstName">First name:</label></td>
<td><input type="text" name="txtFirstName" size="20" id="firstName" /></td>
</tr>
<tr>
<td><label for="lastName">Last name:</label></td>
<td><input type="text" name="txtLastName" size="20" id="lastName" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label for="email">Email address:</label></td>
<td><input type="text" name="txtEmail" size="20" id="email" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name="radSex" value="male" />Male</td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="radSex" value="female" />Female</td>
</tr>
<tr><td> </td><td> </td></tr>
</table>
</fieldset>
<fieldset>
<legend accesskey="u">About <u>U</u>s (ALT + U)</legend>
<table>
<tr>
<td><label for="referrer">How did you hear about us?</label>:</td>
<td>
<select name="selReferrer" id="referrer">
<option selected="selected" value="">Select answer</option>
<option value="website">Another website</option>
<option value="printAd">Magazine ad</option>
<option value="friend">From a friend</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label for="mailList">Please select</label></td>
<td><input type="checkbox" name="chkMailingList" id="mailList" /></td>
</tr>
</table>
</fieldset>
<input type="submit" value="Register now" />
</form>
</body>
</html>
Set margin, padding and border for form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
form {
margin: 0;
padding: 1em 0;
border: 1px dotted red;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
<select name="fmtitle" id="fmtitle">
<option value="ms">Ms.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss</option>
<option value="mr">Mr.</option>
</select>
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
simple form with label, text field and submit button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A simple form</title>
</head>
<body>
<form method="post" action="">
<p><label for="email">Enter your E-mail address.</label></p>
<p><input type="text" name="email" id="email" />
<input type="submit" name="subscribe" value="Subscribe" /></p>
</form>
</body>
</html>
styleless order form
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css" media="print">
.fillout {
color: black;
border-width: 0;
border-bottom: 1px solid #000;
width: 300pt;
.postselect {
display: block;
width: 300pt;
height: 1em;
border: none;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<form>
<h2>Order Form</h2>
<table cellspacing="0">
<tr>
<td width="116"><label for="fname">First Name<label>:</td>
<td><input class="fillout" name="fname" type="text" id="fname" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input class="fillout" name="lname" type="text" id="lname" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="fillout" name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input class="fillout" name="address1" type="text" id="address1" /> </td>
</tr>
<tr>
<td> </td>
<td><input class="fillout" name="address2" type="text" id="address2" /></td>
</tr>
<tr>
<td>City:</td>
<td><input class="fillout" name="city" type="text" id="city" /></td>
</tr>
<tr>
<td>State/Province:</td>
<td> <select name="state" size="1">
<option selected="selected">Select</option>
<option>Alabama </option>
<option>Alaska </option>
<option>Arizona </option>
<option>Arkansas </option>
<option>California </option>
<option>Colorado </option>
<option>Connecticut </option>
<option>Delaware </option>
<option>Florida </option>
<option>Georgia </option>
<option>Hawaii </option>
<option>Idaho </option>
<option>Illinois </option>
<option>Indiana </option>
<option>Iowa </option>
<option>Kansas </option>
<option>Kentucky </option>
<option>Louisiana </option>
<option>Maine </option>
<option>Maryland </option>
<option>Massachusetts </option>
<option>Michigan </option>
<option>Minnesota </option>
<option>Mississippi </option>
<option>Missouri </option>
<option>Montana </option>
<option>Nebraska </option>
<option>Nevada </option>
<option>New Hampshire </option>
<option>New Jersey </option>
<option>New Mexico </option>
<option>New York </option>
<option>North Carolina </option>
<option>North Dakota </option>
<option>Ohio </option>
<option>Oklahoma </option>
<option>Oregon </option>
<option>Pennsylvania </option>
<option>Rhode Island </option>
<option>South Carolina </option>
<option>South Dakota </option>
<option>Tennessee </option>
<option>Texas </option>
<option>Utah </option>
<option>Vermont </option>
<option>Virginia </option>
<option>Washington </option>
<option>Washington, D.C. </option>
<option>West Virginia </option>
<option>Wisconsin </option>
<option>Wyoming </option>
<option>---------- </option>
<option>Alberta </option>
<option>British Columbia </option>
<option>Manitoba </option>
<option>New Brunswick </option>
<option>New Foundland </option>
<option>Nova Scotia </option>
<option>Northwest Territories </option>
<option>Ontario </option>
<option>Prince Edward Island </option>
<option>Quebec </option>
<option>Saskatchewan </option>
<option>Yukon Territory </option>
<option>Other </option>
</select><span class="postselect"> </span>
</td>
</tr>
<tr>
<td>Zip Code:</td>
<td><input class="fillout" name="zip" type="text" id="zip" /></td>
</tr>
<tr>
<td>Daytime Phone:</td>
<td><input class="fillout" name="dayphone" type="text" id="dayphone" /></td>
</tr>
<tr>
<td>Product(s):</td>
<td><input name="product" type="checkbox" id="product" value="ezweb" />Web ($19.95)
<input name="product" type="checkbox" id="product" value="ezwebultra" />Ping ($29.95)</td>
</tr>
<tr>
<td>Type of Credit Card:</td>
<td><input type="radio" name="cc" value="mastercard" />
Mastercard
<input type="radio" name="cc" value="visa" />
Visa
<input type="radio" name="cc" value="discover" />
Discover</td>
</tr>
<tr>
<td>Name on Credit Card:</td>
<td><input class="fillout" name="ccname" type="text" id="ccname" /></td>
</tr>
<tr>
<td>Card Number:</td>
<td><input class="fillout" name="ccnumber" type="text" id="ccnumber" /></td>
</tr>
<tr>
<td>Card Expiration Date:</td>
<td><input class="fillout" name="ccnumber" type="text" id="ccnumber" /></td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" id="submit" />
</form>
</body>
</html>
Styling text in form controls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Styling text in form controls</title>
<style type="text/css">
body { font-family: "Trebuchet MS", verdana, sans-serif; }
ol { list-style: none; margin: 0; padding: 0; }
li { margin: .5em 0; }
label { float: left; width: 200px; margin-right: 15px; text-align: right; }
input#submit { margin-left: 215px; }
input, select, textarea { font-family: inherit; }
</style>
</head>
<body>
<form method="post" action="">
<ol>
<li>
<label for="name">Your name</label>
<input type="text" id="name" size="35" />
</li>
<li>
<label for="email">Your E-mail address</label>
<input type="text" id="email" size="35" />
</li>
<li>
<label for="subject">What"s this about?</label>
<select id="subject">
<option value="" selected="selected">-- select --</option>
<option value="Hello">"hello"</option>
<option value="Menu Question">menu</option>
<option value="Catering">catering</option>
<option value="Complaint">complaint</option>
</select>
</li>
<li>
<label for="message">Your message</label>
<textarea id="message" cols="33" rows="10"></textarea>
</li>
<li>
<input id="submit" type="submit" value="Send It!" />
</li>
</ol>
</form>
</body>
</html>
Table and Form Example
<HTML>
<HEAD>
<TITLE>Table and Form Example</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<H2>Contact Form</H2>
<FORM ACTION="mailto: info@company.ru" METHOD="POST">
<TABLE BORDER="1">
<TR>
<TD>First Name:</TD>
<TD><INPUT NAME="firstname" SIZE="40"></TD>
</TR>
<TR>
<TD>Last Name: </TD>
<TD><INPUT NAME="lastname" SIZE="40"></TD>
</TR>
<TR>
<TD>Company:</TD>
<TD><INPUT NAME="company" SIZE="40"></TD>
</TR>
<TR>
<TD>Address:</TD><TD><INPUT NAME="address" SIZE="40"></TD>
</TR>
<TR>
<TD>City: </TD>
<TD><INPUT NAME="city" SIZE="25"></TD>
</TR>
<TR>
<TD>State: </TD>
<TD><INPUT NAME="state" SIZE="15"></TD>
</TR>
<TR>
<TD>Country: </TD>
<TD><INPUT NAME="country" SIZE="25"></TD>
</TR>
<TR>
<TD>Postal Code: </TD>
<TD><INPUT NAME="zip" SIZE="10"></TD>
</TR>
<TR>
<TD COLSPAN=2><BR>Enter any comments below:<BR>
<TEXTAREA NAME="text" ROWS="5" COLS="50"></TEXTAREA></TD>
</TR>
<TR>
<TD COLSPAN=2><CENTER><BR>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset"><BR><BR></CENTER></TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
Use DIV to wrap form control
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div {
margin: 2em;
}
</style>
</head>
<body class="required">
<form method="get" action="/">
<div>
<label for="q">Search</label>
<input type="search" placeholder="keywords" autosave="com.domain.search" results="7" name="q" />
</div>
</form>
</body>
</html>
Use DL, DT to layout the form controls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Forms</title>
<style type="text/css" media="screen">
div {
margin-bottom: 30px;
}
#divID p {
margin: 6px 0;
}
</style>
</head>
<body>
<div id="divID">
<form action="/path/to/script" id="thisform" method="post">
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text" id="name" name="name" /></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text" id="email" name="email" /></dd>
<dt><label for="remember">Remember this info?</label></dd>
<dd><input type="checkbox" id="remember" name="remember" /></dd>
<dt><p><input type="submit" value="submit" /></dt>
</dl>
</form>
<br /><br />
</div>
</body>
</html>
Use table to align the form controls
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
}
</style>
</head>
<body>
<form action="login.asp" method="post" name="frmLogin">
<table>
<tr>
<td align="right">Account name: </td>
<td><input type="text" name="txtLogin" size="20" /></td>
</tr>
<tr>
<td align="right">Password </td>
<td><input type="password" name="txtPwd" size="20" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Log in" /></td>
</tr>
</table>
</form>
</body>
</html>
Use table to layout form controls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
color: black;
border: 1px solid black;
}
th {
width: 200px;
text-align: right;
vertical-align: top;
border-top: 1px solid black;
font-family: Verdana;
font-size: 0.7em;
padding-right: 12px;
padding-top: 0.75em;
padding-bottom: 0.75em;
}
td {
vertical-align: middle;
background-color: #333333;
border-bottom: 1px solid white;
color: white;
border-left: 4px solid gray;
padding: 4px;
font-family: Verdana;
font-size: .7em;
}
.required {
color: red;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
border-bottom: 2px solid gray;
border-top: 2px solid black;
}
#buttonSubmit {
margin-left: 220px;
margin-top: 4px;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr class="header">
<th colspan="2">Account Information</th>
</tr>
<tr class="required">
<th scope="row">Login Name*</th>
<td><input name="uname" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Password*</th>
<td><input name="pword" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Confirm Password* </th>
<td><input name="pword2" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Email Address*</th>
<td><input name="email" type="text" /></td>
</tr>
<tr class="required">
<th scope="row">Confirm Email*</th>
<td><input type="text" name="email2" /></td>
</tr>
<tr class="header">
<th colspan="2">Contact Information</th>
</tr>
<tr class="required">
<th scope="row">First Name* </th>
<td><input name="fname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Last Name* </th>
<td><input name="lname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Address 1*</th>
<td><input name="address1" type="text" size="11" /></td>
</tr>
<tr>
<th scope="row">Address 2 </th>
<td><input type="text" name="address2" /></td>
</tr>
<tr class="required">
<th scope="row">City* </th>
<td><input type="text" name="city" /></td>
</tr>
<tr class="required">
<th scope="row">State or Province*</th>
<td><select name="state">
<option selected="selected" disabled="disabled">Select...</option>
<option value="alabama">Alabama</option>
</select></td>
</tr>
<tr class="required">
<th scope="row">Zip*</th>
<td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td>
</tr>
<tr class="required">
<th scope="row">Country*</th>
<td><input type="text" name="country" /></td>
</tr>
<tr class="required">
<th scope="row">Gender*</th>
<td> <input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="male" /> Male
</td>
</tr>
<tr class="header">
<th colspan="2">Misc. Information</th>
</tr>
<tr>
<th scope="row"> Annual Household Income </th>
<td>
<select name="income" size="1" >
<option selected="selected" disabled="disabled">Select...</option>
<option value="notsay">I"d rather not say</option>
</select> </td>
</tr>
<tr>
<th scope="row">Interests</th>
<td><input name="interests" type="checkbox" value="shopping-fashion" /> Shopping/fashion
<input name="interests" type="checkbox" value="sports" /> Sports
<input name="interests" type="checkbox" value="travel" /> Travel</td>
</tr>
<tr>
<th scope="row">Eye Color</th>
<td><input name="eye" type="checkbox" value="red" /> Red
<input name="eye" type="checkbox" value="green" /> Green
<input name="eye" type="checkbox" value="brown" /> Brown
<input name="eye" type="checkbox" value="blue" /> Blue Gold</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" id="buttonSubmit" />
<input type="reset" name="Submit2" value="Reset" id="buttonReset" />
</form>
</body>
</html>
Use UL and LI to layout form controls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Aligning labels</title>
<style type="text/css">
ul { list-style: none; margin: 0; padding: 0; }
li { margin: .2em 0; }
#info label {
float: left;
width: 200px;
margin-right: 15px;
text-align: right;
}
</style>
</head>
<body>
<form id="info" method="post" action="/formhandler.cgi">
<ul>
<li><label>Your name</label> <input type="text" /></li>
<li><label>Your E-mail address</label> <input type="text" /></li>
<li><label>Your telephone number</label> <input type="text" /></li>
</ul>
</form>
</body>
</html>
Wizard form
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Try it out</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 12pt;
}
fieldset {
font-size: 12px;
font-weight: bold;
padding: 10px;
width: 500px;
}
td {
font-size: 12px;
}
td.label {
text-align: right;
width: 175px;
}
td.form {
width: 350px;
}
div.submit {
width: 450px;
text-align: right;
padding-top: 15px;
}
span.small {
font-size: 10px;
}
span.required {
font-weight: bold;
font-size: 20px;
color: #ff0000;
}
input {
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #f2f2f2;
}
.steps {
width: 500px;
}
td.stepOn,td.stepOff {
width: 100px;;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding: 5px;
font-size: 14px;
}
td.stepOff {
background-color: #efefef;
}
.proceed {
text-align: right;
}
</style>
</head>
<body>
<table class="steps">
<tr>
<td class="stepOff">Step One</td>
<td class="stepOn">Step Two</td>
<td class="stepOff">Step Three</td>
</tr>
</table>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Contact details:</legend>
<table>
<tr>
<td class="label"><label for="address1">Address 1:</label></td>
<td class="form"><input type="text" name="txtAddress1" id="address1" size="30" /></td>
</tr>
<tr>
<td class="label"><label for="address2">Address 2:</label></td>
<td class="form"><input type="text" name="txtAddress2" id="address2" size="30" /></td>
</tr>
<tr>
<td class="label"><label for="town">Town/Suburb:</label></td>
<td class="form"><input type="text" name="txtTown" id="town" size="12" /></td>
</tr>
<tr>
<td class="label"><label for="city">City/State:</label></td>
<td class="form"><input type="text" name="txtState" id="city" size="12" /></td>
</tr>
<tr>
<td class="label"><label for="postcode">Postal/Zip Code:</label></td>
<td class="form"><input type="text" name="txtPostCode" id="postcode" size="12" /></td>
</tr>
</table>
<br />
<table class="steps">
<tr>
<td class="back"><input type="submit" value="Back" /></td>
<td class="proceed"><input type="submit" value="Proceed" /></td>
</tr>
</table>
</fieldset>
<br /><span class="required">*</span> = required
</form>
</body>
</html>
Wrap form controls in a DIV and set style to float left and padding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="regform" name="regform" method="post" action="">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>