Text Input Element: The most important User Interface Form Control

Text Input Element: हम एक HTML Form पर User से Input प्राप्‍त करने के लिए विभिन्‍न प्रकार के Controls का प्रयोग कर सकते हैं। Form पर प्रयोग किए जाने वाले इन Controls को Form Controls कहा जाता है। अब हम Form पर प्रयोग किए जा सकने वाले विभिन्‍न Controls के बारे में जानेंगे:

Text Inputs

जब User कुछ Text Input करना चाहता है, तब Text Input को प्राप्‍त करने के लिए हमें Text Input Control का प्रयोग करना होता है। मुख्‍यत: तीन तरह के Text Input Controls होते हैं, जो निम्‍नानुसार हैं:

• Single-Line Text Input Control

जब User को थोडे Texts ही Input करने होते हैं, तब हम इस तरह के Text Input Control का प्रयोग करते हैं। उदाहरण के लिए एक Registration Form में User का नाम Input करने के लिए हम इस प्रकार के Text Input Control का प्रयोग करते हैं।

• Password Input Control

ये भी एक Single-Line Input Control ही होता है, लेकिन इस Input Control में User जो कुछ भी Type करता है, वह एक Password की तरह दिखाई देता है, यानी सभी Characters “*” के रूप में दिखाई देते हैं। इस प्रकार के Text Input Control का प्रयोग सामान्‍यत: Login Form में Password Input करने के लिए किया जाता है।

• Multi-Line Text Input Control

जब User को कुछ ज्‍यादा Texts Input करने होते हैं, तब हम इस तरह के Text Input Control का प्रयोग करते हैं। उदाहरण के लिए एक Registration Form में User का Address Input करने के लिए हम इस प्रकार के Text Input Control का प्रयोग करते हैं। इस तरह का Text Input Control बनाने के लिए हमें <textarea> Element का प्रयोग करना होता है और इसमें Rows व Columns के रूप में हमें Input किए जाने वाले कुल Characters की संख्‍या को तय करना होता है।

Single-Line Text Input Controls

Single-Line Text Input Control Create करने के लिए हमें <input> Element का प्रयोग करना होता है, जिसके type Attribute में हमें Value के रूप में “text” लिखना होता है। इसे उपयोग में लेने की प्रक्रिया को हम निम्‍न उदाहरण द्वारा समझ सकते हैं:

<form action="http://www.example.com/search.php" method="get" name="frmSearch">
 Search:
 <input type="text" name="txtSearch" value="Search for" size="20" maxlength="64” />
 <input type="submit" value="Submit" />
</form>

इस <input> Element के साथ हम निम्‍न Attributes का प्रयोग कर सकते हैं:

type Attribute

इस Attribute द्वारा हम ये तय करते हैं कि हम किस तरह का Input Control Create कर रहे हैं। यदि हम Single Line Text Input Control Create करना चाहते हैं, तो हमें इस Attribute में मान के रूप में “text” को Specify करना होता है। इस Attribute को Specify करना जरूरी होता है, क्‍योंकि हम <input> Element को अन्‍य Controls जैसे कि Radio Buttons व  Check Boxes आदि Create करने के लिए भी उपयोग में लेते हैं और इस Attribute के मान को Specify करके हम ये बताते हैं कि हम किस तरह के मान को Hold करने के लिए Control को उपयोग में लेना चाह रहे हैं।

name Attribute

किसी Control को Web Server पर Uniquely Identify करने के लिए हम Control के साथ इस Attribute का प्रयोग करके Control को एक नाम प्रदान करते हैं, जिसे Scripting File में उपयोग में लिया जा सकता है।

value Attribute

किसी Control में हम जो Initial Value Place करना चाहते हैं, उस Value को हम इस Attribute में Specify करते हैं। इस Attribute में Specify किया गया मान हमारे Web Page के Web Browser में  Load होते ही Control में दिखाई देने लगता है।

size Attribute

इस Attribute में एक Integer मान का प्रयोग करके हम Web Page पर दिखाई देने वाले Single Line Text Input Control की Size या Width को तय करते हैं। ये Size Characters की संख्‍या को Represent करता है। उदाहरण के लिए यदि User अधिकतम 20 ऐसे Characters Input कर सकता है, जो कि Web Page पर दिखाई दे, तो हमें इस Attribute में 20 लिखना होता है।

maxlength Attribute

ये Attribute इस बात को Specify करता है कि User अधिकतम कितने Characters इस Single Line Text Input Control में Input कर सकता है। जब User Control के लिए Set की गई अधिकतम संख्‍या तक के Characters Input कर देता है, उसके बाद वह चाहे जितनी बार Keyboard के Buttons को Press करे, लेकिन वे सभी Characters Ignore कर दिए जाते हैं।

जब एक <input> Element के type Attribute में मान के रूप में “text” होता है, तब हम इस Element में कुछ और प्रकार के Attributes को भी उपयोग में ले सकते हैं, जो कि निम्‍नानुसार हैं:

• हम सभी प्रकार के Universal Attributes को उपयोग में ले सकते हैं।
• हम इसके साथ disabled, readonly, tabindex व accesskey Attributes को भी उपयोग में ले सकते हैं।

Password Input Control

यदि हम Sensitive Data जैसे कि Credit Card Number अथवा Password  को Collect करना चाहते हैं, तो हम इस प्रकार के Input Control का प्रयोग कर सकते हैं। इस प्रकार के Input Type में User द्वारा Input किए जाने वाले Characters एक तरह के Mask से ढक जाते हैं व Input किए जाने वाले सभी Characters एक Dot, Space या Star के रूप में दिखाई देते हैं। Password Input Control को भी Single Line Input Control की तरह ही Create किया जाता है, जिसे हम निम्‍न उदाहरण द्वारा समझ सकते हैं:

<form action="http://www.example.com/login.asp" method="post">
 Username:
 <input type="text" name="txtUsername" value="" size="20" maxlength="20" />
 <br />
 Password:
 <input type="password" name="pwdPassword" value="" size="20" maxlength="20" />
 <input type="submit" value="Submit" />
 </form>

Multi-Line Text Input Control

जब हमें एक से ज्‍यादा Liles का Text Input प्राप्‍त करने के लिए Web Page पर Space बनाना होता है, तब हम Multi-line Text Input Control का प्रयोग करते हैं। इस Control में हम Rows व Columns की संख्‍या द्वारा ये तय करते हैं, कि हमें कितने बडे Text Area की जरूरत है, साथ ही Multiline Text Input Control बनाने के लिए हमें <textarea> Element को उपयोग में लेना होता है। इसे हम निम्‍न उदाहरण द्वारा समझ सकते हैं:

<form action="http://www.example.org/comment.asp" method="post">
 Please tell us what you think of the site and then click submit:<br />
 <textarea name="txtComment" rows="5" cols="50">
 Enter your comment here.
 </textarea>
 <br />
 <input type="submit" value="Submit" />
</form>

<textarea> Element का प्रयोग करने पर एक ऐसी जगह बनती है, जहां User काफी Texts Type कर सकता है। इस Element में हम निम्‍न Attributes का प्रयोग कर सकते हैं:

name Attribute

इस Attribute में हम Control का नाम Specify करते हैं, जिसका प्रयोग Web Server पनर भेजे जाने वाले name/value Pair में किया जाता है।

rows Attribute

इस Attribute में हम एक Integer मान द्वारा ये Specify करते हैं, कि हमें कितने Rows का  Control Create करना है। यहां हम जो संख्‍या लिखते हैं, उससे Control की Height तय होती है।

cols Attribute

इस Attribute में हम एक Integer मान द्वारा ये Specify करते हैं, कि हम हर Row में कुल कितने Characters लिख सकते हैं। यहां हम जो संख्‍या लिखते हैं, उससे Control की Width तय होती है।

<textarea> Element में हम सभी तरह के Universal Attributes, User Interface Attributes, disabled, readonly, tabindex व accesskey Attributes का प्रयोग कर सकते हैं।

जब भी User इस Text Area Control में Text Type करता है, Row के अन्‍त पर पहुंचने पर हमारा Text स्‍वयं ही अगली Row में ठीक उसी तरह से जिस तरह से Wrap हो जाता है, जिस तरह से किसी Word Processor में होता है। (Text Input Element)