Heim > Web-Frontend > HTML-Tutorial > Wie man HTML und CSS verwendet, um ein einfaches Beispiel für ein Registrierungsformular zu implementieren

Wie man HTML und CSS verwendet, um ein einfaches Beispiel für ein Registrierungsformular zu implementieren

黄舟
Freigeben: 2017-07-24 10:24:37
Original
2797 Leute haben es durchsucht

Übersicht über die Auswirkungen:


Spezifische Code-Implementierung

<!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=&#39;width:90%&#39;>
<legend>填写用户信息</legend>
<br/>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请填写您的姓名:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="name" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请填写您的密码:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="password" name="password" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请再次输入密码:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="password" name="passwordConfirm" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择性别:</p>
<p align="left" class=&#39;rightp&#39;>
<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=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请输入年龄:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="age" class="text">
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请输入生日:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="birthday" class="text"> 
<br/>格式:"yyyy-mm-dd"
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择您的爱好</p>
<p align="left" class=&#39;rightp&#39;>
<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=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择省市:</p>
<p align="left" class=&#39;rightp&#39;>
<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=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>自我描述:</p>
<p align="left" class=&#39;rightp&#39;>
<textarea name="description" rows="4" style="width:300px; ">请填写其他资料... </textarea>
</p>
</p>
<br/>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;></p>
<p align="left" class=&#39;rightp&#39;>
<br/><input type="submit" name="btn" value=" 提交信息 " class="button"><br/>
</p>
</p>
</fieldset>
</p>
</form>
</body>
</html>
Nach dem Login kopieren

Code-Analyse

Dokumenttypdeklaration

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nach dem Login kopieren

Dieser Code wird als DOCTYPE-Anweisung bezeichnet. DOCTYPE ist die Abkürzung für Dokumenttyp und wird verwendet, um anzugeben, welche Version von XHTML oder HTML Sie verwenden. Dies zeigt an, dass Sie die „HTML 4.01“-Version verwenden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nach dem Login kopieren


Dies zeigt an, dass dieses Dokument die XHTML 1.0-Version verwendet 🎜>HTML