องค์ประกอบฟอร์ม HTML

องค์ประกอบฟอร์ม HTML

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

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

บทนี้จะอธิบายองค์ประกอบของแบบฟอร์ม HTML ทั้งหมด

<input> ธาตุ

องค์ประกอบรูปแบบที่สำคัญที่สุดคือ <input> องค์ประกอบ

<input> องค์ประกอบสามารถแตกต่างกันในหลาย ๆ ขึ้นอยู่กับ type แอตทริบิวต์

<select> ธาตุ (Drop-Down List)

<select> องค์ประกอบกำหนดรายการแบบหล่นลง:

<option> องค์ประกอบกำหนดตัวเลือกที่จะเลือก

รายการตามปกติจะแสดงรายการเป็นครั้งแรกที่เลือก

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

<textarea> ธาตุ

<textarea> องค์ประกอบกำหนดช่องใส่หลายคู่สาย ( a text area ) :

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

แมวกำลังเล่นอยู่ในสวน

<button> ธาตุ

<button> องค์ประกอบกำหนดปุ่มคลิกได้:

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

คลิก Me!

องค์ประกอบแบบ HTML5

HTML5 เพิ่มองค์ประกอบของแบบฟอร์มต่อไปนี้:

• <datalist>
• <keygen>
• <output>

HTML5 <datalist> ธาตุ

<datalist> องค์ประกอบระบุรายชื่อของตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ <input> องค์ประกอบ

ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าเป็นข้อมูลการป้อนข้อมูลที่พวกเขา

list แอตทริบิวต์ของ <input> องค์ประกอบต้องดูที่ id แอตทริบิวต์ของ <datalist> องค์ประกอบ

ตัวอย่าง

<input> องค์ประกอบที่มีค่าที่กำหนดไว้ล่วงหน้าใน <datalist> :

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

ลองตัวเอง»

HTML5 <keygen> ธาตุ

วัตถุประสงค์ของ <keygen> องค์ประกอบคือการให้เป็นวิธีที่ปลอดภัยในการตรวจสอบผู้ใช้

<keygen> องค์ประกอบระบุฟิลด์กำเนิดไฟฟ้าคู่ในรูปแบบ

เมื่อส่งแบบฟอร์มสองปุ่มจะถูกสร้างขึ้นซึ่งเป็นหนึ่งในภาคเอกชนและประชาชนคนหนึ่ง

คีย์ส่วนตัวจะถูกเก็บไว้และคีย์สาธารณะจะถูกส่งไปยังเซิร์ฟเวอร์

คีย์สาธารณะสามารถนำมาใช้ในการสร้างใบรับรองไคลเอ็นต์ในการตรวจสอบผู้ใช้ในอนาคต

ตัวอย่าง

รูปแบบที่มีเขต keygen นี้:

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

ลองตัวเอง»

HTML5 <output> ธาตุ

<output> องค์ประกอบที่แสดงให้เห็นถึงผลของการคำนวณ (เช่นดำเนินการโดยสคริปต์)

ตัวอย่าง

ทำการคำนวณและแสดงผลในนั้น <output> องค์ประกอบ:

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

ลองตัวเอง»

ทดสอบตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 »

องค์ประกอบฟอร์ม HTML

= ใหม่ใน HTML5