บทเรียนนี้จะอธิบาย Attribute ต่างๆ สำหรับแท็ก <input> ใน HTML
value Attribute
Attribute value ใช้ระบุค่าเริ่มต้นสำหรับฟิลด์อินพุต:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>Input value Attribute</h1>
<p>Attribute ใช้ระบุค่าเริ่มต้นสำหรับฟิลด์อินพุต:</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>readonly Attribute
Attribute readonly ระบุว่าฟิลด์อินพุตเป็นแบบอ่านอย่างเดียว
ฟิลด์อินพุตแบบอ่านอย่างเดียวไม่สามารถแก้ไขได้ (อย่างไรก็ตาม ผู้ใช้สามารถแท็บไปยังฟิลด์นั้น เน้นสี และคัดลอกข้อความจากนั้น)
ค่าของฟิลด์อินพุตแบบอ่านอย่างเดียวจะถูกส่งเมื่อทำการส่งแบบฟอร์ม
ตัวอย่าง
ป้อนข้อมูลแบบอ่านอย่างเดียว:
<!DOCTYPE html>
<html>
<body>
<h1>Input readonly Attribute</h1>
<p>Attribute แบบอ่านอย่างเดียวระบุว่าฟิลด์อินพุตควรเป็นแบบอ่านอย่างเดียว (ไม่สามารถเปลี่ยนแปลงได้):</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>disabled Attribute
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>size Attribute
Attribute size ใช้ระบุความกว้างในช่องที่ไว้กรอกตัวอักษร
หมายเหตุ: size Attribute ใช้งานได้กับประเภทอินพุตต่อไปนี้: text, search, tel, url, email และ password
ตัวอย่าง
กำหนดความกว้างของช่องใส่ข้อความ:
<!DOCTYPE html>
<html>
<body>
<h1>Input size Attribute</h1>
<p>Attribute 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>maxlength Attribute
maxlength ใช้ระบุจำนวนอักษระสูงสุดที่อนุญาตให้ใช้ในช่องอินพุต
หมายเหตุ: เมื่อ maxlength ตั้งค่าฟิลด์อินพุตจะไม่ยอมรับอักษรเกินจำนวนที่ระบุ อย่างไรก็ตาม Attribute นี้ไม่ได้ให้ข้อเสนอแนะใดๆ ดังนั้น หากคุณต้องการแจ้งเตือนผู้ใช้ คุณต้องเขียนโค้ด JavaScript
ตัวอย่าง
กำหนดความยาวสูงสุดสำหรับช่องใส่ข้อความ:
<!DOCTYPE html>
<html>
<body>
<h1>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>min and max Attributes
Attribute min และ max ระบุค่าต่ำสุดและสูงสุดสำหรับฟิลด์อินพุต
min และ max ทำงานร่วมกับประเภทอินพุตต่อไปนี้: number, range, date, datetime-local, month, time และ week
เคล็ดลับ: ใช้ Attribute min และ max ร่วมกันเพื่อสร้างช่วงของค่าตามกฎ
ตัวอย่าง
กำหนดวันที่สูงสุด วันที่ต่ำสุด และช่วงของค่าทางกฎหมาย:
<!DOCTYPE html>
<html>
<body>
<h1>Input min และ max Attribute</h1>
<p>min และ max Attribute ระบุค่าต่ำสุดและสูงสุดสำหรับองค์ประกอบอินพุต</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>multiple Attribute
Attribute multiple ใช้ระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในช่องอินพุต
multiple ทำงานร่วมกับประเภทอินพุต: อีเมล และไฟล์
ตัวอย่าง
ฟิลด์อัปโหลดไฟล์ที่ยอมรับหลายค่า:
<!DOCTYPE html>
<html>
<body>
<h1>Input multiple Attributes</h1>
<p>multiple Attribute ระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในช่องป้อนข้อมูล</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>pattern Attribute
Attribute pattern ระบุนิพจน์ทั่วไปที่มีการตรวจสอบค่าของช่องป้อนข้อมูลเมื่อส่งแบบฟอร์ม
pattern ใช้งานได้กับประเภทอินพุตต่อไปนี้: ข้อความ วันที่ การค้นหา URL โทรศัพท์ อีเมล และรหัสผ่าน
ตัวอย่าง
ช่องใส่ที่สามารถมีได้เพียงสามตัวอักษร (ไม่มีตัวเลขหรืออักขระพิเศษ):
<!DOCTYPE html>
<html>
<body>
<h1>Input pattern Attribute</h1>
<p>Attribute รูปแบบระบุนิพจน์ทั่วไปที่มีการตรวจสอบค่าขององค์ประกอบอินพุต</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>placeholder Attribute
placeholder ใช้ระบุค่าตัวอย่างหรือคำอธิบายสั้นๆ ของรูปแบบที่คาดไว้ ใช้งานได้กับประเภทอินพุตต่อไปนี้: ข้อความ, การค้นหา, URL, โทรศัพท์, อีเมล และรหัสผ่าน
ตัวอย่าง
ช่องป้อนข้อมูลที่มีข้อความที่เป็นตัวอย่างอธิบายของช่องข้อมูลนั้นๆ :
<!DOCTYPE html>
<html>
<body>
<h1>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>
required Attribute
Attribute required ใช้ระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม
required ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ข้อความ, ค้นหา, URL, โทรศัพท์, อีเมล, รหัสผ่าน, ตัวเลือกวันที่, ตัวเลข, ช่องทำเครื่องหมาย, วิทยุ และไฟล์
ตัวอย่าง
ช่องป้อนข้อมูลที่จำเป็น:
<!DOCTYPE html>
<html>
<body>
<h1>Input required Attribute</h1>
<p>Attribute ที่จำเป็นระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม</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>step Attribute
Attribute step ใช้ระบุช่วงจำนวนตามกฎสำหรับฟิลด์อินพุต
ตัวอย่าง: ถ้า step=”3″ หมายเลขตามกฎอาจเป็น -3, 0, 3, 6 เป็นต้น
เคล็ดลับ: Attribute นี้สามารถใช้ร่วมกับ Attribute สูงสุดและต่ำสุดเพื่อสร้างช่วงของค่าตามกฎที่กำหนด
Attribute 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>autofocus Attribute
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>height and width Attributes
height และ width ใช้ระบุความสูงและความกว้างขององค์ประกอบ <input type=”image”>
เคล็ดลับ: ระบุทั้ง Attribute ความสูงและความกว้างสำหรับรูปภาพเสมอ
หากมีการตั้งค่าความสูงและความกว้าง พื้นที่ที่จำเป็นสำหรับรูปภาพจะถูกสงวนไว้เมื่อโหลดเพจ
หากไม่มี Attribute เหล่านี้ เบราว์เซอร์จะไม่ทราบขนาดของรูปภาพ และไม่สามารถจองพื้นที่ที่เหมาะสมให้กับรูปภาพได้
ผลที่ได้คือเค้าโครงหน้าจะเปลี่ยนระหว่างการโหลด (ในขณะที่โหลดรูปภาพ)
ตัวอย่าง
กำหนดรูปภาพเป็นปุ่มส่งพร้อมใช้แอตทริบิวต์กำหนดความสูงและความกว้าง:
<!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="images/img_submit.png" alt="Submit" width="48" height="48">
</form>
<p><b>หมายเหตุ:</b>input type="image" จะส่งพิกัด X และ Y ของการคลิกที่เปิดใช้งานปุ่มรูปภาพ</p>
</body>
</html>list Attribute
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="Edge">
<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>autocomplete Attribute
autocomplete ระบุว่าฟอร์มหรือฟิลด์อินพุตควรเปิดหรือปิดการเติมข้อความอัตโนมัติ
การเติมข้อความอัตโนมัติทำให้เบราว์เซอร์สามารถคาดเดาค่าได้ เมื่อผู้ใช้เริ่มพิมพ์ข้อมูลในฟิลด์ เบราว์เซอร์ควรแสดงตัวเลือกให้กรอกฟิลด์ ตามค่าที่พิมพ์ก่อนหน้านี้
autocomplete ทำงานร่วมกับ ประเภท <form> ต่อไปนี้ <input> : ข้อความ, การค้นหา, URL, โทรศัพท์, อีเมล, รหัสผ่าน, datepickers, range และ color
ตัวอย่าง
แบบฟอร์ม HTML ที่เปิดและปิดการเติมข้อความอัตโนมัติสำหรับช่องป้อนข้อมูลหนึ่งช่อง:
<!DOCTYPE html>
<html>
<body>
<h1>autocomplete Attribute</h1>
<p>Attribute เติมข้อความอัตโนมัติระบุว่าช่องใส่ข้อมูลควรเปิดใช้การเติมข้อความอัตโนมัติหรือไม่</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>