HTML Forms का उपयोग user से input लेने के लिए किया जाता है।
Forms के ज़रिए data server पर भेजा जाता है, जैसे login, registration, search, feedback आदि।
Form user interaction का सबसे important हिस्सा होता है।
HTML Form का Basic Structure
HTML form <form> tag से बनाया जाता है।
<form>
<!-- form elements -->
</form>
Form का Simple Example
<form>
<label>Name:</label>
<input type="text">
<label>Email:</label>
<input type="email">
<input type="submit" value="Submit">
</form>
form Tag के Important Attributes
action बताता है कि form submit होने पर data कहाँ भेजना है।method बताता है कि data कैसे भेजा जाएगा।
<form action="submit.php" method="post">
</form>
Common methods
get
post
GET Method
GET method data को URL में भेजता है।
<form method="get">
GET का उपयोग
Search forms
Non-sensitive data
POST Method
POST method data को URL में show नहीं करता।
<form method="post">
POST का उपयोग
Login forms
Passwords
Sensitive data
Input Element
<input> सबसे ज्यादा use होने वाला form element है।
<input type="text">
Common Input Types
Text input
<input type="text">
Password input
<input type="password">
Email input
<input type="email">
Number input
<input type="number">
Date input
<input type="date">
Radio Buttons
Radio buttons में एक ही option select किया जा सकता है।
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
Checkboxes
Checkboxes में multiple options select हो सकते हैं।
<input type="checkbox"> HTML
<input type="checkbox"> CSS
Select Dropdown
Dropdown list <select> tag से बनती है।
<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
Textarea
Multi-line text input के लिए textarea use होता है।
<textarea rows="4" cols="30"></textarea>
Label Element
<label> input को describe करता है और accessibility improve करता है।
<label for="username">Username</label>
<input type="text" id="username">
Placeholder Attribute
Placeholder user को hint देता है।
<input type="text" placeholder="Enter your name">
Required Attribute
Required field को empty छोड़ा नहीं जा सकता।
<input type="email" required>
Disabled और Readonly Fields
Disabled input editable नहीं होता और submit नहीं होता।
<input type="text" disabled>
Readonly editable नहीं होता लेकिन submit हो जाता है।
<input type="text" readonly>
Submit Button
Form submit करने के लिए submit button use होता है।
<input type="submit" value="Send">
या
<button type="submit">Send</button>
HTML5 Form Validation
HTML5 में built-in validation available है।
<input type="email" required>
<input type="number" min="1" max="10">
Complete HTML Form Example
<form action="submit.php" method="post">
<label>Name</label>
<input type="text" required>
<label>Email</label>
<input type="email" required>
<label>Message</label>
<textarea rows="4"></textarea>
<button type="submit">Submit</button>
</form>
Accessibility और Forms
Label का सही उपयोग करें
Placeholder को label का replacement न बनाएं
Required fields clearly indicate करें
HTML Forms Summary
HTML Forms user input लेने के लिए use होते हैंform, input, select, textarea main elements हैं
GET और POST common methods हैं
HTML5 validation forms को powerful बनाती है