HTML <input> size एट्रिब्यूट

<input> एलिमेंट का size एट्रिब्यूट

<input> एलिमेंट का size एट्रिब्यूट इनपुट फ़ील्ड की दृश्य चौड़ाई (वर्णों की संख्या में) सेट करता है। जितनी अधिक चौड़ाई होगी, टेक्स्टबॉक्स उतना ही चौड़ा होगा।

आप निम्न इनपुट टाइप के लिए size एट्रिब्यूट सेट कर सकते हैं: text, search, email, password, tel, url।

वाक्यविन्यास (Syntax)

<input size="size_num">

ऊपर, size_num वह संख्या है जिसमें आपको इनपुट की चौड़ाई सेट करनी है। डिफ़ॉल्ट 20 है।

उदाहरण

<!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>

आउटपुट

फॉर्म में अलग-अलग चौड़ाई वाले फ़ील्ड दिखाई देंगे:

कोड विश्लेषण

उपरोक्त उदाहरण में, हमारे पास एक बटन के साथ कुछ फ़ील्ड हैं:

<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>

नोट

• size वर्णों की अनुमानित संख्या है (सटीक पिक्सेल चौड़ाई नहीं; फ़ॉन्ट पर निर्भर करता है)।
• सटीक पिक्सेल चौड़ाई के लिए CSS width प्रॉपर्टी का उपयोग करें: style="width: 300px;"
• size और CSS width दोनों सेट हैं तो CSS प्राथमिकता लेता है।