ความคิดเห็น: แบบฟอร์มการลงทะเบียนถูกนำมาใช้โดยใช้เค้าโครง HTML5+CSS3 และเอฟเฟกต์ค่อนข้างดี ที่สนใจนักออกแบบเว็บส่วนหน้าสามารถอ้างถึงได้ ฉันหวังว่ามันจะช่วยคุณได้
การเรนเดอร์มีดังนี้:ซอร์สโค้ด HTML:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<link href = "css /style.css" />
<script 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 = บัญชี>
<gregend> ข้อมูลส่วนบุคคล </legend>
<label for = username> บัญชี: </lable>
<อินพุต ID = ชื่อผู้ใช้ = TextBox Type = ชื่อข้อความ = ชื่อผู้ใช้ที่ต้องการ placeHolder = "กรุณากรอกในบัญชีของคุณ" />
<label for = password1> รหัสผ่าน: </label>
<อินพุต ID = รหัสผ่าน 1 คลาส = ประเภทกล่องข้อความ = ชื่อรหัสผ่าน = password1 ที่ต้องการ placeHolder = "กรุณากรอกรหัสผ่านของคุณ"/>
<label for = password2> รหัสผ่านทำซ้ำ: </lable>
<อินพุต ID = password2 class = typebox type = name name = password2 ที่ต้องการ placeolder = "โปรดทำซ้ำรหัสผ่าน"/>
<label for = อีเมล> ที่อยู่อีเมล: </label>
<อินพุต ID = คลาสอีเมล = ประเภทกล่องข้อความ = ชื่ออีเมล = อีเมลที่ต้องการ placeHolder = "www.csdn.com" />
</fieldset>
<fieldset id = ส่วนบุคคล>
<gregend> ข้อมูลอื่น ๆ </legend>
<label for = เว็บไซต์> URL ส่วนบุคคล: </label>
<อินพุต ID = คลาสเว็บไซต์ = ประเภทกล่องข้อความ = url name = เว็บไซต์ที่ต้องการ placeholder = "http://www.example.com"/>
<label for = age> อายุ: </lable>
<อินพุต ID = Age class = typebox type = number name = อายุ min = 18 step = 2 pattern = "[0-9] {1,3}" placeholder = "เติมในอายุ">
<label for = salary> เงินเดือนรายเดือน: </lable>
<อินพุต ID = ระดับเงินเดือน = ประเภทข้อความ = ช่วงชื่อ = เงินเดือนขั้นต่ำ = 0 สูงสุด = 50000 ขั้นตอน = 500 รูปแบบ = "[0-9] {2,}" placeHolder = "เงินเดือนรายเดือนคืออะไร = 10,000 onChange =" showValue (this.value) " />>
<span id = rangevalue> 10,000 </span>
<script>
ฟังก์ชั่น showValue (ค่า) {
document.getElementById ("rangevalue"). innerhtml = ค่า;
-
</script>
<label for = description> คำอธิบาย: </label>
<textarea id = คำอธิบายชื่อ = คำอธิบาย cols = 30 rows = 5 placeholder = "นี่คือคำอธิบายโดยละเอียด"> </textarea>
</fieldset>
<fieldset id = ยืนยัน>
<ประเภทอินพุต = ส่งค่า = "ส่ง" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
ซอร์สโค้ด CSS:
ร่างกาย{
ความเป็นมา: URL (bg.jpg) ทำซ้ำ;
FONT-FAMILY: Arial แคบ, Arial, Sans-Serif;
มาร์จิ้น: 0;
Padding: 0;
-
ส่วนหัวส่วนส่วนท้าย {
แสดง: บล็อก;
-
ส่วนหัว {
ความกว้าง: 100%;
พื้นหลังสี: RGB (0, 0, 0);
พื้นหลังสี: RGBA (0, 0, 0, 0, 0.9);
สี: #CCC;
Padding: 15px 0;
ระยะห่างจดหมาย: 1px;
มาร์จิ้น-ก้น: 20px;
ตำแหน่ง: ญาติ;
-
ส่วนหัว h1 {
มาร์จิ้น: 0 50px;
Text-Shadow: 2px 2px 2px #888;
ลอย: ซ้าย;
-
#BackLinks {
ลอย: ขวา;
มาร์จิ้น: -10px 20px;
ความสูงของสาย: 25px;
Font-Weight: ตัวหนา;
ขนาดตัวอักษร: 12px;
TEXT-ALIGING: ถูกต้อง;
-
#BackLinks A {
สี: #CCC;
การตกแต่งข้อความ: ไม่มี;
มาร์จิ้น: 3px 0 0;
แสดง: บล็อก;
-
#BackLinks A: Hover {
สี: #FFFF;
-
ส่วนท้าย {
พื้นหลังสี: RGB (0, 0, 0);
พื้นหลังสี: RGBA (0, 0, 0, 0, 0.8);
ความสูง: 25px;
ความกว้าง: 100%;
ความสูงของสาย: 25px;
ตำแหน่ง: ญาติ;
Font-Family: Arial, Helvetica, Sans-Serif;
ด้านล่าง: 0;
ซ้าย: 0;
สี:#888;
ขนาดตัวอักษร: 11px;
-
ส่วนท้ายขยาย {
Padding-Left: 20px;
-
ส่วนท้าย a {
สี:#1FA2E1;
-
#wrapper {
ความกว้าง: 770px;
มาร์จิ้น: 0 อัตโนมัติ;
TEXT-ALIGN: CENTER;
-
#wrapper hgroup {
มาร์จิ้น: 20px 0;
Text-Shadow: 1px 1px 1px #ccc;
-
#wrapper h1 {
สี:#146FA0;
ขนาดตัวอักษร: 42px;
มาร์จิ้น: 0;
-
#wrapper h2 {
สี:#71C1ED;
ขนาดตัวอักษร: 27px;
มาร์จิ้น: 0;
-
#lbl {
สี:#777;
ขนาดตัวอักษร: 17px;
Font-Weight: ตัวหนา;
Text-Shadow: 1px 1px 0 #FFF;
มาร์จิ้น: 10px 0;
-
*:จุดสนใจ{
โครงร่าง: ไม่มี;
-
ป้ายกำกับ, อินพุต, textarea, fieldset {
แสดง: บล็อก;
-
Account FieldSet#, FieldSet#ส่วนตัว {
ความกว้าง: 250px;
Padding: 0 50px 50px;
มาร์จิ้น: 10px;
ลอย: ซ้าย;
ความเป็นมา: RGB (244,244,244);
ความเป็นมา: RGBA (244,244,244,0.7);
-webkit-Border-Radius: 25px;
-MOZ-Border-Radius: 25px;
แนวชายแดน: 25px;
ชายแดน: 3px double #999;
-
FieldSet#ยืนยัน {
Padding-Top: 10px;
ชัดเจน: ทั้งสอง;
ชายแดน: ไม่มี;
ความสูงของสาย: 15px;
มาร์จิ้น: 10px 0;
-
FieldSet#ยืนยันป้ายกำกับ FieldSet#ยืนยันอินพุต {
แสดง: อินไลน์;
ลอย: ซ้าย;
มาร์จิ้น: 15px 5px 0;
-
ตำนาน{
ขนาดตัวอักษร: 20px;
Font-Weight: ตัวหนา;
ระยะห่างจดหมาย: 5px;
สี:#999;
ขอบซ้าย: -20px;
TEXT-ALIGN: ซ้าย;
Padding: 0 10px;
Text-Shadow: 1px 1px 0 #ccc;
-
ฉลาก{
ขนาดตัวอักษร: 17px;
Font-Weight: ตัวหนา;
มาร์จิ้น: 17px 0 7px;
TEXT-ALIGN: ซ้าย;
Text-Shadow: 1px 1px 0 #FFF;
-
Textarea {
ปรับขนาด: ทั้งสอง;
ความกว้างสูงสุด: 230px;
-
input.textbox, textarea {
Padding: 5px 10px;
-webkit-Border-Radius: 15px;
-MOZ-Border-Radius: 15px;
แนวชายแดน: 15px;
ชายแดน: 1px Solid #FFFF;
ความกว้าง: 200px;
Text-Shadow: 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.5S ทั้งหมด;
ความเป็นมา: URL (จำเป็นต้องใช้) ไม่มีการทำซ้ำ 200px 5px #f0f0ef;
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, จาก (#e3e3e3), ถึง (#FFFFF)); / * SAF4+, Chrome */
ความเป็นมา: -webkit-linear-gradient (บนสุด, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
ความเป็นมา: -moz-Linear-Gradient (บนสุด, #E3E3E3, #FFFFF); / * FF3.6+ */
ความเป็นมา: -ms-linear-gradient (บนสุด, #e3e3e3, #ffffff); / * IE10 */
ความเป็นมา: -o-linear-gradient (บนสุด, #e3e3e3, #fffff); / * โอเปร่า 11.10+ */
-
input.textbox: โฟกัส, textarea: โฟกัส {
-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;
Text-Shadow: 1px 1px 3px #777;
-
input.textbox: จำเป็น {
ความเป็นมา: URL (จำเป็นต้องใช้) ไม่มีการทำซ้ำ 200px 5px #f0f0ef;
ความเป็นมา: URL (จำเป็นต้องใช้ PNG) No-Repeat 200px 5px, -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, จาก (#e3e3e3), ถึง (#FFFFF)); / * SAF4+, Chrome */
ความเป็นมา: URL (จำเป็นต้องใช้) ไม่ต้องทำซ้ำ 200px 5px, -webkit-linear-gradient (บนสุด, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
ความเป็นมา: URL (จำเป็นต้องใช้) ไม่ต้องทำซ้ำ 200px 5px, -moz-linear-gradient (บนสุด, #e3e3e3, #FFFFF); / * FF3.6+ */
ความเป็นมา: URL (จำเป็นต้องใช้) ไม่มีการทำซ้ำ 200px 5px, -ms-linear-gradient (บนสุด, #e3e3e3, #ffffff); / * IE10 */
ความเป็นมา: URL (จำเป็นต้องใช้) ไม่ต้องทำซ้ำ 200px 5px, -o-linear-gradient (บนสุด, #e3e3e3, #FFFFF); / * โอเปร่า 11.10+ */
-
input.textbox: จำเป็น: ถูกต้อง {
ความเป็นมา: URL (Valid.png) ไม่มีการทำซ้ำ 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 (บนสุด, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
ความเป็นมา: URL (Valid.png) No-Repeat 200px 5px, -moz-linear-gradient (บนสุด, #e3e3e3, #fffff); / * FF3.6+ */
ความเป็นมา: URL (Valid.png) No-Repeat 200px 5px, -ms-linear-gradient (บนสุด, #e3e3e3, #ffffff); / * IE10 */
ความเป็นมา: URL (Valid.png) No-Repeat 200px 5px, -o-linear-gradient (บนสุด, #e3e3e3, #FFFFF); / * โอเปร่า 11.10+ */
-
input.textbox: โฟกัส: ไม่ถูกต้อง, input.textbox: ไม่ (: จำเป็น): ไม่ถูกต้อง {
ความเป็นมา: URL (ไม่ถูกต้อง png) ไม่ต้องทำซ้ำ 200px 5px #f0f0ef;
ความเป็นมา: URL (ไม่ถูกต้อง png) ไม่ต้องทำซ้ำ 200px 5px, -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, จาก (#e3e3e3), ถึง (#FFFFF)); / * SAF4+, Chrome */
ความเป็นมา: URL (unvalid.png) ไม่มีการทำซ้ำ 200px 5px, -webkit-linear-gradient (บนสุด, #e3e3e3, #fffff); / * Chrome 10+, Saf5.1+ */
ความเป็นมา: URL (ไม่ถูกต้อง png) ไม่ต้องทำซ้ำ 200px 5px, -moz-linear-gradient (บนสุด, #e3e3e3, #fffff); / * FF3.6+ */
ความเป็นมา: URL (ไม่ถูกต้อง png) ไม่ซ้ำ 200px 5px, -ms-linear-gradient (บนสุด, #e3e3e3, #fffff); / * IE10 */
ความเป็นมา: URL (ไม่ถูกต้อง png) ไม่ต้องทำซ้ำ 200px 5px, -o-linear-gradient (บนสุด, #e3e3e3, #FFFFF); / * โอเปร่า 11.10+ */
-
อินพุต [type = submit] {
Padding: 10px;
มาร์จิ้น: 0 10px! สำคัญ;
ความกว้าง: 300px;
-
หน้าจอ @media และ (-webkit-min-device-pixel-ratio: 0) {
อินพุต [type = range] {padding: 0;}
-
#rangevalue {
แสดง: บล็อก;
TEXT-ALIGING: ถูกต้อง;
ระยะขอบด้านบน: -25px;
-
อินพุต ::-webkit-input-placeholder, textarea ::-webkit-input-placeholder {
สี: #aaa;
แบบฟอนต์: ตัวเอียง;
Text-Shadow: 1px 1px 0 #FFF;
-
อินพุต: -moz-placeholder, textarea: -moz-placeholder {
สี: #aaa;
แบบฟอนต์: ตัวเอียง;
Text-Shadow: 1px 1px 0 #FFF;
-
.ClearFix {
ชัดเจน: ทั้งสอง;
-