แอตทริบิวต์การป้อนข้อมูล HTML
บทนี้อธิบายคุณลักษณะต่างๆ สำหรับ<input>องค์ประกอบ HTML
คุณค่าแอตทริบิวต์
แอตทริบิวต์ อินพุตvalueระบุค่าเริ่มต้นสำหรับช่องใส่:
ตัวอย่าง
ช่องป้อนข้อมูลด้วยค่าเริ่มต้น (ค่าเริ่มต้น):
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
แอตทริบิวต์แบบอ่านอย่างเดียว
readonlyแอตทริบิวต์อินพุต ระบุว่าช่องป้อนข้อมูลเป็นแบบอ่านอย่างเดียว
ไม่สามารถแก้ไขช่องป้อนข้อมูลแบบอ่านอย่างเดียวได้ (อย่างไรก็ตาม ผู้ใช้สามารถแท็บ ไฮไลต์ และคัดลอกข้อความจากช่องดังกล่าวได้)
ค่าของฟิลด์อินพุตแบบอ่านอย่างเดียวจะถูกส่งเมื่อส่งแบบฟอร์ม!
ตัวอย่าง
ฟิลด์อินพุตแบบอ่านอย่างเดียว:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
คุณสมบัติผู้พิการ
แอตทริบิวต์ อินพุตdisabledระบุว่าช่องป้อนข้อมูลควรปิดใช้งาน
ช่องป้อนข้อมูลที่ปิดใช้งานใช้ไม่ได้และไม่สามารถคลิกได้
ค่าของฟิลด์อินพุตที่ถูกปิดใช้งานจะไม่ถูกส่งเมื่อส่งแบบฟอร์ม!
ตัวอย่าง
ฟิลด์อินพุตที่ปิดใช้งาน:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
ขนาดแอตทริบิวต์
แอตทริบิวต์ อินพุตsizeระบุความกว้างที่มองเห็นได้เป็นอักขระของช่องป้อนข้อมูล
ค่าเริ่มต้นสำหรับsizeคือ 20
หมายเหตุ:แอตทริบิวต์sizeใช้งานได้กับประเภทการป้อนข้อมูลต่อไปนี้: text, search, tel, url, email และ password
ตัวอย่าง
กำหนดความกว้างสำหรับช่องใส่ข้อมูล:
<form>
<label for="fname">First name:</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">
</form>
แอตทริบิวต์ความยาวสูงสุด
แอตทริบิวต์ อินพุตmaxlengthระบุจำนวนอักขระสูงสุดที่อนุญาตในช่องป้อนข้อมูล
หมายเหตุ:เมื่อmaxlengthตั้งค่า a ฟิลด์ป้อนข้อมูลจะไม่ยอมรับอักขระเกินจำนวนที่ระบุ อย่างไรก็ตาม คุณลักษณะนี้ไม่ได้ให้ข้อเสนอแนะใดๆ ดังนั้น หากคุณต้องการเตือนผู้ใช้ คุณต้องเขียนโค้ด JavaScript
ตัวอย่าง
กำหนดความยาวสูงสุดสำหรับช่องใส่ข้อมูล:
<form>
<label for="fname">First name:</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">
</form>
แอตทริบิวต์ขั้นต่ำและสูงสุด
ข้อมูลเข้าminและmaxแอตทริบิวต์ระบุค่าต่ำสุดและสูงสุดสำหรับช่องป้อนข้อมูล
แอตทริบิวต์minและmaxทำงานกับประเภทอินพุตต่อไปนี้: หมายเลข ช่วง วันที่ วันที่เวลาท้องถิ่น เดือน เวลา และสัปดาห์
เคล็ดลับ:ใช้แอตทริบิวต์ max และ min ร่วมกันเพื่อสร้างช่วงของค่าทางกฎหมาย
ตัวอย่าง
ตั้งค่าวันที่สูงสุด วันที่ต่ำสุด และช่วงของค่าทางกฎหมาย:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
แอตทริบิวต์หลายรายการ
แอตทริบิวต์ อินพุตmultipleระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในช่องป้อนข้อมูล
แอตทริบิวต์multipleทำงานร่วมกับประเภทอินพุตต่อไปนี้: อีเมลและไฟล์
ตัวอย่าง
ฟิลด์อัพโหลดไฟล์ที่ยอมรับหลายค่า:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
รูปแบบแอตทริบิวต์
แอตทริบิวต์ อินพุตpatternระบุนิพจน์ทั่วไปที่ตรวจสอบค่าของฟิลด์อินพุตเมื่อส่งแบบฟอร์ม
แอตทริบิวต์patternทำงานร่วมกับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความ วันที่ ค้นหา url โทรศัพท์ อีเมล และรหัสผ่าน
เคล็ดลับ: ใช้ แอตทริบิวต์ชื่อส่วนกลาง เพื่ออธิบายรูปแบบเพื่อช่วยเหลือผู้ใช้
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับนิพจน์ทั่วไปในบทช่วยสอน JavaScript ของเรา
ตัวอย่าง
ช่องป้อนข้อมูลที่สามารถมีได้เพียงสามตัวอักษร (ไม่มีตัวเลขหรืออักขระพิเศษ):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
แอตทริบิวต์ตัวยึดตำแหน่ง
แอตทริบิวต์ อินพุตplaceholderระบุคำใบ้สั้นๆ ที่อธิบายค่าที่คาดหวังของช่องป้อนข้อมูล (ค่าตัวอย่างหรือคำอธิบายสั้นๆ ของรูปแบบที่คาดไว้)
คำใบ้สั้นๆ จะแสดงในช่องป้อนข้อมูลก่อนที่ผู้ใช้จะป้อนค่า
แอตทริบิวต์placeholderทำงานร่วมกับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความ ค้นหา url โทรศัพท์ อีเมล และรหัสผ่าน
ตัวอย่าง
ช่องป้อนข้อมูลที่มีข้อความที่พัก:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
คุณสมบัติที่จำเป็น
requiredแอตทริบิวต์อินพุต ระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม
แอ็ต ท ริบิว requiredต์ทำงานร่วมกับประเภทอินพุตต่อไปนี้: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
ตัวอย่าง
ช่องป้อนข้อมูลที่จำเป็น:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
แอตทริบิวต์ขั้นตอน
แอตทริบิวต์ อินพุตstepระบุช่วงตัวเลขทางกฎหมายสำหรับช่องป้อนข้อมูล
ตัวอย่าง: ถ้า step="3" ตัวเลขทางกฎหมายอาจเป็น -3, 0, 3, 6 เป็นต้น
เคล็ดลับ:แอตทริบิวต์นี้สามารถใช้ร่วมกับแอตทริบิวต์ max และ min เพื่อสร้างช่วงของค่าทางกฎหมาย
แอตทริบิวต์stepทำงานร่วมกับประเภทอินพุตต่อไปนี้: หมายเลข ช่วง วันที่ datetime-local เดือน เวลา และสัปดาห์
ตัวอย่าง
ช่องใส่ที่มีช่วงตัวเลขทางกฎหมายที่ระบุ:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
หมายเหตุ:ข้อจำกัดการป้อนข้อมูลไม่สามารถป้องกันได้ และ JavaScript มีหลายวิธีในการเพิ่มข้อมูลที่ผิดกฎหมาย ในการจำกัดอินพุตอย่างปลอดภัย ผู้รับ (เซิร์ฟเวอร์) จะต้องตรวจสอบสิ่งนี้ด้วย!
คุณสมบัติออโต้โฟกัส
แอตทริบิวต์ อินพุตautofocusระบุว่าช่องป้อนข้อมูลควรได้รับการโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า
ตัวอย่าง
ให้ช่องป้อนข้อมูล "ชื่อ" ได้รับการโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
คุณสมบัติความสูงและความกว้าง
อินพุตheightและwidthแอตทริบิวต์ระบุความสูงและความกว้างของ<input
type="image">องค์ประกอบ
เคล็ดลับ:ระบุทั้งแอตทริบิวต์ความสูงและความกว้างสำหรับรูปภาพเสมอ หากมีการตั้งค่าความสูงและความกว้าง พื้นที่ที่จำเป็นสำหรับรูปภาพจะถูกสงวนไว้เมื่อโหลดหน้า หากไม่มีแอตทริบิวต์เหล่านี้ เบราว์เซอร์จะไม่ทราบขนาดของรูปภาพ และไม่สามารถจองพื้นที่ที่เหมาะสมได้ ผลที่ได้คือเลย์เอาต์ของหน้าจะเปลี่ยนไประหว่างการโหลด (ในขณะที่โหลดรูปภาพ)
ตัวอย่าง
กำหนดรูปภาพเป็นปุ่มส่ง โดยมีแอตทริบิวต์ความสูงและความกว้าง:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
รายการแอตทริบิวต์
แอตทริบิวต์ อินพุตlistหมายถึง<datalist>องค์ประกอบที่มีตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input>
ตัวอย่าง
<input> องค์ประกอบที่มีค่าที่กำหนดไว้ล่วงหน้าใน <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
คุณสมบัติเติมข้อความอัตโนมัติ
แอตทริบิวต์ อินพุตautocompleteระบุว่าฟอร์มหรือฟิลด์อินพุตควรมีการเปิดหรือปิดการเติมข้อความอัตโนมัติ
การเติมข้อความอัตโนมัติทำให้เบราว์เซอร์สามารถคาดเดาค่าได้ เมื่อผู้ใช้เริ่มพิมพ์ในฟิลด์ เบราว์เซอร์ควรแสดงตัวเลือกเพื่อกรอกข้อมูลในฟิลด์ ตามค่าที่พิมพ์ก่อนหน้านี้
แอตทริบิวต์autocompleteใช้งานได้<form>และประเภทต่อไปนี้<input>: text, search, url, tel, email, password, datepickers, range, and color
ตัวอย่าง
แบบฟอร์ม HTML ที่มีการเปิดและปิดการเติมข้อความอัตโนมัติสำหรับช่องป้อนข้อมูลเดียว:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
เคล็ดลับ:ในบางเบราว์เซอร์ คุณอาจต้องเปิดใช้งานฟังก์ชันเติมข้อความอัตโนมัติเพื่อให้ใช้งานได้ (ดูใน "การตั้งค่า" ในเมนูของเบราว์เซอร์)
แบบฝึกหัด HTML
แบบฟอร์ม HTML และองค์ประกอบอินพุต
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา