:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 หน่วยที่ 6 การสร้างตาราง
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบก่อนเรียน
แบบฟอร์มป้อนข้อมูล
การสร้างฟอร์มชนิด Text Box
 การสร้างฟอร์มชนิด password
 การสร้างฟอร์มชนิด Check Box
 การสร้างฟอร์มชนิด Radio Button
 การสร้างฟอร์มชนิดแนบ File
 การสร้างฟอร์มชนิด Text Area
 การสร้างฟอร์มชนิด Selection Box
 การสร้างปุ่มชนิด reset และ submit
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 9 การสร้างฟอร์ม
การสร้างฟอร์มชนิด 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>

การแสดงผล

ซื่อ :
นามสกุล :

 

 


การจำกัดจำนวนตัวอักษรในการกรอก

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

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 หลัก:

จากการกำหนดจำนวนตัวอักษรในการกรอกข้อมูล ในตัวอย่างจะกำหนดให้กรอกได้เพียง 13 ตัว


วีดีโอ