คอร์ส IT พื้นฐาน HTML 013_ฟอร์มและการป้อนข้อมูลจากผู้ใช้

ฟอร์ม

ฟอร์ม HTML (Form) เป็นส่วนที่สำคัญมากใน HTML ช่วยให้ผู้ใช้สามารถป้อนข้อมูลในหน้าเว็บและส่งข้อมูลไปยังเซิร์ฟเวอร์ได้

ตัวอย่าง:

1
<form action="/submit" method="post">
2
  <!-- องค์ประกอบฟอร์มอยู่ที่นี่ -->
3
</form>

องค์ประกอบ <form> กำหนดพื้นที่สำหรับการป้อนข้อมูลของผู้ใช้ และสามารถประกอบด้วยองค์ประกอบการป้อนข้อมูลประเภทต่างๆ เช่น พื้นที่ข้อความ <textarea>, รายการแบบเลื่อนลง <select>, ปุ่มตัวเลือก <radio>, กล่องกาเครื่องหมาย <checkbox> และปุ่ม <button> เป็นต้น

คุณสมบัติฟอร์ม:

• action: กำหนด URL ของไฟล์ประมวลผลบนเซิร์ฟเวอร์หลังจากส่งข้อมูลฟอร์ม
• method: กำหนดวิธี HTTP ที่ใช้ส่งข้อมูลไปยังเซิร์ฟเวอร์ ค่าที่ใช้บ่อยคือ “get” และ “post”
• name: ใช้สำหรับระบุชื่อของฟอร์ม ชื่อฟอร์มใช้เพื่อระบุฟอร์มและใช้ในการประมวลผลข้อมูลฟอร์มฝั่งเซิร์ฟเวอร์
• enctype: ใช้สำหรับระบุวิธีการเข้ารหัสข้อมูลฟอร์ม ข้อมูลฟอร์มสามารถใช้วิธีการเข้ารหัส application/x-www-form-urlencoded หรือ multipart/form-data
• autocomplete: ใช้สำหรับระบุว่าจะเปิดใช้งานฟังก์ชันเติมข้อความอัตโนมัติของฟอร์มหรือไม่ หากตั้งค่าเป็น on เบราว์เซอร์จะเติมข้อมูลที่ป้อนไว้ก่อนหน้านี้โดยอัตโนมัติ
• novalidate: ใช้สำหรับระบุว่าจะตรวจสอบข้อมูลฟอร์มหรือไม่ หากตั้งค่าเป็น on ข้อมูลฟอร์มจะไม่ถูกตรวจสอบก่อนส่ง

[!สรุป]

• ฟอร์ม form เองไม่สามารถมองเห็นได้

ฟิลด์ข้อความ

ในฟอร์ม เรามักต้องการให้ผู้ใช้ป้อนเนื้อหาข้อความเช่นตัวอักษร ตัวเลข ฯลฯ ซึ่งสามารถทำได้ผ่านองค์ประกอบ <input> โดยตั้งค่าคุณสมบัติ type เป็น “text”

ตัวอย่าง:

1
<form>
2
ชื่อ: <input type="text" name="name"><br>
3
อายุ: <input type="text" name="age">
4
</form>

ผลลัพธ์:

[!สรุป]

• ในเบราว์เซอร์ส่วนใหญ่ ความกว้างเริ่มต้นของฟิลด์ข้อความคือ 20 ตัวอักษร

ฟิลด์รหัสผ่าน

หากคุณต้องการให้ผู้ใช้ป้อนรหัสผ่าน คุณสามารถตั้งค่าคุณสมบัติ type ของ องค์ประกอบ <input> เป็น “password” และเนื้อหาที่ป้อนจะถูกซ่อนไว้

ตัวอย่าง:

1
<form>
2
รหัสผ่าน: <input type="password" name="pwd">
3
</form>

ผลลัพธ์:

[!สรุป]

• ตัวอักษรในฟิลด์รหัสผ่านจะไม่แสดงเป็นข้อความธรรมดา แต่จะถูกแทนที่ด้วยเครื่องหมายดอกจัน * หรือจุด .

ปุ่มตัวเลือก (Radio Buttons)

