Chapter 12HTML Tutorial~1 min read
HTML Forms
form, input, label, button — User Input
HTML Forms म्हणजे users कडून data collect करणे. Login page, registration form, search bar, contact form — हे सगळे HTML forms आहेत. Forms user आणि server मधील gateway आहे.
Form कशासाठी वापरतात?
- ▸User Authentication — Login, Registration
- ▸Data Submission — Contact forms, Feedback
- ▸Search — Search bars
- ▸E-commerce — Checkout, Payment forms
Basic Form Structure
Login Form — उदाहरण
html
<form action="/login" method="post">
<!-- Username -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- Gender Radio Buttons -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br><br>
<!-- Submit Button -->
<input type="submit" value="Login करा">
</form>Form चे Key Attributes
- ▸action — Form submit केल्यावर data कुठे जाईल (URL/file). उदाहरण: action="/submit"
- ▸method — Data कसे पाठवायचे: GET (URL मध्ये दिसते, search साठी) | POST (URL मध्ये दिसत नाही, passwords साठी)
Input Tag आणि त्याचे Types
<input> चे विविध types
html
<!-- Text -->
<input type="text" placeholder="नाव लिहा" name="name">
<!-- Email — automatic format validation -->
<input type="email" placeholder="email@example.com" name="email">
<!-- Password — text hidden होतो -->
<input type="password" name="password">
<!-- Number -->
<input type="number" min="0" max="100" name="age">
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">Terms मान्य करतो</label>
<!-- Submit button -->
<input type="submit" value="Submit करा"><label> Tag का महत्वाचे?
<label> tag साठी for attribute आणि <input> साठी id match असायला हवे. याने label click केल्यावर input focus होतो — usability वाढते. Screen readers साठी accessibility सुधारते.
💡
GET method: data URL मध्ये visible होतो — search queries साठी ठीक. POST method: data URL मध्ये नाही दिसत — passwords, sensitive information साठी नेहमी POST वापरा.
✅ Key Points — लक्षात ठेवा
- ▸<form action="" method=""> — form container
- ▸method="GET" vs method="POST" — GET visible, POST hidden
- ▸<input type=""> — text, email, password, checkbox, radio, submit
- ▸<label for="id"> — input ला linked label, accessibility साठी
- ▸required attribute — form submit होताना field रिकामे राहू देत नाही
0/13 chapters पूर्ण