HTML Form क्या होता है?
HTML Form वेबसाइट का वह भाग होता है जिसके माध्यम से यूज़र से जानकारी (Data) प्राप्त की जाती है और उसे सर्वर पर भेजा जाता है।
उदाहरण:
- Login Form
- Registration Form
- Contact Form
- Search Box
- Feedback Form
- Online Payment Form
HTML में Form बनाने के लिए <form> tag का उपयोग किया जाता है।
HTML Form का Syntax :
<form>
Form Elements
</form>Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Name:
<input type="text">
</form>
</body>
</html>Output :
HTML Form Tag Attributes
1. action Attribute
action attribute यह बताता है कि Form का Data किस URL या Page पर भेजा जाएगा।
Syntax:
<form action="page.php">Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="submit.php">
Name:
<input type="text">
</form>
</body>
</html>जब User Submit करेगा तो Data submit.php पर जाएगा।
HTML Form Elements
1. Input Element (<input>)
<input> HTML Form का सबसे ज्यादा उपयोग होने वाला Element है।
इसका उपयोग User से अलग-अलग प्रकार का Data लेने के लिए किया जाता है।
Syntax:
<input type="type">Input के मुख्य Types
1. Text Input
Syntax :
Text input का उपयोग Single line text लेने के लिए किया जाता है।
<label>Name:</label>
<input type="text">2. Password Input
Password input का उपयोग Password लेने के लिए किया जाता है।
Syntax :
<label>Password:</label>
<input type="password">3. Email Input
Email input का उपयोग Email Address लेने के लिए किया जाता है।
Syntax :
<label>Email:</label>
<input type="email">4. Number Input
Number input का उपयोग Number लेने के लिए किया जाता है।
Syntax :
<label>Age:</label>
<input type="number">5. Radio Button
Radio button का उपयोग एक विकल्प चुनने के लिए किया जाता है।
Syntax :
Gender:
<input type="radio" name="gender">
Male
<input type="radio" name="gender">
Female6. Checkbox
Checkbox का उपयोग एक से अधिक विकल्प चुनने के लिए किया जाता है।
Syntax :
Skills:
<input type="checkbox">
HTML
<input type="checkbox">
CSS7. File Input
File input का उपयोग File Upload करने के लिए किया जाता है।
Syntax :
<input type="file">8. Date Input
Date input का उपयोग Date Select करने के लिए किया जाता है।
Syntax :
<input type="date">9. Color Input
Color input का उपयोग Color चुनने के लिए किया जाता है।
Syntax :
<input type="color">10. Submit Input
Submit input का उपयोग Form Submit करने के लिए किया जाता है।
Syntax :
<input type="submit" value="Submit">2. Label Element (<label>)
Label Element का उपयोग Input Field का नाम बताने के लिए किया जाता है।
Syntax:
<label>
Text
</label>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="submit.php">
<label>
Username:
</label>
<input type="text">
</form>
</body>
</html>Output :
Username: [__]
3. Textarea Element (<textarea>)
TextArea element का उपयोग लंबे Text लिखने के लिए किया जाता है।
उपयोग:
- Address
- Feedback
- Message
Syntax:
<textarea></textarea>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="submit.php">
<label>
<label>
Message:
</label>
<textarea rows="5" cols="30">
</textarea>
</form>
</body>
</html>Output :
4. Select Element (<select>)
Select element का उपयोग Dropdown List बनाने के लिए उपयोग होता है।
Syntax :
<select>
<option>
Item
</option>
</select>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="submit.php">
<label>
Country:
</label>
<select>
<option>
India
</option>
<option>
USA
</option>
<option>
UK
</option>
</select>
</form>
</body>
</html>5. Option Element (<option>)
<option> का उपयोग Select Element के अंदर विकल्प बनाने के लिए किया जाता है।
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="submit.php">
<select>
<option>
HTML
</option>
<option>
CSS
</option>
<option>
JavaScript
</option>
</select>
</form>
</body>
</html>6. Button Element (<button>)
Button element का उपयोग Button बनाने के लिए उपयोग होता है।
Syntax:
<button>
Text
</button>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="submit.php">
<button>
Submit
</button>
</form>
</body>
</html>Button के Types
Submit Button
Submit button का उपयोग Form Submit करने के लिए किया जाता है।
<button type="submit">
Submit
</button>Reset Button
Reset button का उपयोग Form Data Clear करने के लिए किया जाता है।
<button type="reset">
Reset
</button>