5.2 ส่วนประกอบ (Element) ของคำสั่ง <form>

      ภายในคำสั่ง <form>…..</form>  จะประกอบไปด้วยส่วนประกอบ (Eliement) ของคำสั่ง <form> ดังนี้

5.2.1 อีลิเมนต์ชนิค <input>

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

5.2.1.1 ช่องรับข้อมูล (Text Field)

     เป็นการระบุชนิดของ <input> เพื่อให้ผู้ใช้สามารถกรอกข้อมูลที่เป็นข้อความ เพื่อส่งมายังไฟล์ปลายทางที่ต้องการ เช่น การกรอกชื่อ นามสกุล ชื่อผู้ใช้ หรือ ชื่อวิทยาลัย เป็นต้น การสร้างช่องรับข้อมูล (Text Field) สามารถใช้คำสั่งภาษา HTML สร้างได้โดยมีรูปแบบดังนี้

ตัวอย่างโปรแกรมที่ 5.2.1.1 การสร้างช่องรับข้อมูล (Text Field)   

      เขียนคำสั่งการสร้างช่องรับข้อมูล (Text Field) ตามตัวอย่าง  แล้วบันทึกไฟล์ชื่อ form_text.php  

Source Code:

RUN
คลิกที่ปุ่ม RUN ด้านซ้ายเพื่อแสดงผลลัพธ์

ผลลัพธ์ที่ได้:

อธิบายโปรแกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ First name แล้วใช้คำสั่งขึ้นบรรทัดใหม่ จากนั้นสร้างช่องรับข้อมูล (Text Field) โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field) คือ firstname

บรรทัดที่ 5 ให้แสดงข้อความ Last name แล้วใช้คำสั่งขึ้นบรรทัดใหม่ จากนั้นสร้างช่องรับข้อมูล (Text Field) โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field) คือ lastname

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.1.2 ช่องรับรหัสผ่าน (Password) 

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

รูปแบบดังนี้


ตัวอย่างโปรแกรมที่ 5.2.1.2 การสร้างช่องรับรหัสผ่าน (Password)  

     เขียนคำสั่งการสร้างช่องรับรหัสผ่าน (Password) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_password.php

Source Code:

ผลลัพธ์ที่ได้ :

อธิบายโปรแกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ UserName แล้วใช้คำสั่งขึ้นบรรทัดใหม่ จากนั้นสร้างช่องรับข้อมูล (Text Field) โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field) คือ user

บรรทัดที่ 5 ให้แสดงข้อความ Last name แล้วใช้คำสั่งขึ้นบรรทัดใหม่ จากนั้นสร้างช่องรับรหัสผ่าน (Password) โดยกำหนดชื่อของ ช่องรับรหัสผ่าน (Password) คือ pass

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.1.3 ช่องรับค่าแบบซ่อนข้อมูล (Hidden)

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

ตัวอย่างโปรแกรมที่ 5.2.1.3 การสร้างช่องรับค่าแบบซ่อนข้อมูล (Hidden)  

     เขียนคำสั่งการสร้างช่องรับค่าแบบซ่อนข้อมูล (Hidden) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_hidden.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้สร้างช่องรับค่าแบบซ่อนข้อมูล (Hidden) โดยกำหนดชื่อของ ช่องค่าแบบซ่อนข้อมูล (Hidden)คือ productid และค่าที่ส่งไป (value) คือ 007

บรรทัดที่ 5 ปิดแท็ก ฟอร์ม </form>

5.2.1.4 ตัวเลือกรายการ (Radio)

     เป็นการกําหนดตัวเลือกให้ผู้ใช้งานเลือก ซึ่งสามารถกําหนดได้หลายตัวเลือก แต่ ผู้ใช้สามารถเลือกได้เพียงตัวเลือกเดียวเท่านั้น สามารถใช้คำสั่งภาษา HTML สร้างได้โดยมี

รูปแบบดังนี้


ตัวอย่างโปรแกรมที่ 5.2.1.4 การสร้างตัวเลือกรายการ (Radio)  

     เขียนคำสั่งในการสร้างช่องตัวเลือกรายการ (Radio) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ form_radio.php 

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 สร้างตัวเลือกรายการ (Radio) โดยกำหนดชื่อของ สร้างตัวเลือกรายการ (Radio) คือ  gender และกำหนดค่า (value) เป็น male  กำหนดให้ตัวเลือกเป็นค่าเริ่มต้นที่ถูกเลือกรายการ และกำหนดข้อความกำกับ ตัวเลือกรายการ (Radio) นี้เป็น ชาย

บรรทัดที่ 5 สร้างตัวเลือกรายการ (Radio) โดยกำหนดชื่อของ สร้างตัวเลือกรายการ (Radio)  คือ  gender และกำหนดค่า (value) เป็น และกำหนดข้อความกำกับ ตัวเลือกรายการ (Radio)  นี้เป็น หญิง

บรรทัดที่ 6 สร้างตัวเลือกรายการ (Radio) โดยกำหนดชื่อของ สร้างตัวเลือกรายการ (Radio)  คือ  gender และกำหนดค่า (value) เป็น other และกำหนดข้อความกำกับ ตัวเลือกรายการ (Radio)  นี้เป็น อื่น ๆ 

บรรทัดที่ 7  ปิดแท็ก ฟอร์ม </form>

5.2.1.5 ปุ่มรับคำสั่ง (Submit Button)

     เป็นการกําหนดการแสดงผลปุ่มสําหรับให้ผู้ใช้กดตกลงและยืนยันการส่งค่าผ่านฟอร์มไปยังไฟล์ปลายทางที่ต้องการ

รูปแบบคำสั่ง


5.2.1.6 ปุ่มยกเลิกคำสั่ง (Reset Button)

     เป็นปุ่มที่ทำหน้าที่ยกเลิกการส่งข้อมูลจากฟอร์มเพื่อไปประมวลผลต่อยังเซิร์ฟเวอร์ หรือไฟล์ที่กำหนดไว้ใน Action

รูปแบบคำสั่ง


ตัวอย่างโปรแกรมที่ 5.2.1.5&5.2.1.6 การสร้างปุ่มรับคำสั่ง (Submit Button) และ ปุ่มยกเลิกคำสั่ง (Reset Button)

      เขียนคำสั่งการสร้างปุ่มรับคำสั่ง (Submit Button) และ ปุ่มยกเลิกคำสั่ง (Reset Button) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ form_button.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 สร้างช่องรับข้อมูล (Text Field)  โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field)  คือ  firstname  และใช้คำสั่งขึ้นบรรทัดใหม่

บรรทัดที่ 5 สร้างปุ่มรับคำสั่ง (Submit Button)  กำหนดชื่อปุ่ม เป็น btn_ok และกำหนดค่าข้อความที่แสดงบนปุ่ม คือ  ตกลง

บรรทัดที่ 6 สร้างปุ่มยกเลิกคำสั่ง (Reset Button)  กำหนดชื่อปุ่ม เป็น btn_reset และกำหนดค่าข้อความที่แสดงบนปุ่ม คือ  ยกเลิก 

บรรทัดที่ 7 ปิดแท็ก ฟอร์ม </form>

5.2.1.7 กล่องตัวเลือกรายการ (Checkbox)

     จะมีลักษณะเป็นรูปสี่เหลี่ยม จะใช้ในการเลือกตัวเลือกรายการ สามารถเลือกได้มากกว่า 1 รายการในแต่ละครั้ง หากรายการใดถูกเลือกจะแสดงเครื่องหมายถูกในกรอบสี่เหลี่ยมนั้น  

รูปแบบคำสั่ง


ตัวอย่างโปรแกรมที่ 5.2.1.7 การสร้างกล่องตัวเลือกรายการ (Checkbox)

      เขียนคำสั่งการสร้างกล่องตัวเลือกรายการ (Checkbox) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_checkbox.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 สร้างกล่องตัวเลือกรายการ (Checkbox) โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field)  คือ c1 และใช้คำสั่งขึ้นบรรทัดใหม่

บรรทัดที่ 5 สร้างกล่องตัวเลือกรายการ (Checkbox) โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field)  คือ c2 และใช้คำสั่งขึ้นบรรทัดใหม่

บรรทัดที่ 6 สร้างกล่องตัวเลือกรายการ (Checkbox) โดยกำหนดชื่อของ ช่องรับข้อมูล (Text Field)  คือ c3 และใช้คำสั่งขึ้นบรรทัดใหม่ 

บรรทัดที่ 7 ปิดแท็ก ฟอร์ม </form>

5.2.1.8 ช่องรับชื่อไฟล์ (File Field)

    เป็นช่องสำหรับเลือกไฟล์ และสร้างปุ่ม Browse ขึ้นเพื่อเลือกไฟล์ที่ต้องการอัปโหลด (Upload) ไฟล์ไปยังเซิร์ฟเวอร์ (Server)

รูปแบบคำสั่ง

ตัวอย่างโปรแกรมที่ 5.2.1.8 การสร้างช่องรับชื่อไฟล์ (File Field)

     เขียนคำสั่งการสร้างช่องรับชื่อไฟล์ (File Field)  ตามตัวอย่าง  แล้วบันทึกไฟล์ชื่อ  form_file.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>       

บรรทัดที่ 5 สร้างช่องรับชื่อไฟล์ (File Field) โดยกำหนดชื่อของ ช่องรับชื่อไฟล์ (File Field) คือ myfile และใช้คำสั่งขึ้นบรรทัดใหม่  

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.2 อีลิเมนต์ชนิด <textarea>

     ช่องรับข้อความหลายบรรทัด (Text area) เป็นอิลิเมนต์สําหรับให้ผู้ใช้กรอกข้อมูลเหมือน <input> แต่จะแตกต่างตรงที่สามารถกรอกข้อมูลได้มากกว่า มีหลายบรรทัดให้กรอก ซึ่งสามารถกําหนดจํานวนคอลัมน์ และจํานวนแถวในการแสดงผลของ <textarea> ได้เหมาะสําหรับกรอกข้อมูลที่มีจํานวนมาก เช่น รายละเอียดสินค้า หรือ รายละเอียดสถานที่ท่องเที่ยว เป็นต้น

รูปแบบคำสั่ง

ตัวอย่างโปรแกรมที่ 5.2.2 การสร้างช่องรับข้อความหลายบรรทัด (Text area)

      เขียนคำสั่งการสร้างช่องรับข้อความหลายบรรทัด (Text area) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_textarea.php 

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรแกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 5 สร้างช่องรับข้อความหลายบรรทัด (Text area)  โดยกำหนดชื่อของ ช่องรับข้อความหลายบรรทัด (Text area) คือ  detail โดยกำหนดขนาดความกว้างของ ช่องรับข้อความหลายบรรทัด (Text area) เท่ากับ 50 และกำหนดขนาดความสูงของช่องรับช่องรับข้อความหลายบรรทัด (Text area) เท่ากับ 10

บรรทัดที่ 7  ปิดแท็ก ช่องรับข้อความหลายบรรทัด (Text area)

บรรทัดที่ 8 ปิดแท็ก ฟอร์ม </form>

5.2.3 อีลิเมนต์ชนิด <select>

     ตัวเลือกรายการแบบเลื่อนลง <select> เป็นอิลิเมนต์สําหรับให้ผู้ใช้คลิกเพื่อเลือกรายการ  (Drop down list) ซึ่งนอกจากจะใช้แท็ก <select> เพื่อระบุขอบเขตของรายการแล้ว การกําหนดรายการจะต้องใช้แท็ก <option> เพื่อกําหนดแต่ละรายการให้ผู้ใช้งานเลือก หากต้องการให้เลือกหลายรายการสามารถระบุแอททริบิวท์ multiple  ต่อท้ายชื่อของ <select> ได้

รูปแบบคำสั่ง

ตัวอย่างโปรแกรมที่ 5.2.3  การสร้างตัวเลือกรายการแบบเลื่อนลง <select>

      เขียนคำสั่งการสร้างช่องตัวเลือกรายการแบบเลื่อนลง <select> ตามตัวอย่าง  แล้วบันทึกไฟล์ชื่อ  form_select.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 5 สร้างตัวเลือกรายการแบบเลื่อนลง <select>  โดยกำหนดชื่อของ ช่องตัวเลือกรายการแบบเลื่อนลง <select> คือ  edu 

บรรทัดที่ 6 กำหนดตัวเลือกรายการแรก คือ ต่ำกว่าปริญญาตรี โดยกำหนดค่าตัวเลือกรายการ เท่ากับ 0

บรรทัดที่ 7 กำหนดตัวเลือกรายการที่สอง คือ ปริญญาตรี โดยกำหนดค่าตัวเลือกรายการ เท่ากับ 1

บรรทัดที่ 8 กำหนดตัวเลือกรายการที่สาม คือ ปริญญาโท โดยกำหนดค่าตัวเลือกรายการ เท่ากับ 2  

บรรทัดที่ 9 กำหนดตัวเลือกรายการที่สี่ คือ ปริญญาเอก โดยกำหนดค่าตัวเลือกรายการ เท่ากับ 3

บรรทัดที่ 10 ปิดแท็ก สร้างตัวเลือกรายการแบบเลื่อนลง <select>  

บรรทัดที่ 11 ปิดแท็ก ฟอร์ม </form>

5.2.4 อีลิเมนต์ชนิด <button>

การแทรกปุ่มนอกจากสามารถแทรกได้จาก <input> แล้ว ยังสามารถแทรกได้โดยใช้ อิลิเมนต์ <button> เพื่อใช้สําหรับเรียกใช้งานปุ่ม ซึ่งผู้พัฒนาสามารถระบุชนิดขอปุ่มได้ 3 รูปแบบ ดังนี้

     5.2.4.1 Button

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

รูปแบบคำสั่ง

5.2.4.1.1 Submit

     เป็นปุ่มสําหรับกดเพื่อยืนยันการส่งค่าจากฟอร์มไปยังไฟล์ปลายทาง

รูปแบบคำสั่ง

5.2.4.1.2 Reset

      เป็นปุ่มสําหรับเคลียร์ค่าฟอร์มให้กลับไปเป็นค่าเริ่มต้น เพื่อกําหนดค่าใหม่

รูปแบบคำสั่ง

5.2.5 อิลิเมนต์ชนิด <input> แบบใหม่ในเอกสารเอชทีเอ็มแอล 5

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

5.2.5.1 Color

      เป็นการกําหนดค่าฟิลด์เพื่อให้ผู้ใช้เลือกสีที่ต้องการ ซึ่งจะปรากฏหน้าต่างสี เพื่อให้เลือกซึ่งจะได้เป็นค่าสีที่ต้องการ

รูปแบบคำสั่ง

ตัวอย่างโปรแกรมที่ 5.2.5.1 การสร้างช่องเลือกสี (color)

     เขียนคำสั่งการสร้างช่องเลือกสี (color) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ form_color.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ เลือกสีที่ต้องการ 

บรรทัดที่ 5 ให้สร้างช่องเลือกสี (color) โดยกำหนดชื่อของ ช่องเลือกสี (color) คือ favcolor

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.5.2 Date

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

รูปแบบคำสั่ง


ตัวอย่างโปรแกรมที่ 5.11  การสร้างวันที่ (date)

     เขียนคำสั่งการสร้างวันที่ (date) ตามตัวอย่าง  แล้วบันทึกไฟล์ชื่อ  form_date.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ วันเกิด 

บรรทัดที่ 5 ให้สร้างช่องรับวันที่ (date) โดยกำหนดชื่อของ ช่องวันที่ (date)  คือ bday

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.5.3 Datetime local

     เป็นการกําหนดค่าฟิลด์สําหรับเพื่อให้ผู้ใช้สามารถเลือกวันที่และเวลาได้

รูปแบบคำสั่ง

ตัวอย่างโปรแกรมที่ 5.12  การสร้างวันที่และเวลา (Datetime local)

     เขียนคำสั่งการสร้างวันที่และเวลา (Datetime local) ตามตัวอย่าง  แล้วบันทึกไฟล์ชื่อ  form_ datetime-local.php 

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ กำหนดวันที่และเวลา 

บรรทัดที่ 5 ให้สร้างช่องรับวันที่และเวลา (Datetime local) โดยกำหนดชื่อของ ช่องวันที่และเวลา (Datetime local)  คือ  day1

บรรทัดที่ 6  ปิดแท็ก ฟอร์ม </form>

5.2.5.4 Email

     เป็นการกําหนดค่าฟิลด์เพื่อให้ผู้ใช้สามารถกรอกข้อมูลได้แบบ text ทั่วไป แต่จะตรวจสอบรูปแบบตัวอักษรว่าอยู่ในรูปแบบของอีเมลหรือไม่ เช่น มีเครื่องหมาย @ และมี . หรือไม่ ถ้าไม่มีจะแจ้งเตือนผู้ใช้ว่าข้อมูลที่กรอกเข้าไปในฟิลด์นั้นไม่ถูกต้อง เป็นต้น 

รูปแบบคำสั่ง

ตัวอย่างโปรแกรมที่ 5.2.5.4  การสร้างช่องรับค่าข้อมูลอีเมล (email)

    เขียนคำสั่งการสร้างช่องรับค่าข้อมูลอีเมล (email) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_email.php  

  Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ E-mail 

บรรทัดที่ 5 ให้สร้างช่องรับค่าข้อมูลอีเมล (email)  โดยกำหนดชื่อของ รับค่าข้อมูลอีเมล (email) คือ myemail

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.5.5 Month

     เป็นการกําหนดฟิลด์ให้ผู้ใช้เลือกเดือนและปีเท่านั้น ซึ่งจะปรากฏเป็นปฏิทินให้ผู้ใช้งานสะดวกต่อการเลือก มีรูปแบบการแสดงผลเหมือนกันกับ date และ datetime-local แตกต่าง แค่เปลี่ยนค่าในแอททริบิวท์ type เป็น month เท่านั้น 

5.2.5.6 Numberic

     เป็นการกําหนดฟิลด์เพื่อให้กรอกได้แค่ตัวเลข (Numberic) เท่านั้น ซึ่ง สามารถกําหนดจํานวนสูงสุด (Max) จํานวนต่ำสุด (Min) ให้กับผู้ใช้งานกรอกข้อมูลผ่านฟิลด์เข้ามาได้

รูปแบบคำสั่ง


ตัวอย่างโปรแกรมที่ 5.14 การสร้างช่องรับค่าข้อมูลตัวเลข (Numberic)

     เขียนคำสั่งการสร้างช่องรับค่าข้อมูลตัวเลข (Numberic) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_numberic.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรแกรม

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ กําหนดจํานวนสินค้า (ระหว่าง 1 ถึง 5) 

บรรทัดที่ 5 ให้สร้างช่องรับค่าข้อมูลตัวเลข (Numberic) โดยกำหนดชื่อของ รับค่าข้อมูลตัวเลข (Numberic) คือ quantity และกำหนดค่าต่ำสุด เท่ากับ 1 ค่าสูงสุด เท่ากับ 5

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.5.7 Range

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

รูปแบบคำสั่ง


ตัวอย่างโปรแกรมที่ 5.2.5.7  การสร้างช่องเลือกระดับที่ต้องการ (Range)

     เขียนคำสั่งการสร้างช่องเลือกระดับที่ต้องการ (Range) ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_range.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4 ให้แสดงข้อความ ระดับความพึงพอใจ  

บรรทัดที่ 5 ให้สร้างช่องเลือกระดับที่ต้องการ (Range)โดยกำหนดชื่อของช่องเลือกระดับที่ต้องการ (Range)  คือ  points และกำหนดค่าต่ำสุด เท่ากับ 0 ค่าสูงสุด เท่ากับ 10

บรรทัดที่ 6 ปิดแท็ก ฟอร์ม </form>

5.2.5.8 Search

      เป็นการกําหนดฟิลด์ไว้สําหรับการระบุคําค้น ซึ่งรูปแบบการใช้งานเหมือน type="text" แต่จะเป็นแท็กที่มีคุณลักษณะเฉพาะสําหรับการสร้างฟิลด์สําหรับการค้นหา

5.2.5.9 Tel

     เป็นการกําหนดฟิลด์ไว้สําหรับให้ผู้ใช้กรอกข้อมูลที่เป็นเบอร์โทรศัพท์ มีรูปแบบการใช้งานเหมือนกันกับ type="text" เพียงเป็นฟิลด์ที่มีคุณลักษณะเฉพาะสําหรับการกรอกหมายเลขโทรศัพท์

5.2.5.10 Time

     เป็นการกําหนดฟิลด์สําหรับกรอกเวลา

5.2.5.11 Url

    เป็นการกําหนดฟิลด์สําหรับกรอกข้อมูลที่เป็นลิงค์ หรือ ยูอาร์แอลของเว็บไซต์

5.2.5.12 Week

     เป็นการกําหนดฟิลด์สําหรับกรอกข้อมูลที่เป็นสัปดาห์

5.2.6 การสร้างหัวข้อฟิลด์ด้วย <label>

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

รูปแบบคำสั่ง


ตัวอย่างโปรแกรมที่ 5.2.6 การสร้างป้ายกำกับ (label)

     เขียนคำสั่งการสร้างป้ายกำกับ (label) สำหรับฟอร์ม ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ  form_label.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 3 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 4  ห้สร้างป้ายกำกับ (label) แสดงข้อความ Male  กำหนดแอตทริบิวต์ for ของแท็ก <label> ให้ตรงกับ id ของ <input> คือ  male  เพื่อผูกเข้าด้วยกัน  

บรรทัดที่ 5 สร้างตัวเลือกรายการ (Radio)  โดยกำหนดชื่อของ สร้างตัวเลือกรายการ (Radio) คือ  gender กำหนดค่า (id) เป็น male  และกำหนดค่า (value) เป็น male จากนั้นให้ขึ้นบรรทัดใหม่

บรรทัดที่ 6 ให้สร้างป้ายกำกับ (label) แสดงข้อความ Female กำหนดแอตทริบิวต์ for ของแท็ก <label> ให้ตรงกับ id ของ <input> คือ female เพื่อผูกเข้าด้วยกัน 

บรรทัดที่ 7 สร้างตัวเลือกรายการ (Radio)  โดยกำหนดชื่อของ สร้างตัวเลือกรายการ (Radio) คือ  gender กำหนดค่า (id) เป็น female  และกำหนดค่า (value) เป็น  female  จากนั้นให้ขึ้นบรรทัดใหม่

บรรทัดที่  8  ให้สร้างป้ายกำกับ (label) แสดงข้อความ Other กำหนดแอตทริบิวต์ for ของแท็ก <label> ให้ตรงกับ id ของ <input> คือ  other เพื่อผูกเข้าด้วยกัน  

บรรทัดที่ 9 สร้างตัวเลือกรายการ (Radio)  โดยกำหนดชื่อของ สร้างตัวเลือกรายการ (Radio) คือ  gender กำหนดค่า (id) เป็น other และกำหนดค่า (value) เป็น  other จากนั้นให้ขึ้นบรรทัดใหม่

บรรทัดที่ 10 สร้างปุ่มสําหรับกดเพื่อยืนยันการส่งค่าจากฟอร์มไปยังไฟล์ปลายทาง ให้แสดงข้อความบนปุ่ม คือ Submit

บรรทัดที่ 11 ปิดแท็ก ฟอร์ม </form>

5.2.7 การจัดกลุ่มอิลิเมนต์ด้วย <fileldset>

     หากฟอร์มมีอิลิเมนต์จํานวนมาก ผู้พัฒนาสามารถจัดกลุ่มของฟอร์มได้ โดยใช้ <fieldset> เพื่อกําหนดขอบเขตของกลุ่ม และแยกฟิลด์ออกเป็นกลุ่มที่ชัดเจน เพื่อให้ง่ายต่อการใช้งาน รูปแบบการกําหนดจะต้องใช้งานร่วมกันกับ <legend> เพื่อบอกชื่อของกลุ่มอิลิเมนต์ ซึ่งอาจจะมีหรือ ไม่มีก็ได้ การใช้งาน <fieldset> และ <legend>


ตัวอย่างโปรแกรมที่ 5.2.7 การจัดกลุ่มอิลิเมนต์ด้วย <fileldset>

     เขียนคำสั่งการจัดกลุ่มอิลิเมนต์ด้วย <fileldset>  สำหรับฟอร์ม ตามตัวอย่าง แล้วบันทึกไฟล์ชื่อ form_ fileldset.php  

Source Code:

ผลลัพธ์ที่ได้:

อธิบายโปรเเกรม:

บรรทัดที่ 1 สร้างฟอร์มด้วยแท็ก <form>

บรรทัดที่ 2 - 6 จัดกลุ่มอิลิเมนต์ด้วย <fileldset>  ข้อมูลส่วนตัว

บรรทัดที่ 3 <legend> เพื่อบอกชื่อของกลุ่มอิลิเมนต์ ซึ่งมีชื่อกลุ่มคือ ข้อมูลส่วนตัว:

บรรทัดที่ 7 - 11 จัดกลุ่มอิลิเมนต์ด้วย <fileldset>  ข้อมูลการเข้าสู่ระบบ

บรรทัดที่ 8 <legend> เพื่อบอกชื่อของกลุ่มอิลิเมนต์ ซึ่งมีชื่อกลุ่มคือ ข้อมูลการเข้าสู่ระบบ

บรรทัดที่ 12 ปิดแท็ก ฟอร์ม </form>

5.2.8 แอททริบิวท์สําหรับการกรองข้อมูลของ <input>

      การกําหนดค่าการรับข้อมูลเพื่อให้อิลิเมนต์ <input> สามารถกรองข้อมูลจากผู้ใช้เบื้องต้น เพื่อป้องกันการผิดพลาดจากการกรอกข้อมูลของผู้ใช้ สามารถกําหนดค่าได้ผ่านแอทริบิวท์ที่ใช้งานร่วมกันสําหรับการกรองข้อมูล (Common input restrictions) ดังตารางที่ 5.1


ตารางที่ 5.1 ตารางแอททริบิวท์สำหรับกรองข้อมูล
แอททริบิวท์หน้าที่
disabledกำหนดค่าให้ไม่สามารถกรอกข้อมูลหรือเลือกข้อมูลได้
maxกำหนดค่าสูงสุดที่สามารถกรอกได้
maxlengthกำหนดค่าจำนวนของตัวเลขหรือตัวอักษรมากที่สุดที่กรอกได้
minกำหนดค่าจำนวนที่น้อยที่สุดที่สามารถกรอกได้
pattermกำหนดรูปแบบของข้อมูลที่ต้องการ
readonlyกำหนดค่าให้อ่านข้อมูลได้อย่างเดียวไม่สามารถเปลี่ยนแปลงข้อมูลได้
requiredกำหนดค่าฟิลด์ที่ต้องการบังคับให้กรอกข้อมูล
sizeกำหนดขนาดความกว้างของฟิลด์
step กำหนดลำดับการเพิ่มของจำนวนตัวเลขที่ต้องการ
valueกำหนดค่าเริ่มต้นของฟิลด์