HTML Web表单的国家/地区下拉列表

<select>
    <option value="  " selected>(please select a country)</option>
    <option value="--">none</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="AZ">Azerbaijan</option>
    <option value="BS">Bahamas</option>
    <option value="BH">Bahrain</option>
    <option value="BD">Bangladesh</option>
    <option value="BB">Barbados</option>
    <option value="BY">Belarus</option>
    <option value="BE">Belgium</option>
    <option value="BZ">Belize</option>
    <option value="BJ">Benin</option>
    <option value="BM">Bermuda</option>
    <option value="BT">Bhutan</option>
    <option value="BO">Bolivia</option>
    <option value="BA">Bosnia and Herzegowina</option>
    <option value="BW">Botswana</option>
    <option value="BV">Bouvet Island</option>
    <option value="BR">Brazil</option>
    <option value="IO">British Indian Ocean Territory</option>
    <option value="BN">Brunei Darussalam</option>
    <option value="BG">Bulgaria</option>
    <option value="BF">Burkina Faso</option>
    <option value="BI">Burundi</option>
    <option value="KH">Cambodia</option>
    <option value="CM">Cameroon</option>
    <option value="CA">Canada</option>
    <option value="CV">Cape Verde</option>
    <option value="KY">Cayman Islands</option>
    <option value="CF">Central African Republic</option>
    <option value="TD">Chad</option>
    <option value="CL">Chile</option>
    <option value="CN">China</option>
    <option value="CX">Christmas Island</option>
    <option value="CC">Cocos (Keeling) Islands</option>
    <option value="CO">Colombia</option>
    <option value="KM">Comoros</option>
    <option value="CG">Congo</option>
    <option value="CD">Congo, the Democratic Republic of the</option>
    <option value="CK">Cook Islands</option>
    <option value="CR">Costa Rica</option>
    <option value="CI">Cote d'Ivoire</option>
    <option value="HR">Croatia (Hrvatska)</option>
    <option value="CU">Cuba</option>
    <option value="CY">Cyprus</option>
    <option value="CZ">Czech Republic</option>
    <option value="DK">Denmark</option>
    <option value="DJ">Djibouti</option>
    <option value="DM">Dominica</option>
    <option value="DO">Dominican Republic</option>
    <option value="TP">East Timor</option>
    <option value="EC">Ecuador</option>
    <option value="EG">Egypt</option>
    <option value="SV">El Salvador</option>
    <option value="GQ">Equatorial Guinea</option>
    <option value="ER">Eritrea</option>
    <option value="EE">Estonia</option>
    <option value="ET">Ethiopia</option>
    <option value="FK">Falkland Islands (Malvinas)</option>
    <option value="FO">Faroe Islands</option>
    <option value="FJ">Fiji</option>
    <option value="FI">Finland</option>
    <option value="FR">France</option>
    <option value="FX">France, Metropolitan</option>
    <option value="GF">French Guiana</option>
    <option value="PF">French Polynesia</option>
    <option value="TF">French Southern Territories</option>
    <option value="GA">Gabon</option>
    <option value="GM">Gambia</option>
    <option value="GE">Georgia</option>
    <option value="DE">Germany</option>
    <option value="GH">Ghana</option>
    <option value="GI">Gibraltar</option>
    <option value="GR">Greece</option>
    <option value="GL">Greenland</option>
    <option value="GD">Grenada</option>
    <option value="GP">Guadeloupe</option>
    <option value="GU">Guam</option>
    <option value="GT">Guatemala</option>
    <option value="GN">Guinea</option>
    <option value="GW">Guinea-Bissau</option>
    <option value="GY">Guyana</option>
    <option value="HT">Haiti</option>
    <option value="HM">Heard and Mc Donald Islands</option>
    <option value="VA">Holy See (Vatican City State)</option>
    <option value="HN">Honduras</option>
    <option value="HK">Hong Kong</option>
    <option value="HU">Hungary</option>
    <option value="IS">Iceland</option>
    <option value="IN">India</option>
    <option value="ID">Indonesia</option>
    <option value="IR">Iran (Islamic Republic of)</option>
    <option value="IQ">Iraq</option>
    <option value="IE">Ireland</option>
    <option value="IL">Israel</option>
    <option value="IT">Italy</option>
    <option value="JM">Jamaica</option>
    <option value="JP">Japan</option>
    <option value="JO">Jordan</option>
    <option value="KZ">Kazakhstan</option>
    <option value="KE">Kenya</option>
    <option value="KI">Kiribati</option>
    <option value="KP">Korea, Democratic People's Republic of</option>
    <option value="KR">Korea, Republic of</option>
    <option value="KW">Kuwait</option>
    <option value="KG">Kyrgyzstan</option>
    <option value="LA">Lao People's Democratic Republic</option>
    <option value="LV">Latvia</option>
    <option value="LB">Lebanon</option>
    <option value="LS">Lesotho</option>
    <option value="LR">Liberia</option>
    <option value="LY">Libyan Arab Jamahiriya</option>
    <option value="LI">Liechtenstein</option>
    <option value="LT">Lithuania</option>
    <option value="LU">Luxembourg</option>
    <option value="MO">Macau</option>
    <option value="MK">Macedonia, The Former Yugoslav Republic of</option>
    <option value="MG">Madagascar</option>
    <option value="MW">Malawi</option>
    <option value="MY">Malaysia</option>
    <option value="MV">Maldives</option>
    <option value="ML">Mali</option>
    <option value="MT">Malta</option>
    <option value="MH">Marshall Islands</option>
    <option value="MQ">Martinique</option>
    <option value="MR">Mauritania</option>
    <option value="MU">Mauritius</option>
    <option value="YT">Mayotte</option>
    <option value="MX">Mexico</option>
    <option value="FM">Micronesia, Federated States of</option>
    <option value="MD">Moldova, Republic of</option>
    <option value="MC">Monaco</option>
    <option value="MN">Mongolia</option>
    <option value="MS">Montserrat</option>
    <option value="MA">Morocco</option>
    <option value="MZ">Mozambique</option>
    <option value="MM">Myanmar</option>
    <option value="NA">Namibia</option>
    <option value="NR">Nauru</option>
    <option value="NP">Nepal</option>
    <option value="NL">Netherlands</option>
    <option value="AN">Netherlands Antilles</option>
    <option value="NC">New Caledonia</option>
    <option value="NZ">New Zealand</option>
    <option value="NI">Nicaragua</option>
    <option value="NE">Niger</option>
    <option value="NG">Nigeria</option>
    <option value="NU">Niue</option>
    <option value="NF">Norfolk Island</option>
    <option value="MP">Northern Mariana Islands</option>
    <option value="NO">Norway</option>
    <option value="OM">Oman</option>
    <option value="PK">Pakistan</option>
    <option value="PW">Palau</option>
    <option value="PA">Panama</option>
    <option value="PG">Papua New Guinea</option>
    <option value="PY">Paraguay</option>
    <option value="PE">Peru</option>
    <option value="PH">Philippines</option>
    <option value="PN">Pitcairn</option>
    <option value="PL">Poland</option>
    <option value="PT">Portugal</option>
    <option value="PR">Puerto Rico</option>
    <option value="QA">Qatar</option>
    <option value="RE">Reunion</option>
    <option value="RO">Romania</option>
    <option value="RU">Russian Federation</option>
    <option value="RW">Rwanda</option>
    <option value="KN">Saint Kitts and Nevis</option> 
    <option value="LC">Saint LUCIA</option>
    <option value="VC">Saint Vincent and the Grenadines</option>
    <option value="WS">Samoa</option>
    <option value="SM">San Marino</option>
    <option value="ST">Sao Tome and Principe</option> 
    <option value="SA">Saudi Arabia</option>
    <option value="SN">Senegal</option>
    <option value="SC">Seychelles</option>
    <option value="SL">Sierra Leone</option>
    <option value="SG">Singapore</option>
    <option value="SK">Slovakia (Slovak Republic)</option>
    <option value="SI">Slovenia</option>
    <option value="SB">Solomon Islands</option>
    <option value="SO">Somalia</option>
    <option value="ZA">South Africa</option>
    <option value="GS">South Georgia and the South Sandwich Islands</option>
    <option value="ES">Spain</option>
    <option value="LK">Sri Lanka</option>
    <option value="SH">St. Helena</option>
    <option value="PM">St. Pierre and Miquelon</option>
    <option value="SD">Sudan</option>
    <option value="SR">Suriname</option>
    <option value="SJ">Svalbard and Jan Mayen Islands</option>
    <option value="SZ">Swaziland</option>
    <option value="SE">Sweden</option>
    <option value="CH">Switzerland</option>
    <option value="SY">Syrian Arab Republic</option>
    <option value="TW">Taiwan, Province of China</option>
    <option value="TJ">Tajikistan</option>
    <option value="TZ">Tanzania, United Republic of</option>
    <option value="TH">Thailand</option>
    <option value="TG">Togo</option>
    <option value="TK">Tokelau</option>
    <option value="TO">Tonga</option>
    <option value="TT">Trinidad and Tobago</option>
    <option value="TN">Tunisia</option>
    <option value="TR">Turkey</option>
    <option value="TM">Turkmenistan</option>
    <option value="TC">Turks and Caicos Islands</option>
    <option value="TV">Tuvalu</option>
    <option value="UG">Uganda</option>
    <option value="UA">Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
    <option value="UM">United States Minor Outlying Islands</option>
    <option value="UY">Uruguay</option>
    <option value="UZ">Uzbekistan</option>
    <option value="VU">Vanuatu</option>
    <option value="VE">Venezuela</option>
    <option value="VN">Viet Nam</option>
    <option value="VG">Virgin Islands (British)</option>
    <option value="VI">Virgin Islands (U.S.)</option>
    <option value="WF">Wallis and Futuna Islands</option>
    <option value="EH">Western Sahara</option>
    <option value="YE">Yemen</option>
    <option value="YU">Yugoslavia</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
