HTML <input> ขนาดแอตทริบิวต์

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

ต่อไปนี้เป็นไวยากรณ์ -

<input size="size_num">

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

ให้เราดูตัวอย่างการใช้แอตทริบิวต์ size ขององค์ประกอบ -

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

ผลลัพธ์

HTML input ขนาดแอตทริบิวต์

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

<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>

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

<input type="text" name="id" placeholder="Enter UserId here..." size = "25" required>

HTML ขนาดแอตทริบิวต์

ตัวอย่าง

ผลลัพธ์