อินพุต HTML:คำแนะนำทีละขั้นตอน

<form>
	... Form elements ...
</form>

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

อินพุต HTML

องค์ประกอบกำหนดฟิลด์แบบฟอร์มที่ผู้เข้าชมสามารถส่งข้อมูล รองรับช่องต่างๆ เช่น ตัวเลือกวันที่ ช่องทำเครื่องหมาย ปุ่ม และตัวอัปโหลดไฟล์

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ไวยากรณ์สำหรับองค์ประกอบ มีดังนี้:

<input type="inputType">

องค์ประกอบ ยอมรับแอตทริบิวต์จำนวนหนึ่ง แต่แอตทริบิวต์หลักที่คุณต้องระบุคือแอตทริบิวต์ประเภท หากคุณไม่ระบุแอตทริบิวต์ประเภท องค์ประกอบจะไม่ปรากฏบนหน้าเว็บ นี่เป็นเพราะองค์ประกอบ ว่างเปล่าโดยค่าเริ่มต้น

มาดูตัวอย่างบางส่วนเพื่อสาธิตวิธีการทำงานของแท็ก HTML

เราได้รับคำขอให้สร้างแบบฟอร์มสำหรับร้านขายแซนด์วิชและสลัดท้องถิ่น ชื่อซูส์สลัด แบบฟอร์มนี้ควรอนุญาตให้ลูกค้าส่งคำติชมตามประสบการณ์ที่ได้รับในร้านค้า แบบฟอร์มที่เราขอให้สร้างควรยอมรับ:

• ชื่อลูกค้า (เป็นข้อความ)
• ช่องทำเครื่องหมายเพื่อระบุว่าลูกค้าเป็นสมาชิกโปรแกรมความภักดีของร้านค้าหรือไม่ (ช่องทำเครื่องหมาย)
• คะแนน 1-5 ตามประสบการณ์ของลูกค้าที่ร้าน (เป็นตัวเลข)

ประเภทอินพุต HTML

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

ต่อไปนี้คือรายการสั้นๆ ของประเภทอินพุตควบคุมฟอร์มทั่วไปที่ใช้กับแท็ก :

• ปุ่ม
• ไฟล์
• ช่องทำเครื่องหมาย
• รหัสผ่าน
• หมายเลข
• วิทยุ
• ส่ง
• ข้อความ (ประเภทการป้อนข้อความ)
• url
• วันที่ (ตัวเลือกวันที่และเวลา)
• ภาพ
• อีเมล (การควบคุมการป้อนที่อยู่อีเมล)

ตัวอย่าง HTML ประเภทอินพุต

มาสร้างช่องแบบฟอร์มสองสามช่องโดยใช้แท็ก HTML

ช่องข้อความ

องค์ประกอบที่ใช้เพื่อสร้างฟิลด์ข้อความใน HTML สมมติว่าเราต้องการสร้างช่องข้อความที่ขอชื่อลูกค้า เราสามารถทำได้โดยใช้รหัสนี้:

<input type="text" placeholder="What is your name?">

ในโค้ดของเรา เราได้สร้างช่องข้อความที่มีแอตทริบิวต์สองอย่าง แอตทริบิวต์ type ถูกตั้งค่าเป็นข้อความ ซึ่งหมายความว่าแบบฟอร์มของเราสามารถรับการป้อนข้อความได้ แอตทริบิวต์ตัวยึดตำแหน่งถูกกำหนดเป็นค่า What is your name?.

ข้อความนี้จะปรากฏเป็นค่าที่พักจนกว่าผู้ใช้จะเริ่มพิมพ์ข้อความลงในช่อง

รหัสของเราส่งคืน:

<input type="text" placeholder="What is your name?">

อย่างที่คุณเห็น เราได้สร้างช่องข้อความที่มีค่าตัวยึดตำแหน่ง What is your name?

ช่องทำเครื่องหมาย

ใน HTML ช่องทำเครื่องหมายจะถูกทำเครื่องหมายเป็นอินพุตที่เป็นช่องทำเครื่องหมายประเภท:

<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> 
<label for="loyalty">Are you a subscriber to our loyalty program?</label>

รหัสนี้สร้างปุ่มช่องทำเครื่องหมายที่แสดงข้อความ "ใช่" หากคลิกช่องทำเครื่องหมาย ช่องนั้นจะถูกเน้น

ช่องทำเครื่องหมายของเรามีป้ายกำกับว่า "คุณเป็นสมาชิกโปรแกรมความภักดีของเราหรือไม่" หากคุณคลิกที่ป้ายกำกับ กล่องกาเครื่องหมายจะถูกสลับ ประเภทการป้อนข้อมูลป้ายกำกับเป็นสิ่งจำเป็นสำหรับการช่วยสำหรับการเข้าถึง เนื่องจากช่วยให้ผู้อ่านสามารถค้นหาข้อมูลเกี่ยวกับเนื้อหาของแบบฟอร์มได้อย่างง่ายดาย

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับป้ายกำกับ HTML โปรดอ่านคำแนะนำเกี่ยวกับแท็ก HTML

ช่องทำเครื่องหมายมีแอตทริบิวต์หลายอย่างที่เกี่ยวข้องกัน

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

ปุ่มวิทยุ

องค์ประกอบใช้เพื่อสร้างปุ่มตัวเลือกใน HTML

คำว่า "ปุ่มตัวเลือก" มาจากอุตสาหกรรมรถยนต์ที่แปลกพอสมควร เครื่องเสียงรถยนต์เคยมีปุ่มจริงที่สามารถกดได้ครั้งละหนึ่งปุ่มเท่านั้น หากคุณต้องกดเลือกอื่น ปุ่มก่อนหน้าจะถูกยกเลิกการเลือก

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

หากต้องการเปลี่ยนช่องทำเครื่องหมายเป็นอินพุตปุ่มตัวเลือก คุณต้องทำสองสิ่ง ขั้นแรก เปลี่ยนประเภทอินพุตเป็นวิทยุ สุดท้าย ตรวจสอบให้แน่ใจว่าค่าชื่อตรงกับปุ่มตัวเลือกทั้งหมด นี่คือสิ่งที่ปิดการใช้งานปุ่มที่เหลือเมื่อเลือกปุ่มใดปุ่มหนึ่ง

สมมติว่าเราต้องการสร้างฟิลด์ที่ถามว่าผู้ใช้เป็นสมาชิกโปรแกรมความภักดีของลูกค้าของ 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">

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

ช่องตัวเลข

องค์ประกอบใช้เพื่อยอมรับการป้อนตัวเลขในรูปแบบ

สมมติว่าเราต้องการสร้างแบบฟอร์มที่ขอให้ลูกค้าที่ 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 ฟิลด์นี้รับได้เฉพาะตัวเลขเท่านั้น หากผู้ใช้พยายามพิมพ์ข้อความใดๆ ลงในช่อง ข้อความจะไม่ได้รับการประมวลผล

นอกจากนี้ เนื่องจากฟิลด์แบบฟอร์มนี้มีประเภทตัวเลข ลูกศรขนาดเล็กสองอันจึงปรากฏขึ้นภายในกล่อง เมื่อคลิกลูกศรขึ้น ค่าในช่องของเราจะเพิ่มขึ้น 1 หากคลิกลูกศรลง ค่าในช่องของเราจะลดลง 1

บทสรุป

แท็ก HTML ใช้เพื่อยอมรับการป้อนข้อมูลของผู้ใช้ในแบบฟอร์ม แท็ก สามารถใช้เพื่อรับค่าตัวเลข ข้อความ วันที่ ตอบใช่/ไม่ใช่ และข้อมูลประเภทอื่นๆ

บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงถึงตัวอย่าง วิธีใช้แท็ก HTML และแอตทริบิวต์ที่มีให้ใช้กับแท็ก ตอนนี้คุณก็พร้อมที่จะเริ่มใช้แท็ก เพื่อสร้างองค์ประกอบฟิลด์ของฟอร์มอย่าง HTML pro แล้ว!

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML โปรดดูคู่มือฉบับสมบูรณ์เกี่ยวกับวิธีการเรียนรู้ HTML