Article
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

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

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

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

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

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

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

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

<style type="text/css"> .MyStyle { background-color:red; font-size:10px; } </style> จากในตัวอย่าง เป็นการกำหนด Style ชื่อ MyStyle ให้มีสีพื้นหลังเป็นสีแดง และมีขนาดตัวอักษรเป็น 10 pixels

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

<input type=text 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 ตัวนี้แหละครับ ถ้าใช้เป็น ก็จะได้ช่องรับข้อมูลสวยๆไว้ใช้ในเวบของคุณแล้ว ส่วนนี่เป็นตัวอย่างเล็กๆน้อยๆ ที่ผมลองทำดูครับ

<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>


Back to top





© copyright 2001 Sorrawut Korsuwansiri