HTML5 css3 melaksanakan borang pendaftaran example_html5 kemahiran tutorial

Paparannya adalah seperti berikut:

Kod sumber html:

Salin kod

Kod adalah seperti berikut:

"text/html; charset =utf-8" />
ajax.googleapis.com/ ajax/libs/jquery/1.7.1/jquery.min.js">

🎜>Akaun:
> Kata laluan:
;label untuk=kata laluan2>Ulang kata laluan:< ;/label>

Alamat e-mel:

Maklumat lain

URL Peribadi: class=textbox type=url name=website required placeholder="http://www.example.com" />
Umur: =kelas umur=jenis kotak teks=nama nombor =umur min=18 langkah=2 corak="[0-9]{1,3}" pemegang tempat="Isi umur">
Gaji bulanan:

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

confirm>

/form>

< ;/body>
🎜>

Salin kod


Kod tersebut adalah seperti berikut:

badan{
latar belakang:url(bg.jpg) ulang;
font-family:Arial Narrow, Arial, sans-serif;
margin:0;
pelapis:0;
}
pengepala, bahagian, pengaki{
paparan:blok;
}
pengepala{
lebar:100%;
warna latar belakang:rgb(0, 0, 0);
warna latar belakang:rgba(0, 0, 0, 0.9);
warna:#ccc;
lapik:15px 0;
jarak huruf:1px;
margin-bawah:20px;
kedudukan:saudara;
}
pengepala h1{
margin:0 50px;
bayang-teks:2px 2px 2px #888;
apung:kiri;
}
#pautan balik{
float:kanan;
margin:-10px 20px;
garis-tinggi:25px;
berat fon:tebal;
saiz fon:12px;
text-align:right;
}
#pautan balik a{
warna:#ccc;
teks-hiasan:tiada;
margin:3px 0 0;
paparan:sekat;
}
#pautan balik a:hover{
warna:#fff;
}
pengaki{
warna latar:rgb(0, 0, 0);
warna latar belakang:rgba(0, 0, 0, 0.8);
tinggi:25px;
lebar:100%;
garis-tinggi:25px;
kedudukan:saudara;
font-family:Arial,Helvetica,sans-serif;
bawah:0;
kiri:0;
warna:#888;
saiz fon:11px;
}
jarak pengaki{
padding-kiri:20px;
}
pengaki a{
warna:#1FA2E1;
}
#pembungkus{
lebar:770px;
margin:0 auto;
text-align:center;
}
#pembungkus hgroup{
margin:20px 0;
bayang-teks:1px 1px 1px #ccc;
}
#pembungkus h1{
warna:#146FA0;
saiz fon:42px;
margin:0;
}
#pembungkus h2{
warna:#71C1ED;
saiz fon:27px;
margin:0;
}
#lbl{
warna:#777;
saiz fon:17px;
berat fon:tebal;
bayang-teks:1px 1px 0 #fff;
margin:10px 0;
}
*:fokus{
garis besar:tiada;
}
label, input, kawasan teks, set medan{
paparan:blok;
}
set medan#akaun, set medan#peribadi{
lebar:250px;
lapik:0 50px 50px;
margin:10px;
apung:kiri;
latar belakang:rgb(244,244,244);
latar belakang:rgba(244,244,244,0.7);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
jejari sempadan: 25px;
sempadan:3px ganda #999;
}
fieldset#confirm{
padding-top:10px;
jelas:keduanya;
sempadan:tiada;
garis-tinggi:15px;
margin:10px 0;
}
set medan#sahkan label, set medan#sahkan input{
paparan:sebaris;
apung:kiri;
margin:15px 5px 0;
}
legenda{
saiz fon:20px;
berat fon:tebal;
jarak huruf:5px;
warna:#999;
margin-kiri:-20px;
text-align:left;
lapik:0 10px;
bayang-teks:1px 1px 0 #ccc;
}
label{
saiz fon:17px;
berat fon:tebal;
margin:17px 0 7px;
text-align:left;
bayang-teks:1px 1px 0 #fff;
}
kawasan teks{
saiz semula:kedua-duanya;
lebar maksimum:230px;
}
input.textbox, textarea{
padding:5px 10px;
-webkit-border-radius: 15px;
-jejari-sempadan-moz: 15px;
jejari sempadan: 15px;
sempadan:1px pepejal #fff;
lebar:200px;
bayang-teks:1px 1px 1px #777;
-moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
bayang kotak: 0px 2px 0px #999;
-webkit-transition: semua 0.5s kemudahan-keluar;
-moz-transition: semua 0.5s kemudahan-keluar;
peralihan: semua 0.5s mudah masuk;
latar belakang:url(diperlukan.png) tiada ulangan 200px 5px #F0F0EF;
latar belakang:-webkit-gradient(linear, kiri atas, kiri bawah, dari(#E3E3E3), hingga(#FFFFFF)); /* Saf4 , Chrome */
latar belakang:-webkit-linear-gradient(atas, #E3E3E3, #FFFFFF); /* Chrome 10 , Saf5.1 */
latar belakang:-moz-linear-gradient(atas, #E3E3E3, #FFFFFF); /* FF3.6 */
latar belakang:-ms-linear-gradient(atas, #E3E3E3, #FFFFFF); /* IE10 */
latar belakang:-o-linear-gradient(atas, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:focus, textarea:focus{
-webkit-transform: scale(1.1);
-moz-transform: skala(1.1);
transformasi: skala(1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
bayang kotak: 7px 7px 2px #ccc;
bayang-teks:1px 1px 3px #777;
}
input.textbox:required{
background:url(required.png) no-repeat 200px 5px #F0F0EF;
latar belakang:url(required.png) tiada ulangan 200px 5px, -webkit-gradient(linear, kiri atas, kiri bawah, dari(#E3E3E3), hingga(#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 */
latar belakang:url(diperlukan.png) tiada ulangan 200px 5px, -ms-linear-gradient(atas, #E3E3E3, #FFFFFF); /* IE10 */
latar belakang:url(diperlukan.png) tiada ulangan 200px 5px, -o-linear-gradient(atas, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:required:valid{
background:url(valid.png) no-repeat 200px 5px #F0F0EF;
latar belakang:url(sah.png) tiada ulangan 200px 5px, -webkit-gradient(linear, kiri atas, kiri bawah, dari(#E3E3E3), hingga(#FFFFFF)); /* Saf4 , Chrome */
background:url(valid.png) tiada ulangan 200px 5px, -webkit-linear-gradient(atas, #E3E3E3, #FFFFFF); /* Chrome 10 , Saf5.1 */
background:url(valid.png) tiada ulangan 200px 5px, -moz-linear-gradient(atas, #E3E3E3, #FFFFFF); /* FF3.6 */
latar belakang:url(sah.png) tiada ulangan 200px 5px, -ms-linear-gradient(atas, #E3E3E3, #FFFFFF); /* IE10 */
latar belakang:url(sah.png) tiada ulangan 200px 5px, -o-linear-gradient(atas, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input.textbox:focus:invalid, input.textbox:not(:required):invalid{
background:url(invalid.png) no-repeat 200px 5px # F0F0EF;
latar belakang:url(invalid.png) tiada ulangan 200px 5px, -webkit-gradient(linear, kiri atas, kiri bawah, dari(#E3E3E3), hingga(#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) tiada ulangan 200px 5px, -moz-linear-gradient(atas, #E3E3E3, #FFFFFF); /* FF3.6 */
latar belakang:url(invalid.png) tiada ulangan 200px 5px, -ms-linear-gradient(atas, #E3E3E3, #FFFFFF); /* IE10 */
latar belakang:url(invalid.png) tiada ulangan 200px 5px, -o-linear-gradient(atas, #E3E3E3, #FFFFFF); /* Opera 11.10 */
}
input[type=submit] {
padding:10px;
margin:0 10px !penting;
lebar:300px;
}
@skrin media dan (-webkit-min-device-pixel-ratio:0) {
input[type=range] {padding:0;}
}
#rangevalue {
paparan:sekat;
text-align:right;
margin atas:-25px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
warna: #aaa;
gaya fon:italic;
bayang-teks:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #aaa;
gaya fon:italic;
bayang-teks:1px 1px 0 #fff;
}
.jelaskan{
jelas:kedua-duanya;
}