แอตทริบิวท์ width ของ <input> ใน HTML

แอตทริบิวท์ width ของ <input> ใน HTML

แอตทริบิวท์ width ขององค์ประกอบ <input> ใช้ได้เฉพาะกับรูปภาพ และช่วยให้คุณตั้งค่าความกว้างของภาพที่เพิ่มเข้ามาโดยใช้:

<input type="image">

แอตทริบิวท์ width ถูกนำมาใช้ใน HTML5 และทำหน้าที่เป็นปุ่มส่ง (submit button) รูปแบบการใช้งานมีดังนี้:

<input width="pixels">

โดย width แทนความกว้างในพิกเซล

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>สมัครสมาชิก</h2>
  <form action="" method="get">
    ID - <input type="text" name="id" placeholder="ป้อน UserId ที่นี่..." size="25"><br>
    รหัสผ่าน - <input type="password" name="pwd" placeholder="ป้อนรหัสผ่านที่นี่..."><br>
    วันเกิด - <input type="date" name="dob"><br>
    โทรศัพท์ - <input type="tel" name="tel" placeholder="ป้อนเบอร์มือถือที่นี่..."><br>
    อีเมล - <input type="email" name="email" placeholder="ป้อนอีเมลที่นี่..." size="35"><br><br>
    <input type="image" src="go.jpg" alt="Submit" width="120" height="60">
  </form>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เรามีฟอร์มพร้อมปุ่มที่เราเพิ่มภาพ:

<form action="" method="get">
  ID - <input type="text" name="id" placeholder="ป้อน UserId ที่นี่..." size="25"><br>
  รหัสผ่าน - <input type="password" name="pwd" placeholder="ป้อนรหัสผ่านที่นี่..."><br>
  วันเกิด - <input type="date" name="dob"><br>
  โทรศัพท์ - <input type="tel" name="tel" placeholder="ป้อนเบอร์มือถือที่นี่..."><br>
  อีเมล - <input type="email" name="email" placeholder="ป้อนอีเมลที่นี่..." size="35"><br><br>
  <input type="image" src="go.jpg" alt="Submit" width="120" height="60">
</form>

ภาพสำหรับปุ่มถูกเพิ่มด้วยการควบคุมฟอร์ม input type image:

<input type="image" src="go.jpg" alt="Submit" width="120" height="60">

แอตทริบิวท์ <input> width ใช้สำหรับตั้งค่าความกว้างของภาพที่ตั้งค่าไว้