Article

วิธีแต่งแต้มฟอร์มรับข้อมูลให้สุดหรู

โดย สรวุฒิ กอสุวรรณศิริ

แบบฟอร์มสีสวยๆ ลักษณะแปลกๆ ที่เราเห็นกันในเวบไซต์สวยๆ นั้น ความจริงแล้ว วิธีการทำไม่ได้ยาก ไม่มีอะไรซับซ้อนเลย แต่สามารถดึงดูดสายตา และทำให้เวบดูดีขึ้นมาก เคล็ด(ไม่)ลับของมันก็คือ Cascading Style Sheet นั่นเองครับ ในบทความนี้ ผมจะสอนวิธีการกำหนดสีและรูปแบบของฟอร์ม รวมถึง attribute หลักๆที่มักใช้ แต่งแต้มฟอร์มให้สวย ปิดท้ายด้วยตัวอย่างฟอร์มซัก 3-4 แบบพอให้คุณเกิดไอเดียกระฉูด เมื่อพร้อมแล้ว มาเริ่มกันเลยดีกว่าครับ

CSS คือสิ่งที่ต้องใช้

การใช้ CSS ที่ผมจะแนะนำสำหรับบทความนี้ก็คือการใส่มันลงไปในส่วน <HEAD>...</HEAD> และทำในรูปแบบที่เป็นคลาส ซึ่งจะมีผลกับ ฟอร์มทั้งหมดที่ถูกระบุว่าเป็นคลาสนั้น รูปแบบของการใช้ CSS มีดังนี้ครับ

.className { attribute : value; attribute : value; attribute : value; ... }

การเขียน CSS แบบเป็นคลาส เราต้องใช้เครื่องหมาย . นำหน้า ตามด้วยชื่อคลาส หลังจากนั้น จึงเขียน Style ของเราไว้ภายในเครื่องหมาย { และ } ซึ่ง Style จะเกิดขึ้นจากการกำหนดค่าใน attribute ต่างๆ เช่น

ส่วนวิธีการระบุว่า Input ใดอยู่ในคลาสนี้ ก็เพียงแค่เติม class=MyStyle ลงไปในแท็กเท่านั้นเช่น

หมายเหตุ : ท่านสามารถศึกษาวิธีการใช้ CSS อย่างละเอียดได้ใน บทเรียน CSS

แนะนำ Attribute ที่สำคัญ

เมื่อเข้าใจวิธีการกันแล้ว ก็มาถึงประเด็นที่ว่า เราจะแต่งเติมอะไรได้บ้าง มี attribute ไหนที่เราน่าจะเอามาใช้กับ form ซึ่งความจริงแล้ว attribute เกือบทุกตัวใน บทเรียน CSS สามารถนำมาใช้ได้ แต่ผมจะขอสรุปเฉพาะตัวที่น่าสนใจเอาไว้ในบทความนี้นะครับ

font-family	ฟอนต์ของตัวอักษร
font-size	ขนาดตัวอักษร
color	สีตัวอักษร
background-color	สีพื้นหลัง
border-style	ใช้กำหนดรูปแบบของขอบ มีได้ 9 แบบดังนี้ none,dotted,dashed,solid,double,groove,ridge,inset,outset
border-width	ความกว้างของขอบ
border-color	สีของขอบ

แค่ 7 ตัวนี้แหละครับ ถ้าใช้เป็น ก็จะได้ช่องรับข้อมูลสวยๆไว้ใช้ในเวบของคุณแล้ว ส่วนนี่เป็นตัวอย่างเล็กๆน้อยๆ ที่ผมลองทำดูครับ

		© copyright 2001 Sorrawut Korsuwansiri

<style type="text/css"> .realdev1 { background-color:#ffffff; border-style:dotted; border-color:#000000; border-width:1; font-family:system; font-size:12px; color:000000; } </style>
<style type="text/css"> .realdev2 { background-color:#ffeeee; border-style:solid; border-color:#ff00ff; border-width:1; font-family:Comic Sans MS; font-size:16px; color:ff0000; } </style>
<style type="text/css"> .realdev3 { background-color:#606060; border-style:outset; border-width:3; font-family:system; font-size:16px; color:ffff00; } </style>
<style type="text/css"> .realdev4 { background-color:blue; border-style:double; border-color:red; border-width:3; font-family:MS Sans Serif; font-size:12px; color:white; } </style>