เกี่ยวกับการกวดวิชานี้อธิบายวิธีการที่ดีในการออกแบบโดยใช้ฟอร์มที่สะอาด CSS ออกแบบเฉพาะกับป้ายกำกับและป้อนแท็กเพื่อจำลองการ HTML ที่ตารางโครงสร้าง. คุณสามารถใช้ทั้งหมด CSS / HTML ที่องค์ประกอบในการออกแบบการที่กำหนดเองสำหรับรูปแบบของเว็บโครงการ:

ขั้นตอนที่ 1: สร้าง HTML พื้นฐานโครงสร้าง

 > <h1> Contact Form : </h1> <label> <span> Full name </span> <input type = "text" class = "input_text" name = "name" id = "name" / > </label> <label> <span> Email </span> <input type = "text" class = "input_text" name = "email" id = "email" / > </label> <label> <span> Subject </span> <input type = "text" class = "input_text" name = "subject" id = "subject" / > </label> <label> <span> Message </span> <textarea class = "message" name = "feedback" id = "feedback" > </textarea> <input type = "button" class = "button" value = "Submit Form" / > </label> </div> </form> <form> <div คลาส "box" => <h1> แบบฟอร์มติดต่อ: </ h1> <label> <span> ชื่อเต็ม </ ช่วง> <อินพุต ประเภท = "ข้อความ" คลาส = "input_text" ชื่อ = "ชื่อ" รหัส = "ชื่อ" /> </ ฉลาก> <label> <span> อีเมล </ ช่วง> <input ประเภท = "text" คลาส "input_text" ชื่อ = = = "email" รหัส "email" /> </ ฉลาก> <label> <span> หัวเรื่อง </ ช่วง> <input ประเภท "text" คลาส = = = "input_text" ชื่อ "subject" รหัส = "subject" /> </ ฉลาก> <label> <span> ข้อความ </ ช่วง> <textarea คลาส "message" ชื่อ = = = "feedback" รหัส "feedback"> </ textarea> <input ประเภท "button" คลาส = = = "button" ค่า "Submit Form" /> </ ฉลาก> </ div> </ ฟอร์ม> 

ขั้นตอนที่: 2 สร้าง CSS รหัส

 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; background : # 161712 ; } form,input,select,textarea { margin : 0 ; padding : 0 ; color : #ffffff ; } div .box { margin : 0 auto ; width : 500px ; background : # 222222 ; position :relative ; top : 50px ; border : 1px solid # 262626 ; } div .box h1 { color : #ffffff ; font-size : 18px ; text-transform :uppercase ; padding : 5px 0 5px 5px ; border-bottom : 1px solid # 161712 ; border-top : 1px solid # 161712 ; } div .box label { width : 100 %; display : block ; background : #1C1C1C ; border-top : 1px solid # 262626 ; border-bottom : 1px solid # 161712 ; padding : 10px 0 10px 0 ; } div .box label span { display : block ; color : #bbbbbb ; font-size : 12px ; float :left ; width : 100px ; text-align :right ; padding : 5px 20px 0 0 ; } div .box .input_text { padding : 10px 10px ; width : 200px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; } div .box .message { padding : 7px 7px ; width : 350px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; overflow :hidden ; height : 150px ; } div .box .button { margin : 0 0 10px 0 ; padding : 4px 7px ; background : #CC0000 ; border : 0px ; position : relative ; top : 10px ; left : 382px ; width : 100px ; border-bottom : 1px double # 660000 ; border-top : 1px double # 660000 ; border-left : 1px double #FF0033 ; border-right : 1px double #FF0033 ; } * (ขอบ: 0; รอง: 0;) (ร่างกาย แบบ อักษร: 100% ปกติ Arial, Helvetica, sans-serif; พื้นหลัง: # 161712;) ฟอร์มอินพุตเลือก, textarea (ขอบ: 0; รอง: 0; สี: # FFFFFF;) div. กล่อง (ขอบ: 0 อัตโนมัติ; กว้าง: 500px; พื้นหลัง: # 222222; ตำแหน่ง: ญาติ; บน: 50px; ชายแดน: ของแข็ง 1px # 262626;) div. กล่อง h1 (สี: # FFFFFF; อักษร - ขนาด: 18px; ข้อความ แปลง: พิมพ์ใหญ่; รอง: 5px 0 5px 5px; ชายแดน-ล่าง: 1px ของแข็ง # 161712; ชายแดน สูงสุด: 1px ของแข็ง # 161712;) div. กล่อง ป้ายข้อความ (กว้าง: 100%; แสดง: บล็อก; พื้นหลัง: # 1C1C1C; ชายแดน สูงสุด: 1px ของแข็ง # 262626; ชายแดน-ล่าง: 1px ของแข็ง # 161712; รอง: 10px 0 10px 0;) div. กล่อง ป้ายช่วง (แสดง: บล็อก; สี: # bbbbbb; ขนาดแบบ อักษร: 12px; ฟ่อง: ซ้าย; กว้าง: 100px; ข้อความ ชิด: ขวา; รอง: 5px 20px 0 0;) div. กล่อง. input_text (รอง: 10px 10px; กว้าง: 200px; พื้นหลัง: # 262626; ชายแดน-ล่าง: 1px สอง # 171717; ชายแดนสูงสุด: 1px สอง # 171717; ชายแดน ซ้าย: 1px สอง # 333333; ชายแดน ขวา: 1px สอง # 333333;) div. กล่อง. ข้อความ (รอง: 7px 7px; กว้าง: 350px; พื้นหลัง: # 262626 ; ชายแดน-ล่าง: 1px สอง # 171717; ชายแดนสูงสุด: 1px สอง # 171717; ชายแดน ซ้าย: 1px สอง # 333333; ชายแดน ขวา: 1px สอง # 333333; ล้น: ซ่อนเร้น; ความ สูง: 150px;) div. กล่อง. ปุ่ม (ขอบ: 0 0 10px 0; รอง: 4px 7px; พื้นหลัง: # CC0000; ชายแดน: 0px; ตำแหน่ง: ญาติ; บน: 10px; ซ้าย: 382px; กว้าง: 100px; ชายแดน-ล่าง: 1px สอง # 660000; ชายแดน - ด้านบน: 1px สอง # 660000; ชายแดน ซ้าย: 1px สอง # FF0033; ชายแดน ขวา: 1px สอง # FF0033;) 

ในที่สุดเรากระทำ. เราได้สร้างดีดูฟอร์มโดยตาราง. ดูตัวอย่าง

ยื่นใต้: Css, Tutorials โดยผู้ดูแลระบบ