In html, บทความทั้งหมด

การรับข้อมูลจากผู้ใช้ มักจะทำผ่านแบบฟอร์ม ซึ่งใน HTML เราจะใช้แท็ก <form> สำหรับการสร้างแบบฟอร์ม โดยในแบบฟอร์มจะมี Input อยู่หลายแบบ เช่น กล่องข้อความ ปุ่มคำสั่ง ฯลฯ

Form และ Input

ในหลายๆ เว็บไซต์ ก่อนใช้งาน จะต้องสมัครเป็นสมาชิก ซึ่งข้อมูลที่เรากรอกลงไปนั้น จะกรอก ลงบนฟอร์ม ซึ่งภายในฟอร์มจะมีรูปแบบของ Input อยู่หลายแบบ เช่น กล่องข้อความที่ให้ป้อน ข้อความลงไป Radio สําหรับเลือกอย่างใดอย่างหนึ่ง Checkbox สําหรับเลือกหลายๆ พร้อมกันได้ Drop down list ใช้เลือกสิ่งที่ต้องการจากรายการ หรือการคลิกปุ่ม Button ต่างๆ ดังรูป

การใช้งานฟอร์ม จะใช้แท็ก <form></form>  โดยภายในแท็กนี้จะประกอบไปด้วยแท็ก <input>  ประเภทต่างๆ ซึ่งรูปแบบการใช้งานแท็ก <form> ดังนี้

จากข้างต้นภายในแท็ก <form> จะมี Attribute ที่ต้องสนใจ ดังนี้

  • method เป็น Attribute สําหรับเลือกวิธีส่งข้อมูลที่ผู้ใช้กรอกลงในแบบฟอร์ม ซึ่งมี 2 แบบ คือ POST กับ GET
  • action เป็น Attribute ที่ใช้บอกว่า จะนำเอาข้อมูลจากแบบฟอร์มส่งไปยังไฟล์ใด
  • name เป็น Attribute ที่ใช้แสดงชื่อของแบบฟอร์ม

รับข้อความจาก Text Fields

ภายในแบบฟอร์ม จะต้องมี input เพื่อรับค่าจากผู้ใช้ ซึ่ง input ที่พบมากที่สุดก็คือ กล่อง ข้อความ หรือ Text Fields การใช้งานจะใช้แท็ก <input /> โดยระบุ type=”text” ดังตัวอย่างต่อ ไปนี้

เมื่อนําไปเปิดในบราวเซอร์จะได้ผลลัพธ์ดังรูปต่อไปนี้

thaidemy-html-24

สิ่งที่ต้องทราบคือ แท็ก <input /> จะอยู่ภายใต้แท็ก <form></form> เสมอ และเมื่อสังเกตภายในแท็ก <input> จะมี Attribute ที่ต้องให้ความสําคัญอยู่ 2 ตัว คือ type และ name

  • type คือประเภทของ input ซึ่งในที่นี้คือ กล่องข้อความแบบ Text field
  • name คือชื่อของ input ซึ่งเราจะต้องให้ความสําคัญมากๆ เพราะจะใช้เป็นตัวแปรที่จะส่งไปยัง Server

รับรหัสผ่านจาก Password Field

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

สําหรับการกรอกข้อความที่เป็นรหัสผ่านจะใช้แท็ก <input /> โดยกําหนด type=”password” ดังตัวอย่างต่อไปนี้

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

thaidemy-html-25

ส่งข้อมูลจากฟอร์มด้วยปุ่ม Submit

หลังจากได้การกรอกข้อมูล หรือเลือก input ในแบบฟอร์ม ครบถ้วนแล้ว หากต้องการส่ง ข้อมูลดังกล่าวไปให้ Server จะทําได้โดยการคลิกปุ่ม Submit ซึ่งในที่นี้จะใช้แท็ก <input /> โดย กําหนด type= “submit” ดังตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ผลลัพธ์บนบราวเซอร์ หากต้องการส่งข้อมูลในฟอร์มไปให้ Server สามารถ คลิกปุ่ม ส่ง ดังรูป

thaidemy-html-27

จากตัวอย่าง ข้อความที่ต้องการแสดงบนปุ่ม Submit จะถูกกําหนดไว้ที่ value ซึ่งในที่นี้ กําหนด value=”ส่ง” ที่สําคัญแท็ก <input type=”submit” /> จะต้องอยู่ในแท็ก <form> เสมอ เพื่อเป็นการบอกว่าต้องการส่งข้อมูลในส่วนของฟอร์มนี้เท่านั้น

