AInput ในรูปแบบ HTML: คู่มือที่ครอบคลุมพร้อมคำอธิบายประเภทและการใช้งานทั้งหมด

หากคุณกำลังก้าวเข้าสู่โลกของการพัฒนาเว็บไซต์ มี องค์ประกอบพื้นฐานที่คุณต้องมีความรู้เชิงลึก: <input> ใน HTML- บล็อกโค้ดขนาดเล็กแต่อเนกประสงค์นี้รับผิดชอบในการอำนวยความสะดวกให้กับฟังก์ชันที่สำคัญที่สุดอย่างหนึ่งของเว็บไซต์ยุคใหม่ นั่นก็คือการโต้ตอบของผู้ใช้กับแบบฟอร์ม ตั้งแต่การส่งชื่อง่ายๆ การเลือกวันที่ หรือการอัปโหลดไฟล์ ไปจนถึงการตรวจสอบและการเข้าถึง ข้อมูลอินพุตจะดำเนินการทุกอย่างจริงๆ

รู้อย่างลึกซึ้ง ฉลากทำงานอย่างไร <input>, ประเภทและคุณสมบัติต่างๆของมัน สิ่งสำคัญคือความสามารถในการจัดการประสบการณ์ของผู้ใช้ การรวบรวมข้อมูล และทำให้โครงการเว็บไซต์ของเรามีชีวิตชีวา. ในบทความนี้ เราจะอธิบายทุกอย่างอย่างชัดเจนและมีรายละเอียด พร้อมตัวอย่าง ดังนั้นคุณจะไม่พลาดรายละเอียดใดๆ เตรียมพร้อมที่จะค้นพบทุกสิ่งที่คุณต้องการรู้เกี่ยวกับอินพุต HTML

ฉลากคืออะไร <input> เป็น HTML?

ฉลาก <input> เป็นส่วนประกอบพื้นฐานที่ใช้ในแบบฟอร์ม HTML- ใช้เพื่อรวบรวมข้อมูลผู้ใช้ผ่านกลไกต่างๆ เช่น ช่องข้อความ ปุ่มตัวเลือก รายการดร็อปดาวน์ หรือการอัปโหลดไฟล์ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติสำคัญอื่นๆ เราขอแนะนำให้อ่านเกี่ยวกับหัวข้อนี้ในบริบทของ ฟังก์ชั่นการป้อนข้อมูลใน HTML.

แต่ละ ประเภทอินพุต ถูกกำหนดโดยคุณลักษณะ type- คุณลักษณะนี้จะกำหนดลักษณะการทำงานและลักษณะที่ปรากฏของฟิลด์โดยเฉพาะ หากไม่ได้ระบุไว้ค่าเริ่มต้นจะถูกตีความว่า text.

โครงสร้างโดยทั่วไปนั้นเรียบง่ายมาก:

<input type="text" name="usuario" placeholder="Escribe tu nombre">

แม้ว่าจะเป็นฉลากแบบมีตัวตน (แต่ไม่ปิดด้วย </input>) สามารถปรับแต่งได้อย่างมากด้วยแอตทริบิวต์อื่นๆ ที่จะแก้ไขค่า การมองเห็น การตรวจสอบ และลักษณะการทำงาน

รายการประเภทอินพุตที่สมบูรณ์

HTML5 ได้ขยายจำนวนประเภทที่เป็นไปได้อย่างมาก <input>- ต่อไปนี้เป็นรายละเอียดของสิ่งที่ใช้กันทั่วไปที่สุดและหลักการทำงานของพวกมัน:

