คุณสมบัติ HTML Input

คุณสมบัติ value

value คุณสมบัติกำหนดค่าตั้งต้นของฟิลด์ที่นำเข้ามา:

ตัวอย่าง

<form action="">
 ชื่อ:<br>
<input type="text" name="firstname" value="Bill">
<br>
 สกุล:<br>
<input type="text" name="lastname">
</form>

ทดลองด้วยตัวเอง

คุณสมบัติ readonly

readonly คุณสมบัติกำหนดฟิลด์ที่นำเข้ามาเป็น readonly (ไม่สามารถแก้ไขได้):

ตัวอย่าง

<form action="">
 ชื่อ:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 สกุล:<br>
<input type="text" name="lastname">
</form>

ทดลองด้วยตัวเอง

คุณสมบัติ readonly ไม่ต้องมีค่า. มันเท่ากับ readonly="readonly".

คุณสมบัติ disabled

disabled คุณสมบัติกำหนดฟิลด์ที่นำเข้ามาเป็น disabled.

องค์ประกอบที่ถูกบล็อคไม่สามารถใช้งานและคลิกได้.

องค์ประกอบที่ถูกบล็อคจะไม่ถูกส่งไป.

ตัวอย่าง

<form action="">
 ชื่อ:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 สกุล:<br>
<input type="text" name="lastname">
</form>

ทดลองด้วยตัวเอง

คุณสมบัติ disabled ไม่ต้องมีค่า. มันเท่ากับ disabled="disabled".

คุณสมบัติ size

size คุณสมบัติกำหนดขนาดของฟิลด์ที่นำเข้ามา (ตามคำนับตัวอักษร):

ตัวอย่าง

<form action="">
 ชื่อ:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 สกุล:<br>
<input type="text" name="lastname">
</form>

ทดลองด้วยตัวเอง

คุณสมบัติ maxlength

maxlength นิยายกำหนดความยาวสูงสุดที่อนุญาตให้สำหรับฟิลด์ที่นำเข้ามา:

ตัวอย่าง

<form action="">
 ชื่อ:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 สกุล:<br>
<input type="text" name="lastname">
</form>

ทดลองด้วยตัวเอง

ถ้าเลือกค่า maxlength ฟิลด์ตัวเข้ารหัสจะไม่ยอมรับข้อความที่ยาวกว่าจำนวนที่กำหนด

ตัวแปรนี้จะไม่ให้ความกลับเชิงชาติใดๆ ถ้าต้องการเตือนผู้ใช้ คุณจะต้องเขียนโค้ด JavaScript

หมายเหตุ:การจำกัดค่าเข้ารหัสไม่ได้มีความแน่นอน โปรแกรม JavaScript มีหลายวิธีเพื่อเพิ่มการตรวจสอบค่าเข้ารหัสผิดกฎระเบียบ ถ้าต้องการจำกัดค่าเข้ารหัสอย่างปลอดภัย ผู้รับผลลัพธ์ (เซิร์ฟเวอร์) จะต้องตรวจสอบทั้งสองด้าน

ตัวแปร HTML5

HTML5 ได้เพิ่มตัวแปรต่อไปนี้สำหรับ <input>:

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

และเพิ่มตัวแปรต่างๆ สำหรับ <form> ตามต้องการ:

  • autocomplete
  • novalidate

ตัวแปร autocomplete

ตัวแปร autocomplete กำหนดว่าฟอร์มหรือฟิลด์ควรที่จะทำการ autocomplete หรือไม่

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

คำเตือน:คุณสามารถตั้งค่า autocomplete ของฟอร์มเป็น on และใช้ฟิลด์เฉพาะเป็น off หรือกลับกัน

ตัวแปร autocomplete ใช้กับ <form> และ <input> ประเภทต่อไปนี้: text, search, url, tel, email, password, datepickers, range และ color。

ตัวอย่าง

ฟอร์ม HTML ที่เปิดใช้การ autocomplete (ฟิลด์บางตัวอย่าง off):

<form action="action_page.php" autocomplete="on">
   ชื่อ:<input type="text" name="fname"><br>
   ชื่อสกุล: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

ทดลองด้วยตัวเอง

คำเตือน:ในบางเบราว์เซอร์ คุณอาจจะต้องเปิดใช้งานการทำงานแบบอัตโนมัติโดยมือ

novalidate ทางattribute

novalidate ทางattribute อยู่ในกลุ่ม attribute ของ <form>

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

ตัวอย่าง

นำไปสู่การที่ฟอร์มไม่ถูกตรวจสอบเมื่อส่งฟอร์ม:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

ทดลองด้วยตัวเอง

autofocus ทางattribute

autofocus ทางattribute คือ attribute ที่เป็นรูปแบบ boolean

ถ้าได้รับการตั้งค่า มันกำหนดให้ <input> ได้รับความสนใจอัตโนมัติเมื่อหน้าเว็บเริ่มโหลด

ตัวอย่าง

ทำให้ช่องบอกคำนำหน้าตัวเลข "First name" ได้รับความสนใจอัตโนมัติเมื่อหน้าเว็บเริ่มโหลด:

First name:<input type="text" name="fname" autofocus>

ทดลองด้วยตัวเอง

form ทางattribute

form ทางattribute กำหนดฟอร์มหนึ่งหรือหลายฟอร์มที่อยู่ในอุปกรณ์ <input>

คำเตือน:หากต้องการอ้างอิงฟอร์มหลายฟอร์ม ใช้ระยะห่างด้วยช่องว่างแบ่งรายการ id ของฟอร์ม

ตัวอย่าง

ช่องบอกคำนำหน้าตัวเลขตั้งแต่ฟอร์ม HTML นอก (แต่ยังเป็นส่วนหนึ่งของฟอร์ม)

<form action="action_page.php" id="form1">
   ชื่อใน: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

ทดลองด้วยตัวเอง

formaction ทางattribute

formaction ทางattribute กำหนด URL ที่จะจัดการไฟล์ของอุปกรณ์ยื่นฟอร์มเมื่อส่งฟอร์ม

formaction ทางattribute แทนที่ action ทางattribute ของ <form>

formaction ทางattribute สำหรับ type="submit" และ type="image"

ตัวอย่าง

ฟอร์ม HTML ที่มีสองปุ่มส่งและสำหรับการกระทำต่างกัน:

<form action="action_page.php">
   ชื่อใน: <input type="text" name="fname"><br>
   ชื่อสกุล: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="ส่งเป็น admin">
</form>

ทดลองด้วยตัวเอง

formenctype ทาง属性

formenctype ทาง属性กำหนดวิธีการเข้ารหัสข้อมูลที่ส่งไปยังเซิร์ฟเวอร์เมื่อส่งข้อมูลของฟอร์ม (เมื่อ method="post" ของฟอร์ม)

formenctype ทาง属性แทนที่ enctype ทาง属性ของ <form> อิเลิล

คุณสมบัติ formenctype สามารถใช้กับ type="submit" และ type="image"。

ตัวอย่าง

ส่งข้อมูลฟอร์ม (form-data) ด้วยการระบุรูปแบบการเข้ารหัสปกติและรูปแบบการเข้ารหัส multipart/form-data (ปุ่มส่งฟอร์มที่สอง):

<form action="demo_post_enctype.asp" method="post">
   ชื่อใน: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

ทดลองด้วยตัวเอง

คุณสมบัติ formmethod

คุณสมบัติ formmethod กำหนดวิธีการ HTTP ที่ใช้ส่งข้อมูลฟอร์ม (form-data) ไปยัง URL action

คุณสมบัติ formmethod จะเข้าใจกับคุณสมบัติ method ของ <form> อิเลเมนต์。

