Element ในฟอร์ม

บทนี้จะอธิบาย Element ที่มีในฟอร์มทั้งหมด

Element: <input>

<input> เป็น Element ที่สำคัญที่สุด

<input> สามารถใช้สร้างช่องกรอกข้อมูลได้หลายแบบ ขึ้นอยู่กับประเภทที่เรากำหนดใน Attribute type

Element: <select>

<select> ใช้สร้างตัวเลือกแบบ drop-down

<option> ใช้สร้างตัวเลือก

<option> ตัวแรกจะถูกเลือกเป็นค่าเริ่มต้น

ถ้าต้องการให้รายการใดถูกเลือกมาก่อน ให้ใส่ Attribute selected ไปใน Tag <option>

Element: <textarea>

<textarea> ใช้สร้างช่องกรอกข้อมูลแบบหลายบรรทัด

Attribute rows ใช้ระบุจำนวนแถวที่มองเห็นได้ของช่องกรอกข้อมูล

Attribute cols ใช้ระบุความกว้างของช่องกรอกข้อมูล

เมื่ออยู่บนบราวเซอร์จะแสดงผลออกมาแบบนี้

The cat was playing in the garden.

Element: <button>

<button> ปุ่มที่สามารถคลิกได้

เมื่ออยู่บนบราวเซอร์จะแสดงผลออกมาแบบนี้

Click Me!

Element ใหม่ใน HTML5

ใน HTML5 มีการเพิ่ม Element ใหม่ดังนี้ คือ

• <datalist>
• <keygen>
• <output>

Element: <datalist>

<datalist> ใช้สร้าง autocomplete ให้กับ <input>

autocomplete คือรายการข้อมูลที่ถูกระบุเตรียมไว้ก่อนแล้ว เมื่อพิมพ์ข้อความลงในกล่องแล้วสะกดตรงกับข้อมูล ก็จะขึ้นรายการมาให้โดยไม่จำเป็นต้องพิมพ์ทุกตัวอักษร

Attribute list ของ <input> จะต้องมีค่าตรงกับ Attribute id ของ <datalist>

Element: <keygen>

<keygen> ถูกกำหนดให้ ใช้คู่กับ form เพื่อทำการ generator การเข้ารหัสให้กับ ข้อมูลใน form

ใช้เพื่อระบบความปลอดภัยในกาส่งข้อมูลจาก Client ไปยัง Server

เมื่อ form ถูก submit private key จะถูกจัดเก็บไว้ยัง เครื่องคอมพิวเตอร locally หรือเครื่อง Client และ public key จะถูกส่งไปยัง server

Element: <output>

<output> ใช้ในการสร้างการแสดงผลลัพธ์ของการคำนวนในแบบฟอร์มแบบทันที (Real-Time)

สรุป Element ที่ใช้กับ <form>