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

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

แอตทริบิวท์ size ขององค์ประกอบ <input> ใช้สำหรับตั้งค่าความกว้างของ input ยิ่งความกว้างมาก ยิ่งได้ textbox ที่กว้างขึ้น คุณสามารถตั้งค่าแอตทริบิวท์ size สำหรับประเภท input ต่อไปนี้: text, search, email, password, tel และ url

รูปแบบการใช้งานมีดังนี้:

<input size="size_num">

โดย size_num คือความกว้างของ input ที่คุณต้องการตั้งค่าเป็นตัวเลข ค่าเริ่มต้นคือ 20

ตัวอย่าง

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

ผลลัพธ์

ในตัวอย่างข้างต้น เรามีฟิลด์บางส่วนพร้อมปุ่ม:

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

ตอนนี้ สมมติเราต้องการ textbox ใหญ่กว่า นั่นคือความกว้างมากขึ้น สำหรับนั้น เราใช้แอตทริบิวท์ size เพื่อตั้งค่าความกว้างเป็นตัวเลข:

<input type="text" name="id" placeholder="ป้อน UserId ที่นี่..." size="25" required>