คุณสมบัติ formmethod สามารถใช้กับ type="submit" และ type="image"。

ตัวอย่าง

ปุ่มส่งฟอร์มที่สองทำให้เปลี่ยนมาตรฐานของการส่งฟอร์ม HTTP:

<form action="action_page.php" method="get">
   ชื่อใน: <input type="text" name="fname"><br>
   ชื่อสกุล: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

ทดลองด้วยตัวเอง

คุณสมบัติ formnovalidate

คุณสมบัติ novalidate คือคุณสมบัติบูล

ถ้าเลือกใช้งาน จะกำหนดให้ไม่ตรวจสอบ <input> ขณะส่งฟอร์ม。

คุณสมบัติ formnovalidate จะเข้าใจกับคุณสมบัติ novalidate ของ <form> อิเลเมนต์。

คุณสมบัติ formnovalidate สามารถใช้กับ type="submit"。

ตัวอย่าง

ฟอร์มที่มีปุ่มส่งฟอร์มสองปุ่ม (การตรวจสอบและไม่ตรวจสอบ):

<form action="action_page.php">
   อีเมล: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

ทดลองด้วยตัวเอง

ลูกฟังก์ชัน formtarget

ค่าลูกฟังก์ชัน formtarget กำหนดชื่อหรือคำกำหนดที่แสดงในที่ไหนหลังจากยื่นย้อนฟอร์มแล้วเพื่อแสดงคำตอบที่ได้รับ:

ลูกฟังก์ชัน formtarget จะเข้าไปทับค่าลูกฟังก์ชัน target ของ <form>:

ลูกฟังก์ชัน formtarget สามารถใช้กับ type="submit" และ type="image" ได้:

ตัวอย่าง

ฟอร์มนี้มีปุ่มยื่นย้อนสองตัวแปลง ตอบสนองให้กับหน้าต่างเป้าหมายที่ต่างกัน:

<form action="action_page.php">
   ชื่อใน: <input type="text" name="fname"><br>
   ชื่อสกุล: <input type="text" name="lname"><br>
   <input type="submit" value="ยื่นย้อนตามปกติ">
   <input type="submit" formtarget="_blank">
   value="ยื่นย้อนสู่หน้าต่างใหม่">
</form>

ทดลองด้วยตัวเอง

ค่า height และ width

ค่า height และ width กำหนดความสูงและความกว้างของตัวแปลง <input>:

ค่า height และ width ใช้เฉพาะสำหรับ <input type="image"> ต่างๆ:

หมายเหตุ:กรุณาเสนอความหมายของขนาดแบบภาพเสมอด้วยความหมายถึงเวลาที่โหลดรูปภาพ หากเบราซเซอร์ไม่ทราบขนาดแบบภาพ หน้าเว็บจะปรากฎว่ามีการเมาในขณะที่โหลดรูปภาพ:

ตัวอย่าง

ตั้งรูปภาพเป็นปุ่มยื่นย้อนและกำหนดค่าแบบภาพ height และ width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

ทดลองด้วยตัวเอง

ลูกฟังก์ชัน list

ลูกฟังก์ชัน list ของ <datalist> อยู่ในตัวแปลงที่เป็นค่ากำหนดก่อนหน้าของ <input> อย่างไร:

ตัวอย่าง

ใช้ <datalist> ตั้งค่าค่าเริ่มต้นสำหรับประกาศ <input> อย่างไร:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

ทดลองด้วยตัวเอง

ค่า min และ max

ค่า min และ max กำหนดค่าต่ำและค่าสูงของ element <input>

ค่า min และ max ใช้สำหรับชนิดของ input ที่ต้องการใส่: number, range, date, datetime, datetime-local, month, time และ week

ตัวอย่าง

element <input> ที่มีค่าต่ำและค่าสูง

