GCSS

CSS frame work by Goragod.com

Inputs Select Textarea

<p class=valid>...</p>

<p class=invalid>...</p>

รูปแบบเริ่มต้นของฟอร์ม และ Input ต่างๆ จะมีลักษณะดังด้านบน โดยจะมี class ให้ใช้งานเพิ่มเติม เช่น

  • .valid เป็น class สำหรับแสดงให้รู้ว่าถูกต้องแล้ว ซึ่งจะทำให้ Input เป็น สีเขียว และมีเครื่องหมายถูก แต่ถ้า class นี้อยู่ร่วมกับ p จะแสดงเป็นข้อความสีเขียวเพียงอย่างเดียว
  • .invalid เป็น class สำหรับแสดงข้อผิดพลาดของข้อมูล ซึ่งจะทำให้ Input เป็น สีแดง และมีเครื่องหมายกากบาท แต่ถ้า class นี้อยู่ร่วมกับ p จะแสดงเป็นข้อความสีแดงเพียงอย่างเดียว
  • .wait จะแสดงไอคอน loading ที่ Input
  • .required หรือ ถ้า Input มีคุณสมบัติ required ร่วมด้วย จะทำให้ Input แสดงกรอบสีส้ม

Form fixed label

เป็นฟอร์มที่มีขนาดความกว้างของ label คงที่ ช่วยให้การแสดงผลฟอร์มสวยงาม ดังตัวอย่าง

ระบบจะส่งข้อมูลการลงทะเบียน ไปยังอีเมล์นี้ กรุณาใช้ที่อยู่อีเมล์ที่ติดต่อได้ และกรุณาตรวจสอบใน Junk ด้วย

ภาษาอังกฤษตัวพิมพ์เล็กและตัวเลข 4 - 8 ตัวอักษร

รหัสผ่านอีกครั้ง เหมือนกับด้านบน

antispam

กรุณากรอกตัวอักษรที่เห็นลงในช่อง

<form id=register_frm class=fixlabel method=post> <fieldset> <p> <label>.....</label> <input required type=text> </p> <p class=comment>....</p> ..... <p class=antispam> <label>Anti Spam :</label> <img src="...." alt=antispam> <input required type=text> </p> <p class=comment>.....</p> </fieldset> <fieldset class=submit> <input type=submit class="button large save" value="สมัครสมาชิก"> </fieldset> </form>

สามารถกำหนดฟอร์มเป็นแบบความกว้างของ label คงที่ได้โดยกำหนดคลาส .fixlabel ให้กับฟอร์ม และ นอกจากนี้ยังมีคลาสสำหรับองค์ประกอบอื่นๆที่ใช่ร่วมกับ .fixlabel เพื่อให้แสดงผลได้สวยงามได้ เช่น

  • .comment .usericon .submit ซึ่งจะทำการจัดตำแหน่งให้ตรงกันตามตัวอย่าง
  • .inline โดยปกติจะใช้ร่วมกับ lable เพื่อทำการ reset ความกว้่างของ label ให้กลับเป็นค่าเริ่มต้น