pseudo-classes กับการกำหนด form stage interface เพื่อตอบโต้การใช้งานกับ ผู้ใช้งาน

วันนี้ผมจะมาพูดเกี่ยวกับการใช้ CSS มาช่วยในการทำให้ User Interface ของหน้าแบบฟอร์มทำงานตอบโต้กับผู้ใช้งานได้ดีขึ้น

การใช้ pseudo-classes ของ CSS เข้ามาช่วยในการตบแต่งหน้าแบบฟอร์มนั้นอาจจะช่วยให้แบบฟอร์มดูน่าใช้งานมากขึ้น และ ช่วยให้ผู้ใช้งานได้รู้ว่าตัวเองกำลังกรอกแบบฟอร์มตรงไหนอยู่ พร้อมทั้งมีคำแนะนำในการกรอกข้อมูลลงไปในแบบฟอร์มนั้นได้ด้วย

ตัวอย่างที่ผมจะนำเสนอนี้ใช้เทคนิคการทำงานของ pseudo-classes ใน CSS3 เข้ามาประกอบกับโครงสร้างของ XTHML เพื่อให้แบบฟอร์มในเว็บไซต์นั้น ทำงานตอบโต้กับผู้ใช้งานได้อย่างเป็นประโยชน์สูงสุดครับ

  • :active ในที่นี้ จะทำงานในขณะที่ click mouse (ตอนที่กดลงไปนั่นเอง)
  • :focus จะทำหน้าที่บอกตำแหน่งของตัวรับข้อมูลของแบบฟอร์มที่ cursor ของผู้ใช้งานทำงานอยู่ และ สถานะที่พร้อมใช้งาน (พร้อมรับข้อมูลที่จะกรอก)
  • :checked เป็น pseudo-classes ที่ทำการเช็คค่าความเป็นจริงของ input[type=’checkbox’], input[type=’radio’] ว่าได้ทำการเลือกไปแล้ว

เพราะฉะนั้นตัวอย่างนี้จะยังใช้ไม่ได้ผลใน IE6 และ 7 นะครับ ใน IE8 จะไม่แสดงออกมาในบางสถานะ (เพราะ IE8 ยังขี้อายอยู่) การแสดงผลที่ถูกต้องที่ผมต้องการจะเหมือนกับภาพตัวอย่างด้านล่างครับ

ภาพตัวอย่าง

จากตัวอย่างภาพด้านบน คุณจะเห็นว่า input[type=’radio’] และ input[type=’checkbox’] ที่ได้ถูกผู้มช้งานเลือก จะมีสถานะที่เปลี่ยนไป โดยสถานะที่เปลี่ยนไปจะทำตามคำสั่งของ pseudo-classes :checked ดัง CSS ด้่านล่างนี้ (จะเห็นว่าผมได้ทำการเลือก input[type=’radio’] ที่ คำนำนหน้านามว่า นาย และผมได้ทำการเลือก input[type=’checkbox’] ได้ อ่านนโยบายการใช้งานสมาชิกเข้าใจแล้ว)

ในส่วนของ input[type=’text’] และ textarea ที่ใช้เก็บ ชื่อตามบัตรประชาชน, นามสกุลที่อยากใช้ และ ภูมิลำเนาเดิม ผมได้กำหนดสถานะที่ถูก click (:active) ให้แสดงพื้นหลังเป็นสีเขียว (เมื่อคุณดูหน้าตัวอย่าง จะเห็นว่าพื้นหลังสีเขียวจะแสดงมาแค่ครู่เดียวเพื่อให้ผู้ใช้งานได้รู้ว่าตัวเองได้ click ตำแหน่งใดอยู่) เพราะฉะนั้น CSS ที่ผมเขียนจะเป็นไปตาม Code ตามด้านล่างนี้

ในส่วนของ input[type=’text’] และ textarea ผมยังได้กำหนดสถานะที่ cursor อยู่ สถานะที่พร้อมใช้งาน (:focus) จะมีสถานะที่เปลี่ยนไป โดยจะทำตามคำสั่งของ pseudo-classes :focus จะทำการเปลี่ยน property ของตัวเองให้แสดงผลอีกแบบ และ ให้ element ถัดไปที่อยู่ติดกับ input[type=’text’] และ textarea แสดงผลตาม property ที่กำหนด ดัง CSS ด้่านล่างนี้

ดูตัวอย่าง pseudo-classes กับการกำหนด form stage interface เพื่อตอบโต้การใช้งานกับ user

Back to Top

0 Responses to pseudo-classes กับการกำหนด form stage interface เพื่อตอบโต้การใช้งานกับ ผู้ใช้งาน

  1. go2jame

    รูปไม่ขึ้นครับ

    Reply

  2. radiz

    ครับเห็นแล้วแต่ว่า กำลังพยาsecurity guard อยู่ งง ๆ กับชีวิต

    Reply

  3. buggo

    เพิ่งรู้ว่าธีมใหม่ มีผลให้อัพบทความถี่ด้วย 555+

    Reply

  4. pornantha

    บ่แม่นดอก อ้ายว่า มันอั้นมาโดน

    ด่าซุมื้อ…

    Reply

  5. heypetch

    พี่สามารถ เก่งจังครับ มิน่าหญิงติดกันตรึมเลย

    Reply

  6. maxmayer

    นานๆ ทีถึงจะคลอดออกมาสัก บทความ (><);

    Reply

  7. finzaa

    Verykind

    Reply

  8. pnGz

    นานๆคลอดทีแต่ก็แหล่มอยู่เน้อ

    **สาวติดตรึมจิงอ่ะ??**

    Reply

  9. pnGz

    อีกอย่างอ่ะจารย์ samart ชื่อ id ของ radiobox ตรง "นาง" อ่ะ
    มันคือ mir = เมีย ??

    Reply

  10. radiz

    ประสบการณ์ พ่อคุณเอ้ยยย

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top