📄 advanced-form.htm
字号:
<!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=utf-8" /><title>Advanced Form</title><style type="text/css"><!--body { font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;}.clear { clear: both;}form { font-size: 1.4em; width: 40em;}/* fieldset styling */fieldset { margin: 1em 0; /* space out the fieldsets a little*/ padding: 1em; border : 1px solid #ccc; background-color:#F5F5F5}/* legend styling */legend { font-weight: bold;}form p { position: relative; width: 100%;}/* style for labels */label { float: left; width: 10em;}#remember-me label { width: 4em;}/* style for required labels */label .required { font-size: 0.83em; color:#760000;}/* style error messages */label .feedback { position: absolute; margin-left: 11em; left: 200px; right: 0; font-weight: bold; color:#760000; padding-left: 18px; background: url(images/error.png) no-repeat left top;}/* :KLUDGE: Explicitly set the width for IE6- */* html .feedback{ width: 10em;}input { width: 200px;}input[type="text"], textarea { border-top: 2px solid #999; border-left: 2px solid #999; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}input.radio, input.checkbox, input.submit { width: auto;}/* style form elements on focus */input:focus, textarea:focus { background: #ffc;}input.radio { float: left; margin-right: 1em;}textarea { width: 300px; height: 100px;}/* Date of Birth form styling */#monthOfBirthLabel, #yearOfBirthLabel { text-indent: -1000em; width: 0;}#dateOfBirth { width: 3em; margin-right: 0.5em;}#monthOfBirth { width: 10em; margin-right: 0.5em;}#yearOfBirth { width: 5em;}/* Color form styling */#favoriteColor { margin: 0; padding: 0; border: none; background: transparent;}#favoriteColor h2 { width: 10em; float: left; font-size: 1em; font-weight: normal;}#favoriteColor div { width: 8em; float: left;}#favoriteColor label { /*width: 3em;*/ float: none; display: inline;}/*#favoriteColor p { margin: 0.3em 0;}*/--></style></head><body><form id="comments_form" action="#" method="post"><fieldset> <legend>Your Contact Details</legend> <p> <label for="author">Name: <span class="required">(Required)</span></label> <input name="author" id="author" type="text" /> </p> <p> <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label> <input name="email" id="email" type="text" /> </p> <p> <label for="url">Web Address:</label> <input name="url" id="url" type="text" /> </p></fieldset><fieldset> <legend>Personal Information</legend> <p> <label for="author">Place of Birth: </label> <select> <option value="USA" selected="selected">USA</option> <option value="UK">United Kingdom</option> </select> </p> <p> <label for="dateOfBirth">Date of Birth:</label> <input name="dateOfBirth" id="dateOfBirth" type="text" /> <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label> <select name="monthOfBirth" id="monthOfBirth"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> </select> <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label> <input name="yearOfBirth" id="yearOfBirth" type="text" /> </p> <fieldset id="favoriteColor"> <h2>Favorite Color:</h2> <div> <p> <input class="checkbox" id="red" name="red" type="checkbox" value="red" /> <label>red</label> </p> <p> <input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" /> <label>yellow</label> </p> <p> <input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" /> <label>pink</label> </p> <p> <input class="checkbox" id="green" name="green" type="checkbox" value="green" /> <label>green</label> </p> </div> <div> <p> <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" /> <label>orange</label> </p> <p> <input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" /> <label>purple</label> </p> <p> <input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" /> <label>blue</label> </p> <p> <input class="checkbox" id="other" name="other" type="checkbox" value="other" /> <label>other</label> </p> </div> <br class="clear" /> </fieldset> </fieldset><fieldset> <legend>Comments</legend> <p> <label for="text">Message: <span class="required">(Required)</span></label> <textarea name="text" id="text" cols="20" rows="10"></textarea> </p></fieldset><fieldset id="remember-me"> <legend>Remember Me</legend> <p> <input id="remember-yes" class="radio" name="remember" type="radio" value="yes" /> <label for="remember-yes">Yes</label> </p> <p> <input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" /> <label for="remember-no">No</label> </p> <br class="clear" /></fieldset><p><input id="submit" class="submit" name="submit" type="submit"/></p></form></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -