HTML Input แอตทริบิวต์

value แอตทริบิวต์

value แอตทริบิวต์ระบุค่าเริ่มต้นสำหรับช่องใส่:

readonly แอตทริบิวต์

readonly แอตทริบิวต์ระบุว่าช่องใส่จะอ่านเท่านั้น (cannot be changed) :

readonly แอตทริบิวต์ไม่จำเป็นต้องมีค่า มันเป็นเช่นเดียวกับการเขียนอ่านได้อย่างเดียว = "อ่านได้อย่างเดียว"

disabled แอตทริบิวต์

disabled แอตทริบิวต์ระบุว่าช่องใส่ถูกปิดใช้งาน

องค์ประกอบพิการคือยกเลิกการใช้งานและยกเลิกการคลิกได้

องค์ประกอบพิการจะไม่ถูกส่ง

disabled แอตทริบิวต์ไม่จำเป็นต้องมีค่า มันเป็นเช่นเดียวกับการเขียนพิการ = "คนพิการ"

size แอตทริบิวต์

size แอตทริบิวต์ระบุขนาด (in characters) สำหรับช่องใส่:

maxlength แอตทริบิวต์

maxlength แอตทริบิวต์ระบุความยาวสูงสุดที่อนุญาตสำหรับช่องใส่:

ด้วย maxlength แอตทริบิวต์การควบคุมการป้อนข้อมูลจะไม่ยอมรับเกินกว่าจำนวนที่ได้รับอนุญาตของตัวละคร

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

แอตทริบิวต์ HTML5

HTML5 เพิ่ม following แอตทริบิวต์สำหรับ <input> :

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

และ following แอตทริบิวต์สำหรับ <form> :

• autocomplete
• novalidate

autocomplete แอตทริบิวต์

autocomplete แอตทริบิวต์ระบุว่าเป็นรูปแบบหรือการป้อนข้อมูลควรจะมี autocomplete หรือปิด

เมื่อ autocomplete อยู่บนเบราว์เซอร์โดยอัตโนมัติค่าที่สมบูรณ์ขึ้นอยู่กับค่าที่ผู้ใช้ป้อนก่อน

Tip: มันเป็นไปได้ที่จะมี autocomplete "on" รูปแบบและ "off" สำหรับช่องใส่ที่เฉพาะเจาะจงหรือในทางกลับกัน

autocomplete แอตทริบิวต์ทำงานร่วมกับ <form> และต่อไปนี้ <input> ประเภท: text, search, url, tel, email, password, datepickers, range, and color

ตัวอย่าง