ปุ่มตัวเลือกและกล่องกาเครื่องหมายช่วยให้ผู้ใช้สามารถเลือกหนึ่งหรือหลายตัวเลือกจากหลายตัวเลือกได้ ค่าคุณสมบัติ type ของปุ่มตัวเลือกคือ “radio”

ตัวอย่าง:

1
<form action="">
2
เพศ:
3
<input type="radio" name="sex" value="male" checked>ชาย
4
<input type="radio" name="sex" value="female">หญิง
5
</form>

ผลลัพธ์:

[!สรุป]

• ค่าคุณสมบัติ name ของปุ่มตัวเลือกต้องเหมือนกัน มิฉะนั้นจะไม่อยู่ในกลุ่มเดียวกัน
• คุณสมบัติ checked ใช้เพื่อระบุว่าปุ่มตัวเลือกถูกเลือกโดยค่าเริ่มต้นหรือไม่

กล่องกาเครื่องหมาย (Checkboxes)

กล่องกาเครื่องหมายสามารถเลือกหนึ่งหรือหลายตัวเลือกได้ โดยใช้ <input type="checkbox"> ในการกำหนด

ตัวอย่าง:

1
<form>
2
  แอปที่คุณเคยใช้:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

ผลลัพธ์:

[!สรุป]

• คุณสมบัติ checked ใช้เพื่อระบุว่ากล่องกาเครื่องหมายถูกเลือกโดยค่าเริ่มต้นหรือไม่

รายการแบบเลื่อนลง (select)

รายการแบบเลื่อนลงช่วยให้ผู้ใช้สามารถเลือกหนึ่งตัวเลือกจากหลายตัวเลือกได้ สร้างโดยองค์ประกอบ <select> และใช้องค์ประกอบ <option> เพื่อกำหนดตัวเลือก

ตัวอย่าง:

1
<form action="">
2
  โปรดเลือกประเทศของคุณ:
3
  <select name="country">
4
    <option value="china">จีน</option>
5
    <option value="us">สหรัฐอเมริกา</option>
6
    <option value="japan">ญี่ปุ่น</option>
7
  </select>
8
</form>

ผลลัพธ์:

[!สรุป]

• คุณสมบัติ selected ใช้เพื่อระบุตัวเลือกเริ่มต้นของรายการแบบเลื่อนลง
• คุณสมบัติ disabled ใช้เพื่อระบุว่ารายการแบบเลื่อนลงสามารถใช้งานได้หรือไม่
• สามารถใช้คุณสมบัติ size เพื่อระบุจำนวนตัวเลือกที่มองเห็นได้ในรายการแบบเลื่อนลง

ปุ่มส่ง (Submit, Reset, Button)

ฟอร์มมักต้องการปุ่มเพื่อส่งหรือยืนยันการป้อนข้อมูลของผู้ใช้ submit, reset และ button ล้วนเป็นองค์ประกอบปุ่มฟอร์มใน HTML

ตัวอย่าง:

1
<form action="/submit" method="post">
2
  <input type="submit" value="ปุ่มส่ง">
3
  <input type="reset" value="ปุ่มรีเซ็ต">
4
  <button type="button" value="ปุ่มยืนยัน">ปุ่มยืนยัน</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="ปุ่มรูปภาพ" width="50" height="50">
6
</form>

ผลลัพธ์:

[!สรุป]

• post: หมายถึงวิธี HTTP POST ข้อมูลฟอร์มจะรวมอยู่ในเนื้อหาฟอร์มแล้วส่งไปยังเซิร์ฟเวอร์ ใช้สำหรับส่งข้อมูลที่ละเอียดอ่อน เช่น ชื่อผู้ใช้และรหัสผ่าน
• get: ค่าเริ่มต้น หมายถึงวิธี HTTP GET ข้อมูลฟอร์มจะถูกต่อท้าย URL ของคุณสมบัติ action และใช้ ? เป็นตัวคั่น มักใช้สำหรับข้อมูลที่ไม่ละเอียดอ่อน เช่น การแบ่งหน้า ตัวอย่าง: https://www.zhaojian.net/?page=1 โดยที่ page=1 คือข้อมูลที่ส่งด้วยวิธี get

องค์ประกอบและคุณสมบัติของฟอร์ม