About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





ค้นหาข้อมูลใน 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

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



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

เก็บ Code ที่ชื่นชอบไว้ใช้นาน ๆ (Snippets Panel)

เรื่อง : การเก็บโค้ดโปรแกรมไว้ใช้กับโปรแกรม Dreamweaver เคยมีแฟนเว็บบางท่านเข้ามาถามว่า "พี่มีวิธีเก็บโค้ดที่เร...  

เปิดใช้งาน Server Behaviors ให้กับ Dreamweaver CC

เรื่อง: การเปิดใช้งาน Server Behaviors ของ Dreamweaver CC เพื่อใช้งาน Dreamweaver Database Dreamweaver เวอร์ชั่น ...  

การเคาะ Space Bar เว้นวรรคกับโปรแกรม Dreamweaver

เรื่อง : มาเคาะ Space Bar ให้เว้นวรรคได้หลาย ๆ ครั้งกัน ใช้งาน Dreamweaver เคยมีปัญหากันบ้างไหม ? เวลาที่เราต...  

การ Import ข้อมูล MS Word มาใช้ทำเว็บกับโปรแกรม Dreamweaver

เรื่อง : การ Import ข้อมูลจากไฟล์ MS Word มาใช้งานกับโปรแกรม Dreamweaver หลายครั้งผู้ที่มีหน้าที่จัดทำ Website ต้องมีการรับ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*