HTML फॉर्म

HTML फॉर्म विभिन्न प्रकार के उपयोगकर्ता के इनपुट को संग्रहित करने के लिए इस्तेमाल किया जाता है।

<form> एलीमेंट

HTML फॉर्म उपयोगकर्ता के इनपुट को संग्रहित करने के लिए इस्तेमाल किया जाता है।

<form> एलीमेंट HTML फॉर्म को परिभाषित करता है:

उदाहरण

<form>
 .
form elements
 .
</form>

HTML फॉर्म शामिलफॉर्म एलीमेंट।

फॉर्म एलीमेंट विभिन्न प्रकार के input एलीमेंट, चेकबॉक्स, रेडियो बटन, सबमिट बटन आदि को कहते हैं।

<input> एलीमेंट

<input> एलीमेंट सबसे महत्वपूर्णफॉर्म एलीमेंट।

<input> एलीमेंट कई प्रकार के हैं, विभिन्न type एट्रिब्यूट

इस चैप्टर में इस्तेमाल किए गए टाइप:

टाइप वर्णन
text सामान्य टैक्स्ट इनपुट को परिभाषित करता है
radio रेडियो इनपुट (एक विकल्प को चुनना) को परिभाषित करता है
submit सबमिट बटन (सबमिट फॉर्म) को परिभाषित करता है

टिप्पणी:आप इस ट्यूटोरियल में बाद में इनपुट टाइप के बारे में अधिक जानेंगे।

टैक्स्ट इनपुट

<input type="text"> परिभाषितटैक्स्ट इनपुटके एकल पंक्ति इनपुट फील्ड:

उदाहरण

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

आप खुद सबसे पहले प्रयोग करें

ब्राउज़र में यह ऐसा दिखाई देता है:

पहला नाम:


अंतिम नाम:

टिप्पणी:फॉर्म स्वयं दिखाई नहीं देता है। यह ध्यान दें कि टैक्स्ट फील्ड की डिफॉल्ट चैरेक्टर विधि 20 है।

रेडियो बटन इनपुट

<input type="radio"> परिभाषितरेडियो बटन।

रेडियो बटन उपयोगकर्ता को सीमित संख्या के विकल्पों में से एक को चुनने की अनुमति देता है:

उदाहरण

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

आप खुद सबसे पहले प्रयोग करें

रेडियो बटन ब्राउज़र में ऐसा दिखाई देता है:

Male

Female

सबमिट बटन

<input type="submit"> प्रयोग के लिए परिभाषितफॉर्म हैंडलर（form-handler）सबमिटफॉर्म के बटन।

फॉर्म हैंडलर आमतौर पर, इनपुट डाटा को संसाधित करने के लिए स्क्रिप्ट वाला सर्वर पृष्ठ है।

फॉर्म हैंडलर फॉर्म के action एट्रिब्यूट में निर्दिष्ट:

उदाहरण

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

आप खुद सबसे पहले प्रयोग करें

ब्राउज़र में यह ऐसा दिखाई देता है:

पहला नाम:


अंतिम नाम:


Action एट्रिब्यूट

action एट्रिब्यूटसबमिट फॉर्म के समय कार्यक्रम को परिभाषित करता है।

सर्वर को फॉर्म सबमिट करने का आम तरीका सबमिट बटन का उपयोग करना है।

आमतौर पर, फॉर्म वेब सर्वर पर एक वेब पृष्ठ पर सबमिट किया जाता है।

इस उदाहरण में, एक सर्वर स्क्रिप्ट को निर्दिष्ट किया गया है जो सबमिटेड फॉर्म को संसाधित करे:

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

或：

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

टिप्पणी:GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段：

उदाहरण

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

आप खुद सबसे पहले प्रयोग करें

फॉर्म डाटा को <fieldset> के द्वारा समझाता है

<fieldset> एलिमेंट फॉर्म में संबंधित डाटा को समझाता है

<legend> एलिमेंट <fieldset> एलिमेंट को शीर्षक के लिए परिभाषित करता है。

उदाहरण

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

आप खुद सबसे पहले प्रयोग करें

इस HTML कोड ब्राउज़र में इस तरह दिखाई देता है:

व्यक्तिगत जानकारी:
पहला नाम:


अंतिम नाम:


HTML Form गुण

HTML <form> एलीमेंट, सभी संभाव्य गुण सेट किया है, ऐसा है:

उदाहरण

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

नीचे, <form> गुणों की सूची है:

गुण वर्णन
accept-charset सबमिट किए गए फॉर्म में उपयोग की जाने वाली चारक्टर सेट को निर्धारित करें (मूलभूत: पृष्ठ की चारक्टर सेट)。
action फॉर्म को सबमिट करने के लिए सत्याकार उल्लेख करें (सबमिट पृष्ठ)。
autocomplete ब्राउज़र को फॉर्म को स्वचालित रूप से पूरा करने का निर्धारित करें (मूलभूत: सक्षम)。
enctype सबमिट की गई डाटा को एनकोड करने का निर्धारित करें (मूलभूत: url-encoded)。
method फॉर्म सबमिट करते समय उपयोग की जाने वाली HTTP विधि (मूलभूत: GET) निर्धारित करें。
name फॉर्म के नाम की पहचान करें (DOM के लिए: document.forms.name)。
novalidate ब्राउज़र को फॉर्म की प्रभावीता न करने का निर्देश दें。
target action गुण में स्थान का लक्ष्य निर्धारित करें (मूलभूत: _self)。

टिप्पणी:आपको नीचे के अध्यायों में गुण के बारे में अधिक जानकारी मिलेगी。