การเรียนรู้ HTML ตอนที่ 29: การใช้คุณลักษณะแบบอ่านอย่างเดียวปิดใช้งานและเป้าหมายในรูปแบบ HTML

คุณรู้แท็ก <input> พร้อมอยู่แล้วฟังก์ชั่นในบทความก่อนหน้า แท็กนี้ใช้เพื่อสร้างองค์ประกอบที่ใช้เพื่อขอข้อมูลจากผู้ใช้ โดยทั่วไปแท็กนี้อาจอยู่ในรูปแบบของกล่องข้อความปุ่มกล่องเลือกและอื่น ๆ

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

คุณลักษณะแบบอ่านอย่างเดียวและปิดใช้งาน

โดยทั่วไปแอตทริบิวต์จะอ่านได้อย่างเดียวและปิดใช้งานใช้เพื่อทำให้กล่องข้อความใช้ไม่ได้ สำหรับวัตถุประสงค์บางประการคุณต้องใช้แอตทริบิวต์ทั้งสองนี้เพื่อไม่สามารถเปลี่ยนกล่องข้อความได้ตัวอย่างเช่นกล่องข้อความที่มีค่าเริ่มต้น ต่อไปนี้เป็นคำอธิบายของคุณลักษณะทั้งสองนี้

1. แอตทริบิวต์แบบอ่านอย่างเดียว

แอตทริบิวต์ readonly ใช้เพื่อระบุว่าองค์ประกอบ <input> สามารถอ่านได้อย่างเดียวเท่านั้นโดยไม่สามารถแก้ไขได้ ต่อไปนี้เป็นตัวอย่างของการเขียนและการใช้คุณลักษณะอ่านอย่างเดียวในรูปแบบ HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Readonly pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" readonly> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

หลังจากรันโค้ดข้างต้นในเบราว์เซอร์มันจะปรากฏดังแสดงด้านล่าง:

ในคอลัมน์ รหัสสินค้าคุณไม่สามารถส่งอินพุต data เนื่องจากคอลัมน์ได้รับแอตทริบิวต์อ่านอย่างเดียวดังนั้นคอลัมน์จึงสามารถอ่านได้อย่างเดียวเท่านั้นและไม่สามารถแก้ไขหรือเปลี่ยนแปลงได้

2. ปิดใช้งานคุณสมบัติ

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

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Disabled pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" disabled> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

หลังจากรันโค้ดข้างต้นในเบราว์เซอร์มันจะปรากฏดังแสดงด้านล่าง:

ความแตกต่างในคุณสมบัติอ่านอย่างเดียวและปิดการใช้งาน

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

แอตทริบิวต์อ่านอย่างเดียว: ค่า รหัสสินค้า ส่งไปยังเซิร์ฟเวอร์

ปิดการใช้งานคุณลักษณะ: ค่า รหัสสินค้า ไม่ได้ส่งไปยังเซิร์ฟเวอร์

3. คุณสมบัติเป้าหมาย

แอตทริบิวต์ target ใช้เพื่อกำหนดสถานที่ของการตอบกลับที่ได้รับหลังจากส่งแบบฟอร์มสำเร็จ ค่าของแอตทริบิวต์เป้าหมายคือ _blank, _self, _parent และ _top การใช้แอตทริบิวต์เป้าหมายนี้ฉันอธิบายในบทความวิธีสร้างลิงก์ใน HTML

ต่อไปนี้เป็นตัวอย่างของรหัสการเขียนและการใช้แอตทริบิวต์ target ในรูปแบบ HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Target di HTML Forms</title>
</head>
<body>
<form action="proses_input.php" method="get" target="_blank">
Nama Depan: <input type="text" name="ndepan"><br>
Nama Belakang: <input type="text" name="nbelakang"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

หลังจากรันโค้ดข้างต้นในเบราว์เซอร์มันจะปรากฏดังแสดงด้านล่าง:

เมื่อคุณคลิกปุ่มส่งผลลัพธ์ของการตอบกลับที่ได้รับจะปรากฏบนแท็บใหม่

นั่นคือเนื้อหาทั้งหมดที่ใช้คุณลักษณะแบบอ่านอย่างเดียวกำหนดเป้าหมายและปิดใช้งานในรูปแบบ HTML เยี่ยมชมบล็อกนี้ต่อไปเพราะสื่อการเรียนรู้ HTML สำหรับผู้เริ่มต้นจะได้รับการอัปเดตอยู่เสมอ

</ p>

อ่านเพิ่มเติม: