แท็ก HTML input สร้างฟิลด์ป้อนข้อมูลที่ผู้ใช้สามารถใส่ข้อมูลได้ Common inputs รวมถึง text fields, checkboxes, radio buttons, และ email fields แท็ก input ควรมี label ด้วยแท็ก <label>
ฟอร์มใน HTML ประกอบด้วย input elements จำนวนมาก ซึ่งใช้รับข้อมูลบน front-end ของเว็บไซต์ ตัวอย่างเช่น ฟอร์มเว็บอาจมี checkbox input, text input, และ radio button input ที่ผู้ใช้สามารถปฏิสัมพันธ์ได้
แท็ก <input> ใช้กำหนด input element ใน HTML form ข้อมูลที่ส่งผ่านแท็ก input สามารถแทนได้ในช่วงข้อมูลหลากหลาย ตั้งแต่ข้อความ ตัวเลข ไปจนถึงตอบ yes/no
บทช่วยสอนนี้จะอภิปราย พร้อมอ้างอิงตัวอย่าง วิธีใช้แท็ก <input> รับ input ฟอร์มในเว็บไซต์ front-end จนจบการอ่านคู่มือนี้ คุณจะเป็นมาสเตอร์ในการใช้ HTML <input> tag รับ user input
HTML Forms
ฟอร์มเป็นส่วนจำเป็นของเว็บไซต์หลายแห่งที่ให้ผู้ใช้ปฏิสัมพันธ์กับไซต์ ฟอร์มอนุญาตให้ผู้ใช้ส่งข้อมูลไปยังไซต์ ข้อมูลนี้สามารถประมวลผลได้ทั้งโดย client หรือ back-end server และ database
ใน HTML ฟอร์มเว็บประกาศภายใน element <form> นี่คือ syntax สำหรับ element <form>:
<form> ... Form elements ... </form>
ภายในแท็ก <form> คือที่จัดเก็บ elements ภายในฟอร์ม Form elements สามารถรวม text fields, submit buttons, radio buttons, multiline text boxes, และประเภท input data อื่นๆ ที่ยอมรับใน HTML
HTML Input
Element <input> กำหนดฟิลด์ฟอร์มที่ผู้เยี่ยมชมสามารถส่งข้อมูลได้ <input> รองรับฟิลด์อย่าง date picker, checkbox, button, และ file uploader
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
Syntax สำหรับ element <input> มีดังนี้:
<input type="inputType">
Element <input> ยอมรับ attributes จำนวนมาก แต่ attribute หลักที่คุณต้องระบุคือ attribute type หากคุณไม่ระบุ type attribute element <input> จะไม่ปรากฏบนหน้าเว็บ เนื่องจาก element <input> ว่างเปล่าตามค่าเริ่มต้น
มาเดินผ่านตัวอย่างบางอย่างเพื่อแสดงการทำงานของแท็ก HTML <input>
เราถูกขอให้สร้างฟอร์มสำหรับร้านแซนด์วิชและสลัดท้องถิ่น Sue's Salads ฟอร์มนี้ควรให้ลูกค้าส่งความคิดเห็นจากประสบการณ์ในร้าน ฟอร์มที่เราถูกขอสร้างควรยอมรับ:
- ชื่อลูกค้า (เป็นข้อความ)
- Checkbox บ่งชี้ว่าลูกค้าเป็นสมาชิกโปรแกรมความภักดีของร้านหรือไม่ (checkbox)
- Rating 1-5 จากประสบการณ์ของลูกค้าที่ร้าน (เป็นตัวเลข)
HTML Input Types
แท็ก <input> ยอมรับ input types หลากหลาย Input type ถูกระบุโดย attribute "type" Common input types รวมถึง buttons, date pickers, password fields, และ text fields
นี่คือรายการสั้นของ common form control input types ที่ใช้กับแท็ก <input>:
- button
- file
- checkbox
- password
- number
- radio
- submit
- text (text input type)
- url
- date (date and time picker)
- image
- email (email address input control)
Input Types HTML Examples
มาสร้างฟิลด์ฟอร์มบางอย่างด้วยแท็ก HTML <input>
Text Fields
Element <input type="text"> ใช้สร้าง text field ใน HTML สมมติเราต้องการสร้าง text field ถามชื่อลูกค้า เราสามารถทำได้ด้วยโค้ดนี้:
<input type="text" placeholder="What is your name?">
ในโค้ดของเรา เราสร้าง text field ด้วย attributes 2 ตัว Attribute type ตั้งเป็น text หมายความว่าฟอร์มของเรายอมรับ text inputs Attribute placeholder กำหนดค่า What is your name?
ข้อความนี้จะปรากฏเป็นค่า placeholder จนกว่าผู้ใช้จะเริ่มพิมพ์ข้อความในฟิลด์
โค้ดของเราคืนค่า:
<input type="text" placeholder="What is your name?">
ตามที่เห็น เราสร้าง text field พร้อมค่า placeholder What is your name?
Checkboxes
ใน HTML checkboxes ถูกมาร์กอัปเป็น inputs ที่เป็น type checkbox:
<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> <label for="loyalty">Are you a subscriber to our loyalty program?</label>
โค้ดนี้สร้าง checkbox button แสดงข้อความ "Yes" หาก checkbox ถูกคลิก มันจะถูก highlight
Checkbox ของเรามี label "Are you a subscriber to our loyalty program?" หากคุณคลิกที่ label checkbox จะถูก toggle Attribute label input type จำเป็นสำหรับ accessibility เพื่อให้ผู้อ่านหาข้อมูลเกี่ยวกับเนื้อหาของฟอร์มได้ง่าย
เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ HTML labels อ่านคู่มือของเราเกี่ยวกับแท็ก HTML <label>
Checkboxes มี attributes หลายอย่างเกี่ยวข้อง
- Type attribute. Input type ต้องตั้งเป็น checkbox
- ID. จำไว้กับ ID พวกมันต้อง unique ต่อไฟล์ของคุณ
- Name and value. Name และ value มีประโยชน์ที่จะกำหนดให้ เพื่อที่จะจัดการกับข้อมูลที่เก็บหลังจากฟอร์มส่ง
- Checked. Attribute checked เนื่องจากไม่ได้ถูกกำหนดให้อะไร จึงเป็น boolean attribute การมี checked อยู่หมายถึงมันถูกตั้งเป็น true 自動 ค่าเริ่มต้นคือ false ดังนั้นคุณต้องตั้งค่าแค่ตอนที่คุณต้องการให้ checkbox ถูก checked
Radio Buttons
Element <input type="radio"> ใช้สร้าง radio button ใน HTML
คำว่า "radio button" มาจากอุตสาหกรรมรถยนต์ อย่างน่าประหลาดใจ สเตอริโอรถยนต์เคยมีปุ่มกายภาพที่ปุ่มเดียวสามารถกดได้ในเวลาเดียวกัน หากคุณกดอีกตัวเลือก ปุ่มก่อนหน้าจะถูก deselect
ความแตกต่างระหว่างการใช้ checkboxes และชุด radio buttons คือ radio buttons ให้คุณเลือกได้เพียงหนึ่งตัวเลือก ส่วนที่เหลือของปุ่มจะ disable หลังจากคุณเช็คตัวเลือกของคุณ ดังนั้น radio button มากกว่าหนึ่งไม่สามารถถูก select ได้ Checkboxes ด้านอื่น สามารถมี multiple selections ได้
เพื่อเปลี่ยน checkbox inputs เป็น radio button inputs คุณต้องทำ 2 สิ่ง แรก เปลี่ยน input type เป็น radio สุดท้าย ตรวจสอบว่า name value ตรงกันทั้งหมดบน radio buttons นี่คือสิ่งที่ disable ปุ่มอื่นๆ เมื่อเลือกหนึ่งแล้ว
สมมติเราต้องการสร้างฟิลด์ถามว่าผู้ใช้เป็นสมาชิกโปรแกรมความภักดีลูกค้า Sue's Salads หรือไม่ เราสามารถสร้างฟิลด์ด้วยโค้ดนี้:
<label for="yes">Yes</label> <input type="radio" value="yes" id="yes" /> <label for="no">No</label> <input type="radio" value="no" id="no" />
โค้ดของเราคืนค่า:
<label for="yes">Yes</label> <input type="radio" value="yes" id="yes"> <label for="no">No</label> <input type="radio" value="no" id="no">
ในโค้ดของเรา เราสร้าง radio buttons 2 ตัว Radio button แรกได้ label Yes และมี value yes Radio button ที่สองได้ label No และมี value no
Number Fields
Element <input type="number"> ใช้ยอมรับ numeric input ในฟอร์ม
สมมติเราต้องการสร้างฟอร์มถามลูกค้าที่ Sue's Salads ให้ประเมินประสบการณ์ที่ร้าน ลูกค้าควรให้เกรดตัวเลขระหว่าง 1 ถึง 5 เราสามารถสร้างฟอร์มเว็บที่เก็บข้อมูลนี้ด้วยโค้ดต่อไปนี้:
<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label> <input type="number" min="1" max="5" />
โค้ดของเราคืนค่า:
<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label> <input type="number" min="1" max="5">
เราสร้างฟิลด์ฟอร์มที่ยอมรับตัวเลขระหว่าง 1 และ 5 ฟิลด์นี้ยอมรับแค่ตัวเลข หากผู้ใช้พยายามพิมพ์ข้อความในฟิลด์ ข้อความจะไม่ถูกประมวลผล
นอกจากนี้ เนื่องจากฟิลด์ฟอร์มนี้มี type number ลูกศรเล็ก 2 อันปรากฏในกล่อง เมื่อคลิกลูกศรขึ้น ค่าในฟิลด์ของเราจะเพิ่ม 1 หากคลิกลูกศรลง ค่าในฟิลด์ของเราจะลดลง 1
สรุป
แท็ก HTML <input> ใช้รับ user input ในฟอร์ม แท็ก <input> สามารถใช้รับค่าตัวเลข, ข้อความ, วันที่, ตอบ yes/no และประเภทข้อมูลอื่นๆ
บทช่วยสอนนี้อภิปราย พร้อมอ้างอิงตัวอย่าง วิธีใช้ HTML <input> tag และ attributes ที่ใช้ได้กับแท็ก <input> ตอนนี้คุณพร้อมที่จะเริ่มใช้แท็ก <input> สร้าง form field elements อย่าง HTML pro แล้ว!
หากคุณต้องการเรียนรู้ HTML เพิ่ม ดูคู่มือสมบูรณ์ของเราเกี่ยวกับวิธีเรียน HTML