ในการส่งข้อมูลจากฟอร์มนั้น สิ่งสําคัญคือ เราต้องระบุว่าจะส่งข้อมูลไปไหน และส่งด้วยวิธีอะไร การกําหนดว่าจะให้ส่งข้อมูลไปที่ใดนั้น ในที่คือ action= “destination.html” เป็นการบอกว่าได้ส่งข้อมูลจากฟอร์มนี้ไปยังไฟล์ test.html แต่ถ้าเราไม่ได้กำหนด action ก็จะมีความหมายว่า ส่งข้อมูลกลับมายังไฟล์ปัจจุบัน

ส่วนรูปแบบการส่งข้อมูลนั้น ใช้การกําหนดค่า method = “GET” ซึ่งวิธีนี้ จะส่งข้อมูลไป พร้อมกับ URL โดยหลังจากคลิกปุ่ม Submit ไปแล้ว เราจะสังเกตเห็นข้อมูลที่ส่งนั้นอยู่บนแถบ URL ดังรูป

thaidemy-html-28

จากรูปข้างบนที่ URL จะมีการส่งค่า firstname=jeerawuth&pws=loveyoubaby ซึ่งเป็น ข้อมูลที่เรากรอกลงในฟอร์มนั้นเอง

นอกจาก method = “GET” แล้วเรายังสามารถกําหด method = “POST” ซึ่งวิธีนี้มีข้อดีคือ จะปลอดภัยกว่า เนื่องจากไม่แสดงข้อมูลที่ส่งไปบน URL แต่การใช้ POST จะทํางานได้ช้ากว่า GET (กรณีที่ไม่ได้กำหนด method ลงในแท็ก <form> ก็จะถือว่าเราใช้ method=”GET”)

กำหนดป้ายชื่อให้กับ Input ด้วยแท็ก <label>

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

  • บรรทัดที่ 1 ที่แท็ก <form> กำหนด action=”destination.php” หมายถึงส่งข้อมูลแบบฟอร์มไปยังไฟล์ destination.php แต่ไม่ได้กำหนด method มีความหมายว่าต้องการใช้ method=”get”
  • บรรทัดที่ 2 กำหนดแท็ก <label for=”user”></label> โดย  for คือ Attribute ที่ใช้บอกให้ทราบว่าป้ายกำกับนี้จะไปใช้อธิบาย input ใด ดังนั้น for=”user” มีหมายความว่า ป้ายกำกับนี้ใช้คู่กับ Input ที่มีค่า id=”user” (ในตัวอย่างคือ ป้ายกำกับสำหรับอธิบายช่อง username)
  • บรรทัดที่ 3 กำหนดแท็ก <input> โดยกำหนด type=”text” หมายความว่า เป็น input แบบ Text field สังเกตว่า เราได้กำหนด name=”username” และ id=”user” ซึ่ง name คือ ชื่อของข้อมูลที่จะส่งไปพร้อมแบบฟอร์ม ส่วน id  คือการกำหนดรหัสประจำตัวให้กับแท็กนี้ ซึ่ง id ของแต่ละแท็กจะต้องไม่ซ้ำกัน

รับข้อความมากๆ ด้วย text area

แบบฟอร์มสําหรับรับข้อความโดยใช้ text field จะเป็นข้อความสั้นๆ แต่ถ้าเป็นข้อความยาวๆ เช่น คําติชมสินค้า ข้อเสนอแนะ หรือคอมเมนต์ต่างๆ เราจะใช้ text area แทน โดยกําหนด้วยแท็ก <textarea></textarea> ดังตัวอย่างต่อไปนี้

จากข้างต้น ผลลัพธ์บนบราวเซอร์ ในส่วนของ text area จะเป็นกล่องรับข้อความขนาดใหญ่ซึ่งความกว้างความยาวจะถูกระบุโดยจํานวนแถว rows=”5″ และจํานวนคอลัมน์ cols=”20″

thaidemy-html-29

ในการใช้งานจริง เรามักจะใช้แท็ก <label> กำหนดป้ายชื่อให้กับส่วนต่างๆ ของแบบฟอร์ม ดังนี้

