HTML5 New Input Attributes

Introduction to HTML5 New Input Attributes

नए input types के अलावा HTML5 में कुछ नए input attributes भी introduce किये गए है। Input attributes वह attributes होते है जो <input> tag के साथ use किये जाते है। अभी तक HTML में निचे दिए गए input attributes available थे।

  • value
  • readonly
  • disabled
  • size
  • maxlength

HTML5 में introduce किये गए नए input attributes की list निचे दी जा रही है।

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height
  • width
  • list
  • min
  • max
  • mulitple
  • pattern
  • placeholder
  • required
  • step

Various HTML5 New Input Attributes

निचे HTML5 में introduce किये गए नए input attributes को उदाहरण सहित समझाया जा रहा है।

autocomplete

कई browsers पुरानी information के आधार पर input types को स्वयं ही fill कर देते है। जिसे autocomplete करना कहा जाता है। यह एक feature माना जाता है क्योंकि इससे user को सहूलियत होती है।

लेकिन कई बार पुरानी information outdated हो सकती है। ये जरुरी था की इस feature को web designers अपने अनुसार use कर सके।

इसलिए एक नया input attribute provide किया गया है जिससे आप इस behaviour को control कर सकते है। नए autocomplete attribute द्वारा आप किसी input type के लिए autocomplete feature को on या off कर सकते है।

इस attribute को आप <form> tag में भी define कर सकते है। ऐसा करने से उस form के सभी input types को आपके द्वारा define की गयी setting control करेगी और आप चाहे तो specific input types पर भी इसे use कर सकते है।

जब आप autocomplete attribute किसी specific input type पर apply करते है तो वह <form> tag के autocomplete attribute को override करता है।

autocomplete attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>autocomplet Demo</title>
</head>
<body>

<form>
First Name : <input type="text" name="FirstName" autocomplete="on"> <br /> <br />
Last Name :<input type="text" name="LastName" autocomplete="on"> <br /> <br />
Email : <input type="email" name="email_Id" autocomplete="off"> <br /> <br />
<input type="submit">
</form>

</body>
</html>

autofocus

Webpage load होने के बाद किसी particular input filed को focus में लाने के लिए आप उसमे autofocus attribute को define कर सकते है। ऐसा करने से page load होते की cursor उस input field में show होता है।

autofocus attribute का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>autofocus Demo</title>
</head>
<body>

<form>
Name : <input type="text" name="myName" autofocus> <br /> <br />
Email : <input type="email" name="myEmail"> <br /> <br />
<input type="submit">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 autofocus attribute

form

यदि आप किसी input type को <form> tag से बाहर define कर रहे है तो form attribute के द्वारा आप ये specify कर सकते है की वो input type किस form से belong करता है। इस attribute की value उस form की id होती है जिससे input type belong करता है।

form attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>form Demo</title>
</head>
<body>

<form id="myForm">
<input type="text" name="myName"> <br /> <br />
<input type="submit">
</form>

<h2>Below textbox belongs to above form</h2>
<input type="email" name="myEmail" form="myForm">

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 form in Hindi

formaction

formaction attribute द्वारा आप उस file का URL specify करते है जो form submit होने पर input filed को process करेगा। यह attribute <form> element में define किये जाने वाले action attribute को override कर देता है। इस attribute को केवल submit और image input type के साथ use किया जाता है।

formaction को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>formaction Demo</title>
</head>
<body>

<form action="formHandle.php">
Name : <input type="text" name="Name"> <br /> <br />
Email : <input type="text" name="Email"> <br /> <br />
<input type="submit" value="Submit">
<input type="submit" value="Submit Differently!" formaction="formHandle2.php">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 formaction attribute

formenctype

जब form submit हो तो किस प्रकार की encoding use की जाए ये define करने के लिए formenctype attribute use किया जाता है। यह attribute सिर्फ उन्हीं forms के साथ work करता है जिनका method post होता है।

यह attribute भी submit और image input के साथ कार्य करता है। यह attribute <form> element में define किये गए enctype attribute को override करता है।

formenctype attribute का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>formenctype Demo</title>
</head>
<body>

<form action="formhandle.php" method="post">
Name : <input type="text" name="Name"> <br />
Email : <input type="email" name="Email"> <br />
<input type="submit">
<input type="submit" formenctype="multipart/form-data" value="Submit using different encoding...">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 formenctype attribute in Hindi

formmethod

यदि आप किसी particular input type के लिए different HTTP method define करना चाहते है तो इसके लिए आप formmethod attribute use कर सकते है। यह attribute <form> element में define किये गए method attribute को override करता है। यह attribute submit और image input type के साथ use किया जाता है।

formmethod attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>formmethod Demo</title>
</head>

<body>

<form action="formhandle1.php" method="post">
Name : <input type="text" name="myName"> <br /> <br />
Email : <input type="text" name="myEmail"> <br /> <br />
<input type="submit">
<input type="submit" value="Submit using GET Method" formaction="formhandle2.php" formmethod="get">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 formmethod attribute in Hindi

formnovalidate

यदि आप चाहते है की submit होने पर किसी particular input type को validate नहीं किया जाए तो इसके लिए आप उसमे formnovalidate attribute define कर सकते है। यह attribute <form> element के novalidate attribute को override करता है। इसे submit type में define किया जाता है।

formnovalidate attribute का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>formnovalidate Demo</title>
</head>
<body>

<form>
Name : <input type="text" name="myName"> <br /> <br />
Email : <input type="email" name="myEmail"> <br /> <br />
<input type="submit" value="Submit with Validation">
<input type="submit" value="Submit without Validation" formnovalidate>
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 formnovalidate attribute in Hindi

formtarget

किसी form को submit करने के बाद उसका response कँहा display किया जाएगा यह formtarget attribute द्वारा define किया जाता है। उदाहरण के लिए यदि आप response नयी window में show करना चाहते है तो इसके लिए _blank value define करते है।

यह attribute

element के target attribute को override करता है। इस attribute को submit और image input types के साथ use किया जाता है।

formtarget attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>formtarget Demo</title>
</head>
<body>

<form>
Name : <input type="text" name="myName"> <br />
Email : <input type="Email" name="myEmail"> <br /> <br />
<input type="submit" value="Open result here..."> <input type="submit" formtarget="_blank" value="Open Result in new Window">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML formtarget attribute in Hindi

height

यह attribute image input type की height define करने के लिए use किया जाता है।

width

यह attribute image input type की width define करने के लिए use किया जाता है।

list

किसी input type में <datalist> element की id define करने के लिए आप list attribute use करते है। <datalist> element द्वारा किसी input element के साथ predefined options की list attach की जाती है।

list attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>list Demo</title>
</head>

<body>
<h2>Search for a topic below</h2>

<form>
<input type="search" name="bhtSearch" list="mySearchList">
<input type="submit">

<datalist id="mySearchList">
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</datalist>

</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 list attribute in Hindi

min

किसी input type के लिए minimum value निर्धारित करने के लिए min attribute का प्रयोग किया जाता है।

max

किसी input type की maximum value निर्धारित करने के लिए max attribute define किया जाता है।

multiple

User को multiple values input करना allow करने के लिए multiple attribute use किया जाता है। यह attribute file और email input type के साथ use किया जाता है।

multiple attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>multiple Demo</title>
</head>

<body>

<form>
<h2>multiple Input Attribute Demo</h2>
<input type="file" name="profilePic" multiple> <br /> <br />
<input type="submit" value="Upload!"
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 multiple input attribute in Hindi

pattern

किसी input type की value को यदि आप किसी pattern के द्वारा check करना चाहते है तो इसके लिए आप regular expression को इसी attribute द्वारा define करते है। यह attribute text, search, url, tel, email और password input types के साथ use किया जाता है।

pattern attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>pattern Demo</title>
</head>

<body>

<form action="formHandle.php" method="post">
Name : <input type="text" name="myName"> <br /> <br />
User Name : <input type="text" name="myUserName" pattern="[A-Za-z0-9]"> <br /> <br />
<input type="submit">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 pattern attribute in Hindi

placeholder

User को input की जाने वाली value का hint देने के लिए आप placeholder attribute use कर सकते है। इस attribute की value placeholder में पहले से ही show होती है। जैसे ही user click करता है वह value disappear हो जाती है। यह attribute text, search, url, tel, email और password input types के साथ use किया जाता है।

placeholder attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>placeholder Example</title>
</head>

<body>

<form>
<h2>Subscribe to our weekly newsletter</h2>
Email : <input type="email" name="myEmail" placeholder="Write your email here..."> <br /> <br />
<input type="submit" Value="Subscribe">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 placeholder attribute in Hindi

required

कई बार ऐसा हो सकता है की कोई user बिना किसी input filed को value pass किये ही form submit कर दे। ऐसे में आपको पूर्ण जानकारी प्राप्त नहीं होगी। Form submit करने से पूर्व किसी particular input को fill करने के लिए आप user को force कर सकते है। ऐसा आप required attribute द्वारा करते है।

required attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>required Demo</title>
</head>

<body>

<form action="formHandle.php">
Name : <input type="text" name="Name" required> <br />
Age : <input type="number" name="Age"> <br />
<input type="submit">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 required attribute in Hindi

step

Input की जाने वाली value के लिए legal intervals define करने के लिए आप step attribute को use कर सकते है। उदाहरण के लिए यदि आप step attribute की value 2 define करते है और min attribute को 0 और max attribute 10 define करते है तो 2 4 6 8 10 valid values मानी जायेगी जो user enter कर सकता है।

step attribute को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>step Demo</title>
</head>

<body>

<h2> Enter a multiple of 2 between 0 and 10 </h2>
<form>
<input type="number" name="Multiple" step="2" min="0" max="10"> <br /> <br />
<input type="submit">
</form>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML5 step attribute in Hindi

Related Posts