Attributes ใน Input


Attribute: value

value ใช้ระบุค่าเริ่มต้นของกล่องข้อความ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: readonly

readonly ใช้ระบุให้กล่องข้อความนั้นดูได้อย่างเดียว ไม่สามารถแก้ไขได้

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: disabled

disabled ใช้ระบุให้กล่องข้อความถูกปิดการใช้งาน ไม่สามารถใช้ได้ คลิกก็ไม่ได้ และค่าก็จะไม่ถูกส่งหากฟอร์มถูก Submit

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: size

size ใช้ระบุขนาดของกล่องข้อความ หน่วยเป็นตัวอักษร

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: maxlength

maxlength ใช้ระบุจำนวนตัวอักษรที่อนุญาตให้กรอกได้

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

ด้วย maxlength เบราว์เซอร์จะไม่ให้คีย์ข้อความเกินจำนวนที่ระบุไว้ แต่จะไม่มีการส่ง feedback ใดๆ กลับมา ถ้าต้องการให้มีการขึ้นเตือนต้องใช้โค้ด JavaScript ทำงานร่วมด้วย


Attribute ที่เพิ่มมาใน HTML5

ใน HTML5 ได้มีการเพิ่ม Attribute เพื่อใช้ใน <input> ได้แก่

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

และเพิ่ม Attribute เพื่อใช้ใน <form> ได้แก่

  • autocomplete
  • novalidate

Attribute: autocomplete

autocomplete ใช้ระบุว่าจะให้เปิดหรือปิดคำสั่ง autocomplete ในกล่องข้อความนั้น

หาก autocomplete เปิดอยู่ เบราว์เซอร์จะส่งค่าที่เคยกรอกลงไปก่อนหน้านี้ให้อัตโนมัติ

เราสามารถระบุให้ autocomplete เปิดหรือปิดทั้งฟอร์ม หรือเฉพาะบางกล่องข้อความก็ได้

ใช้ได้กับ <form> และ <input>

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

บางเบราว์เซอร์จำเป็นต้องระบุคำสั่งเปิดเพื่อใช้งานฟังก์ชั่นนี้


Attribute: novalidate

novalidate ใช้กับ Element <form>

เพื่อระบุว่าไม่ต้องตรวจสอบความถูกต้องของข้อมูลเมื่อกด Submit

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่นต่ำกว่า 9 และ Safari

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: autofocus

autofocus ใช้เพื่อระบุให้เบราว์เซอร์ focus อัตโนมัติเมื่อหน้าเว็บโหลดเสร็จ

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่นต่ำกว่า 9

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: form

form ใช้เพื่อระบุว่า <input> เป็นของฟอร์มไหน (ระบุมากกว่า 1 ฟอร์มได้) กรณีไม่อยู่ภายใน Tag <form>

การระบุมากกว่า 1 ฟอร์มให้ใช้เว้นวรรคเป็นตัวแบ่ง

ใช้ไม่ได้กับ Internet Explorer

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: formaction

formaction ใช้เพื่อระบุชื่อไฟล์ที่จะส่งไปประมวลผลเมื่อกด Submit แล้ว

formaction จะไปแทนที่กับ Attribute action ใน <form>

ใช้กับ Input ประเภท submit และ image

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่น 9 และต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: formenctype

formenctype ใช้ระบุว่าจะ encode ข้อมูลอย่างไร เมื่อกด Submit (ใช้ได้กับ method="post" เท่านั้น)

formenctype จะไปแทนที่กับ Attribute enctype ใน <form>

ใช้กับ Input ประเภท submit และ image

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่น 9 และต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: formmethod

formmethod ใช้ระบุใช้วิธีไหนในการส่ง HTTP เมื่อกด Submit

formmethod จะไปแทนที่กับ Attribute method ใน <form>

ใช้กับ Input ประเภท submit และ image

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่น 9 และต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: formnovalidate

formnovalidate ใช้กำหนดให้แบบฟอร์มไม่ต้องตรวจสอบความถูกต้องของข้อมูล

formnovalidate จะไปแทนที่กับ Attribute novalidate ใน <form>

ใช้กับ Input ประเภท submit

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่น 9 หรือต่ำกว่านั้น และ Safari

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: formtarget

formtarget เอาไว้ระบุเจาะจงว่า Submit ฟอร์มที่หน้าต่างไหน

formtarget จะไปแทนที่กับ Attribute target ใน <form>

ใช้กับ Input ประเภท submit และ image

ใช้ไม่ได้กับ Internet Explorer เวอร์ชั่น 9 หรือต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: height และ width

height และ width เอาไว้ระบุความสูงและความกว้างของ Element <input type="image">

<input type="image"> คือการสร้างรูปภาพให้เป็นปุ่ม Submit

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: list

list ใช้เพื่ออ้างอิงกับ id ของ <datalist> เพื่อระบุรายการสำหรับกรอกข้อมูลล่วงหน้า

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น และ Safari

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: min และ max

min และ max ใช้ระบุค่าน้อยสุดและค่ามากสุดที่กรอกได้ใน <input>

min กับ max ใช้ได้กับ input ประเภท number range date datetime-local month time และ week

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: multiple

multiple ใช้ระบุให้สามารถเลือกไฟล์ได้มากกว่า 1 ไฟล์ใน <input>

multiple ใช้ได้กับ input ประเภท file และ email

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: pattern

pattern ใช้ระบุ regular expression ที่ <input> จะใช้ตรวจสอบ

pattern ใช้ได้กับ input ประเภท text search url tel email และ password

ควรใช้ Attribute title เพื่อช่วยอธิบายให้ผู้ใช้เข้าใจเงื่อนไข

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น และ Safari

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: placeholder

placeholder ใช้เพื่ออธิบายกล่องข้อความว่าควรกรอกอะไรลงไป (ตัวอย่างข้อมูลหรือคำอธิบายสั้นๆ)

คำอธิบายจะปรากฎเฉพาะตอนที่กล่องข้อความยังไม่ได้ใส่ค่าอะไรลงไป

placeholder ใช้ได้กับ input ประเภท text search url tel email และ password

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: required

required ใช้ระบุให้เบราว์เซอร์บังคับกรอกข้อมูลก่อนกด Submit

required ใช้ได้กับ input ประเภท text search url tel email password date number checkbox radio และ file

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น และ Safari

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Attribute: step

step ใช้ระบุให้กรอกตัวเลขแบบก้าวกระโดด

ยกตัวอย่างเช่น ถ้า step="3" ตัวเลขที่กรอกได้จะเป็น -3 0 3 6 เป็นต้น

มักจะใช้ร่วมกับ Attribute min และ max

step ใช้ได้กับ input ประเภท number range date datetime-local month time และ week

ใช้ไม่ได้กับ IE เวอร์ชั่น 9 หรือต่ำกว่านั้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด