แท็กที่เกี่ยวข้องกับฟอร์ม

บทความนี้อธิบายแท็กที่เกี่ยวข้องกับฟอร์ม

นี่อธิบายฟิลด์ฟอร์มต่างๆ เช่น ข้อความอินพุตและเมนูแบบเลื่อนลง

YouTube Video

แท็กที่เกี่ยวข้องกับฟอร์ม

แท็ก <form>

1<form action="/submit" method="post">...</form>

• แท็ก <form> ใช้เพื่อกำหนดฟอร์มทั้งฟอร์ม
• แอตทริบิวต์ action ระบุปลายทาง และแอตทริบิวต์ method ระบุวิธีการ (GET หรือ POST)
• คุณยังสามารถกำหนดแอตทริบิวต์ target ได้ เช่นเดียวกับแท็ก <a>

แท็ก <input> (ฟิลด์ป้อนข้อความ)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> สร้างฟิลด์อินพุตข้อความบรรทัดเดียว ผู้ใช้สามารถป้อนข้อความใดๆ

• แอตทริบิวต์ placeholder ระบุข้อความที่อธิบายซึ่งจะแสดงเมื่อฟิลด์อินพุตว่าง ช่วยให้ผู้ใช้เข้าใจสิ่งที่คาดว่าจะใส่ได้ง่ายขึ้น ข้อความนี้จะหายไปเองเมื่อเริ่มพิมพ์

  • placeholder เหมาะสำหรับให้ข้อมูลเสริมและไม่เหมาะสำหรับคำแนะนำสำคัญ เช่น การป้อนข้อมูลที่จำเป็น ในกรณีเช่นนี้ คุณควรใช้ป้ายกำกับแทน

แท็ก <input> (ฟิลด์ป้อนรหัสผ่าน)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> สร้างฟิลด์สำหรับการป้อนรหัสผ่าน ตัวอักษรที่ป้อนจะถูกซ่อนและปกปิดเพื่อความปลอดภัย

แท็ก <input> (ฟิลด์ป้อนที่อยู่อีเมล)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> สร้างฟิลด์สำหรับป้อนที่อยู่อีเมลและรวมการตรวจสอบความถูกต้องเพื่อให้แน่ใจว่ารูปแบบอีเมลถูกต้อง

แท็ก <input> (กล่องเลือก)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> สร้างกล่องเลือก เมื่อมีหลายตัวเลือก ผู้ใช้สามารถเลือกหลายรายการได้

แท็ก <input> (ปุ่มเลือก)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> สร้างปุ่มตัวเลือกที่ให้ผู้ใช้เลือกเพียงตัวเลือกเดียวจากชุดตัวเลือก

แท็ก <input> (ปุ่มส่ง)

1<input type="submit" value="Submit">

• <input type="submit"> สร้างปุ่มสำหรับการส่งข้อมูลในฟอร์ม
• ค่าของแอตทริบิวต์ value จะรวมอยู่ในข้อมูลของฟอร์มเมื่อตัวฟอร์มถูกส่ง

<input> แท็ก (ปุ่มรีเซ็ต)

1<input type="reset" value="Reset">

• <input type="reset"> สร้างปุ่มที่รีเซ็ตค่าทั้งหมดในฟอร์ม

แท็ก <input> (ฟิลด์ที่ซ่อนอยู่)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> สร้างฟิลด์ที่ซ่อนอยู่ซึ่งไม่แสดงบนหน้าจอและใช้สำหรับการส่งข้อมูลไปยังส่วนหลังเมื่อฟอร์มถูกส่ง

แท็ก <input> (ตัวเลือกสี)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> แสดงตัวเลือกสีและสร้างฟิลด์อินพุตสำหรับผู้ใช้ในการเลือกสี

แท็ก <input> (ฟิลด์ป้อนวันที่)

1<input type="date" name="birthday">

• <input type="date"> สร้างฟิลด์อินพุตวันที่ที่แสดงปฏิทินสำหรับการเลือกวันที่

แท็ก <input> (ฟิลด์ป้อนเวลา)

1<input type="time" name="appointment_time">

• <input type="time"> สร้างฟิลด์สำหรับการป้อนเวลาและแสดงตัวเลือกเวลา

<input> แท็ก (ฟิลด์ป้อนข้อมูลไฟล์)

1<input type="file" name="resume">

• <input type="file"> สร้างฟิลด์อินพุตสำหรับผู้ใช้ในการเลือกและอัพโหลดไฟล์
• แอตทริบิวต์ enctype ของแท็ก form ต้องตั้งค่าเป็น multipart/form-data

<input> แท็ก (ตัวเลข)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> สร้างช่องกรอกข้อมูลตัวเลขที่อนุญาตให้ตั้งค่าขั้นต่ำ ค่าสูงสุด และการเพิ่ม/ลดค่าทีละขั้น

<input> แท็ก (ฟิลด์เลือกช่วงสำหรับตัวเลข)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> สร้างช่องกรอกข้อมูลที่ผู้ใช้สามารถเลือกค่าในช่วงด้วยการเลื่อนตัวเลื่อน

<textarea> แท็ก

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• แท็ก <textarea> สร้างช่องกรอกข้อมูลข้อความหลายบรรทัด เหมาะสำหรับการกรอกข้อความยาว ๆ หรือความคิดเห็น

<select> แท็ก

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

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

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• เพื่อเปิดใช้งานการเลือกหลายรายการ ให้เพิ่มแอตทริบิวต์ multiple การระบุแอตทริบิวต์นี้จะแสดงตัวเลือกในรูปแบบกล่องรายการ

แท็ก <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• แท็ก <optgroup> ใช้สำหรับการจัดกลุ่มรายการที่เกี่ยวข้องเข้าด้วยกัน แอตทริบิวต์ label ช่วยให้คุณตั้งชื่อกลุ่ม ทำให้ผู้ใช้งานเห็นตัวเลือกได้ชัดเจนแม้ว่ารายการจะยาว

<label> แท็ก

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

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

<fieldset> แท็ก

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• แท็ก <fieldset> รวมกลุ่มควบคุมฟอร์มที่เกี่ยวข้อง และแท็ก <legend> ให้ชื่อกลุ่ม

<button> แท็ก

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• แท็ก <button> กำหนดปุ่มที่คลิกได้ซึ่งเรียกการส่งฟอร์มหรือการกระทำอื่น ๆ

  เมื่อระบุ type="button" จะทำหน้าที่เป็นปุ่มปกติ การคลิกจะไม่ส่งฟอร์มหรือเรียกกระทำเริ่มต้นอื่น ๆ ใช้เมื่อคุณต้องการตั้งค่าการกระทำที่กำหนดเองด้วย JavaScript

  เมื่อระบุ type="submit" จะทำหน้าที่เป็นปุ่มส่งฟอร์ม เมื่อคลิกปุ่มนี้ ฟอร์มที่มีปุ่มนี้จะถูกส่ง

  เมื่อระบุ type="reset" จะทำหน้าที่เป็นปุ่มรีเซ็ตฟอร์ม การคลิกจะรีเซ็ตช่องกรอกข้อมูลทั้งหมดในฟอร์มและคืนค่าเริ่มต้นเดิม

  ถ้าไม่ได้ระบุแอตทริบิวต์ type บางเบราว์เซอร์อาจถือว่ามันเป็น type="submit" ดังนั้นจึงแนะนำให้ระบุประเภทให้ชัดเจนเพื่อให้แน่ใจว่ามันทำงานตามที่ตั้งใจ

• แท็ก <button> สามารถมีเนื้อหา HTML อื่น ๆ ระหว่างแท็กเปิดและปิดได้ ทำให้สามารถสร้างปุ่มที่มีไอคอนหรือข้อความที่ซับซ้อนได้

• สำหรับปุ่มส่งข้อมูลที่ใช้แท็ก <input> ค่าของแอตทริบิวต์ value จะรวมอยู่ในข้อมูลของฟอร์ม แต่ในกรณีของแท็ก <button> ค่าไม่ถูกส่งโดยค่าเริ่มต้น

  โดยการกำหนดแอตทริบิวต์ name และ value ให้กับแท็ก <button> ค่าของมันสามารถส่งเป็นข้อมูลของฟอร์มได้

แท็ก <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• แท็ก <datalist> ใช้สำหรับให้ตัวเลือกที่สามารถเลือกได้สำหรับองค์ประกอบ <input> ผู้ใช้สามารถเลือกจากรายการที่มีอยู่หรือป้อนค่าของตนเองได้

แท็ก <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• แท็ก <output> ใช้สำหรับแสดงผลลัพธ์ของการคำนวณหรือการโต้ตอบของผู้ใช้ มันถูกใช้เพื่อแสดงผลการคำนวณแบบไดนามิกภายในฟอร์มหรือสคริปต์
• สำหรับแอตทริบิวต์ for ให้ระบุ ID ขององค์ประกอบฟอร์มที่คุณต้องการเชื่อมโยง โดยคั่นด้วยช่องว่าง

แท็ก <progress>

1<progress value="70" max="100">70%</progress>

• แท็ก <progress> ใช้สำหรับแสดงความคืบหน้าของการทำงานให้ผู้ใช้เห็น เช่น มันสามารถแสดงความคืบหน้าในการดาวน์โหลดไฟล์หรือการติดตั้งให้เห็นได้

แท็ก <meter>

1<meter value="0.6">60%</meter>

• แท็ก <meter> ใช้แสดงค่าตัวเลขที่อยู่ภายในช่วงที่ทราบ มันถูกใช้เพื่อแสดงการวัดต่าง ๆ เช่น การใช้งานดิสก์หรือเกจเชื้อเพลิงในช่วงที่กำหนด

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video