इस लेख मे हम HTML input Attributes के बारे मे detail मे जानेंगे।
The Value Attributes
इस attributes की मदद से <input> tag पर default value set की जाती है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The input value attribute</h2> <p>इस tag पर default value set की जाती है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="tom"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The readonly Attributes
इस attributes कि मदद से आप input field को सिर्फ read कर सकते है।
इस attributes की मदद से आप input field को modified या change नहीं कर सकते।
जब आप form submit करते है तब input field की read only value sent हो जाती है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The readonly attribute</h2> <p>इस attributes कि मदद से आप input field को सिर्फ read कर सकते है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="tom" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The disabled Attribute
इस attributes की मदद से input field को disabled किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The disabled attribute</h2> <p>इस attributes की मदद से input field को disabled किया जाता है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="tom" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The size Attributes
इस attributes की मदद से input field की width की specifies कर सकते है।
इसकी value number मे दी जाती है। इसकी default value 20 होती है।
Size attributes text, search, tel, url, email, and password इस input types के लिए इस्तेमाल किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The size attribute</h2> <p>इस attributes की मदद से input field की width की specifies कर सकते है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The maxlength Attributes
इस attributes की मदद से input field मे maximum कितने characters को allowed करना है वो specified कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The disabled attribute</h2> <p>इस attributes की मदद से input field को disabled किया जाता है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">Last name:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The min and max Attributes
इस attributes की मदद से हम input field के लिए minimum and maximum value को define कर सकते है।
min and max attributes को हम number, range, date, datetime-local, month, time and week के साथ define कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The min and max attributes</h2> <p>इस attributes की मदद से हम input field के लिए minimum and maximum value को define कर सकते है।</p> <form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The Multiple Attributes
इस multiple attributes की मदद से user input field मे एक से ज्यादा value को enter कर सकता है।
इस attributes को हम email and file input type के साथ use कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The multiple attributes</h2> <p>इस multiple attributes की मदद से user input field मे एक से ज्यादा value को enter कर सकता है।</p> <form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The Placeholder Attributes
Placeholder attributes की मदद से simple text hint दी जाती है।
Placeholder attribute input types जैसे की text, search, url, tel, email, and password के साथ work करता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The Placeholder attribute</h2> <p>Placeholder attributes की मदद से simple text hint दी जाती है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" placeholder="enter your name"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The required Attributes
Required Attributes यह दर्शाता है की input field मे Value अवश्य देनी पड़ती है इसके बिना वह form को submit नहीं कर सकता।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The required attribute</h2> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" required><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The step Attributes
step attribute input field के लिये legal number के intervals को specifies करता है।
example के लिये अगर step=”3″ है तो legal number …-3, 0, 3, 6.. है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The input step attribute</h2> <form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> <input type="submit" value="Submit"> </form> </body> </html>
The autofocus Attributes
जब page load होता है तब autofocus attribute की मदद से input field automatically focus रहता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The input value attribute</h2> <p>इस tag पर default value set की जाती है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="jhonson"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
The height and width Attributes
height और width attributes की मदद से <input type = “image”> element की height और width को specify कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>The input value attribute</h2> <p>इस tag पर default value set की जाती है।</p> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="tom"><br> <input type="image" src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="Submit" width="75" height="75"> <input type="submit" value="Submit"> </form> </body> </html>
The list Attributes
इसका इस्तेमाल <input> मे किया जाता है जो data list के pre define options को दर्शाता है।
उदाहरण
<html>
<body>
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
</body>
</html>