HTML Input Attributes

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

บทเรียนนี้จะอธิบายแอตทริบิวต์ต่างๆ สำหรับแท็ก <input> ใน HTML

value Attribute

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

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h1>input value attribute</h1>

<p>แอตทริบิวต์ใช้ระบุค่าเริ่มต้นสำหรับฟิลด์อินพุต:</p>

<form action="/action_page.php">
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น"><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

input value attribute


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







readonly Attribute

แอตทริบิวต์ readonly ระบุว่าฟิลด์อินพุตเป็นแบบอ่านอย่างเดียว

ฟิลด์อินพุตแบบอ่านอย่างเดียวไม่สามารถแก้ไขได้ (อย่างไรก็ตาม ผู้ใช้สามารถแท็บไปยังฟิลด์นั้น เน้นสี และคัดลอกข้อความจากนั้น)

ค่าของฟิลด์อินพุตแบบอ่านอย่างเดียวจะถูกส่งเมื่อทำการส่งแบบฟอร์ม

ตัวอย่าง

ป้อนข้อมูลแบบอ่านอย่างเดียว:

<!DOCTYPE html>
<html>
<body>

<h1>input readonly attribute</h1>

<p>แอตทริบิวต์แบบอ่านอย่างเดียวระบุว่าฟิลด์อินพุตควรเป็นแบบอ่านอย่างเดียว (ไม่สามารถเปลี่ยนแปลงได้):</p>

<form action="/action_page.php">
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น" readonly><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

input readonly attribute


แอตทริบิวต์แบบอ่านอย่างเดียวระบุว่าฟิลด์อินพุตควรเป็นแบบอ่านอย่างเดียว (ไม่สามารถเปลี่ยนแปลงได้):







disabled Attribute

disabled แอตทริบิวต์อินพุตใช้ในการระบุว่าปิดใช้งานช่องอินพุต disabled input field จะไม่สามารถคลิกได้

โดยค่าของ disabled input field จะไม่ถูกส่งเมื่อกดส่งแบบฟอร์ม

ตัวอย่าง

disabled input field:

<!DOCTYPE html>
<html>
<body>

<h1> input disabled attribute</h1>

<p>ใช้ระบุช่องที่ปิดการใช้งานและจะไม่ส่งค่าเมื่อกดส่งฟอร์ม:</p>

<form action="/action_page.php">
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น" disabled><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

input disabled attribute


ใช้ระบุช่องที่ปิดการใช้งานและจะไม่ส่งค่าเมื่อกดส่งฟอร์ม:







size Attribute

size แอตทริบิวต์ใช้ระบุความกว้างในช่องที่ไว้กรอกตัวอักษร

หมายเหตุ: size แอตทริบิวต์ใช้งานได้กับประเภทอินพุตต่อไปนี้:text, search, tel, url, email, password.

ตัวอย่าง

กำหนดความกว้างของช่องใส่ข้อความ:

<!DOCTYPE html>
<html>
<body>

<h1>input size attribute</h1>

<p>แอตทริบิวต์ size ระบุความกว้าง (เป็นตัวจำนวนอักษร) ของช่องใส่ข้อความ:</p>

<form action="/action_page.php">
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

input size attribute


แอตทริบิวต์ size ระบุความกว้าง (เป็นตัวจำนวนอักษร) ของช่องใส่ข้อความ:







maxlength Attribute

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

หมายเหตุ:เมื่อ maxlength ตั้งค่า a ฟิลด์อินพุตจะไม่ยอมรับอักษรเกินจำนวนที่ระบุ อย่างไรก็ตาม แอตทริบิวต์นี้ไม่ได้ให้ข้อเสนอแนะใดๆ  ดังนั้น หากคุณต้องการแจ้งเตือนผู้ใช้ คุณต้องเขียนโค้ด JavaScript

ตัวอย่าง

กำหนดความยาวสูงสุดสำหรับช่องใส่ข้อความ:

<!DOCTYPE html>
<html>
<body>

<h1>The input maxlength attribute</h1>

<p> maxlength attribute ระบุจำนวนอักขระสูงสุดที่อนุญาตในช่องอินพุต:</p>