หลังจากกำหนดแท็ก <label> เพื่อใส่ป้ายกำกับไปยังส่วนต่างๆ ของแบบฟอร์มแล้ว ขั้นตอนต่อไป คือการใส่แท็ก <div> เพื่อแยกชุดข้อมูลออกจากกัน แล้วใช้แท็ก <style> เพื่อปรับแต่งแบบฟอร์มให้สวยงาม ดังตัวอย่างต่อไปนี้

จากโค้ตตัวอย่างข้างบน เมื่อเปิดบนบราวเซอร์ เราก็จะได้ แบบฟอร์ม ดังรูป

thaidemy-html-30

เลือกอย่างใดอย่างหนึ่งด้วย Radio Buttons

ถ้ามีหลายทางเลือก แต่เราต้องเลือกอย่างใดอย่างหนึ่งเท่านั้น เราจะใช้ Radio Buttons เช่น การเลือกเพศ จะต้องเลือกว่าเป็นชาย หรือหญิงอย่างใดอย่างหนึ่ง สําหรับการใช้ Radio Buttons จะ ใช้แท็ก <input /> โดยกําหนด type=”radio” ดังตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ผลลัพธ์บนบราวเซอร์จะสามารถเลือกเพศได้ชายหรือหญิงเท่านั้น จะเลือก พร้อมกันทั่งคู่ไม่ได้

thaidemy-html-31

จากตัวอย่าง ข้อสังเกตเกี่ยวกับ Radio Button ทุกๆ ตัวเลือก เช่น male กับ female จะมี การกําหนด name เป็นชื่อเดียวกัน คือ sex แต่ค่า value จะต่างกัน

เลือกหลายๆ อย่างโดยใช้ Checkboxes

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

สําหรับการใช้ Checkboxes จะใช้แท็ก <input /> โดยกําหนด type=”checkbox” ดัง ตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ผลลัพธ์บนบราวเซอร์จะสามารถเลือก Checkboxes กี่อย่างพร้อมกันก็ได้ หรือจะไม่เลือกเลยก็ได้ ดังรูป

thaidemy-html-32

จากตัวอย่าง ข้อสังเกตเกี่ยวกับ Checkboxes ทุกๆ ตัวเลือก เช่น มอเตอร์ไซด์ รถยนต์ หรือ จักรยาน จะมีการกําหนด name และ value ให้ต่างกัน

เลือกรายการจาก Drop down

Drop down เป็น input อีกรูปแบบหนึ่ง เป็นการเลือกรายการด้วยการคลิก โดย Drop down จะใช้แท็ก <select></select> ไม่ใช่แท็ก <input> เหมือนกับแบบอื่นๆ โดยภายในแท็ก <select></select> จะมีแท็ก <option></option> เพื่อกําหนดว่าจะมีรายการใดๆ บ้าง ดัง ตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ผลลัพธ์บนบราวเซอร์จะสามารถเลือก Drop down โดยการคลิกเลือก รายการที่ต้องการ ดังรูป

thaidemy-html-33

จากตัวอย่าง ข้อสังเกตเกี่ยวกับ dropdown ทุกๆ ตัวเลือกจะกําหนดค่า value ให้ต่างกัน โดยชื่อ name จะกําหนดไว้ที่แท็ก <select> ไม่ได้กําหนดไว้ที่แท็ก <option>

ล้างข้อมูลในฟอร์มด้วยปุ่ม Reset

ในการกรอกข้อมูล หรือเลือก input ในแบบฟอร์ม หากต้องการยกเลิก หรือเคลียร์ค่าที่เลือก ไว้ ก็สามารถทําได้ง่ายๆ โดยกาคลิกปุ่ม Reset ซึ่งในที่นี้จะใช้แท็ก <input /> โดยกําหนด type= “reset” ดังตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ผลลัพธ์บนบราวเซอร์ หากต้องการล้างข้อมูลในฟอร์ม สามารถคลิกปุ่ม Reset ได้ ดังรูป

thaidemy-html-34

จากตัวอย่าง ข้อความที่ต้องการแสดงบนปุ่ม Reset จะถูกกําหนดไว้ที่ value ซึ่งในที่นี้กําหนด value=”เคลียร์” และถ้าสังเกตแท็ก <input /> จะต้องอยู่ในแท็ก <form> เสมอ เพื่อเป็นการบอก ว่าต้องการ Reset ข้อมูลในส่วนของฟอร์มนี้เท่านั้น

