પરિચય
HTML ફોર્મ્સ веб પર ડેટા સાંકળવા માટેની મુખ્ય રીત છે. લોગિન, રજીસ્ટ્રેશન, સર્ચ, કોન્ટેક્ટ ફોર્મ — બધામાં HTML forms કામ કરે છે. આ gids માં આપણે શરૂથી લઈ advanced topics (validation, accessibility, styling અને server submission) સુધી બધું ઢાંકશું — સાથીમાં જોડાયેલા code examples પણ છે.
1) ફોર્મનું મૂળભૂત બંધારણ
<form action="/submit" method="post">
<label for="name">નામ:</label>
<input type="text" id="name" name="name" required>
<label for="email">ઇમેઇલ:</label>
<input type="email" id="email" name="email" required>
<button type="submit">શાંમિટ કરો</button>
</form>action— જ્યાં ફોર્મ બનાવતાં ડેટા મોકલાશે (URL).method—GETઅથવાPOST. ફોર્મ ડેટા મોકલવાની પદ્ધતિ.name— સર્વર-સાઇડ પર તે ફીલ્ડને ઓળખવા માટે જરૂરી.
2) સામાન્ય ઈનપુટ પ્રકારો અને ઉદાહરણો
<!-- ટેક્સ્ટ -->
<input type="text" name="username" placeholder="તમારું નામ">
<!-- પાસવર્ડ -->
<input type="password" name="password">
<!-- ઇમેઇલ -->
<input type="email" name="email">
<!-- નંબર -->
<input type="number" name="age" min="1" max="120">
<!-- રેડિયો -->
<label><input type="radio" name="gender" value="male"> પુરુષ</label>
<label><input type="radio" name="gender" value="female"> સ્ત્રી</label>
<!-- ચેકબોક્સ -->
<label><input type="checkbox" name="subscribe" value="yes"> ન્યૂઝલેટર</label>
<!-- સિલેક્ટ -->
<select name="country">
<option value="in">India</option>
<option value="us">United States</option>
</select>
<!-- ટેક્સટએરિયા -->
<textarea name="message" rows="5" placeholder="મેસેજ લખો"></textarea>
<!-- ફાઇલ અપલોડ -->
<input type="file" name="profile_pic" accept="image/*">3) ફોર્મ વેલિડેશન (HTML5) — સરળ અને મજબૂત
HTML5 માં built-in attributes ની મદદથી વેલિડેશન કરી શકીએ:
required— જરૂરી ફીલ્ડmin,max,minlength,maxlengthpattern— regex ઉપર આધારિત વેલિડેશનtype="email"અનેtype="url"નેટિવ ચેક કરે છે
<input type="text" name="phone" pattern="[0-9]{10}" title="10 અંકની ફોન નંબર" required>4) JavaScript થી કસ્ટમ વેલિડેશન અને સબમિશન અટકાવવી
<form id="contactForm">
<input type="email" id="email" name="email" required>
<button type="submit">સબમિટ</button>
</form>
<script>
const form = document.getElementById('contactForm');
form.addEventListener('submit', function(e) {
const email = form.email.value;
if (!email.includes('@example.com')) {
e.preventDefault(); // સબમિશન અટકાવો
alert('મહેરબાની કરી example.com નો ઇમેઇલ આપો.');
}
});
</script>5) Accessibility (A11Y) શ્રેષ્ઠ અભ્યાસ
- દરેક input માટે
<label for="id">નો ઉપયોગ કરો. - placeholder ને sole label ના રૂપે ન ભરો (placeholder હંમેશા પ્રત્યેક માટે દેખાતો નથી).
aria-*attributes ઉપયોગ કરો જ્યારે જરૂર હોય.- tabindex અને keyboard navigation ચકાસો.
<label for="name">નામ</label>
<input id="name" name="name" aria-required="true" />6) ફોર્મ સ્ટાઇલિંગ (સાધારણ CSS)
<style>
form { max-width:600px; margin: 0 auto; padding: 1rem; }
label { display:block; margin-top: 0.8rem; font-weight:600; }
input, textarea, select { width:100%; padding:8px; margin-top:4px; box-sizing:border-box; }
button { margin-top:12px; padding:10px 16px; cursor:pointer; }
</style>7) ફાઈલ અપલોડ અને enctype
ફાઈલ અપલોડ માટે form માં enctype="multipart/form-data" જરૂરી:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">અપલોડ</button>
</form>8) AJAX / Fetch દ્વારા સબમિટ (સાઇન કર્યો વગર પેજ રિલોડ વગર)
<form id="ajaxForm">
<input type="text" name="name" required>
<button type="submit">સબમિટ</button>
</form>
<script>
document.getElementById('ajaxForm').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(this);
const res = await fetch('/api/submit', {
method: 'POST',
body: formData
});
const data = await res.json();
alert(data.message || 'Submitted');
});
</script>9) સર્વર સાઈડ ઉદાહરણ (Node.js + Express) — બેઝિક
// server.js
const express = require('express');
const multer = require('multer');
const upload = multer();
const app = express();
app.post('/api/submit', upload.none(), (req, res) => {
console.log(req.body); // form data
res.json({ message: 'ફોર્મ મળ્યો' });
});
app.listen(3000, () => console.log('Server on 3000'));જો ફાઇલ અપલોડ હોય તો multer નો કન્ફિગ ફાઈલ હેન્ડલિંગ માટે જોઈએ.
10) Security Best Practices
- Sensitive ડેટા માટે HTTPS જરૂરી.
- Server-side validation પર વિશ્વસનીય રહો — client-side ને ક્યારેય trust ના કરો.
- CSRF protection (જ્યારે જરૂરી હોય) – CSRF tokens નો ઉપયોગ.
- File upload માં file type અને size ચેક કરો.
11) Advanced_HINTs
- Multi-step forms (Wizard) = પ્રત્યેક સ્ટે પર વેલિડેશન અને progress indicator.
- Autosave drafts માટે localStorage અથવા IndexedDB નો ઉપયોગ.
- Use
<datalist>to provide suggestions.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>
2 Comments