<form action="/action_page.php">
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

The input maxlength attribute


maxlength attribute ระบุจำนวนอักขระสูงสุดที่อนุญาตในช่องอินพุต:







min and max Attributes

อินพุตminและmaxแอตทริบิวต์ระบุค่าต่ำสุดและสูงสุดสำหรับฟิลด์อินพุต

min และ maxทำงานร่วมกับประเภทอินพุตต่อไปนี้:  number, range, date, datetime-local, month, time and week.

เคล็ดลับ:ใช้แอตทริบิวต์ min และ max ร่วมกันเพื่อสร้างช่วงของค่าตามกฎ

ตัวอย่าง

กำหนดวันที่สูงสุด วันที่ต่ำสุด และช่วงของค่าทางกฎหมาย:

<!DOCTYPE html>
<html>
<body>

<h1>input min และ max แอตทริบิวต์</h1>

<p>min และ max แอตทริบิวต์ระบุค่าต่ำสุดและสูงสุดสำหรับองค์ประกอบอินพุต</p>

<form action="/action_page.php">
  <label for="datemax">ระบุวันที่ก่อนหน้า 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">ระบุวันที่หลังจาก 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
  
  <label for="quantity">จำนวน (ระหว่าง 1 และ 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

  <input type="submit" value="ส่ง">
</form>

</body>
</html>

input min และ max แอตทริบิวต์


min และ max แอตทริบิวต์ระบุค่าต่ำสุดและสูงสุดสำหรับองค์ประกอบอินพุต








multiple Attribute

 อินพุต multiple แอตทริบิวต์ใช้ระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในช่องอินพุต

multiple ทำงานร่วมกับประเภทอินพุต: อีเมล และไฟล์

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>

<h1> input multiple attributes</h1>

<p>multiple แอตทริบิวต์ระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในช่องป้อนข้อมูล</p>

<form action="/action_page.php">
  <label for="files">เลือกไฟล์:</label>
  <input type="file" id="files" name="files" multiple><br><br>
  <input type="submit" value="ส่ง">
</form>

<p>หากต้องการเลือกหลายไฟล์ ให้กดแป้น CTRL หรือ SHIFT ค้างไว้ขณะเลือก</p>

</body>
</html>

input multiple attributes


multiple แอตทริบิวต์ระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในช่องป้อนข้อมูล





หากต้องการเลือกหลายไฟล์ ให้กดแป้น CTRL หรือ SHIFT ค้างไว้ขณะเลือก

pattern Attribute

 อินพุต pattern แอตทริบิวต์ระบุนิพจน์ทั่วไปที่มีการตรวจสอบค่าของช่องป้อนข้อมูลเมื่อส่งแบบฟอร์ม

pattern แอตทริบิวต์ใช้งานได้กับประเภทอินพุตต่อไปนี้:  ข้อความ วันที่ การค้นหา URL โทรศัพท์ อีเมล และรหัสผ่าน

ตัวอย่าง

ช่องใส่ที่สามารถมีได้เพียงสามตัวอักษร (ไม่มีตัวเลขหรืออักขระพิเศษ):

<!DOCTYPE html>
<html>
<body>

<h1>input pattern attribute</h1>

<p>แอตทริบิวต์รูปแบบระบุนิพจน์ทั่วไปที่มีการตรวจสอบค่าขององค์ประกอบอินพุต</p>

<form action="/action_page.php">
  <label for="country_code">รหัสประเทศ:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="ส่ง">
</form>

<p><strong>หมายเหตุ:</strong> ไม่รองรับแอตทริบิวต์รูปแบบของแท็กอินพุตใน Safari 10 (หรือรุ่นก่อนหน้า)</p>

</body>
</html>

input pattern attribute


แอตทริบิวต์รูปแบบระบุนิพจน์ทั่วไปที่มีการตรวจสอบค่าขององค์ประกอบอินพุต





หมายเหตุ: ไม่รองรับแอตทริบิวต์รูปแบบของแท็กอินพุตใน Safari 10 (หรือรุ่นก่อนหน้า)

 placeholder Attribute

placeholder ใช้ระบุค่าตัวอย่างหรือคำอธิบายสั้นๆ ของรูปแบบที่คาดไว้ ใช้งานได้กับประเภทอินพุตต่อไปนี้: ข้อความ, การค้นหา, url, โทรศัพท์, อีเมล และรหัสผ่าน

ตัวอย่าง

ช่องป้อนข้อมูลที่มีข้อความที่เป็นตัวอย่างอธิบายของช่องข้อมูลนั้นๆ:

<!DOCTYPE html>
<html>
<body>

<h1>The input placeholder attribute</h1>

<p>คำแนะนำสั้น ๆ ที่อธิบายถึงค่าที่คาดไว้ของฟิลด์อินพุต</p>

<form action="/action_page.php">
  <label for="phone">ป้อนหมายเลขโทรศัพท์:</label>
  <input type="tel" id="phone" name="phone" placeholder="081-656-xxx" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

The input placeholder attribute


คำแนะนำสั้น ๆ ที่อธิบายถึงค่าที่คาดไว้ของฟิลด์อินพุต




required Attribute

required แอตทริบิวต์ใช้ระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม

required ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ข้อความ, ค้นหา, url, โทรศัพท์, อีเมล, รหัสผ่าน, ตัวเลือกวันที่, ตัวเลข, ช่องทำเครื่องหมาย, วิทยุ และไฟล์

ตัวอย่าง

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

 <!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>

<p>แอตทริบิวต์ที่จำเป็นระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม.</p>

<form action="/action_page.php">
  <label for="username">บัญชีผู้ใช้งาน:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit" value="ส่ง">
</form>

<p><strong>หมายเหตุ:</strong>required attributeไม่ได้รับการสนับสนุนใน Safari เวอร์ชันก่อนหน้า 10.1</p>

</body>
</html>

The input required attribute


แอตทริบิวต์ที่จำเป็นระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม.



หมายเหตุ:required attributeไม่ได้รับการสนับสนุนใน Safari เวอร์ชันก่อนหน้า 10.1

step Attribute

step แอตทริบิวต์ใช้ระบุช่วงจำนวนตามกฎสำหรับฟิลด์อินพุต

ตัวอย่าง: ถ้า step=”3″ หมายเลขตามกฎอาจเป็น -3, 0, 3, 6 เป็นต้น

เคล็ดลับ:แอตทริบิวต์นี้สามารถใช้ร่วมกับแอตทริบิวต์สูงสุดและต่ำสุดเพื่อสร้างช่วงของค่าตามกฎที่กำหนด

step แอตทริบิวต์ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ตัวเลข ช่วง วันที่ วันที่และเวลาท้องถิ่น เดือน เวลา และสัปดาห์

ตัวอย่าง

ฟิลด์อินพุตที่มีช่วงตัวเลขตามกฎที่ระบุ:

<!DOCTYPE html>
<html>
<body>

<h1>step attribute</h1>

<p>ใช้ระบุช่วงจำนวนตามกฎหมายสำหรับองค์ประกอบอินพุต</p>

<form action="/action_page.php">
  <label for="points">คะแนน:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

step attribute


ใช้ระบุช่วงจำนวนตามกฎหมายสำหรับองค์ประกอบอินพุต


autofocus Attribute

autofocus แอตทริบิวต์ใช้ระบุว่าช่องอินพุตควรได้รับการโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า

ตัวอย่าง

ให้ช่องป้อนข้อมูล “ชื่อจริง” ได้รับโฟกัสโดยอัตโนมัติเมื่อโหลดหน้าเว็บ:

<!DOCTYPE html>
<html>
<body>

<h1>autofocus attribute</h1>

<p>ใช้ระบุว่าช่องป้อนข้อมูลควรได้รับโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า</p>

<form action="/action_page.php">
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

autofocus attribute


ใช้ระบุว่าช่องป้อนข้อมูลควรได้รับโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า







height and width Attributes

height และ width ใช้ระบุความสูงและความกว้างขององค์ประกอบ <input type=”image”>

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

ตัวอย่าง

กำหนดรูปภาพเป็นปุ่มส่งพร้อมใช้แอตทริบิวต์กำหนดความสูงและความกว้าง:

<!DOCTYPE html>
<html>
<body>

<h1>input height and width attributes</h1>

<p>ใช้ระบุความสูงและความกว้างขององค์ประกอบอินพุต type="image"</p>

<form action="/action_page.php">
  <label for="fname">ชื่อ:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">นามสกุล:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>หมายเหตุ:</b>input type="image" จะส่งพิกัด X และ Y ของการคลิกที่เปิดใช้งานปุ่มรูปภาพ</p>

</body>
</html>

input height and width attributes


ใช้ระบุความสูงและความกว้างขององค์ประกอบอินพุต type=”image”






หมายเหตุ:input type=”image” จะส่งพิกัด X และ Y ของการคลิกที่เปิดใช้งานปุ่มรูปภาพ

list Attribute

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

ตัวอย่าง

<input> ที่มีค่าที่กำหนดไว้ล่วงหน้าใน <datalist>:

<!DOCTYPE html>
<html>
<body>

<h1>input list attribute</h1>

<p> list attribute อ้างถึงองค์ประกอบดาต้าลิสต์ที่มีตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบอินพุต.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="ส่ง">
</form>

<p><b>หมายเหตุ:</b>ไม่รองรับแท็ก datalist ใน Safari 12.0 (หรือก่อนหน้า)</p>

</body>
</html>

input list attribute


list attribute อ้างถึงองค์ประกอบดาต้าลิสต์ที่มีตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบอินพุต.



หมายเหตุ:ไม่รองรับแท็ก datalist ใน Safari 12.0 (หรือก่อนหน้า)

autocomplete Attribute

autocompleteระบุว่าฟอร์มหรือฟิลด์อินพุตควรเปิดหรือปิดการเติมข้อความอัตโนมัติ

การเติมข้อความอัตโนมัติทำให้เบราว์เซอร์สามารถคาดเดาค่าได้ เมื่อผู้ใช้เริ่มพิมพ์ข้อมูลในฟิลด์ เบราว์เซอร์ควรแสดงตัวเลือกให้กรอกฟิลด์ ตามค่าที่พิมพ์ก่อนหน้านี้

autocompleteทำงานร่วมกับ ประเภท <form>ต่อไปนี้<input>: ข้อความ, การค้นหา, url, โทรศัพท์, อีเมล, รหัสผ่าน, datepickers, range และ color

ตัวอย่าง

แบบฟอร์ม HTML ที่เปิดและปิดการเติมข้อความอัตโนมัติสำหรับช่องป้อนข้อมูลหนึ่งช่อง:

<!DOCTYPE html>
<html>
<body>

<h1>autocomplete attribute</h1>

<p>แอตทริบิวต์เติมข้อความอัตโนมัติระบุว่าช่องใส่ข้อมูลควรเปิดใช้การเติมข้อความอัตโนมัติหรือไม่</p>

<p>กรอกและส่งแบบฟอร์ม จากนั้นโหลดหน้าซ้ำเพื่อดูว่าการเติมข้อความอัตโนมัติทำงานอย่างไร.</p>

<p>โปรดสังเกตว่าการเติมข้อความอัตโนมัติเป็น "เปิด" สำหรับแบบฟอร์ม แต่ "ปิด" สำหรับฟิลด์อีเมล!</p>

<form action="/action_page.php" autocomplete="on">
  <label for="fname">ชื่อ:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">นามสกุล:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">อีเมล:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="ส่ง">
</form>

</body>
</html>

autocomplete attribute


แอตทริบิวต์เติมข้อความอัตโนมัติระบุว่าช่องใส่ข้อมูลควรเปิดใช้การเติมข้อความอัตโนมัติหรือไม่


กรอกและส่งแบบฟอร์ม จากนั้นโหลดหน้าซ้ำเพื่อดูว่าการเติมข้อความอัตโนมัติทำงานอย่างไร.


โปรดสังเกตว่าการเติมข้อความอัตโนมัติเป็น “เปิด” สำหรับแบบฟอร์ม แต่ “ปิด” สำหรับฟิลด์อีเมล!








< บทเรียนก่อนหน้า
บทเรียนถัดไป >