ฟอร์มรูปแบบใหม่ใน HTML5

หากเราต้องสร้างแบบฟอร์ม เราจะใช้แท็ก <form> </form> เพื่อกำหนดส่วนเริ่มต้นและสิ้นสุดของฟอร์ม ซึ่งภายในฟอร์มจะมี input element เพื่อรอรับข้อมูลจากผู้ใช้ การกำหนดว่าข้อมูลที่ได้รับเป็นข้อมูลแบบใดนั้น จะกำหนดโดย type attribute เช่น <input type= "submit" value= "send"> ซึ่ง type attribute ที่หลายท่านคุ้นเคยใน HTML เวอร์ชันก่อน ได้แก่ button, checkbox, file, hidden, image, password, radio, reset, submit, text และ textarea

สำหรับใน HTML5 แล้ว ยังสามารถใช้ type attribute แบบเดิมๆ ได้ทั้งหมด พร้อมกับเพิ่ม type attribute แบบใหม่หลายชนิดที่ช่วยให้สามารถใช้งานแบบฟอร์มได้สะดวกยิ่งขึ้น ดังนี้

  • color  คลิกเลือกสีที่ต้องการ
  • datalist เลือกรายการจากที่เตรียมไว้ หรือกรอกข้อความอื่นๆ ที่ต้องการลงไปได้ มีคุณสมบัติคล้ายๆ กับการรวมเอา text box และ drop down เข้าด้วยกัน
  • date เลือกวันที่จากปฏิทิน
  • datetime เลือกวันที่และเวลาจากปฏิทิน โดยเลือกโซนต่างๆ จาก UTC
    datetime-local เลือกวันที่และเวลาของเครื่อง
  • email ใช้สำหรับกรอกอีเมล์ โดยจะมีระบบตรวจสอบว่า ข้อมูลที่ใส่ลงไปต้องเป็นอีเมล์เท่านั้น
  • month เลือกเดือนที่ต้องการจากปฏิทิน
  • number รับเฉพาะค่าตัวเลข
  • range เป็นแถบที่ต้องใช้เมาส์ลากเพื่อกำหนดข้อมูลที่ต้องการ
  • search กรอกข้อมูลสำหรับการค้นหา
  • tel รับค่าเบอร์โทรศัพท์ โดยมีระบบตรวจสอบว่าต้องเป็นเบอร์โทรในฟอร์แมตที่กำหนด
  • time เลือกเฉพาะเวลา โดยมีปุ่ม spin ด้านขวา เพื่อเพิ่มหรือลดเวลา
  • url รับค่าเฉพาะ url ซึ่งเก็บที่อยู่เว็บไซต์
  • week เลือกสัปดาห์ที่ต้องการจากปฏิทิน

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

ค้นข้อมูลด้วย search

ในช่องสำหรับค้นหา มักจะมีปุ่ม x สำหรับการเคลียร์ค่าเดิม ซึ่งจาก text box ทั่วๆ ไปที่จะเป็นช่องว่างสำหรับกรอกข้อมูลเฉยๆ ใน Chrome และ Safari จะมีปุ่ม x สำหรับเคลียร์ค่า ส่วน Opera 11 จะแสดงเป็นรูปสี่เหลี่ยมมุมโค้งเท่านั้น ไม่มีปุ่ม x สำหรับเคลียร์ ส่วนใน Firefox จะมีหน้าตาคล้ายกับ text box ธรรมดา โดยจะเห็นว่าคุณสมบัติเหล่านี้ขึ้นอยู่กับบราวเซอร์ที่ใช้ด้วย

thaidemy-html-35

ต่อไปนี้คือตัวอย่างโค้ตสำหรับการกำหนดแท็ก <input> โดยกำหนด type=”search”

รับค่าเฉพาะอีเมล์ด้วย email

แต่เดิม เราจะใช้ text box ในการรับข้อมูลประเภทอีเมล์ แล้วใช้ JavaScript เพื่อทำการตรวจสอบว่า ค่าที่ได้รับเข้ามานั้น อยู่ในรูปแบบของอีเมล์เหรือไม่ เช่น a@a.com ถ้าใช่ก็ยอมรับค่าดังกล่าว หากไม่ใช่ก็จะแสดงข้อความบอกว่าสิ่งที่กรอกนั้นไม่ใช่อีเมล์ แต่สำหรับใน HTML5 แล้ว มี type attribute พิเศษสำหรับรับค่าอีเมล์โดยเฉพาะ ดังตัวอย่างต่อไปนี้