</select>

HTML 纯CSS工具提示

<a href="#">Roll over here <span>Pure Css Tooltip</span></a>

<style type="text/css">

/* general */

	body {
		margin:0;
		padding:40px 80px;
		background:#fff;
		font:70% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
		}
	h1, h2{
		font-size:180%;
		font-weight:normal;
		color:#555;
		}
	h2{
		font-size:140%;
		}	
	p{
		margin:1em 0;
		width:500px;
		}
	a{
		color:#f20;
		text-decoration:none;
		}
	a:hover{
		color:#999;
		}
	
	/* // here comes the goodnes  */	
	
		a{
			z-index:10;
			}
		a:hover{
			position:relative;
			z-index:100;
			}			
		a span{
			display:none;
			}
		a:hover span{
			display:block;
			position:absolute;
			float:left;
			white-space:nowrap;
			top:-2.2em;
			left:.5em;
			background:#fffcd1;
			border:1px solid #444;
			color:#444;
			padding:1px 5px;
			z-index:10;			
			}			
		
	/* // goodnes  */

/* // general */

</style>

HTML 箭头实体

← or ←	leftwards arrow	← or ←
↑ or ↑	upwards arrow	↑ or ↑
→ or →	rightwards arrow	→ or →
↓ or ↓	downwards arrow	↓ or ↓
↔ or ↔	left right arrow	↔ or ↔
↵ or ↵	downwards arrow with corner leftwards = carriage return	↵ or ↵
⇐ or ⇐	leftwards double arrow	⇐ or ⇐
⇑ or ⇑	upwards double arrow	⇑ or ⇑
⇒ or ⇒	rightwards double arrow	⇒ or ⇒
⇓ or ⇓	downwards double arrow	⇓ or ⇓
⇔ or ⇔	left right double arrow	⇔ or ⇔
∀ or ∀	for all

HTML HTTP状态代码

Informational

    * 100 - Continue
      A status code of 100 indicates that (usually the first) part of a request has been received without any problems, and that the rest of the request should now be sent.
    * 101 - Switching Protocols
      HTTP 1.1 is just one type of protocol for transferring data on the web, and a status code of 101 indicates that the server is changing to the protocol it defines in the "Upgrade" header it returns to the client. For example, when requesting a page, a browser might receive a statis code of 101, followed by an "Upgrade" header showing that the server is changing to a different version of HTTP.

Successful

    * 200 - OK
      The 200 status code is by far the most common returned. It means, simply, that the request was received and understood and is being processed.
    * 201 - Created
      A 201 status code indicates that a request was successful and as a result, a resource has been created (for example a new page).
    * 202 - Accepted
      The status code 202 indicates that server has received and understood the request, and that it has been accepted for processing, although it may not be processed immediately.
    * 203 - Non-Authoritative Information
      A 203 status code means that the request was received and understood, and that information sent back about the response is from a third party, rather than the original server. This is virtually identical in meaning to a 200 status code.
    * 204 - No Content
      The 204 status code means that the request was received and understood, but that there is no need to send any data back.
    * 205 - Reset Content
      The 205 status code is a request from the server to the client to reset the document from which the original request was sent. For example, if a user fills out a form, and submits it, a status code of 205 means the server is asking the browser to clear the form.
    * 206 - Partial Content
      A status code of 206 is a response to a request for part of a document. This is used by advanced caching tools, when a user agent requests only a small part of a page, and just that section is returned.

Redirection

    * 300 - Multiple Choices
      The 300 status code indicates that a resource has moved. The response will also include a list of locations from which the user agent can select the most appropriate.
    * 301 - Moved Permanently
      A status code of 301 tells a client that the resource they asked for has permanently moved to a new location. The response should also include this location. It tells the client to use the new URL the next time it wants to fetch the same resource.
    * 302 - Found
      A status code of 302 tells a client that the resource they asked for has temporarily moved to a new location. The response should also include this location. It tells the client that it should carry on using the same URL to access this resource.
    * 303 - See Other
      A 303 status code indicates that the response to the request can be found at the specified URL, and should be retrieved from there. It does not mean that something has moved - it is simply specifying the address at which the response to the request can be found.
    * 304 - Not Modified
      The 304 status code is sent in response to a request (for a document) that asked for the document only if it was newer than the one the client already had. Normally, when a document is cached, the date it was cached is stored. The next time the document is viewed, the client asks the server if the document has changed. If not, the client just reloads the document from the cache.
    * 305 - Use Proxy
      A 305 status code tells the client that the requested resource has to be reached through a proxy, which will be specified in the response.
    * 307 - Temporary Redirect
      307 is the status code that is sent when a document is temporarily available at a different URL, which is also returned. There is very little difference between a 302 status code and a 307 status code. 307 was created as another, less ambiguous, version of the 302 status code.

Client Error

    * 400 - Bad Request
      A status code of 400 indicates that the server did not understand the request due to bad syntax.
    * 401 - Unauthorized
      A 401 status code indicates that before a resource can be accessed, the client must be authorised by the server.
    * 402 - Payment Required
      The 402 status code is not currently in use, being listed as "reserved for future use".
    * 403 - Forbidden
      A 403 status code indicates that the client cannot access the requested resource. That might mean that the wrong username and password were sent in the request, or that the permissions on the server do not allow what was being asked.
    * 404 - Not Found
      The best known of them all, the 404 status code indicates that the requested resource was not found at the URL given, and the server has no idea how long for.
    * 405 - Method Not Allowed
      A 405 status code is returned when the client has tried to use a request method that the server does not allow. Request methods that are allowed should be sent with the response (common request methods are POST and GET).
    * 406 - Not Acceptable
      The 406 status code means that, although the server understood and processed the request, the response is of a form the client cannot understand. A client sends, as part of a request, headers indicating what types of data it can use, and a 406 error is returned when the response is of a type not i that list.
    * 407 - Proxy Authentication Required
      The 407 status code is very similar to the 401 status code, and means that the client must be authorised by the proxy before the request can proceed.
    * 408 - Request Timeout
      A 408 status code means that the client did not produce a request quickly enough. A server is set to only wait a certain amount of time for responses from clients, and a 408 status code indicates that time has passed.
    * 409 - Conflict
      A 409 status code indicates that the server was unable to complete the request, often because a file would need to be editted, created or deleted, and that file cannot be editted, created or deleted.
    * 410 - Gone
      A 410 status code is the 404's lesser known cousin. It indicates that a resource has permanently gone (a 404 status code gives no indication if a resource has gine permanently or temporarily), and no new address is known for it.
    * 411 - Length Required
      The 411 status code occurs when a server refuses to process a request because a content length was not specified.
    * 412 - Precondition Failed
      A 412 status code indicates that one of the conditions the request was made under has failed.
    * 413 - Request Entity Too Large
      The 413 status code indicates that the request was larger than the server is able to handle, either due to physical constraints or to settings. Usually, this occurs when a file is sent using the POST method from a form, and the file is larger than the maximum size allowed in the server settings.
    * 414 - Request-URI Too Long
      The 414 status code indicates the the URL requested by the client was longer than it can process.
    * 415 - Unsupported Media Type
      A 415 status code is returned by a server to indicate that part of the request was in an unsupported format.
    * 416 - Requested Range Not Satisfiable
      A 416 status code indicates that the server was unable to fulfill the request. This may be, for example, because the client asked for the 800th-900th bytes of a document, but the document was only 200 bytes long.
    * 417 - Expectation Failed
      The 417 status code means that the server was unable to properly complete the request. One of the headers sent to the server, the "Expect" header, indicated an expectation the server could not meet.

