コメント：登録フォームはHTML5+CSS3レイアウトを使用して実装されており、その効果は非常に良好です。興味のあるフロントエンドのWebデザイナーはそれを参照できます。私はそれがあなたを助けることができることを願っています
レンダリングは次のとおりです。HTMLソースコード：
<！doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<link href = "css /style.css" />
<スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
</head>
<body>
<div id = wrapper>
<div id = lbl> </div>
<form>
<fieldset id = account>
<伝説>個人情報</legend>
<ラベル= username>アカウント：</label>
<入力ID = username class = textbox type = text name = username required placeholder = "アカウントに入力してください" />>
<ラベル= password1>パスワード：</label>
<入力id = password1 class = textbox type = password name = password1必要なプレースホルダー= "パスワードに入力してください"/>
<ラベル= password2>繰り返しパスワード：</label>
<入力id = password2 class = textbox type = password name = password2必要なプレースホルダー= "パスワードを繰り返してください"/>
<ラベル=電子メール>メールアドレス：</label>
<入力ID =電子メールclass = textbox type = email name = email execly placeholder = "www.csdn.com" />
</fieldset>
<fieldset id = personal>
<伝説>その他の情報</legend>
<label for = website> personal url：</label>
<入力ID = website class = textbox type = url name = website required placeholder = "http://www.example.com"/>
<ラベル= age> age：</label>
<入力id = age class = textbox type = number name = age min = 18 step = 2 pattern = "[0-9] {1,3}" Placeholder = "fill in the age">
<ラベル=給与>月給：</label>
<入力ID =給与クラス=テキストボックスタイプ=範囲名=給与min = 0 max = 50000 step = 500 pattern = "[0-9] {2、}" placeholder = "what what what what what the any many Sal" value = 10000 onchange = "show.value）" />>
<スパンID = rangeValue> 10000 </span>
<スクリプト>
関数showValue（value）{
document.getElementById（ "rangevalue"）。innerhtml = value;
}
</script>
<ラベル=説明>説明：</label>
<TextArea ID =説明名=説明cols = 30行= 5 PlaceHolder = "ここに詳細な説明があります"> </textarea>
</fieldset>
<フィールドセットID =確認>
<入力タイプ=送信値= "submit" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
CSSソースコード：
体{
背景：url（bg.jpg）繰り返し。
フォントファミリー：arial狭い、arial、sans-serif;
マージン：0;
パディング：0;
}
ヘッダー、セクション、フッター{
表示：ブロック;
}
ヘッダ{
幅：100％;
背景色：RGB（0、0、0）;
背景色：RGBA（0、0、0、0.9）;
色：#ccc;
パディング：15px 0;
レター間隔：1px;
マージンボトム：20px;
位置：相対;
}
ヘッダーH1 {
マージン：0 50px;
Text-Shadow：2px 2px 2px＃888;
フロート：左;
}
#backlinks {
フロート：そうです;
マージン：-10px 20px;
ラインハイト：25px;
font-weight：bold;
フォントサイズ：12px;
テキストアライグ：右;
}
#backlinks a {
色：#ccc;
テキスト装置：なし;
マージン：3px 0 0;
表示：ブロック;
}
#backlinks a：hover {
色：#ffff;
}
フッター{
背景色：RGB（0、0、0）;
背景色：RGBA（0、0、0、0.8）;
高さ：25px;
幅：100％;
ラインハイト：25px;
位置：相対;
フォントファミリー：arial、helvetica、sans-serif;
下：0;
左：0;
色：＃888;
フォントサイズ：11px;
}
フッタースパン{
パディング左：20px;
}
フッターA {
色：＃1FA2E1;
}
#wrapper {
幅：770px;
マージン：0 Auto;
テキストアライグ：センター;
}
#wrapper hgroup {
マージン：20px 0;
テキストシャドウ：1px 1px 1px #ccc;
}
#Wrapper H1 {
色：＃146FA0;
フォントサイズ：42px;
マージン：0;
}
#Wrapper H2 {
色：＃71C1ED;
フォントサイズ：27px;
マージン：0;
}
#LBL {
色：＃777;
フォントサイズ：17px;
font-weight：bold;
テキストシャドウ：1px 1px 0 #fff;
マージン：10px 0;
}
*：集中{
アウトライン：なし;
}
ラベル、入力、Textarea、Fieldset {
表示：ブロック;
}
fieldset＃アカウント、fieldset＃personal {
幅：250px;
パディング：0 50px 50px;
マージン：10px;
フロート：左;
背景：RGB（244,244,244）;
背景：RGBA（244,244,244,0.7）;
-webkit-border-radius：25px;
-moz-border-radius：25px;
ボーダーラジウス：25px;
国境：3pxダブル＃999;
}
fieldset＃確認{
パディングトップ：10px;
クリア：両方;
国境：なし;
ラインハイト：15px;
マージン：10px 0;
}
フィールドセット＃ラベル確認、フィールドセット＃入力確認{
表示：インライン;
フロート：左;
マージン：15px 5px 0;
}
伝説{
フォントサイズ：20px;
font-weight：bold;
レター間隔：5px;
色：＃999;
マージン左：-20px;
テキストアライグ：左;
パディング：0 10px;
テキストシャドウ：1px 1px 0 #ccc;
}
ラベル{
フォントサイズ：17px;
font-weight：bold;
マージン：17px 0 7px;
テキストアライグ：左;
テキストシャドウ：1px 1px 0 #fff;
}
Textarea {
サイズのサイズ：両方;
最大幅：230px;
}
input.textbox、textarea {
パディング：5px 10px;
-webkit-border-radius：15px;
-moz-border-radius：15px;
ボーダーラジウス：15px;
ボーダー：1pxソリッド#ffff;
幅：200px;
テキストシャドウ：1px 1px 1px＃777;
-moz-box-shadow：0px 2px 0px＃999;
-webkit-box-shadow：0px 2px 0px＃999;
Box-Shadow：0PX 2PX 0PX＃999;
-webkit-transition：0.5sがすべて容易になりました。
-moz-transition：0.5sがすべて容易になりました。
遷移：0.5秒すべて容易。
背景：url（必須.png）繰り返し200px 5px＃f0f0ef;
背景：-webkit-gradient（線形、左上、左下、（＃e3e3e3）、（#fffff）まで）; / * saf4+、chrome */
背景：-webkit-linear-gradient（top、＃e3e3e3、#fffff）; / * Chrome 10+、SAF5.1+ */
背景：-moz-linear-gradient（top、＃e3e3e3、#fffff）; / * ff3.6+ */
背景：-ms-linear-gradient（top、＃e3e3e3、#ffffff）; / * ie10 */
背景：-o-linear-gradient（top、＃e3e3e3、#fffff）; / *オペラ11.10+ */
}
input.textbox：Focus、Textarea：Focus {
-webkit-transform：スケール（1.1）;
-moz-transform：スケール（1.1）;
変換：スケール（1.1）;
-moz-box-shadow：5px 3px 1px #ccc;
-webkit-box-shadow：5px 3px 1px #ccc;
Box-Shadow：7px 7px 2px #ccc;
テキストシャドウ：1px 1px 3px＃777;
}
input.textbox：必須{
背景：url（必須.png）繰り返し200px 5px＃f0f0ef;
背景：url（必須。png）ノーレピート200px 5px、-webkit-gradient（線形、左上、左下、（＃e3e3e3）、（#fffff））; / * saf4+、chrome */
背景：url（必須。png）ノーレピート200px 5px、-webkit-linear-radient（top、＃e3e3e3、#fffff）; / * Chrome 10+、SAF5.1+ */
背景：url（必須。png）ノーレピート200px 5px、-moz-linear-gradient（top、＃e3e3e3、#fffff）; / * ff3.6+ */
背景：url（必須。png）ノーレピート200px 5px、-ms-linear-gradient（top、＃e3e3e3、#ffffff）; / * ie10 */
背景：url（必須。png）ノーレピート200px 5px、-o-linear-gradient（top、＃e3e3e3、#fffff）; / *オペラ11.10+ */
}
input.textbox：必須：有効{
背景：url（valid.png）No-Repeat 200px 5px＃f0f0ef;
背景：url（valid.png）No-Repeat 200px 5px、-webkit-gradient（線形、左上、左下、（＃e3e3e3）、（#fffff））; / * saf4+、chrome */
背景：url（valid.png）No-Repeat 200px 5px、-webkit-linear-gradient（top、＃e3e3e3、#fffff）; / * Chrome 10+、SAF5.1+ */
背景：url（valid.png）No-Repeat 200px 5px、-moz-linear-radient（top、＃e3e3e3、#fffff）; / * ff3.6+ */
背景：url（valid.png）No-Reepeat 200px 5px、-ms-linear-gradient（top、＃e3e3e3、#ffffff）; / * ie10 */
背景：url（valid.png）No-Repeat 200px 5px、-o-linear-radient（top、＃e3e3e3、#fffff）; / *オペラ11.10+ */
}
input.textbox：Focus：invalid、input.textbox：not（：必須）：無効{
背景：url（invalid.png）繰り返し200px 5px＃f0f0ef;
背景：url（invalid.png）No-Repeat 200px 5px、-webkit-gradient（線形、左上、左下、（＃e3e3e3）、（#fffff））; / * saf4+、chrome */
背景：url（invalid.png）No-Repeat 200px 5px、-webkit-linear-gradient（top、＃e3e3e3、#fffff）; / * Chrome 10+、SAF5.1+ */
背景：URL（Invalid.png）No-Repeat 200px 5px、-moz-linear-ragient（top、＃e3e3e3、#fffff）; / * ff3.6+ */
背景：URL（Invalid.png）No-Reepeat 200px 5px、-ms-Linear-Gradient（Top、＃e3e3e3、#fffff）; / * ie10 */
背景：URL（Invalid.png）No-Repeat 200px 5px、-o-linear-radient（top、＃e3e3e3、#fffff）; / *オペラ11.10+ */
}
入力[type = submit] {
パディング：10px;
マージン：0 10px！重要。
幅：300px;
}
@media画面と（-webkit-min-device-pixel-ratio：0）{
input [type = range] {padding：0;}
}
#RangeValue {
表示：ブロック;
テキストアライグ：右;
マージントップ：-25px;
}
入力:: - webkit-input-placeholder、textarea :: -webkit-input-placeholder {
色：＃aaa;
フォントスタイル：イタリック;
テキストシャドウ：1px 1px 0 #fff;
}
入力：-moz-placeholder、textarea：-moz-placeholder {
色：＃aaa;
フォントスタイル：イタリック;
テキストシャドウ：1px 1px 0 #fff;
}
.ClearFix {
クリア：両方;
}