ใส่วันที่ก่อน 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 ใส่วันที่หลัง 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 จำนวน (ระหว่าง 1 ถึง 5):
<input type="number" name="quantity" min="1" max="5">

ทดลองด้วยตัวเอง

속�性ประกาศ multiple

속�性ประกาศ multiple คือแถวบูล

ถ้าเปิดใช้งาน ก็จะกำหนดให้ผู้ใช้สามารถใส่ค่าหลายตัวใน element <input>

속�性ประกาศ multiple ใช้สำหรับชนิดของ input ต่อไปนี้: email และ file

ตัวอย่าง

ช่องใส่ข้อมูลเพื่ออัพโหลดไฟล์ที่ยอมรับค่าหลายตัว:

เลือกภาพ:<input type="file" name="img" multiple>

ทดลองด้วยตัวเอง

속�性ประกาศ pattern

속�性ประกาศ pattern กำหนดประกาศแบบไซก์เนกเชอร์ที่ใช้ตรวจสอบค่าของ element <input>

속�性ประกาศ pattern ใช้สำหรับชนิดของ input ต่อไปนี้: text, search, url, tel, email, และ password

คำเตือน:ใช้속�性แถว title ทั่วไปเพื่ออธิบายรูปแบบเพื่อช่วยผู้ใช้

คำเตือน:เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ประกาศแบบไซก์เนกเชอร์ในคู่มือ JavaScript ของเรา

ตัวอย่าง

ช่องใส่ข้อมูลที่สามารถใส่ได้แค่อักษรสามตัว (ไม่มีตัวเลขหรือสัญลักษณ์พิเศษ):

รหัสประเทศ: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

ทดลองด้วยตัวเอง

속�性質 placeholder

속성 placeholder กำหนดคำอธิบายที่ใช้ระบุค่าที่คาดว่าผู้ใช้จะใส่ (ตัวอย่างหรือคำอธิบายสั้นของรูปแบบ)

ข้อความแจ้งเตือนนี้จะแสดงขึ้นในช่องใส่ข้อมูลก่อนที่ผู้ใช้จะใส่ค่าของพวกเขา

คุณสมบัติ placeholder มีผลบนประเภทการใส่ข้อมูลต่อไปนี้: text, search, url, tel, email และ password.

ตัวอย่าง

ช่องข้อมูลที่มีข้อความที่แทนช่องว่าง

<input type="text" name="fname" placeholder="First name">

ทดลองด้วยตัวเอง

คุณสมบัติ required

คุณสมบัติ required คือคุณสมบัติบูล

หากถูกตั้งค่า กำหนดว่าจำเป็นต้องกรอกช่องข้อมูลก่อนที่จะส่งฟอร์ม

คุณสมบัติ required มีผลบนประเภทการใส่ข้อมูลต่อไปนี้: text, search, url, tel, email, password, ตัวเลือกวันที่, number, checkbox, radio และ file.

ตัวอย่าง

ช่องข้อมูลที่จำเป็นต้องกรอก

Username: <input type="text" name="usrname" required>

ทดลองด้วยตัวเอง

คุณสมบัติ step

คุณสมบัติ step กำหนดช่องว่างเลขที่ถูกต้องของสมรรถนะ <input>

ตัวอย่าง: หาก step="3" แล้ว ค่าเลขที่ถูกต้องคือ -3, 0, 3, 6 และอื่นๆ

คำเตือน:คุณสมบัติ step สามารถถูกใช้ร่วมกับคุณสมบัติ max และ min ในการสร้างช่วงของค่าที่ถูกต้อง

คุณสมบัติ step นั้นมีผลบนประเภทการใส่ข้อมูลต่อไปนี้: number, range, date, datetime, datetime-local, month, time และ week。

ตัวอย่าง

ช่องข้อมูลที่มีช่องว่างที่มีช่องว่างเลขที่มีช่องว่าง

<input type="number" name="points" step="3">

ทดลองด้วยตัวเอง