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
- 黄舟Original
- 2017-07-24 10:24:372802Durchsuche
Ü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='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>Code-Analyse
Dokumenttypdeklaration
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
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">
Dies zeigt an, dass dieses Dokument die XHTML 1.0-Version verwendet 🎜>HTMLc9ccee2e6ea535a969eb3f532ad9fe89-Tag
Tipps:
Stilattribut. Wenn Sie einen Stil hinzufügen müssen Element, bitte verwenden Sie das Bereichsattribut im Stilelement. Hinweis:
Wenn das Bereichsattribut nicht definiert ist, muss das c9ccee2e6ea535a969eb3f532ad9fe89-Element ein untergeordnetes Element des head-Elements oder ein untergeordnetes Element des noscript-Elements sein (das ein ist). untergeordnetes Element des Kopfelements) .
HTML391c7a272dfd833f6e89c2f060146754-Tag
93f0f5c25f18dab9d176bd4f6de5d30e
46d5fe1c7617e3914f214aaf043f4ccf
h1 {color: blue}
h2 {color: red}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
HTML-Legenden-Tag- Wenn es zu viele Formularelemente auf einer Seite gibt, sollten wir sie besser in Gruppen anzeigen, genau wie bei der Verwendung des -Tags zum Trennen von Absätzen. Sie können die
-Tags verwenden, um den Formularinhalt zu gruppieren. pfieldsetfieldset-Tags – Gruppenformulare legend
- fieldset
- -Tags erscheinen paarweise, beginnend mit
und endet mit End
Ein Formular kann mehrere2b5469ab79cf842344327415c3b3bb95a3ae74428855f48d0438405a4619fe75 haben, jedes Paar von - ist eine Gruppe und die Beschreibung jeder Inhaltsgruppe kann mit beschrieben werden Legenden-Tag
Attribute:2b5469ab79cf842344327415c3b3bb952b5469ab79cf842344327415c3b3bb95 - Gemeinsam – Allgemeine Attribute
Das obige ist der detaillierte Inhalt vonWie man HTML und CSS verwendet, um ein einfaches Beispiel für ein Registrierungsformular zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Tabellen- und Formular-Tags in HTMLNächster Artikel：Detaillierte Erläuterung der Tabellen- und Formular-Tags in HTML