จากโค๊ตข้างต้น ให้ลองไปเปิดใน Chrome, Opera หรือใน Firefox จะพบว่า หากเรากรอกข้อมูลประเภทอื่นๆ ลงในช่อง email แล้วคลิกปุ่ม Send จะปรากฏข้อความเตือนว่า คุณกรอกข้อมูลไม่ถูกต้อง ดังรูป

thaidemy-html-36

รับค่าเฉพาะลิงค์ด้วย URL

กรณีที่ต้องการให้ผู้ใช้กรอก URL ลงในฟอร์ม ก็ให้กำหนด <input type="url" value="Send">  โดยหากผู้ใช้กรอกข้อมูลอื่นๆ ที่ไม่ใช่ URL ก็จะมีข้อความฟ้องว่าคุณกรอกข้อมูลผิดประเภท ให้กรอกเฉพาะที่เป็น URL ตัวอย่างบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ ได้แก่ Firefox และ Chrome

ในช่อง URL จะต้องกรอกที่อยู่เว็บไซต์ เช่น http://www.thaidemy.com แต่ถ้าเรากรอกข้อมูลอื่นๆ ก็จะมีข้อความฟ้องให้กรอกข้อมูลใหม่ ดังรูป

thaidemy-html-37

รับค่าเฉพาะตัวเลขอย่างเดียวกับ numbers

หลายครั้งที่เราต้องการเฉพาะค่าตัวเลขเท่านั้น จะมีข้อความหรือตัวอักษรอื่นๆ มาผสมไม่ได้ เช่น รับค่าตัวเลขสำหรับการคำนวณสูตรทางคณิตศาสตร์ หรือรับค่าตัวเลขเพื่อนำมาจัดลำดับ เป็นต้น  วิธีหนึ่งที่ช่วยให้การรับข้อมูลตัวเลขไม่ผิดพลาด คือการตรวจสอบข้อมูล (validation) ว่าข้อมูลที่กรอกลงไปนั้นเป็นตัวเลขล้วนๆ หรือไม่ ซึ่งในอดีตเราอาจต้องเขียนโค๊ต JavaScript แต่หากใช้ HTML5 สามารถใช้โค๊ตง่ายๆ ดังต่อไปนี้

จากโค๊ตตัวอย่างข้างต้น หากเราไปเปิดใน Chrome หรือใน Opera เราจะพบว่าตัวเลขเริ่มต้นที่แสดงบนหน้าจอคือเลข 5 ทั้งนี้เนื่องมาจากเรากำหนด placeholder=”5″ นั่นเอง พร้อมกันนั้นเรายังกำหนดค่าน้อยที่สุดคือ 1 และ กำหนดค่าสูงสุดเป็น 10 โดยใช้ min=’1′ max=’10’ ซึ่งเป็นการบังคับให้ผู้ใช้กรอกตัวเลขเฉพาะในช่วงที่เราต้องการเท่านั้น

thaidemy-html-38

ช่วงของตัวเลขกับ ranges

นอกจากวิธีกำหนดให้ผู้ใช้กรอกเฉพาะตัวเลขโดยใช้ type=’number’ แล้ว การกำหนดตัวเลขลงในฟอร์มยังสามารถใช้ range แทนก็ได้ ซึ่งวิธีที่หน้าจอเว็บเพจ จะปรากฏเป็นแถบเลื่อนให้ผู้ใช้แดรกเมาส์เพื่อกำหนดตัวเลขที่ต้องการ ดังตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่างข้างต้น หากเราไปเปิดใน Safari, Chrome หรือ Opera จะปรากแถบสำหรับให้เราคลิกเมาส์ลาก โดยสามารถลากได้ 5 ระดับ คือ 1 จนถึง 5 ซึ่งเกิดจากการกำหนด min=’1′ max=’5′ นั่นเอง

thaidemy-html-39

รับเฉพาะเบอร์โทรศัพท์ด้วย telephone numbers

