HTML form input elements examples

Post Views : 97

HTML form Elements

हेलो दोस्तों इस पोस्ट tutorial में हम form elements के बारे में जानेगे HTML form में कई सारे elements का इस्तेमाल किया जाता है और ये सभी form element का इस्तेमाल अलग-अलग हेतु से किया जाता है|
form elements जैसे की निचे दिए गए है|

• <form>
• <lable>
• <input>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <outgroup>

<form> Element

form element HTML document में form को define करता है form element के <form>opening tag और उसका </form>closing tag होता है| और <form> के opening tag और </form>closing tag के बीच में दूसरे कई सारे elements को लिखा जाता है|

<form>
  <label>Enter First Name</label>
  <input type="text" name="fname">
  <label>Male</label>
  <input type="radio" name="gender" id="gender">
  <input type="submit" name="submit" id="submit">
</form>

output

<label> Element

label element form elements के लिए label define करता है <label>element यूजर को form के input element के बारे में instruction बताता है जिसकी user input field आसानी से समज सके और fillup कर सके.

<label>Enter the label</label>

<input> Element

HTML form में सबसे महत्वपूर्ण element है वह <input> element है| HTML <input> element form में user की information को form के data के रूप में collect करने लिए form में इस्तेमाल होता है|
<input> element का type attribute से user के अलग-अलग type के data को collect कर सकते है|

<form>
 <input type="text" name="name" placeholder="enter name">
 <input type="radio" name="gender"> male
 <input type="date" name="date">
 <input type="color" name="color"> select color
</form>

output

<textarea> Element

<textarea> element multi-line plain text को लिखने के लिए अनुमति देता है,अगर user को एक से ज्यादा यानि multi-line text लिखना हो तो वह इस <textarea>element के जरिये लिख सकते है| <textarea>element के rows attribute text area के line number निश्चित करता है और cols attribute text area के width निश्चित करता है|

<textarea name="textarea" rows="15" cols="30">
 text area line nomber 1
 text area line nomber 2
 text area line nomber 3
 text area line nomber 4
</textarea>

output

<select> Element

HTML <select>element html form में drop-down list create करने के लिए इस्तेमाल होता है और drop-down की हर एक value <option> element के साथ सेट की जाती है|

<select name="select">
 <option>html</option>
 <option>css</option>
 <option>javascript</option>
 <option>jquery</option>
 <option>php</option>
</select>

output

<button> Element

HTML <button>element जिस पर click करके action को performe कर सकते है जैसे की अगर form को submit करने के लिए clickable <button>element का इस्तेमाल होता है|

<button type="submit" class="submit" id="submit"> Click here!</button>

output

<fieldset> Element

HTML <fieldset>element का इस्तेमाल web form में कई control के साथ <label> का group बनाते है| जिसे से form के चारो और से एक border सेट हो जाती है जिससे form label के साथ एक group में दिखाई देता है|

<fieldset>element के अंदर इस्तेमाल होनेवाला <legend> element <fieldset> element के लिए caption defines करता है

<form>
  <fieldset>
    <legend>Choose your favorite language</legend>

    <input type="radio" id="php" name="php">
    <label for="php">php</label><br/>

    <input type="radio" id="html" name="html">
    <label for="html">html</label><br/>

    <input type="radio" id="java" name="java">
    <label for="java">java</label>
  </fieldset>
</form>

output

<datalist> Element

HTML <datalist> element input element के लिए निश्चित (specifies) pre-defines list option निश्चित करता है| pre-defines option drop-down list में show होते है|

<form>
 <input list="technology">
 <datalist id="technology"> 
   <option value="php">
   <option value="html">
   <option value="jquery">
 </datalist>
</form>

output

<optgroup> Element

HTML <optgroup> element <select element>में option का group create करता है|

<select id="optgroup">
    <optgroup label="php framework">
        <option>codeigniter</option>
        <option>laravel</option>
    </optgroup>
    <optgroup label="php cms">
        <option>wordpress</option>
        <option>magento</option>
    </optgroup>
</select>

output