ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML と CSS を使用して登録フォームの簡単な例を実装する方法
HTML と CSS を使用して登録フォームの簡単な例を実装する方法
- 黄舟オリジナル
- 2017-07-24 10:24:372863ブラウズ
効果の概要:
特定のコード実装
<!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 はドキュメント タイプの略語で、使用している XHTML または HTML のバージョンを示すために使用されます。これは、「HTML 4.01」バージョンを使用していることを示します。同様のものは次のとおりです。
HTMLc9ccee2e6ea535a969eb3f532ad9fe89 バージョンを使用していることが示されています。スタイリッシュな定義文書。
ドキュメント内でスタイル シートを参照する必要がある場合は、外部スタイル シートを定義し、2cdf5bf648cf2f33323966d7f58a7f3f を使用してスタイル シートに接続する必要があります。
ヒント:
HTML5 では、すべての要素がstyle 属性
をサポートしていません。要素にスタイルを追加する必要がある場合は、style 要素のscoped 属性を使用してください。
注: scoped 属性が定義されていない場合、c9ccee2e6ea535a969eb3f532ad9fe89 要素は head 要素の子、または noscript 要素 (head 要素の子) である必要があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML391c7a272dfd833f6e89c2f060146754 タグ
HTML 凡例タグ
- ページ上にフォーム項目が多すぎる場合は、
fieldset标签是成对出现的,以
2b5469ab79cf842344327415c3b3bb95开始,以a3ae74428855f48d0438405a4619fe75结束一个表单可以有多个
2b5469ab79cf842344327415c3b3bb95,每对2b5469ab79cf842344327415c3b3bb95- a複数の
2b5469ab79cf842344327415c3b3bb95を含めることができ、各ペアは2b5469ab79cf842344327415c3b3bb95はグループであり、コンテンツの各グループの説明は凡例タグ
p タグを使用して段落を区切ることができます。 >fieldset タグと legend タグはフォームのコンテンツをグループ化します。fieldset タグは、2b5469ab79cf842344327415c3b3bb95 は a3ae74428855f48d0438405a4619fe75 で始まりますp标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.
fieldset 标签 -- 对表单进行分组
- 属性:
以上がHTML と CSS を使用して登録フォームの簡単な例を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。