HTML5 css3 で登録フォームを実装する example_html5 チュートリアルのスキル

レンダリングは次のとおりです。

html ソース コード:

コードをコピー

コード

/legend> 🎜>Account:
> パスワード:
;label for=password2>パスワードを繰り返します:
=email>メール アドレス:> ;

その他の情報

年齢: =age class=textbox type=number name =age min=18 step=2 pattern="[0-9]{1,3}" placeholder="年齢を記入">
月給:

10000 showValue(value) {
document.getElementById("rangevalue ").innerHTML=value;

説明:

確認>

コードをコピーします


コードは次のとおりです:

body{
background:url(bg.jpg) 繰り返し;
font-family:Arial Narrow、Arial、サンセリフ;
マージン:0;
パディング:0;
}
ヘッダー、セクション、フッター{
display:block;
}
ヘッダー{
幅: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{
float:right;
マージン:-10px 20px;
行の高さ:25px;
フォントの太さ:太字;
フォントサイズ:12px;
text-align:right;
}
#backlinks a{
color:#ccc;
テキスト装飾:なし;
マージン:3px 0 0;
表示:ブロック;
}
#backlinks a:hover{
color:#fff;
}
フッター{
背景色:rgb(0, 0, 0);
背景色:rgba(0, 0, 0, 0.8);
高さ:25px;
幅:100%;
行の高さ:25px;
位置:相対;
フォントファミリー:Arial、Helvetica、サンセリフ;
下:0;
左:0;
カラー:#888;
フォントサイズ:11px;
}
フッター スパン{
padding-left:20px;
}
フッター {
color:#1FA2E1;
}
#wrapper{
width:770px;
マージン:0 自動;
text-align:center;
}
#wrapper hgroup{
margin:20px 0;
text-shadow:1px 1px 1px #ccc;
}
#wrapper h1{
color:#146FA0;
フォントサイズ:42px;
マージン:0;
}
#wrapper h2{
color:#71C1ED;
フォントサイズ:27px;
マージン:0;
}
#lbl{
色:#777;
フォントサイズ:17px;
フォントの太さ:太字;
text-shadow:1px 1px 0 #fff;
マージン:10px 0;
}
*:focus{
アウトライン:なし;
}
ラベル、入力、テキストエリア、フィールドセット{
display:block;
}
フィールドセット#アカウント、フィールドセット#パーソナル{
幅:250px;
パディング:0 50px 50px;
マージン:10px;
浮動小数点:左;
背景:rgb(244,244,244);
背景:rgba(244,244,244,0.7);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
境界半径: 25px;
border:3px double #999;
}
fieldset#confirm{
padding-top:10px;
クリア:両方;
境界線:なし;
行の高さ:15px;
マージン:10px 0;
}
fieldset#confirm ラベル、fieldset#confirm input{
display:inline;
浮動小数点:左;
マージン:15px 5px 0;
}
凡例{
font-size:20px;
フォントの太さ:太字;
文字間隔:5px;
カラー:#999;
マージン左:-20px;
text-align:left;
パディング:0 10px;
text-shadow:1px 1px 0 #ccc;
}
label{
font-size:17px;
フォントの太さ:太字;
マージン:17px 0 7px;
text-align:left;
text-shadow:1px 1px 0 #fff;
}
textarea{
resize:both;
最大幅:230px;
}
input.textbox, textarea{
padding:5px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
ボーダー半径: 15px;
ボーダー:1px ソリッド #fff;
幅:200ピクセル;
text-shadow:1px 1px 1px #777;
-moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
ボックスシャドウ: 0px 2px 0px #999;
-webkit-transition: すべて 0.5 秒のイーズインアウト。
-moz-transition: すべて 0.5 秒のイーズインアウト。
トランジション: すべて 0.5 秒のイーズインアウト。
背景:url(required.png) 繰り返しなし 200px 5px #F0F0EF;
background:-webkit-gradient(linear, 左上, 左下, from(#E3E3E3), to(#FFFFFF)); /* Saf4 、Chrome */
background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 、 Saf5.1 */
background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:focus, textarea:focus{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
変換: スケール(1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
ボックスシャドウ: 7px 7px 2px #ccc;
text-shadow:1px 1px 3px #777;
}
input.textbox:required{
background:url(required.png) no-repeat 200px 5px #F0F0EF;
background:url(required.png) no-repeat 200px 5px、-webkit-gradient(linear、左上、左下、from(#E3E3E3)、to(#FFFFFF)); /* Saf4 、Chrome */
background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 、 Saf5.1 */
background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:required:valid{
background:url(valid.png) no-repeat 200px 5px #F0F0EF;
background:url(valid.png) no-repeat 200px 5px、-webkit-gradient(linear、左上、左下、from(#E3E3E3)、to(#FFFFFF)); /* Saf4 、Chrome */
background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 、 Saf5.1 */
background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:focus:invalid, input.textbox:not(:required):invalid{
background:url(invalid.png) no-repeat 200px 5px # F0F0EF;
background:url(invalid.png) no-repeat 200px 5px、-webkit-gradient(linear、左上、左下、from(#E3E3E3)、to(#FFFFFF)); /* Saf4 、Chrome */
background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10 、 Saf5.1 */
background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6 */
background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input[type=submit] {
padding:10px;
マージン:0 10px !重要;
幅:300ピクセル;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=range] {padding:0;}
}
#rangevalue {
表示:ブロック;
text-align:right;
マージントップ:-25px;
}
input::-webkit-input-placeholder、textarea::-webkit-input-placeholder {
color: #aaa;
フォントスタイル:斜体;
text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #aaa;
フォントスタイル:斜体;
text-shadow:1px 1px 0 #fff;
}
.clearfix{
clear:both;
}