• ข้อความ: ฟิลด์ข้อความบรรทัดเดียว เหมาะสำหรับชื่อ ที่อยู่ ฯลฯ
• รหัสผ่าน: คล้ายกับข้อความ แต่ซ่อนตัวอักษรที่ป้อนเข้าไป เหมาะสำหรับรหัสผ่าน
• อีเมล์: ยอมรับที่อยู่อีเมลและตรวจสอบรูปแบบก่อนที่จะส่ง
• จำนวน: ให้คุณใส่ได้เฉพาะตัวเลขเท่านั้น คุณสามารถเพิ่ม min, max y step.
• โทรศัพท์: การกรอกหมายเลขโทรศัพท์โดยไม่ผ่านการตรวจสอบอย่างเข้มงวด
• URL: ตรวจสอบว่าได้ป้อนที่อยู่เว็บไซต์ถูกต้อง
• วันที่: เลือกวันที่จากปฏิทินแบบบูรณาการ
• เวลา: ใช้นาฬิกาเพื่อเลือกเวลา
• วันที่และเวลาท้องถิ่น: วันที่และเวลาแบบไม่ระบุโซนเวลา
• เดือน: ให้คุณเลือกได้เพียงเดือนและปีเท่านั้น
• สัปดาห์: เลือกสัปดาห์ของปี
• ช่องกาเครื่องหมาย: ช่องกาเครื่องหมายสำหรับตัวเลือกหลายรายการ
• วิทยุ: การเลือกเพียงรายการเดียวจากตัวเลือกหลายรายการ
• ไฟล์: ช่วยให้คุณสามารถอัพโหลดไฟล์ภายในเครื่องได้
• ช่วง: แถบเลื่อนเพื่อเลือกหมายเลข
• สี: ตัวเลือกสีกราฟิก
• ค้นหา: เขตข้อมูลที่ได้รับการเพิ่มประสิทธิภาพในการค้นหา
• ภาพ: ปุ่มส่งแบบกราฟิกพร้อมรูปภาพผสานรวม
• ส่ง: ปุ่มสำหรับส่งแบบฟอร์ม
• รีเซ็ต: รีเซ็ตค่าแบบฟอร์ม
• ปุ่ม: ปุ่มที่ไม่มีการดำเนินการที่กำหนดไว้ล่วงหน้า มันรวมเข้ากับ JavaScript
• ที่ซ่อนอยู่: ฟิลด์ที่มองไม่เห็นใช้ในการส่งค่าโดยไม่ต้องมีการโต้ตอบจากผู้ใช้

คุณสมบัติที่พบบ่อยและเป็นประโยชน์ที่สุดของอินพุต

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

• ชื่อ: เชื่อมโยงชื่อเข้ากับอินพุตที่จะใช้เป็นคีย์เมื่อส่งแบบฟอร์ม
• ตัวแทน: แสดงข้อความบ่งชี้ภายในช่องอินพุต
• จำเป็นต้องใช้: บังคับให้ผู้ใช้กรอกข้อมูลให้ครบถ้วนก่อนส่งแบบฟอร์ม
• อ่านอย่างเดียว: ฟิลด์จะมองเห็นได้แต่ไม่สามารถแก้ไขได้
• ปิดใช้งาน: ฟิลด์ที่ไม่ได้ใช้งาน ไม่สามารถโต้ตอบได้ และจะไม่ถูกส่งไปยังเซิร์ฟเวอร์
• ราคา: กำหนดค่าเริ่มต้นของค่าอินพุต
• ความยาวสูงสุด / ความยาวต่ำสุด: กำหนดความยาวสูงสุดหรือต่ำสุดที่ได้รับอนุญาต
• รูปแบบ: ใช้เพื่อกำหนดนิพจน์ปกติสำหรับการตรวจสอบความถูกต้อง
• การกรอกอัตโนมัติ: อนุญาตหรือป้องกันไม่ให้เบราว์เซอร์แนะนำค่าที่ใช้ก่อนหน้านี้
• ออโต้โฟกัส: วางเคอร์เซอร์ไว้ในฟิลด์นั้นโดยอัตโนมัติเมื่อโหลดหน้า
• ขั้นตอน: ระบุช่วงที่ถูกต้องสำหรับอินพุตตัวเลข เช่น: 5, 10, 0.01
• นาที / สูงสุด: ค่าที่ยอมรับต่ำสุดและสูงสุด
• หลายรายการ: ช่วยให้คุณสามารถอัปโหลดไฟล์ได้มากกว่าหนึ่งไฟล์หรือเลือกอีเมลหลายรายการด้วย type="email".