Server Error

    * 500 - Internal Server Error
      A 500 status code (all too often seen by Perl programmers) indicates that the server encountered something it didn't expect and was unable to complete the request.
    * 501 - Not Implemented
      The 501 status code indicates that the server does not support all that is needed for the request to be completed.
    * 502 - Bad Gateway
      A 502 status code indicates that a server, while acting as a proxy, received a response from a server further upstream that it judged invalid.
    * 503 - Service Unavailable
      A 503 status code is most often seen on extremely busy servers, and it indicates that the server was unable to complete the request due to a server overload.
    * 504 - Gateway Timeout
      A 504 status code is returned when a server acting as a proxy has waited too long for a response from a server further upstream.
    * 505 - HTTP Version Not Supported
      A 505 status code is returned when the HTTP version indicated in the request is no supported. The response should indicate which HTTP versions are supported.

HTML 更好的HTML 5基本入门模板

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Brand New Web Site</title>
  <meta name="description" content="The Brand New Web Site">
  <meta name="author" content="Barattalo.it">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
	


	<!-- run javascript at the end -->
  <script src="js/scripts.js"></script>
</body>
</html>

HTML 圆角没有图像,只是css,这工作

<div id="container">

<b class="rtop">

<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

</b>
<div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
<!--content goes here -->

<b class="rbottom">

<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>

</b>

</div>
<div id="container">

<b class="rtop">

<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

</b>
<div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
<!--content goes here -->

<b class="rbottom">

<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>

</b>

</div>
<div id="container">

<b class="rtop">

<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

</b>
<div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
<!--content goes here -->

<b class="rbottom">

<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>

</b>

</div><style type="text/css">
 
#container {
margin-bottom:30px;
}
.rtop, .rbottom{display:block; }

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden;
background: red;}

.r1{margin: 0 5px;}

.r2{margin: 0 3px }

.r3{margin: 0 2px;
}

.r4{margin: 0 1px; height: 2px;}
</style>

HTML 简单的HTML5入门模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled</title>
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		
	</body>
</html>

HTML CSS表单模板

<!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>
<title>A CSS-based Form Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }

