<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>提交用户信息</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> body, p, td, input {font-size:12px; margin:0px; } select {height:20px; width:300px; } .title {font-size: 16px; padding: 10px; width:80%; } .text {height:20px; width:300px; border:1px solid #AAAAAA; } .line {margin:2px; } .leftp {width:110px; float:left; height:22px; line-height:22px; font-weight:bold; } .rightp {height:42px; } .button { color:#fff; font-weight:bold; font-size: 11px; text-align:center; padding:.17em 0 .2em .17em; border-style:solid; border-width:1px; border-color:#9cf #159 #159 #9cf; background:#69c url(images/bg-btn-blue.gif) repeat-x; } </style> </head> <body> <form action="/servlet/servlet/PostServlet" method="POST"> <p align="center"> <br/> <fieldset style='width:90%'> <legend>填写用户信息</legend> <br/> <p class='line'> <p align="left" class='leftp'>请填写您的姓名:</p> <p align="left" class='rightp'> <input type="text" name="name" class="text" /> </p> </p> <p class='line'> <p align="left" class='leftp'>请填写您的密码:</p> <p align="left" class='rightp'> <input type="password" name="password" class="text" /> </p> </p> <p class='line'> <p align="left" class='leftp'>请再次输入密码:</p> <p align="left" class='rightp'> <input type="password" name="passwordConfirm" class="text" /> </p> </p> <p class='line'> <p align="left" class='leftp'>请选择性别:</p> <p align="left" class='rightp'> <input type="radio" name="sex" value="男" id="sexMale"> <label for="sexMale">男</label> <input type="radio" name="sex" value="女" id="sexFemale"> <label for="sexFemale">女</label> </p> </p> <p class='line'> <p align="left" class='leftp'>请输入年龄:</p> <p align="left" class='rightp'> <input type="text" name="age" class="text"> </p> </p> <p class='line'> <p align="left" class='leftp'>请输入生日:</p> <p align="left" class='rightp'> <input type="text" name="birthday" class="text"> <br/>格式:"yyyy-mm-dd" </p> </p> <p class='line'> <p align="left" class='leftp'>请选择您的爱好</p> <p align="left" class='rightp'> <input type="checkbox" name="interesting" value="音乐影视" id="i1"> <label for="i1">音乐影视</label> <input type="checkbox" name="interesting" value="外出旅游" id="i2"> <label for="i2">外出旅游</label> <input type="checkbox" name="interesting" value="社交活动" id="i3"> <label for="i3">社交活动</label> </p> </p> <p class='line'> <p align="left" class='leftp'>请选择省市:</p> <p align="left" class='rightp'> <select name="area"> <option>---请选择省份---</option> <optgroup label="北京市"> <option value="北京市海淀区">海淀区</option> <option value="北京市朝阳区">朝阳区</option> <option value="北京市东城区">东城区</option> <option value="北京市西城区">西城区</option> </optgroup> <optgroup label="山东省"> <option value="山东省济南市">济南市</option> <option value="山东省青岛市">青岛市</option> <option value="山东省潍坊市">潍坊市</option> </optgroup> </select> </p> </p> <p class='line'> <p align="left" class='leftp'>自我描述:</p> <p align="left" class='rightp'> <textarea name="description" rows="4" style="width:300px; ">请填写其他资料... </textarea> </p> </p> <br/> <p class='line'> <p align="left" class='leftp'></p> <p align="left" class='rightp'> <br/><input type="submit" name="btn" value=" 提交信息 " class="button"><br/> </p> </p> </fieldset> </p> </form> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
這段程式碼叫做DOCTYPE宣告。 DOCTYPE是document type(文件類型)的簡寫,用來說明你用的XHTML或HTML是什麼版本。這裡說明你用的是"HTML 4.01"版本,類似的還有:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這裡宣告本文檔使用的是XHTML 1.0版本.
c9ccee2e6ea535a969eb3f532ad9fe89 標籤定義文件中的樣式。
如果需要在文件中引用樣式表,應該定義外部的樣式表,然後使用 2cdf5bf648cf2f33323966d7f58a7f3f 來連接這個樣式表。
提示:在HTML5 中,所有元素都不支援 style 屬性,如需為一個元素新增樣式,請在style 元素中使用scoped 屬性。
註解:如果沒有定義scoped 屬性,則c9ccee2e6ea535a969eb3f532ad9fe89 元素必須是head 元素的子元素,或是(屬於head 元素的子元素的) noscript 元素的子元素。
93f0f5c25f18dab9d176bd4f6de5d30e 46d5fe1c7617e3914f214aaf043f4ccf h1 {color: blue} h2 {color: red} 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1
HTML legend 標籤
#如果一個頁面的表單項目太多,我們最好把它們分組顯示,就像使用p
標籤分開段落一樣,可以使用fieldset
與legend
標籤對表單內容分組.
fieldset 標籤-- 將表單分組
#fieldset標籤是成對出現的,以2b5469ab79cf842344327415c3b3bb95
開始,以a3ae74428855f48d0438405a4619fe75
結束
一個表單可以有多個< ;fieldset>
,每對2b5469ab79cf842344327415c3b3bb95
為一組,每組內容的描述可以使用legend標籤說明
屬性:
Common -- 一般屬性
以上是如何利用html和css來實現註冊表單的簡單實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!