About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

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

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

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

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

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

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

การทำให้ Input มีสีสันจริง ๆ แล้วเราอาศัยการประยุกติ์ใช้ CSS เข้ามาใช้กับ Input ครับ โดยมีหลักอยู่ 2 ขั้นตอน คือ
1. สร้าง CSS ที่จะให้กับ Input ขึ้นมา
2. นำ CSS นั้นไปใช้กับ Input
ซึ่งทั้ง 2 ขั้นตอน สามารถทำได้ ดังนี้

เริ่มต้นด้วยการสร้าง 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