รูปแบบ HTML ที่มี autocomplete บน (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

ลองตัวเอง»

เคล็ดลับ: ในเบราว์เซอร์บางอย่างที่คุณอาจจำเป็นต้องเปิดใช้งาน autocomplete ฟังก์ชั่นสำหรับการทำงาน

novalidate แอตทริบิวต์

novalidate แอตทริบิวต์เป็น <form> แอตทริบิวต์

เมื่อปัจจุบัน novalidate ระบุว่าข้อมูลในแบบฟอร์มไม่ควรถูกตรวจสอบเมื่อส่ง

ตัวอย่าง

แสดงให้เห็นว่ารูปแบบไม่ได้ที่จะถูกตรวจสอบเกี่ยวกับการส่ง:

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

ลองตัวเอง»

autofocus แอตทริบิวต์

autofocus แอตทริบิวต์เป็นแอตทริบิวต์แบบบูล

เมื่อปัจจุบันก็ระบุว่า <input> องค์ประกอบที่ควรจะได้รับโดยอัตโนมัติโฟกัสเมื่อโหลดหน้าเว็บ

ตัวอย่าง

ให้ "First name" ช่องใส่ได้รับโดยอัตโนมัติโฟกัสเมื่อโหลดหน้านี้:

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

ลองตัวเอง»

form แอตทริบิวต์

form แอตทริบิวต์ระบุหนึ่งหรือมากกว่าหนึ่งรูปแบบ <input> องค์ประกอบเป็น

Tip: การอ้างถึงมากกว่าหนึ่งรูปแบบให้ใช้รายการพื้นที่ที่คั่นของ form ids

ตัวอย่าง

input field ที่ตั้งอยู่นอกรูปแบบของ HTML (but still a part of the form) :

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

ลองตัวเอง»

formaction แอตทริบิวต์

formaction แอตทริบิวต์ระบุ URL ของไฟล์ที่จะดำเนินการควบคุมการป้อนข้อมูลเมื่อส่งแบบฟอร์ม

formaction แอตทริบิวต์แทนที่การ action แอตทริบิวต์ของ <form> องค์ประกอบ

formaction แอตทริบิวต์จะใช้กับ type = "ส่ง" และพิมพ์ = "ภาพ"

ตัวอย่าง

รูปแบบ HTML ที่มีสองส่งปุ่มกับการกระทำที่แตกต่างกัน

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

ลองตัวเอง»

formenctype แอตทริบิวต์

formenctype แอตทริบิวต์ระบุว่าข้อมูลในแบบฟอร์มที่ควรได้รับการเข้ารหัสเมื่อส่งไปยังเซิร์ฟเวอร์ (only for forms with method="post" )

formenctype แอตทริบิวต์แทนที่ enctype แอตทริบิวต์ของ <form> องค์ประกอบ

formenctype แอตทริบิวต์จะใช้กับ type="submit" และ type="image"

ตัวอย่าง

ส่ง form-data ที่มีการเริ่มต้นการเข้ารหัส (the first submit button) และเข้ารหัสเป็น "multipart/form-data" (the second submit button) :

<form action="demo_post_enctype.asp" method="post">
  First name: <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 ที่การกระทำ

formmethod แอตทริบิวต์แทนที่ method แอตทริบิวต์ของ <form> องค์ประกอบ

formmethod แอตทริบิวต์สามารถใช้กับ type="submit" และ type="image"

ตัวอย่าง

ปุ่มที่สองส่งแทนที่วิธี HTTP ของรูปแบบ:

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <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"

ตัวอย่าง

รูปแบบที่สองส่งปุ่ม (with and without validation) :

<form action="action_page.php">
  E-mail: <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 = "ส่ง" และพิมพ์ = "ภาพ"

ตัวอย่าง

รูปแบบที่สองส่งปุ่มมีหน้าต่างเป้าหมายที่แตกต่างกัน

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

ลองตัวเอง»

height และ width แอตทริบิวต์

height คุณลักษณะและความกว้างระบุความสูงและความกว้างของ <input> องค์ประกอบ

height และ width คุณลักษณะที่ได้รับมาใช้เฉพาะกับ <input type="image">

ตัวอย่าง

กำหนดภาพเป็นที่ปุ่มส่งที่มีคุณลักษณะสูงและความกว้าง:

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

ลองตัวเอง»

list แอตทริบิวต์

list แอตทริบิวต์หมายถึง <datalist> องค์ประกอบที่มีตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับ <input> องค์ประกอบ

ตัวอย่าง

<input> องค์ประกอบที่มีค่าที่กำหนดไว้ล่วงหน้าใน <datalist> :

<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 แอตทริบิวต์ระบุต่ำสุดและค่าสูงสุดสำหรับ <input> องค์ประกอบ

min และ max คุณลักษณะการทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: number, range, date, datetime, datetime-local, month, time and week

ตัวอย่าง

<input> องค์ประกอบที่มีค่าต่ำสุดและสูงสุด:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

ลองตัวเอง»

multiple Attribute

multiple แอตทริบิวต์เป็นแอตทริบิวต์แบบบูล

เมื่อปัจจุบันก็ระบุว่าผู้ใช้จะได้รับอนุญาตให้เข้ามากกว่าหนึ่งค่าใน <input> องค์ประกอบ

multiple แอตทริบิวต์ทำงานร่วมกับประเภทต่อไปนี้การป้อนข้อมูล: email และ file

ตัวอย่าง

ไฟล์ที่อัปโหลดข้อมูลที่รับค่าหลาย:

Select images: <input type="file" name="img" multiple>

ลองตัวเอง»

pattern แอตทริบิวต์

pattern แอตทริบิวต์ระบุนิพจน์ปกติว่า <input> ค่าองค์ประกอบของการตรวจสอบกับ

pattern แอตทริบิวต์ทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: text, search, url, tel, email, and password

เคล็ดลับ: ใช้ทั่วโลก ชื่อ แอตทริบิวต์ที่จะอธิบายรูปแบบที่จะช่วยให้ผู้ใช้

Tip: เรียนรู้เพิ่มเติมเกี่ยวกับ การแสดงผลปกติ ในการกวดวิชา JavaScript ของเรา

ตัวอย่าง

สนามการป้อนข้อมูลที่สามารถมีเพียงสามตัวอักษร (no numbers or special characters) :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

ลองตัวเอง»

placeholder แอตทริบิวต์

placeholder แอตทริบิวต์ระบุคำใบ้ที่อธิบายถึงความคุ้มค่าที่คาดหวังของช่องใส่ (a sample value or a short description of the format)

คำใบ้จะแสดงอยู่ในช่องใส่ก่อนที่ผู้ใช้ป้อนค่า

placeholder แอตทริบิวต์ทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: text, search, url, tel, email, and password

ตัวอย่าง

สนามการป้อนข้อมูลที่มีข้อความตัวยึด:

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

ลองตัวเอง»

required แอตทริบิวต์

required แอตทริบิวต์เป็นแอตทริบิวต์แบบบูล

เมื่อปัจจุบันก็ระบุว่าช่องใส่ต้องกรอกก่อนที่จะส่งแบบฟอร์ม

required แอตทริบิวต์ทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file

ตัวอย่าง

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

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

ลองตัวเอง»

step แอตทริบิวต์

step แอตทริบิวต์ระบุช่วงเวลาที่จำนวนตามกฎหมายสำหรับ <input> องค์ประกอบ

ตัวอย่าง: ถ้าขั้นตอน = "3" ตัวเลขทางกฎหมายอาจจะ -3, 0, 3, 6, ฯลฯ

Tip: step แอตทริบิวต์สามารถนำมาใช้ร่วมกับ max และ min แอตทริบิวต์การสร้างช่วงของค่าทางกฎหมาย

step แอตทริบิวต์ทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: number, range, date, datetime, datetime-local, month, time and week

ตัวอย่าง

สนามการป้อนข้อมูลที่มีช่วงเวลาที่จำนวนตามกฎหมายระบุ

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

ลองตัวเอง»

ทดสอบตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»