HTML ഫോമുകൾ എന്താണ്?
HTML ഫോമുകൾ (Forms) ഉപയോക്താവിൽ നിന്ന് ഡാറ്റ ശേഖരിക്കാൻ ഉപയോഗിക്കുന്ന പ്രധാന ഘടകമാണ്. ഒരു ഫോമിൽ ഉപയോക്താക്കൾക്ക് ടെക്സ്റ്റ് എന്റർ ചെയ്യാനും ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാനും, ബട്ടൺ ക്ലിക്കുകൾ വഴി ഡാറ്റ സമർപ്പിക്കാനുമാകും. ഫോമുകൾ action, method തുടങ്ങിയ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് ഡാറ്റ സിസ്റ്റത്തോട് കൈകാര്യം ചെയ്യപ്പെടുന്നു.
HTML ഫോമിന്റെ ഘടന:
HTML ഫോമുകൾ സൃഷ്ടിക്കാൻ <form> ടാഗ് ഉപയോഗിക്കുന്നു. ഓരോ ഫോമിലും വിവിധ ഇൻപുട്ട് ഫീൽഡുകളും ബട്ടണുകളും ചേർക്കാം.
<form action="/submit" method="post">
<!-- ഫീൽഡുകൾ ഇവിടെ -->
</form>
Input Fields (ഇൻപുട്ട് ഫീൽഡുകൾ):
ഫോമിൽ ഇൻപുട്ട് ഫീൽഡുകൾ (Textboxes, Checkboxes, Radio Buttons) എന്നിവയുടെ സഹായത്തോടെ ഉപയോക്താക്കൾക്ക് ഡാറ്റ നൽകാം. <input> ടാഗ് ഉപയോഗിച്ചാണ് വിവിധ ഇൻപുട്ടുകൾ നിർമ്മിക്കുന്നത്.
Text Input:
<label for="name">നിങ്ങളുടെ പേര്:</label>
<input type="text" id="name" name="name">
Password Input:
<label for="password">പാസ്വേഡ്:</label>
<input type="password" id="password" name="password">
Email Input:
<label for="email">ഇമെയിൽ:</label>
<input type="email" id="email" name="email">
Checkboxes (ചെക്ക്ബോക്സ്):
ചെക്ക്ബോക്സ് ഉപയോക്താക്കൾക്ക് ഒരു ഫോമിൽ ഒന്നിലധികം ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാനാകും.
<label for="subscribe">സബ്സ്ക്രൈബ് ചെയ്യണോ?</label>
<input type="checkbox" id="subscribe" name="subscribe">
Radio Buttons (റേഡിയോ ബട്ടൺ):
റേഡിയോ ബട്ടണുകൾ ഒരു ഗ്രൂപ്പിൽ നിന്നും ഒരൊറ്റ ഓപ്ഷൻ മാത്രമേ തിരഞ്ഞെടുക്കാനാകൂ.
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
Select Dropdown (സെലക്ട്):
സെലക്ട് ബോക്സ് ഉപയോഗിച്ച് ഉപയോക്താക്കൾക്ക് പല ഓപ്ഷനുകളിൽ നിന്ന് ഒരു ഓപ്ഷൻ തിരഞ്ഞെടുക്കാം.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
Textarea (ടെക്സ്റ്റ്ഏറിയ):
Textarea ഉപയോഗിച്ച് ഉപയോക്താവിന് കൂടുതൽ ടെക്സ്റ്റ് എന്റർ ചെയ്യാൻ കഴിയും, സാധാരണ ഇൻപുട്ട് ഫീൽഡുകളേക്കാൾ വലിപ്പമുള്ളതുകൊണ്ട് ഇത് ഉപയോഗപ്രദമാണ്.
<label for="message">സന്ദേശം:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
Submit Button:
ഫോമിൽ സബ്‌മിറ്റ് ബട്ടൺ ചേർത്താൽ ഉപയോക്താവിന്റെ ഡാറ്റ സമർപ്പിക്കാനാകും.
<button type="submit">സബ്‌മിറ്റ്</button>
Reset Button:
Reset ബട്ടൺ ഉപയോഗിച്ച് ഫോമിലെ എല്ലാ ഡാറ്റയും റീസെറ്റ് ചെയ്യാം.
htmlCopy code<button type="reset">റീസെറ്റ്</button>
Form Action:
action ആട്രിബ്യൂട്ട് URL നിശ്ചയിക്കുന്നു, ഉപയോക്താവ് ഫോം സമർപ്പിക്കുമ്പോൾ ഡാറ്റയെത്തിക്കേണ്ട സ്ഥലം.
<form action="/submit-form" method="post">
<!-- ഫീൽഡുകൾ -->
</form>
Form Method:
method ആട്രിബ്യൂട്ട് ഫോമിന്റെ ഡാറ്റ കൈകാര്യം ചെയ്യൽ മാർഗം പറയുന്നു. സാധാരണ ഉപയോഗിക്കുന്നവ:
- GET: URL-ലൂടെ ഡാറ്റ പ്രദർശിപ്പിക്കുന്നു.
- POST: ഡാറ്റ സെർവറിലേക്ക് അയയ്ക്കുന്നു, URL-ൽ കാണിക്കാതെ.
ഫോമുകൾക്കായുള്ള CSS:
CSS ഉപയോഗിച്ച് ഫോമിന്റെ സ്റ്റൈലിംഗ് മെച്ചപ്പെടുത്താനാവും. ഫീൽഡുകൾക്ക് പാഡിങ്, മര്ജിൻ, കളർ, ബോർഡർ തുടങ്ങിയവ ചേർത്താണ് സ്റ്റൈൽ നൽകുന്നത്.
input[type="text"], select, textarea {
width: 100%;
padding: 12px;
margin: 8px 0;
box-sizing: border-box;
}
JavaScript ഉപയോഗിച്ച് ഫോമുകൾ സാധൂകരിക്കുക (Validation):
JavaScript ഉപയോഗിച്ച് ഫോമിൽ നൽകിയ ഡാറ്റ ശരിയായ ഫോർമാറ്റിൽ ഉള്ളതാണോ എന്ന് പരിശോധിക്കാൻ കഴിയും.
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("പേര് ഫീൽഡ് ശൂന്യമാണ്");
return false;
}
}
സങ്കലനം:
HTML ഫോമുകൾ ഉപയോക്താവിൽ നിന്ന് ഡാറ്റ ശേഖരിക്കാനും അത് സെർവറിലേക്ക് അയയ്ക്കാനും ഉപയോഗിക്കുന്നു. വിവിധ ഇൻപുട്ട് ഫീൽഡുകൾ, ചോയ്സ് ഓപ്ഷനുകൾ, ടൈപ്പ് ചെയ്‌ത ടെക്സ്റ്റ് തുടങ്ങിയവ ഫോമിന്റെ ഘടകങ്ങളായിരിക്കും. CSS, JavaScript ഉപയോഗിച്ച് ഫോമിന്റെ സാങ്കേതികതയും അനുഭവവും മെച്ചപ്പെടുത്താം.
