Form-Tag-Label-Text-area

Paper 2-Internet &Web design

Unit I
Unit II
Unit III
Unit IV
Unit V

Back
Internet-Unit-2
Next

HTML Form-Tag

<textarea> Tag

जब form में user से एक से अधिक पंक्तियों (Multi-line) में data input करवाने की आवश्यकता होती है, तब <textarea> tag का उपयोग किया जाता है।
यह एक multi-line text input control होता है, जिसमें user कई पंक्तियों में text लिख सकता है।

<textarea> में rows (पंक्तियाँ) तथा cols (स्तंभ) निर्धारित किए जा सकते हैं।

Attributes

Attributeउपयोग
rowsकितनी पंक्तियों में text दिखाई देगा
colsएक पंक्ति में कितने characters दिखाई देंगे
nameServer को data भेजने के लिए
idJavaScript तथा CSS के लिए

महत्वपूर्ण बिंदु

  • <textarea> एक container (paired) tag है।
  • इसका closing tag </textarea> होता है।
  • Opening तथा closing tag के बीच लिखा गया text default text के रूप में दिखाई देता है।

Example

<textarea id="message" name="message" rows="4" cols="50">
यहाँ अपना संदेश लिखें
</textarea>

<label> Tag

HTML में <label> tag का उपयोग form के input elements के नाम या पहचान (Caption) प्रदर्शित करने के लिए किया जाता है।
यह user को यह समझने में सहायता करता है कि उसे input field में कौन-सी जानकारी भरनी है।

<label> tag form की usability तथा accessibility को बेहतर बनाता है।

for Attribute

for attribute का उपयोग <label> को किसी विशेष input field से जोड़ने के लिए किया जाता है।

for attribute की value, संबंधित input element के id attribute के समान होनी चाहिए।

Advantage

जब user label पर click करता है, तब उससे संबंधित input field स्वतः active (focus) हो जाती है।

Example

<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">

महत्वपूर्ण बिंदु

  • <label> एक paired/container tag है।
  • for attribute, input के id attribute से जुड़ता है।
  • यह accessibility को बेहतर बनाता है।
  • Screen readers के लिए उपयोगी होता है।

Without for Attribute

<label>
Username:
<input type="text" name="username">
</label>

Short Difference (Exam Point)

Attributeउपयोग
forLabel को input field से जोड़ने के लिए
idJavaScript, CSS तथा Label के लिए
nameServer को data भेजने के लिए

Input Form Tag

HTML Form बनाने के लिए <input> tag का उपयोग किया जाता है।
<input> tag द्वारा form में विभिन्न प्रकार के input controls बनाए जाते हैं।
इन controls का प्रकार type attribute द्वारा निर्धारित किया जाता है।

1. <input type="text">

जब user से केवल एक पंक्ति (Single-line) में text input करवाना हो, तब text field का उपयोग किया जाता है।

इसके लिए <input> tag के type attribute की value "text" रखी जाती है।

Example

<input type="text" name="username">

2. <input type="password">

यह भी एक प्रकार का single-line text input control है।
इसमें user द्वारा टाइप किए गए characters छिपे हुए (****) रूप में दिखाई देते हैं, जिससे password सुरक्षित रहता है।

Example

<input type="password" name="user_password">

3. <input type="radio">

Radio Button का उपयोग तब किया जाता है, जब user को कई विकल्पों में से केवल एक विकल्प चुनना हो।

सभी radio buttons का name attribute समान रखा जाता है, जिससे वे एक group के रूप में कार्य करते हैं।

Example

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

4. <input type="checkbox">

Checkbox का उपयोग तब किया जाता है, जब user को एक से अधिक विकल्प चुनने की अनुमति देनी हो।

हर checkbox स्वतंत्र रूप से select या deselect किया जा सकता है।

Example

<input type="checkbox" name="course" value="html"> HTML
<input type="checkbox" name="course" value="css"> CSS
<input type="checkbox" name="course" value="js"> JavaScript

5. <input type="submit">

Submit button का उपयोग form में भरे गए data को server पर भेजने के लिए किया जाता है।

जब user submit button पर click करता है, तब form का data action attribute में दिए गए page पर भेज दिया जाता है।

Example

<input type="submit" value="Submit">

Example 1

<!DOCTYPE html>
   <html>
       <body>
           <h2>The Method Attribute</h2>
           <p>This form will be submitted using the POST method:</p>
          <form action="/action_page.php" target="_blank" method="post">
            <label for="fname">First Name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <label for="lname">Last Name:</label><br>
            <input type="text" id="lname" name="lname" value="Doe"><br><br>
            <input type="submit" value="Submit">
          </form>
            <p>
               Form values address bar में दिखाई नहीं देंगी क्योंकि POST method का उपयोग किया गया है।
            </p>
      </body>
</html>

Example 2

<!DOCTYPE html>
<html>
   <body>
      <h1>Form with Checkboxes</h1>
      <form action="/action_page.php" method="get">
         <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
         <label for="vehicle1">I have a bike</label><br>
         <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
         <label for="vehicle2">I have a car</label><br>
         <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" checked>
         <label for="vehicle3">I have a boat</label><br><br>
         <input type="submit" value="Submit">
      </form>
    </body>
</html>