การอัพโหลดไฟล์พร้อมไฟล์อินพุต

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

ตัวอย่างพื้นฐาน:

<form action="/subir" method="POST" enctype="multipart/form-data">
  <input type="file" name="documento">
  <input type="submit" value="Subir archivo">
</form>

หากต้องการอัปโหลดไฟล์หลายไฟล์พร้อมกัน เพียงเพิ่มแอตทริบิวต์ multiple:

<input type="file" name="archivos[]" multiple>

โปรดจำไว้ว่าประเภทอินพุตนี้จะทำงานได้กับ method="POST" และ enctype="multipart/form-data" เท่านั้น.

นอกจากนี้คุณสามารถกำหนดประเภทไฟล์ที่อนุญาตได้โดยใช้แอตทริบิวต์ accept:

<input type="file" accept=".jpg, .png, .pdf">

ตัวเลื่อนหรือตัวควบคุมช่วง

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

<input type="range" min="0" max="100" step="5" value="50">

หากต้องการแสดงค่าปัจจุบันของแถบเลื่อน ขอแนะนำให้เชื่อมโยงกับป้ายกำกับ <output> และใช้ JavaScript เพื่ออัพเดตแบบไดนามิก:

<input type="range" id="rango" min="0" max="100" value="50">
<output id="valorRango">50</output>

<script>
  const slider = document.getElementById("rango");
  const output = document.getElementById("valorRango");

  output.textContent = slider.value;
  slider.addEventListener("input", () => output.textContent = slider.value);
</script>

ช่องการเลือก: ตัวเลือก, ช่องกาเครื่องหมาย และเลือก

เพื่อให้ผู้ใช้มีตัวเลือกต่างๆ มากมาย HTML จึงได้จัดเตรียมสิ่งต่อไปนี้:

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

ตัวอย่างวิทยุ:

<input type="radio" name="color" value="rojo"> Rojo
<input type="radio" name="color" value="azul"> Azul

ตัวอย่างช่องกาเครื่องหมาย:

<input type="checkbox" name="intereses[]" value="lectura"> Lectura
<input type="checkbox" name="intereses[]" value="cine"> Cine

การเข้าถึง ความเข้ากันได้ และแนวทางปฏิบัติที่ดี

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

• ใช้ฉลากเสมอ <label> เพื่ออธิบายอินพุตและเชื่อมโยงโดยใช้แอตทริบิวต์ for.
• หลีกเลี่ยงการใช้ประเภทอินพุต text สำหรับรหัสผ่าน อีเมล์ หรือวันที่- ใช้ประเภทที่ถูกต้อง
• ตรวจสอบข้อมูลเสมอทั้งในส่วน frontend และ backend- คุณลักษณะของ HTML ไม่เพียงพอที่จะป้องกันการส่งข้อมูลที่เป็นอันตราย
• ตรวจสอบความเข้ากันได้ข้ามเบราว์เซอร์- บางประเภทก็ไม่ได้มีครบทุกประเภท (เช่น date ใน Safari)
• รวมถึงคุณสมบัติ เช่น aria-label o aria-describedby หากอินพุตขาดข้อความที่มองเห็นได้

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

El <input> มันเป็นเครื่องมืออันทรงพลังอย่างยิ่งใน HTML ซึ่งมีมากกว่าแค่ช่องข้อความธรรมดา ตั้งแต่การรวบรวมอีเมล การอำนวยความสะดวกในการค้นหา การอนุญาตให้อัปโหลดไฟล์ หรือการเพิ่มการตรวจสอบคีย์ การใช้งานถือเป็นสิ่งจำเป็น- การเข้าใจประเภทและคุณลักษณะของแต่ละประเภทอย่างถ่องแท้จะช่วยให้คุณปรับปรุงการโต้ตอบและปรับปรุงประสบการณ์ได้ ตั้งแต่ระดับผู้ใช้จนถึงระดับมืออาชีพ