/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; border: #EEE 1px solid; }

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
div.errors p { margin: 0; }
div.errors p em { color: #C00; font-style: normal; font-weight: bold; }

div.form-container form p { margin: 0; }
div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
div.form-container form fieldset { margin: 10px 0; padding: 10px; border: #DDD 1px solid; }
div.form-container form legend { font-weight: bold; color: #666; }
div.form-container form fieldset div { padding: 0.25em 0; }
div.form-container label, 
div.form-container span.label { margin-right: 10px; padding-right: 10px; width: 150px; display: block; float: left; text-align: right; position: relative; }
div.form-container label.error, 
div.form-container span.error { color: #C00; }
div.form-container label em, 
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input.error { border-color: #C00; background-color: #FEF; }
div.form-container input:focus,
div.form-container input.error:focus, 
div.form-container textarea:focus {	background-color: #FFC; border-color: #FC6; }
div.form-container div.controlset label, 
div.form-container div.controlset input { display: inline; float: none; }
div.form-container div.controlset div { margin-left: 170px; }
div.form-container div.buttonrow { margin-left: 180px; }

</style>

</head>

<body>

<div id="wrapper">

	<h2>A CSS-based Form Template</h2>

	<div class="form-container">

	<p>More information about this template could be found in <a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" title="Nidahas: Forms markup and CSS - Revisited">this blog article</a>.</p>
	
	<div class="errors">
		<p><em>Oops... the following errors were encountered:</em></p>

		<ul>
			<li>Username cannot be empty</li>
			<li>Country cannot be empty</li>
		</ul>
		<p>Data has <strong>not</strong> been saved.</p>
	</div>

	<form action="#" method="post">
	
	<p class="legend"><strong>Note:</strong> Required fields are marked with an asterisk (<em>*</em>)</p>
	
	<fieldset>
		<legend>User Details</legend>
			<div><label for="uname" class="error">Username <em>*</em></label> <input id="uname" type="text" name="uname" value="" class="error" /></div>

			<div><label for="email">Email Address </label> <input id="email" type="text" name="email" value="" />
				<p class="note">We will never sell or disclose your email address to anyone. <strong>This is an example of a note for an input field.</strong></p>
			</div>
	
			<div><label for="fname">First Name <em>*</em></label> <input id="fname" type="text" name="fname" value="" size="50" /></div>
			<div><label for="lname">Last Name </label> <input id="lname" type="text" name="lname" value="" size="50" /></div>

	</fieldset>
	
	<fieldset>
		<legend>Contact Information</legend>
			<div><label for="address1">Address 1 <em>*</em></label> <input id="address1" type="text" size="50" /></div>
			<div><label for="address2">Address 2</label> <input id="address2" type="text" size="50" /></div>
			<div><label for="country" class="error">Country <em>*</em></label> <input id="country" type="text" name="country" value="" class="error" size="12" />

				<p class="note">Errors could be highlighted by giving an <code>error</code> class to the input field, as seen here.</p>
			</div>
			<div><label for="telephone">Telephone</label> <input id="telephone" type="text" size="3" /> - <input type="text" size="3" /> - <input type="text" size="4" />
				<p class="note">(###) - ### - ####</p>

			</div>
	</fieldset>
	
	<fieldset>
		<legend>Submission</legend>
			<div><label for="year">Year (YYYY) <em>*</em></label> <input id="year" type="text" name="year" value="" size="4" maxlength="4" /></div>
			<div><label for="date">Month (MM)</label> <input id="date" type="text" name="date" value="" size="4" maxlength="2" /></div>

	</fieldset>
	
	<fieldset>
		<legend>Preferences</legend>
			<div>
				<label for="type">Type <em>*</em></label>
				<select id="type">
					<optgroup label="Type of Whatever">

						<option>Corporate</option>
						<option>Individual</option>
					</optgroup>
				</select>
			</div>
			<div class="controlset">
				<span class="label">User Status <em>*</em></span>

				<input name="approved" id="approved" value="1" type="checkbox" /> <label for="approved">Approved</label>
				<input name="pending" id="pending" value="1" type="checkbox" /> <label for="pending">Pending Applications</label>
				<input name="actives" id="actives" value="1" type="checkbox" /> <label for="actives">Active Service</label>
			</div>			

			<div class="controlset">
				<span class="label">Preferred Location</span>

				<input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label>
				<input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label>
				<input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label>
			</div>			

			<div class="controlset">
				<span class="label">Something Else <em>*</em></span>

				<div>
					<input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label> <br />
					<input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label> <br />
					<input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label> <br />

				</div>
			</div>			
	</fieldset>
	
	<fieldset>
		<legend>Profile</legend>
			<div>
				<label for="desc">Description <em>*</em></label>
				<textarea id="desc" name="desc" cols="30" rows="4"></textarea>

			</div>
			<div>
				<label for="info">Additional Info </label>
				<textarea id="info" name="info" cols="40" rows="5"></textarea>
			</div>
	</fieldset>
	
	<div class="buttonrow">
		<input type="submit" value="Save" class="button" />

		<input type="button" value="Discard" class="button" />
	</div>

	</form>
	
	</div><!-- /form-container -->
	
	<p id="copyright">Created by <a href="http://nidahas.com/">Prabhath Sirisena</a>. This stuff is in public domain.</p>
	
</div><!-- /wrapper -->

</body>
</html>

HTML Safari搜索字段

<input name="s" id="s" type="search" placeholder="Text in search field" autosave="com.namespace" results="5" />

HTML 推荐的HTML5开始标记

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
     
</body>
</html>