Working with Forms in HTML:
किसी web page में इनफार्मेशन को इनपुट करने के लिए form का उपयोग किया जाता है |
फॉर्म में विभिन्न प्रकार के fields
का प्रयोग करते हैं जैसे textbox,
button, checkbox, radio button, आदि | फॉर्म fields वे ऑब्जेक्ट होते हैं जो
यूजर को इनफार्मेशन इनपुट करने, इनफार्मेशन सबमिट करने, डाटा को उपयोग करने, आदि हेतु
अनुमति प्रदान करते हैं | जब web
user Submit Button में क्लिक करता है तब
फॉर्म का कंटेंट सामान्यत: एक प्रोग्राम से संवाद (communicate) करता है जो server
पर run हो रहा होता है | फॉर्म में इनपुट किया गया इनफार्मेशन किसी HTML
file, CGI Script (Common Gateway Interfaces), PERL script, an e-mail Address या किसी अन्य को भेजा जा
सकता है |
<FORM>
Tag: इस टैग का उपयोग web page
में form बनाने के लिए किया जाता है
| सामान्यतः इसके अन्दर <INPUT> tags का उपयोग किया जाता है | इसमें start और end टैग दोनों की आवश्यकता होती है तथा इसे सभी web
browsers के द्वारा सपोर्ट
किया जाता है |
Attribute
|
Specification
and Value
|
ACTION
|
डाटा कहाँ भेजना है, यह तय किया जाता है:
MAILTO (for email ID)
HTTP (for web page or website)
Ex: ACTION=“MAILTO:mycollege@gmail.com”
|
METHOD
|
डाटा server में कैसे भेजना है, यह तय किया जाता है | यह या तो POST
होगा या GET:
POST (for less amount of
data)
GET (for large amount of
data)
Ex: METHOD=“POST”
|
NAME
|
Name
of the form
|
<INPUT>
Tag: इस टैग का उपयोग फॉर्म में विभिन्न फॉर्म fields
(elements) बनाने के लिए किया जाता है | इस एक टैग के माध्यम से
“TYPE” attribute के द्वारा textbox,
button, checkbox, radio button, आदि बनाये जा सकते हैं |
इसका उपयोग <FORM> टैग के अन्दर किया जाता है
| इसमें केंवल start टैग की आवश्यकता होती है तथा इसे सभी web
browsers के द्वारा सपोर्ट
किया जाता है |
Ex: <INPUT TYPE=“TEXT”>
Attribute
|
Specification
and Value
|
TYPE
|
यह फॉर्म field का प्रकार
बताता है जो कि निम्न प्रकार के होंगे :
i)
TEXT
ii)
PASSWORD
iii)
RADIO (Option Button)
iv)
CHECKBOX
v)
SUBMIT
vi)
RESET
vii)
HIDDEN
|
VALUE
|
इससे फॉर्म field की default
value सेट कर सकते हैं |
|
NAME
|
इससे फॉर्म field का नाम सेट
कर सकते हैं |
|
SIZE
|
इससे फॉर्म field का width
सेट कर सकते हैं , जिससे किसी textbox में कितने text characater (करैक्टर) display हो, यह बताया जाता है |
|
MAXLENGHT
|
इससे किसी textbox में
कितने text characater (करैक्टर) इनपुट करना है , यह सेट कर
सकते हैं |
|
Example-1:
Write codes for following output:
<!
FORM1.HTML>
<HTML>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FORM
ACTION="mailto:mycollege@gmail.com" METHOD="POST">
Enter User Name
& Password : <BR>
User Name =
<INPUT TYPE="TEXT" SIZE="8" MAXLENGTH="15" NAME="UN"> <BR>
Password =
<INPUT TYPE="PASSWORD" SIZE="8" MAXLENGTH="8" NAME="PW"> <BR>
<INPUT TYPE="SUBMIT"
NAME="SB">
<INPUT TYPE="RESET" NAME="RB">
</FORM>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
Example-2:
Write codes for following output:
<!
FORM2.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FONT SIZE="5">
<FORM
ACTION="mailto:mycollege@gmail.com" METHOD="POST">
STUDENT INFORMATION <BR>
Student Name =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15" NAME="SN"> <BR>
Qualification =
<INPUT TYPE="CHECKBOX" NAME="CB1" VALUE="12th"> HSSC
<INPUT TYPE="CHECKBOX" NAME="CB2" VALUE="UG"> GRATUATION
<INPUT TYPE="CHECKBOX" NAME="CB3" VALUE="PG"> PG <BR>
Eduaction Field =
<INPUT TYPE="RADIO" NAME="RB1" VALUE="BCA"> Computer Science
<INPUT TYPE="RADIO" NAME="RB1" VALUE="BE"> Engineering
<INPUT TYPE="RADIO" NAME="RB1" VALUE="MBBS"> Medical <BR>
City =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15" NAME="CN" VALUE="RAIPUR"> <BR>
<INPUT
TYPE="HIDDEN" NAME="HF" VALUE="INDIA">
<INPUT TYPE="SUBMIT"
VALUE="SUBMIT"
NAME="SB">
<INPUT TYPE="RESET" VALUE="RESET" NAME="RB">
</FORM>
</FONT>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
Drop-Down menu
या Select Menu:
à
Drop-Down या Select Menu एक ऐसा फॉर्म field है जिसमे बहुत
से इनफार्मेशन (डाटा) स्टोर या display कर सकते हैं, परन्तु उनमे से सिर्फ एक डाटा
को select कर सकते हैं |
à
यह VB या VB.net में Combo-Box के सामान होता है |
à
इसे बनाने के लिये <SELECT>
तथा <OPTION>
tags का उपयोग किया जाता है |
<SELECT>
tag: इसका उपयोग web page में Drop-Down
menu बनाने के लिए किया जाता है | Drop-Down
मेनू में menu "items" जोड़ने के लिए <OPTION>
tags का उपयोग किया जाता है | इसमें Start और end टैग दोनों की आवश्यकता होती है तथा इसे सभी web
browsers के द्वारा सपोर्ट
किया जाता है |
Attribute
|
Specification
and Value
|
NAME
|
Name
of the Drop-Down menu.
|
Example:
<SELECT NAME="EF">
<OPTION> Computer
Science
<OPTION> Engineering
<OPTION> Medical
</SELECT>
Example:
Write codes for following output:
<!
FORM3.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FONT
SIZE="5">
<FORM ACTION="mailto:mycollege@gmail.com" METHOD="POST">
STUDENT INFORMATION <BR>
Student Name =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15"
NAME="SN"> <BR>
Education Field =
<SELECT NAME="EF">
<OPTION>
Computer Science
<OPTION>
Engineering
<OPTION>
Medical
</SELECT>
<BR>
<INPUT TYPE="SUBMIT"
VALUE="SUBMIT"
NAME="SB">
<INPUT TYPE="RESET" VALUE="RESET" NAME="RB">
</FORM>
</FONT>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
<TEXTAREA> tag:
à
किसी textbox में सिर्फ एक line का text इनपुट कर सकते हैं,
परन्तु बहुत सारे lines इनपुट करने के लिए "Text Area"
field की आवश्यकता होती है
| सामान्यतः इसका उपयोग विभिन्न OS या Applications में
comment box के रूप में किया जाता है |
à
"Text Area" में एक से अधिक line
लिखने के लिये “Enter key” का उपयोग किया जाता है |
à
सामान्यतः इसका उपयोग comments
लिखने के लिए किया जाता है |
à
इसमें Start
और end
टैग दोनों की
आवश्यकता होती है तथा इसे सभी web browsers के द्वारा सपोर्ट किया जाता है |
Attribute
|
Specification
and Value
|
COLS
|
TextArea में number
of columns सेट किया जाता है |
|
ROWS
|
TextArea में number
of rows (lines) सेट किया जाता है |
|
NAME
|
Name
of Text-Area
|
Example:
Write codes for following output:
<!
FORM4.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FONT
SIZE="5">
<FORM
ACTION="mailto:mycollege@gmail.com" METHOD="POST">
STUDENT INFORMATION <BR>
Student Name =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15"
NAME="SN" TABINDEX="1"> <BR>
Education Field =
<SELECT NAME="EF" TABINDEX="2">
<OPTION>
Computer Science
<OPTION>
Engineering
<OPTION>
Medical
</SELECT>
<BR>
Write something about
your interest and knowledge: <BR>
<TEXTAREA COLS="30" ROWS="8" NAME="TA"
TABINDEX="3">
</TEXTAREA> <BR>
<INPUT TYPE="SUBMIT"
VALUE="SUBMIT"
NAME="SB"
TABINDEX="4">
<INPUT TYPE="RESET" VALUE="RESET" NAME="RB"
TABINDEX="5">
</FORM>
</FONT>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
Video Link:
No comments:
Post a Comment