แบบฟอร์มพร้อมฉลากที่มีสไตล์
วิธีจัดรูปแบบป้ายชื่อแบบฟอร์มด้วย CSS องค์ประกอบแบบฟอร์มที่ใช้เพื่อติดป้ายกำกับฟิลด์ต่างๆ และพื้นที่ป้อนข้อมูลบนแบบฟอร์มหน้าเว็บคือองค์ประกอบป้ายกำกับ สามารถจัดสไตล์ได้โดยใช้กฎ Cascading Style Sheet
ขั้นตอนที่ 1
หากต้องการจัดรูปแบบองค์ประกอบป้ายกำกับตามที่ปรากฏในรูปภาพในบทนำ คุณต้องใช้องค์ประกอบป้ายกำกับที่มีแอตทริบิวต์ "สำหรับ" นอกจากนี้ คุณต้องปิดองค์ประกอบป้ายกำกับก่อนเพิ่มองค์ประกอบ "อินพุต" เอง HTML สำหรับแบบฟอร์มที่สมบูรณ์ในภาพประกอบ
วีดีโอประจำวันนี้
ขั้นตอนที่ 2
ในการจัดรูปแบบองค์ประกอบป้ายกำกับ ฉันทำให้ป้ายกำกับแสดงเป็นองค์ประกอบระดับบล็อก ซึ่งลอยไปทางซ้าย จากนั้นฉันกำหนดความกว้างให้กับป้ายกำกับเพื่อให้ช่องป้อนข้อมูลทั้งหมดอยู่ห่างจากป้ายกำกับอย่างสม่ำเสมอ ฉันกำหนดสีและทำให้ข้อความเป็นตัวหนา ฉันใช้เนื้อหาที่สร้างขึ้นเพื่อเพิ่มโคลอน (: ) หลังป้ายกำกับ (โคลอนอาจไม่ปรากฏในทุกเบราว์เซอร์)
นี่คือ CSS:
ฉลาก { สี: # B4886B; font-weight: ตัวหนา; แสดง: บล็อก; ความกว้าง: 150px; ลอย: ซ้าย; } ป้ายกำกับ: หลัง { เนื้อหา: ": " }
ขั้นตอนที่ 3
เพื่อความสมบูรณ์ ฉันยังจะแสดง CSS ที่ใช้ในการจัดรูปแบบชุดฟิลด์ เนื่องจากองค์ประกอบป้ายกำกับถูกล้อมรอบด้วยชุดฟิลด์ที่มีเส้นขอบ
นี่คือ CSS นั้น:
fieldset { border: 1px ของแข็ง # CCA383; ความกว้าง: 400px; พื้นหลัง: #FFE8EF; ช่องว่างภายใน: 3px; } ตำนานชุดฟิลด์ { พื้นหลัง: #CCA383; ช่องว่างภายใน: 6px; font-weight: ตัวหนา; }
ขั้นตอนที่ 4
คุณสามารถทำสิ่งอื่นๆ มากมายเพื่อจัดรูปแบบองค์ประกอบป้ายกำกับ ตัวอย่างของฉันเป็นเพียงวิธีหนึ่งที่จะทำ
แบบฟอร์ม HTML
สิ่งที่คุณต้องการ
ความรู้ในการทำงานของ HTML
ความรู้ในการทำงานของ CSS
