HTML Form
HTML Form Tag
User से जानकारी (Information) लेने के लिए HTML <Form> का इस्तेमाल किया जाता हैं l इस जानकारी में फीडबैक, पर्सनल जानकारी, संदेश, शिकायत या अन्य कुछ सुझाव आदि हो सकते हैं l
Syntax-
<form>
<-- some-form-elements -->
</form>
Form Attributes
Action Attribute
इस attribute से आप define कर सकते है की form submit होने के बाद क्या होना चाहिए जैसे form submit करते ही आप thank you का message show कर सकते है या php की कोई script execute कर सकते है।
Example
File Name – sample.php
<form action = "send-data.php">
Method Attribute
इस attribute के द्वारा data store किया जाता है यानी data किस method से होकर जाएगी इस attribute मे define किया जाता है और method attribute मे केवल 2 ही values पास किया जाता है | GET या POST
'get' Method
अगर आप method attribute नहीं देते है तो by default; get method; set हो जाता है |
get method द्वारा submit किये हुए data Web Address पर display होता है |
Example
Save file - sample.html
<form action="send-data.php" method="get">
<input type="text" name="firstname" placeholder="Enter Name"><br />
<input type="text" name="lastname" placeholder="Enter Surame">><br />
<input type="submit" name="submit"><br />
</form>
Save file - send-data.php
<body>
First Name : <?php echo $_GET["firstname"]; ?><br />
Last Name : <?php echo $_GET["lastname"]; ?>
</body>
'post' Method
post method द्वारा submit किया हुआ data web address पर display नहीं होता है |
अगर आप चाहते हो कि User द्वारा दी जानेवाली information; secured हो तो आप 'post' method का इस्तेमाल कर सकते है |
Example
<form action="send-data.php" method="post">
<input type="text" name="firstname" placeholder="Enter Name"><br />
<input type="text" name="lastname" placeholder="Enter Surame">><br />
<input type="submit" name="submit"><br />
</form>
Target Attribute
Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं l
|
Values |
Description |
|
_blank |
Linked webpage नए window पर open होता है | |
|
_self |
Linked webpage same frame पर open होता है | |
|
_parent |
Linked webpage parent frame पर open होता है | |
|
_top |
Linked webpage पूरे window पर open होता है | |
|
Frame Name |
दिए हुए frame name पर linked webpage open होता है | |
Example
Target=”_blank”
<a href="http://www.stechinstitute.com" target="_blank">stechinstitute</a>
target="_self"
Save file - first.html
<html>
<frameset cols="*,*">
<frame src="con4.html">
<frame src="con3.html">
</frameset>
</html>
content1.html
<html>
<body>
<h1>Content 1</h1>
</body>
</html>
Save file - con1.html
<html>
<body>
<h1>Content 1</h1>
</body>
</html>
Save file - con2.html
<html>
<body>
<h1>Content 2</h1>
<h2><a href="http://www.stechinstitute.com" target="_self">stechinstitute</a></h2>
</body>
</html>
Save File - con3.html
<html>
<body>
<h1>Content 3</h1>
</body>
</html>
Save file - con4.html
<html>
<frameset cols="*,*">
<frame src="content1.html">
<frame src="content2.html">
</frameset>
</html>
target="_parent"
Copy code same to self and set target=parent.
target="_top"
Copy code same to self and set target=top.
target="framename"
Copy code same to self and set target=name of frame where you defined of frame.
enctype Attribute
Data को server पर send करने से पहले उसे browser द्वारा encode किया जाता है | data को किस प्रकार से encode करना है, उस value को enctype attribute पर दिया जाता है |
|
application/x-www-form-urlencoded |
अगर enctype attribute दिया नहीं जाता है तो ये उसकी default value होती है | इसे Simple form के लिए इसका इस्तेमाल किया जाता है | |
|
mutlipart/form-data |
अगर आप binary प्रकार का data upload करना चाहते हो तो इस value का इस्तेमाल कर सकते है | For Example, images, external files |
HTML Input Tag
User से डाटा लेने के लिए input tag का इस्तेमाल होता है | जिस तरह का डाटा लेना है उसे input tag में type attribute से बताया जाता है |
Input Attributes
|
ATTRIBUTES |
VALUE |
DESCRIPTION |
|
Type |
number |
मोबाइल
नंबर, ज़िप
कोड
जैसे
इनपुट
नंबर
डिफाइन
करते
हैं
। |
|
|
HTML form input टाइप ईमेल का उपयोग ईमेल आदि को भरने के लिए किया जाता हैं l email value से दिया जानेवाला input ये validate होता है | अगर आप गलत email format; type करते हो और submit करने की कोशिश करते हो तो HTML द्वारा बताया जाता है कि आपके email में '@' होना जरुरी है | |
|
|
radio |
Radio से हम form में radio button बना सकते है जिसका इस्तेमाल बहुत सारे option में से किसी एक को select करने के लिए होता है l |
|
|
checkbox |
चेक बॉक्स , बॉक्स की तरह होते हैं जिस पर क्लिक करने पर एक टिक आ जाता हैं । बहुत सारे ऑप्शन के लिए हम चेकबॉक्स का उपयोग भी कर सकते हैं । |
|
|
Password |
password से हम form-control के अंदर password लिख सकते है, यह यूजर को दिखाई नही देता है l |
|
|
Button |
button को create करने के लिए 'button' value का इस्तेमाल किया जाता है | |
|
|
submit |
form को submit करने के लिए submit type का इस्तेमाल किया जाता है | |
|
|
reset |
Form पर user द्वारा fill किये हुए data को reset करने के लिए 'reset' ये value दी जाती है | reset ये एक button होता है | |
|
|
Hidden |
'hidden' value का इस्तेमाल करने पर input पर दी हुई value ये user को display नहीं होती है | |
|
|
date |
date का वर्णन करने के लिए 'date' value का इस्तेमाल किया जाता है | |
|
|
month |
month का वर्णन करने के लिए 'month' value का इस्तेमाल किया जाता है l |
|
|
Datetime-local |
date और time का वर्णन करने के लिए 'datetime-local' value का इस्तेमाल किया जाता है | |
|
|
time |
time का वर्णन करने के लिए 'time' value का इस्तेमाल किया जाता है | |
|
|
Range |
input tag के 'range' value ये अपने range के हिसाब से number को set करने की अनुमति देता है | |
|
|
Week |
'week' ये value week number और उसके year का वर्णन करता है | |
|
|
Color |
'color' value से color का वर्णन किया जाता है | color ये by default; black होता है | |
|
|
Search |
'search' value का इस्तेमाल search bar में किया जाता है | 'text' और 'search' ये value एक जैसी होती है, लेकिन 'search' value के input पर 'X' sign से type किये हुए text को reset किया जा सकता है l |
|
|
url |
'url' value से दिया जानेवाला input ये validate होता है | अगर आप invalid URL देते हो तो आपको सूचित किया जाता है कि, आप URL enter करे | |
|
|
|
tel |
टेलीफोन नंबर को डिफाइन करने के लिए इसका यूज़ किया जाता है l |
|
|
|
|
|
Name |
Text |
इस attribute का use एक particular नाम देने के लिए किया जाता है बाद में इसी नाम को server पर values store करने के लिए use किया जाता है। |
|
value |
text |
इस attribute से <input> tag पर default value set की जाती है | |
|
size |
In number |
इस attribute पर <input> tag की size को number में दिया जाता है | |
|
min |
In number |
इस attribute पर minimum value को number में दिया जाता है | |
|
max |
In number |
इस attribute पर maximum value को number में दिया जाता है | |
|
minlength |
In number |
इस attribute पर minimum length को number में दिया जाता है | |
|
maxlength |
In number |
इस attribute पर maximum length को number में दिया जाता है | |
|
disabled |
|
इस attribute से <input> tag को disable किया जाता है | |
|
placeholder |
Text |
इस attribute से <input> और <textarea> element के लिए simple text hint दी जाती है | |
|
required |
|
<input> tag पर अगर इस attribute को दिया जाता है तो user द्वारा उस पर value देना अनिवार्य होता है | |
|
step |
1,2,3… |
step attribute से <input> tag पर step दिया जाता है | ये कोई भी positive value हो सकती है | |
|
pattern |
[0-9]{10}
|
User द्वारा दिए जानेवाले value के लिए regular expression दिया जाता है | इसका इस्तेमाल validation के लिए किया जाता है | |
|
readonly |
readonly |
इस attribute के साथ दिया हुआ <input> tag सिर्फ read किया जा सकता है, लेकिन उसपर write नहीं किया जा सकता है | |
|
autofocus |
|
इस attribute के साथ दिया हुआ <input> tag page को load होने पर ही user द्वारा input देने की अनुमति देता है | |
HTML <Textarea> element
Form में multiple lines का input देना के लिए <textarea> element का इस्तेमाल किया जाता है |
Example
<form>
<textarea rows="6" cols="30">
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
</textarea>
</form>
<Select> Element
<select> element ये <option> element का parent element है |
Drop-down list को create करने के लिए इस element का इस्तेमाल किया जाता है |
<option> Element
<option> ये <select> और <datalist> element का child element होता है |
<select> list के हर item को <option> से define किया जाता है |
<select> element में दिए हुआ <option> element close किया जाता है, लेकिन <datalist> में दिए हुआ <option> element को अलग से close नहीं किया जाता है |
Example
<form>
<input list="languages">
Select Language <br />
<datalist id="languages">
<option value="C">
<option value="C++">
<option value="Java">
<option value="Python">
</datalist>
</form>
<optgroup> Element
<optgroup> ये <select> का child और <option> का parent element होता है |
<optgroup> element से <option> के items का group किया जाता है और उसे label दिया जाता है |
Example<form>
<select>
<optgroup label="Programming">
<option value="C">C Programming</option>
<option value="C++">C++ Programming</option>
<option value="Java">Core Java</option>
<option value="Python">Python</option>
</optgroup>
<optgroup label="Web Development">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
</optgroup>
</select>
</form>
<fieldset> Element
<fieldset> element से संबंधित form elements का group करने के लिए इस्तेमाल किया जाता है | grouped किये हुए elements के चारों ओर से box को draw किया जाता है |
Example
<form>
<fieldset>
<legend>Student Info</legend>
Student Name : <input type="text" name="name"><br />
Roll No : <input type="text" name="rollno"><br />
Address : <input type="text" name="address"><br />
</fieldset>
<input type="submit" name="sumbit">
</form>
<legend> Element
<legend> element से <fieldset> element के लिए caption दिया जाता है |
Example
<form>
<fieldset>
<legend>Student Info</legend>
Student Name : <input type="text" name="name"><br />
Roll No : <input type="text" name="rollno"><br />
Address : <input type="text" name="address"><br />
</fieldset>
<input type="submit" name="sumbit">
</form>
<datalist> Element
<datalist> ये element <select> element की तरह ही होता है, लेकिन datalist के id attribute के साथ <input> element के list attribute का संबंध जोड़ा जाता है |
<datalist> element से user option को select भी कर सकता है और input भी दे सकता है |
Example
<form>
<input list="languages">
Select Language <br />
<datalist id="languages">
<option value="C">
<option value="C++">
<option value="Java">
<option value="Python">
</datalist>
</form>
<button> Element
button को create करने के लिए <button> element का इस्तेमाल किया जाता है |
आप button element पर content के रूप में कोई भी text या images का उपयोग कर सकते है |
Example
<form>
<button onclick="alert('Button Clicked')">Click Me</button>
<button onclick="alert('You clicked on image')"><img src="https://www.stechinstitute.com/images/stech.png"></button>
</form>
STUDENT REGISTRATION FORM CREATE IN HTML
<html>
<head>
<title>Form Tag Example</title>
</head>
<body>
<form>
First name:<input type="text" /><br><br>
Last Name:<input type="text" /><br><br>
Password:<input type="password" /><br><br>
Gender:<input type="radio" name="gender">Male</input>
<input type="radio" name="gender">FeMale</input><br><br>
Id:<input type="checkbox" name="ids">Driving Card</input>
<input type="checkbox" name="ids">Pancard</input>
<input type="checkbox" name="ids">Passport</input>
<input type="checkbox" name="ids">VoterCard</input>
<br><br>
State: <select>
<option>Select State</option>
<option>Haryana</option>
<option>Chhatisgarh</option>
<option>UP</option>
<option>Bihar</option>
<option>Rajasthan</option>
</select>
<br><br>
Comment: <textarea></textarea><br><br>
<input type="button" value="Submit" /> <input type="reset" />
</form>
</body>
</html>
Post a Comment