HTML Forms

ฟอร์ม (Forms) คือ element <form> ที่ใช้ในการสร้างแบบฟอร์มเพื่อให้ผู้ใช้งานสามารถป้อนข้อมูล และสามรถส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อทำกระบวนการต่างๆ เช่น เพิ่มข้อมูลเก็บไว้ที่ฐานข้อมูล ดึงข้อมูลมาแสดงผล เป็นต้น

ไวยากรณ์ของ Form

<form>
.
.
<!-- element สำหรับกรอกข้อมูล -->
.
.
</form>

 

โดย <form> เปรียบเหมือนภาชนะที่มีไว้เพื่อบรรจุ แท็กที่ใช้ในการป้อนข้อมูล (input elements) ตัวอย่าง input elements เช่น text, password ,  checkboxs และ submit เป็นต้น

ประเภทของ Input Elements

  • <input type=”button”> ปุ่ม
  • <input type=”checkbox”> เช็คบ็อกซ์
  • <input type=”color”> ตัวเลือกรหัสสี HEX (สามารถแสดง color picker ได้หากเบราว์เซอร์รองรับ)
  • <input type=”date”>  วัน/เดือน/ปี
  • <input type=”datetime-local”> วัน/เวลา
  • <input type=”email”> กรอกอีเมลล์
  • <input type=”file”>อัพโหลดไฟล์
  • <input type=”hidden”> ซ่อน input
  • <input type=”month”> เดือน
  • <input type=”number”> หมายเลข
  • <input type=”password”> รหัสลับ
  • <input type=”range”> ช่วงข้อมูล (เช่น 1-10 หรือ 80-200 เป็นต้น)
  • <input type=”reset”> เคลียร์ข้อมูลภายในฟอร์มให้กลับเป็นค่าเริ่มต้น
  • <input type=”submit”> ส่งข้อมูลของฟอร์ม
  • <input type=”tel”> จัดรูปแบบของหมายเลขโทรศัพท์
  • <input type=”text”> ป้อนอักขระ (ค่าเริ่มต้นของ input element)

การใช้งาน Input Elements

ตัวอย่างที่ 1 การสร้างฟอร์มสำหรับใช้ในการเข้าสู่ระบบด้วย text และ password

<html>
 <body>
 
  <form name="form1" method="post" autocomplete="off" action="">
   <label>Username</label> : 
   <input type="text" name="txt"><br>
   <label>Password</label> : 
   <input type="password" name="txt"><br>
   
   <input type="submit" name="btn-submit" value="login">
  </form>
  
 </body>
</html>

ไฟล์ที่ 1 form_login.html

อธิบายไฟล์ที่ 1 แอตทริบิวต์ที่เพิ่มให้กับแท็กฟอร์มคือ name, method, autocomplete และ action ซุึ่งแอตทริบิว์เหล่านี้ช่วยให้การส่งข้อมูลสำเร็จได้

  • name กำหนดชื่อแบบฟอร์ม
  • method วิธีการในการส่ง (post / get)
  • autocomplete (on / off) หากกำหนดเป็น on จะทำให้ข้อมูลที่ผู้ใช้มีการกรอกแบบฟอร์มก่อนหน้านี้แสดงผลแนะนำบน input element ที่ทำการกรอกข้อมูลปัจจุบัน
  • action ระบุปลายทางที่ต้องการส่งถึง
GET POST
1. ข้อมูลที่ส่งจากฟอร์มด้วยเมธอด GET จะปรากฏให้ทุกคนเห็น (ชื่อ และค่าตัวแปรทั้งหมดจะแสดงใน URL) 1. ข้อมูลที่ส่งจากแบบฟอร์มด้วยวิธีการ POST จะมองไม่เห็นแก่ผู้อื่น (ชื่อ / ค่าทั้งหมดถูกฝังอยู่ในเนื้อหาของคำขอ HTTP)
2. ข้อจำกัดของปริมาณข้อมูลที่ส่ง อยู่ที่ประมาณ 2,000 อักขระ 2. ไม่มีข้อจำกัดเกี่ยวกับปริมาณในข้อมูลที่ส่ง
3. สามารถบุ๊กมาร์กหน้าได้ 3. เนื่องจากตัวแปรไม่แสดงใน URL จึงไม่สามารถบุ๊กมาร์กหน้าได้
  4. รองรับฟังก์ชั่นการทำงานการป้อนข้อมูลขั้นสูง อย่างการเพิ่มข้อมูลหลายส่วนในการส่งเพียงครั้งเดียว

 

ตัวอย่างที่ 2 สร้างแบบฟอร์มแบบสอบถามข้อมูลส่วนตัว

<html>
 <body>
 
  <form name="form2" method="post" action="">
   <label>คำนำหน้า</label> : 
   <select name="prefix">
    <option value="0">เลือก</option>
    <option value="1">เด็กชาย</option>
    <option value="2">เด็กหญิง</option>
    <option value="3">นาย</option>
    <option value="4">นางสาว</option>
    <option value="5">นาง</option>
   </select>
   <br>
   
   <label>ชื่อ-สกุล</label> : 
   <input type="text" name="txt"><br>
   
   <label>เพศ</label> : 
   ชาย <input type="radio" name="gender" id="g1" value="male"> 
   หญิง <input type="radio" name="gender" id="g2" value="female"><br>
   
   
   <input type="submit" name="btn-submit" value="save">
  </form>
  
 </body>
</html>

ไฟล์ที่ 2 form_people_data.html

ไฟล์ที่ 2 มี input elements ที่ประกอบด้วย select , text, radio และ submit ซึ่งแต่ละ element มีหน้าที่แตกต่างกันออกไป   

  • select ใช้ในการสร้างข้อมูลแบบ Dropdown เพื่อเลือกคำนำหน้า
  • text ใชป้อนข้อมูลชื่อ-สกุล
  • radio ใช้ในการระบุเพศ โดย input radio ภายในฟอร์มมีอยู่ด้วยกัน 2 ตัว ซึ่งจะเลือกได้เพียงตัวใดตัวหนึ่งเท่านั้น เนื่องจากกำหนดแอตทริบิวต์ name ที่มีค่าเท่ากัน 

 

ตัวอย่างที่ 3 color

<html>
<body>

  <label for="favcolor">เลือกสีที่ต้องการ :</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <button onclick="showCodeColor(favcolor.value)">click</button>

<div id="color" style="padding:10px;margin:8px;color:white;border-radius:12px;"></div>

<script>
 function showCodeColor(str){
 	document.getElementById("color").innerHTML = str;
    document.getElementById("color").style.backgroundColor = str;
 }
</script>

</body>
</html>

ไฟล์ที่ 3 color_picker.html

ผลลัพธ์ไฟล์ที่ 3 

 

ตัวอย่างที่ 4 range

<html>
<body>

  <form>
    <label for="vol">ช่วง 20 - 100 : </label>
    <input type="range" id="rng" name="rng" min="20" max="100">
  </form>

</body>
</html>

ไฟล์ที่ 4 range_input.html

ผลลัพธ์ไฟล์ที่ 4

ตัวอย่างที่ 5 reset

<html>
 <body>
  <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
  </form> 
 </body>
</html>

ไฟล์ที่ 5 reset_input.html

ผลลัพธ์ไฟล์ที่ 5






หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: