ใส่สีสันให้ input สำหรับกรอกข้อมูลของ Form ด้วย CSS [Article ID : 41]

เรื่อง : ใส่สีสันให้ Input กรอกข้อมูลด้วย CSS

หลายท่านคงจะเคยเห็น input สำหรับกรอกข้อมูลนะครับ หลายท่านอาจจะพบว่า เอ...ทำไมเขาใส่สีสันลงไปใน input กรอกข้อมูลเหล่านั้นได้ เขาทำได้อย่างไร เพราะพอเราสร้างฟอร์มขึ้นมาทีไรก็ทำได้แต่อินพุทสีขาวแบบนี้ >>>


แต่เว็บของเขาเป็นแบบนี้ >>>


เขาทำได้อย่างไร...บทความนี้จะมาแนะนำกันครับ...

การทำ input กรอกข้อมูลให้มีสีสัน

เริ่มต้นด้วยการสร้าง CSS ขึ้นมา

1. ให้ทำการสร้าง Form พร้อมกับ Input สำหรับกรอกข้อมูลต่าง ๆ ให้เรียบร้อย จากนั้นให้ทำการเปิดหน้าต่าง CSS Styles ขึ้นมาเพื่อกำหนดค่า (Main Menu ->Window -> CSS Styles) ดังรูป 2. ที่หน้าต่าง CSS Styles ให้กดไปที่ไอคอน New CSS Rule เมื่อกดแล้ว โปรแกรมจะทำการเปิดหน้าต่าง New CSS Rule ขึ้นมาให้เรากำหนดค่า ดังรูป ให้ทำการกำหนดค่า ดังนี้
- Selector Type : Class
- Selector Name : input-color หรือชื่ออื่น ๆ ตามที่ต้องการ
จากนั้นทำการกดที่ปุ่ม OK

3. ที่หน้าต่าง CSS Rule definitions ในส่วนของ Category เลือกไปที่ Background จากนั้นทำการเลือกสีื้นหลังที่จะทำมาใช้เป็นสีของ Input ของเราได้เลยครับ ดังรูป เมื่อเลือกสีได้แล้ว กดที่ปุ่ม OK

นำ CSS ที่สร้างมาใช้กับ Input

4. เมื่อเราสร้าง CSS ที่จะนำมาใช้กับ Input ได้แล้ว จากนั้นให้ทำการเลือกไปที่ Input ที่เราต้องการใส่สีสันลงกับกับอินพุท
5. มาที่ Properties เลือกไปที่ Class และเลือกชื่อ Class ที่เราสร้างไว้ในข้อที่ 2 ดังรูป
6. เมื่อปฏิบัติครบทั้ง 5 ข้อแล้ว เราก็จะได้ Input ที่มีสีสันตามต้องการแล้วครับ ดังรูป

ps.ให้ทำการ Preview ดูกับ Web Browser ครับ
วิธีการข้างต้นนั้น เรายังสามารถกำหนดคุณลักษณะอื่น ๆ ลงไปได้อีกตามคุณสมบัติที่มีของ CSS ครับ อย่างไรให้ลองใช้งานกันดูนะครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

สร้าง Web Application ด้วย Dreamweaver + PHP + MySQL การเตรียมพร้อมและข้อตกลงในการเรียนรู้

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 1สำหรับบทความนี้ก็จะเป็นบทความชุดนะครับคือใน 1 เร...  

สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 1

เรื่อง : วิธีการสร้างโปรแกรมอ่าน RSS/XML ด้วย Dreamweaver ตอนที่ 1 RSS (Really Simple Syndication/Rich...  

เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น

เรื่อง : เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น ในการออกแบบเว็บเพจ บางครั้งเราจำเป็นต้อง...  

การทำ Refresh/Redirect ให้ Web Browser ด้วย Dreamweaver

เรื่อง : สั่งให้ Web Browser ทำการ Refersh หรือ Redirect ตัวเอง ใบบางครั้งเรามีความจำเป็นต้องทำการ Refresh ...