บทเรียนนี้จะอธิบายแอตทริบิวต์ต่างๆ สำหรับแท็ก <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
แอตทริบิวต์เติมข้อความอัตโนมัติระบุว่าช่องใส่ข้อมูลควรเปิดใช้การเติมข้อความอัตโนมัติหรือไม่
กรอกและส่งแบบฟอร์ม จากนั้นโหลดหน้าซ้ำเพื่อดูว่าการเติมข้อความอัตโนมัติทำงานอย่างไร.
โปรดสังเกตว่าการเติมข้อความอัตโนมัติเป็น “เปิด” สำหรับแบบฟอร์ม แต่ “ปิด” สำหรับฟิลด์อีเมล!