ใส่สีสันให้ 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

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

การตั้งไซต์เพื่อใช้งานกับ Server Side Script

เรื่อง : การตั้งไซต์เพื่อใช้งานกับ Server Side Script (PHP/MySQL) การตั้งไซต์หรือการ New Sit...  

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 2

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 2 ต่อจากตอนที่ 1 ที่เราได้ทำการ Create ไฟล์สำหรับการเริ่...  

สร้างปุ่มกด Submit ของ Form ด้วยรูปภาพ

เรื่อง : การสร้างปุ่ม Submit แบบใช้รูปภาพด้วย Dreamweaver เห็นตามเว็บบอร์ดต่าง ๆ มักมีผู้สนใจอยากจะทำปุ่ม Submit ของ Form โ...  

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag...