明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

如何使用html與css來(lái)完成注冊(cè)表單的容易案例

發(fā)表時(shí)間：2023-12-30 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]效果總覽：具體代碼實(shí)現(xiàn)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>提交用戶信息</title>&l...

效果總覽：

如何利用html和css來(lái)實(shí)現(xiàn)注冊(cè)表單的簡(jiǎn)單實(shí)例

具體代碼實(shí)現(xiàn)

<!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>填寫(xiě)用戶信息</legend>
<br/>
<p class='line'>
<p align="left" class='leftp'>請(qǐng)?zhí)顚?xiě)您的姓名：</p>
<p align="left" class='rightp'>
<input type="text" name="name" class="text" />
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>請(qǐng)?zhí)顚?xiě)您的密碼：</p>
<p align="left" class='rightp'>
<input type="password" name="password" class="text" />
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>請(qǐng)?jiān)俅屋斎朊艽a：</p>
<p align="left" class='rightp'>
<input type="password" name="passwordConfirm" class="text" />
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>請(qǐng)選擇性別：</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'>請(qǐng)輸入年齡：</p>
<p align="left" class='rightp'>
<input type="text" name="age" class="text">
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>請(qǐng)輸入生日：</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'>請(qǐng)選擇您的愛(ài)好</p>
<p align="left" class='rightp'>
<input type="checkbox" name="interesting" value="音樂(lè)影視" id="i1">
<label for="i1">音樂(lè)影視</label> 
<input type="checkbox" name="interesting" value="外出旅游" id="i2">
<label for="i2">外出旅游</label> 
<input type="checkbox" name="interesting" value="社交活動(dòng)" id="i3">
<label for="i3">社交活動(dòng)</label> 
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>請(qǐng)選擇省市：</p>
<p align="left" class='rightp'>
<select name="area">
<option>---請(qǐng)選擇省份---</option>
<optgroup label="北京市">
<option value="北京市海淀區(qū)">海淀區(qū)</option>
<option value="北京市朝陽(yáng)區(qū)">朝陽(yáng)區(qū)</option>
<option value="北京市東城區(qū)">東城區(qū)</option>
<option value="北京市西城區(qū)">西城區(qū)</option>
</optgroup>
<optgroup label="山東省">
<option value="山東省濟(jì)南市">濟(jì)南市</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; ">請(qǐng)?zhí)顚?xiě)其他資料... </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(文檔類型)的簡(jiǎn)寫(xiě)，用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。這里說(shuō)明你用的是"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版本.

HTML<style>標(biāo)簽

<style> 標(biāo)簽定義文檔中的樣式。

如果需要在文檔中引用樣式表，應(yīng)該定義外部的樣式表，然后使用 <link> 來(lái)連接這個(gè)樣式表。


提示：在 HTML5 中，所有元素都不支持 style 屬性，如需為一個(gè)元素添加樣式，請(qǐng)?jiān)?style 元素中使用 scoped 屬性。

注釋：如果沒(méi)有定義 scoped 屬性，則 <style> 元素必須是 head 元素的子元素，或者是（屬于 head 元素的子元素的） noscript 元素的子元素。


<head>
    <style type="text/css">
    h1 {color: blue}
    h2 {color: red}
    </style>
</head>

HTML<FieldSet>標(biāo)簽

  • HTML legend 標(biāo)簽

如果一個(gè)頁(yè)面的表單項(xiàng)太多,我們最好把它們分組顯示,就像使用p標(biāo)簽分開(kāi)段落一樣,可以使用fieldset與legend標(biāo)簽對(duì)表單內(nèi)容分組.

fieldset 標(biāo)簽 -- 對(duì)表單進(jìn)行分組


  • fieldset標(biāo)簽是成對(duì)出現(xiàn)的,以<fieldset>開(kāi)始,以</fieldset>結(jié)束

  • 一個(gè)表單可以有多個(gè)<fieldset>,每對(duì)<fieldset>為一組,每組內(nèi)容的描述可以使用legend標(biāo)簽說(shuō)明

  • 屬性:

    • Common -- 一般屬性

以上就是如何利用html和css來(lái)實(shí)現(xiàn)注冊(cè)表單的簡(jiǎn)單實(shí)例的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。