ในการกรอกตัวเลขทีเป็นเบอร์โทรศัพท์ลงในฟอร์มนั้น เดิมเราอาจต้องใช้ JavaScript เพื่อกำหนดรูปแบบการกรอกเบอร์โทรศัพท์ เช่นกำหนดว่าต้องกรอกตัวเลขจำนวน 10 ตัวสำหรับโทรศัพท์มือถือ แต่ใน HTML5 นั้น ไม่จำเป็นต้องใช้ JavaScript ให้ยุ่งยาก สามารถกำหนด input element โดยกำหนด type=‘tel’ ดังตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ได้กำหนด type= ‘tel’ ซึ่งหมายถึงกำหนดประเภทของ input element เป็นแบบการค่าเบอร์โทรศัพท์ โดยจำกัดรูปแบบการรับค่าตัวเลขด้วยการใช้ pattern=”[0-9]{10}” ซึ่งหมายถึง การรับค่าตั้งแต่ตัวเลข 0-9 และมีความยาวทั้งสิ้น 10 หลัก โดยบราวเซอร์ที่รองรับได้แก่ Firefox, Chrome และ Opera แต่ถ้าผู้ใช้กรอกไม่ถูกต้อง ก็จะปรากฎข้อความเตือน ดังรูป

thaidemy-html-40

เลือกสีจาก color

หากต้องการให้ผู้ใช้กรอกข้อมูลเกี่ยวกับสี เช่น สีของเสื้อที่ต้องการสั่งซื้อ สีของหน้าจอที่ต้องการแสดง ฯลฯ ใน HTML5 จะใช้ ผู้ใช้สามารถคลิกเลือกสีจากรายการที่เตรียมไว้ หรือคลิกเลือกสีอื่นๆ สามารถกำหนด input element โดยกำหนด type=‘color’ แต่เป็นที่น่าเสียดายที่บราวเซอร์ที่รองรับมีแค่ Opera เท่านั้น

จากโค๊ตตัวอย่างข้างต้น หากเราไปเปิดใน Opera (หรือบราวเซอร์อื่นๆ ที่รองรับ) ก็จะปรากฏ Color Picker สำหรับคลิกเลือกสี โดยสามารถคลิกเลือกสีมาตรฐาน หรือสีอื่นๆ ได้ แต่หากเปิดในบราวเซอร์อื่นๆ ก็จะพบเป็นกล่องข้อความธรรมดา

thaidemy-html-41

วันที่และเวลากับ dates and times

ใน HTML5 ได้เตรียม input element สำหรับรับค่าวันที่และเวลาโดยเฉพาะ โดยกำหนด type attribute ได้หลายแบบ เช่น date, datetime, datetime-local, month, time และ week โดยแต่ละแบบมีความหมาย ดังนี้

  • date ใช้กรอกวันที่ โดยระบุ ปี เดือน และวัน โดยไม่ได้ระบเวลา เช่น 2011-07-29
  • month เป็นการรับค่าเดือน โดยกำหนดปี และเดือน เช่น 2011-10
  • week ใช้กรอกปีและหมายเลขสัปดาห์ (กรอกสัปดาห์ที่ 1-52) เช่น 2012-W24
  • time ใช้กรอกเวลาในแบบ 24 ชั่วโมง เช่น 21:00
  • datetime การกรอกวันที่และเวลา โดยใช้ T แยกระหว่างวันที่และเวลา พร้อมทั้งกำหนด Time Zone ตามมาตรฐาน UTC (Coordinate Universal Time) เช่น 2011-04-14T11:30+7:00 ซึ่งหมายถึง เวลา 11:30 น. ของวันที่ 14 เมษายน 2011 โดยอยู่ในเขตเวลา UTC บวกไป 7 ชั่วโมง
  • datetime-local ใช้กรอกวันเวลา ซึ่งเหมือนกับ datetime แต่ไม่มีการระบุ Time Zone

สำหรับการกำหนดช่องสำหรับกรอกวันที่และเวลาในแบบฟอร์ม สามารถศึกษาได้จากตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่างข้างต้น เมื่อไปเปิดใน Chrome จะปรากฏ Date Picker สำหรับคลิกเลือกวันที่ จากปฏิทินที่แสดงได้ แต่หากเปิดในบราวเซอร์อื่นๆ ก็อาจเป็นเพียงกล่องข้อความที่ผู้ใช้ต้องกรอกวันที่เข้าไปเอง

thaidemy-html-42

ติดต่อเรา

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

Not readable? Change text. captcha txt
0

Start typing and press Enter to search