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 Reply to ad
- 5 A login form with submit button
- 6 Define style based on form id
- 7 Disable a form control
- 8 Form for registration
- 9 Form layout
- 10 form margin: 3em auto
- 11 form starts the form, gives the method of sending information and the location of form scripts
- 12 Feedback Form
- 13 My Amazing Web Site
- 13.1 Contact Form
- 13.2 quid pro quo
- 13.3 simple form with label, text field and submit button
- 13.4 styleless order form
- 13.5 Order Form
- 13.6 Styling text in form controls
- 13.7 Table and Form Example
- 13.8 Contact Form
- 13.9 Use DIV to wrap form control
- 13.10 Use DL, DT to layout the form controls
- 13.11 Use table to align the form controls
- 13.12 Use table to layout form controls
- 13.13 Use UL and LI to layout form controls
- 13.14 Wizard form
- 13.15 Wrap form controls in a DIV and set style to float left and padding
- 14 My Amazing Web Site
Add BR to table cell to layout the form controls
<source lang="html4strict">
<?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">
Account name: |
<input type="text" name="txtLogin" size="20" /> |
</form> </body> </html>
</source>
Add form controls to paragraph
<source lang="html4strict">
<!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>
<form action="" method="post">
Name: <input type="text" name="name" />
Email: <input type="text" name="email" />
<input type="submit" value="submit" />
</form>
</body> </html>
</source>
Align the form controls
<source lang="html4strict">
<?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>
Reply to ad
Use the following form to respond to the ad:
<form action="" method="post" name="frmRespondToAd">
<label for="emailTo">To</label> | <input type="text" name="txtTo" readonly="readonly" id="emailTo" size="20" value="Star seller" /> |
<label for="emailFrom">To</label> | <input type="text" name="txtFrom" id="emailFrom" size="20" /> |
<label for="emailSubject">Subject</label> | <input type="text" name="txtSubject" id="emailSubject" size="50" /> |
<label for="emailBody">Body</label> | <textarea name="txtBody" id="emailBody" cols="50" rows="10"> </textarea> |
<input type="submit" value="Send email" /> </form> </body> </html>
</source>
A login form with submit button
<source lang="html4strict">
<!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="">
<label for="username">Your Username:</label> <input type="text" id="username" name="username" />
<label for="password">Your Password:</label> <input type="password" id="password" name="password" />
<input type="submit" name="login" value="Log In" />
</form>
</body> </html>
</source>
Define style based on form id
<source lang="html4strict">
<!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="">
- <label>Your name</label> <input type="text" />
- <label>Your E-mail address</label> <input type="text" />
- <label>Your telephone number</label> <input type="text" />
</form> </body> </html>
</source>
Disable a form control
<source lang="html4strict">
<!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>
<input type="button" onclick="this.disabled=true;" onkeypress="this.disabled=true;" value="submit" />
</form> </body> </html>
</source>
Form for registration
<source lang="html4strict">
<?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>
<label for="fname">First name: *</label> | <input type="text" name="txtFirstName" id="fname" size="12" /> |
<label for="lname">Last name: *</label> | <input type="text" name="txtLastName" id="lname" size="12" /> |
<label for="email">E-mail address: *</label> | <input type="password" name="txtEmail" id="email" size="20" /> |
<label for="pwd">Password: *</label> | <input type="password" name="txtPassword" id="pwd" size="12" /> must be between 6 and 12 characters long |
<label for="pwdConf">Confirm password: *</label> | <input type="password" name="txtPasswordConf" id="pwdConf" size="12" /> |
* = required </fieldset> </form> </body> </html>
</source>
Form layout
<source lang="html4strict">
<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">
Account Information | |
---|---|
Login Name* | <input name="uname" type="text" size="12" maxlength="12" /> |
Password* | <input name="pword" type="text" size="12" maxlength="12" /> |
Confirm Password* | <input name="pword2" type="text" size="12" maxlength="12" /> |
Email Address* | <input name="email" type="text" /> |
Contact Information | |
First Name* | <input name="fname" type="text" size="11" /> |
Last Name* | <input name="lname" type="text" size="11" /> |
Address 1* | <input name="address1" type="text" size="11" /> |
Address 2 | <input type="text" name="address2" /> |
City* | <input type="text" name="city" /> |
State or Province* | <select name="state">
<option selected="selected" disabled="disabled">Select...</option> <option value="alabama">Alabama</option></select> |
Zip* | <input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /> |
Country* | <input type="text" name="country" id="country" /> |
Gender* | <input type="radio" name="sex" value="female" />
Female <input type="radio" name="sex" value="male" />Male |
Misc. | |
Income |
<select name="income" size="1" > <option selected="selected" disabled="disabled">Select...</option> <option value="notsay">no</option></select> |
Interests | <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 |
Eye Color | <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 |
<input type="submit" name="Submit" value="Submit" id="buttonSubmit" /> <input type="reset" name="Submit2" value="Reset" id="buttonReset" />
</form> </body> </html>
</source>
form margin: 3em auto
<source lang="html4strict">
<!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>
</fieldset> <fieldset id="address"> <legend>Address</legend> <label>Street <input id="street" name="street" type="text" /> </label>
<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>
<label>Country <input id="country" name="country" type="text" /> </label>
</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>
</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>
<input class="submit" type="submit" value="Submit" />
</fieldset> </form> </body>
</html>
</source>
form starts the form, gives the method of sending information and the location of form scripts
<source lang="html4strict">
<?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>
Feedback Form
Please fill out this form to help us improve our site.
<form method = "post" action = "">
<label>Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label>
<input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" />
</form> </body>
</html>
</source>
form width: 75%
<source lang="html4strict">
<!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>
</fieldset> <fieldset id="address"> <legend>Address</legend> <label>Street <input id="street" name="street" type="text" /> </label>
<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>
<label>Country <input id="country" name="country" type="text" /> </label>
</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>
</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>
<input class="submit" type="submit" value="Submit" />
</fieldset> </form> </body>
</html>
</source>
Introducing Form Design
<source lang="html4strict">
<HTML> <HEAD> <TITLE> - Forms</TITLE> </HEAD> <BODY>
Feedback Form
Please fill out this form to help us improve our site.
<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">
Name: <INPUT NAME = "name" TYPE = "text" SIZE = "25">
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"> <INPUT TYPE = "reset" VALUE = "Clear Your Entries"> </FORM> </BODY> </HTML>
</source>
Layout form controls with table
<source lang="html4strict">
<?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>
Register your opinion
<form action="" method="get" name="frmRespondToAd">
<input type="radio" name="radVote" value="1" id="vpoor" /> | <input type="radio" name="radVote" value="2" id="poor" /> | <input type="radio" name="radVote" value="3" id="average" checked="checked" /> | <input type="radio" name="radVote" value="4" id="good" /> | <input type="radio" name="radVote" value="5" id="vgood" /> |
<label for="vpoor">1 Very Poor</label> |
<label for="poor">2 Poor</label> |
<label for="average">3 Average</label> |
<label for="good">4 Good</label> |
<label for="vgood">5 Very Good</label> |
<input type="submit" value="Vote now" /> </form> </body> </html>
</source>
Layout form with CSS
<source lang="html4strict">
<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="" />
<label for="pname">Password</label> <input type="text" name="uname" id="uname" value="" />
<label for="recall">Remember you?</label> <input type="checkbox" name="recall" id="recall" class="checkbox" />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
</form> </body> </html>
</source>
Registration Form
<source lang="html4strict">
<?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>
User Registration
<form action="" method="post"
name="frmRegister">
<fieldset>
<legend accesskey="y">About You (ALT + Y)</legend>
<label for="userName">User name:</label> | <input type="text" name="txtUserName" size="20" id="userName" /> |
<label for="password">Password:</label> | <input type="password" name="pwdPassword" size="20" id="password" /> |
<label for="confPassword">Confirm Password:</label> | <input type="password" name="pwdPasswordConf" size="20" id="confPassword" /> |
<label for="firstName">First name:</label> | <input type="text" name="txtFirstName" size="20" id="firstName" /> |
<label for="lastName">Last name:</label> | <input type="text" name="txtLastName" size="20" id="lastName" /> |
<label for="email">Email address:</label> | <input type="text" name="txtEmail" size="20" id="email" /> |
Gender: | <input type="radio" name="radSex" value="male" />Male |
<input type="radio" name="radSex" value="female" />Female | |
</fieldset> <fieldset>
<legend accesskey="u">About Us (ALT + U)</legend>
<label for="referrer">How did you hear about us?</label>: |
<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> |
<label for="mailList">Please select</label> | <input type="checkbox" name="chkMailingList" id="mailList" /> |
</fieldset> <input type="submit" value="Register now" /> </form> </body> </html>
</source>
Set margin, padding and border for form
<source lang="html4strict">
<!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>
My Amazing Web Site
Contact Form
<form id="form1" name="form1" method="post" action="/">
<label for="fmtitle" accesskey="i">Title</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">Name</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e">Email</label> <input type="text" name="fmemail" id="fmemail" /> <label for="fmstate" accesskey="a">State/Province</label> <input type="text" name="fmstate" id="fmstate" /> <label for="fmstate" accesskey="y">Country</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send" class="submit" /> </form>
quid pro quo
</body> </html>
</source>
simple form with label, text field and submit button
<source lang="html4strict">
<!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="">
<label for="email">Enter your E-mail address.</label>
<input type="text" name="email" id="email" /> <input type="submit" name="subscribe" value="Subscribe" />
</form>
</body> </html>
</source>
styleless order form
<source lang="html4strict">
<?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>
Order Form
<label for="fname">First Name<label>: | <input class="fillout" name="fname" type="text" id="fname" /> |
Last Name: | <input class="fillout" name="lname" type="text" id="lname" /> |
Email: | <input class="fillout" name="email" type="text" id="email" /> |
Address: | <input class="fillout" name="address1" type="text" id="address1" /> |
<input class="fillout" name="address2" type="text" id="address2" /> | |
City: | <input class="fillout" name="city" type="text" id="city" /> |
State/Province: | <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>
|
Zip Code: | <input class="fillout" name="zip" type="text" id="zip" /> |
Daytime Phone: | <input class="fillout" name="dayphone" type="text" id="dayphone" /> |
Product(s): | <input name="product" type="checkbox" id="product" value="ezweb" />Web ($19.95) <input name="product" type="checkbox" id="product" value="ezwebultra" />Ping ($29.95) |
Type of Credit Card: | <input type="radio" name="cc" value="mastercard" />
Mastercard <input type="radio" name="cc" value="visa" /> Visa <input type="radio" name="cc" value="discover" />Discover |
Name on Credit Card: | <input class="fillout" name="ccname" type="text" id="ccname" /> |
Card Number: | <input class="fillout" name="ccnumber" type="text" id="ccnumber" /> |
Card Expiration Date: | <input class="fillout" name="ccnumber" type="text" id="ccnumber" /> |
<input type="submit" name="Submit" value="Submit" id="submit" /> </form> </body> </html>
</source>
Styling text in form controls
<source lang="html4strict">
<!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="">
- <label for="name">Your name</label> <input type="text" id="name" size="35" />
- <label for="email">Your E-mail address</label> <input type="text" id="email" size="35" />
- <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>
- <label for="message">Your message</label> <textarea id="message" cols="33" rows="10"></textarea>
- <input id="submit" type="submit" value="Send It!" />
</form> </body> </html>
</source>
Table and Form Example
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Table and Form Example</TITLE> </HEAD> <BODY>
Contact Form
<FORM ACTION="mailto: info@company.ru" METHOD="POST">
First Name: | <INPUT NAME="firstname" SIZE="40"> |
Last Name: | <INPUT NAME="lastname" SIZE="40"> |
Company: | <INPUT NAME="company" SIZE="40"> |
Address: | <INPUT NAME="address" SIZE="40"> |
City: | <INPUT NAME="city" SIZE="25"> |
State: | <INPUT NAME="state" SIZE="15"> |
Country: | <INPUT NAME="country" SIZE="25"> |
Postal Code: | <INPUT NAME="zip" SIZE="10"> |
Enter any comments below: <TEXTAREA NAME="text" ROWS="5" COLS="50"></TEXTAREA> |
|
<INPUT TYPE="submit" VALUE="Submit"><INPUT TYPE="reset"> |
</FORM>
</BODY> </HTML>
</source>
Use DIV to wrap form control
<source lang="html4strict">
<!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="/">
<label for="q">Search</label> <input type="search" placeholder="keywords" autosave="com.domain.search" results="7" name="q" />
</form> </body> </html>
</source>
Use DL, DT to layout the form controls
<source lang="html4strict">
<!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>
<form action="/path/to/script" id="thisform" method="post">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name" />
- <label for="email">Email:</label>
- <input type="text" id="email" name="email" />
- <label for="remember">Remember this info?</label></dd>
- <input type="checkbox" id="remember" name="remember" />
<input type="submit" value="submit" /></dt> </dl> </form>
</div> </body> </html> </source>Use table to align the form controls
<source lang="html4strict">
<?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">
Account name: <input type="text" name="txtLogin" size="20" /> Password <input type="password" name="txtPwd" size="20" /> <input type="submit" value="Log in" /> </form> </body> </html>
</source>
Use table to layout form controls
<source lang="html4strict">
<!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>
Account Information Login Name* <input name="uname" type="text" size="12" maxlength="12" /> Password* <input name="pword" type="text" size="12" maxlength="12" /> Confirm Password* <input name="pword2" type="text" size="12" maxlength="12" /> Email Address* <input name="email" type="text" /> Confirm Email* <input type="text" name="email2" /> Contact Information First Name* <input name="fname" type="text" size="11" /> Last Name* <input name="lname" type="text" size="11" /> Address 1* <input name="address1" type="text" size="11" /> Address 2 <input type="text" name="address2" /> City* <input type="text" name="city" /> State or Province* <select name="state"> <option selected="selected" disabled="disabled">Select...</option> <option value="alabama">Alabama</option>
</select>Zip* <input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /> Country* <input type="text" name="country" /> Gender* <input type="radio" name="sex" value="female" /> Female <input type="radio" name="sex" value="male" /> Male
Misc. Information Annual Household Income <select name="income" size="1" > <option selected="selected" disabled="disabled">Select...</option> <option value="notsay">I"d rather not say</option>
</select>Interests <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" /> TravelEye Color <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<input type="submit" name="Submit" value="Submit" id="buttonSubmit" /> <input type="reset" name="Submit2" value="Reset" id="buttonReset" /> </form>
</body> </html>
</source>
Use UL and LI to layout form controls
<source lang="html4strict">
<!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">
- <label>Your name</label> <input type="text" />
- <label>Your E-mail address</label> <input type="text" />
- <label>Your telephone number</label> <input type="text" />
</form> </body> </html>
</source>
Wizard form
<source lang="html4strict">
<?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>
Step One Step Two Step Three <form name="frmExample" action="" method="post"> <fieldset> <legend>Contact details:</legend>
<label for="address1">Address 1:</label> <input type="text" name="txtAddress1" id="address1" size="30" /> <label for="address2">Address 2:</label> <input type="text" name="txtAddress2" id="address2" size="30" /> <label for="town">Town/Suburb:</label> <input type="text" name="txtTown" id="town" size="12" /> <label for="city">City/State:</label> <input type="text" name="txtState" id="city" size="12" /> <label for="postcode">Postal/Zip Code:</label> <input type="text" name="txtPostCode" id="postcode" size="12" />
<input type="submit" value="Back" /> <input type="submit" value="Proceed" /> </fieldset>
* = required </form> </body> </html></source>
Wrap form controls in a DIV and set style to float left and padding
<source lang="html4strict">
<!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>
My Amazing Web Site
Contact Form
<form id="regform" name="regform" method="post" action="">
Register
<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" />
Contact Information
<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" />
</form>
</body> </html>
</source>