Artikel Terbaru

HTML 5 Input Attributes

HTML 5 New Input Attributes in Hindi


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>


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



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 करता है। 





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 करता है।





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 करता है।







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 करता है।





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 करता है।





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 करता है।






formtarget 

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

यह attribute <form> 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 करता है।







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 करता है।






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 करता है।






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 करता है।








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 करता है।








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 करता है।

Post a Comment

0 Comments