การสร้างฟอร์มชนิด Text Box
ช่องรับข้อมูลชนิด Text Box คือช่องรับข้อมูลทั่ว ๆ ไปที่เราเห็นกันเป็นประจำ เช่น การรับข้อมูล ชื่อ – นามสกุล หรือข้อมูลส่วนตัวอื่น ๆ
Tag
ชื่อแท็ก | input |
ตำแหน่งแท็ก | อยู่ภายในแท็ก <form>...</form> |
รูปแบบการใช้แท็ก | <input type="value" name="ชื่อช่องกรอกข้อมูล"> |
แอตทริบิวต์ | type ชนิดของการรับข้อมูล |
ค่า value | text กรอบสี่เหลี่ยที่สามารถพิมพ์ข้อความลงไปได้ |
ตัวอย่างการใช้งาน
<body>
<form>
ซื่อ : <input type="text" name="firstname">
นามสกุล : <input type="text" name="lastname">
</form>
</body>
ซื่อ : <input type="text" name="firstname">
นามสกุล : <input type="text" name="lastname">
</form>
การแสดงผล
การจำกัดจำนวนตัวอักษรในการกรอก
ในการกรอกข้อมูลบางครั้งจำเป็นต้องมีการจำกัดจำนวนตัวอักษร ที่สามารถกรอกได้ เพราะบางเช่น เลขบัตรต่างที่มีมีจำนวนคงที่ ไม่มีการเปลี่ยนแปลงจำนวนตัวเลข หรือจำกัดข้อความ
Attribute
แอททริบิวต์ | maxlength |
ตำแหน่งแท็ก | อยู่ภายในแท็กเปิด <input> |
รูปแบบการใช้แท็ก | <input type="text" maxlength="value"> |
ค่า value | ตัวเลข 1,2,3.... |
ตัวอย่างการใช้งาน
<body>
<form>
เลขบัตรประชาชน 13 หลัก: <input type="text" name="id" maxlength="13">
</form>
</body> เลขบัตรประชาชน 13 หลัก: <input type="text" name="id" maxlength="13">
</form>
การแสดงผล
จากการกำหนดจำนวนตัวอักษรในการกรอกข้อมูล ในตัวอย่างจะกำหนดให้กรอกได้เพียง 13 ตัว
วีดีโอ