HTML-ൽ Submit Button (സബ്‌മിറ്റ് ബട്ടൺ) എന്താണ്?
സബ്‌മിറ്റ് ബട്ടൺ ഫോമിന്റെ പ്രധാന ഭാഗമാണ്. ഇത് ഉപയോക്താവ് ഫോമിലെ ഡാറ്റ സിസ്റ്റത്തിനോ സെർവർ സെക്രിപ്റ്റിനോ അയയ്ക്കാൻ ഉപയോഗിക്കുന്നു. സബ്‌മിറ്റ് ബട്ടൺ ക്ലിക്കുചെയ്താൽ, ഫോമിലെ എല്ലാ ഡാറ്റയും നൽകിയത് action ആട്രിബ്യൂട്ടിൽ നൽകിയ URL-ലേക്ക് അയയ്ക്കും.
HTML സബ്‌മിറ്റ് ബട്ടൺ:
HTML-ൽ സബ്‌മിറ്റ് ബട്ടൺ <button> അല്ലെങ്കിൽ <input type="submit"> ടാഗ് ഉപയോഗിച്ചാണ് സൃഷ്ടിക്കുന്നത്.
<form action="/submit-form" method="post">
<input type="text" name="username" placeholder="Username">
<button type="submit">സബ്‌മിറ്റ്</button>
</form>
Example:
<form action="/submit" method="post">
<label for="email">ഇമെയിൽ:</label>
<input type="email" id="email" name="email">
<button type="submit">സബ്‌മിറ്റ് ചെയ്യുക</button>
</form>
ഇവിടെ, സബ്‌മിറ്റ് ബട്ടൺ ക്ലിക്കുചെയ്താൽ, ഉപയോക്താവ് നൽകുന്ന ഇമെയിൽ സെർവറിലേക്ക് അയയ്ക്കും.
Reset Button (റീസെറ്റ് ബട്ടൺ):
റീസെറ്റ് ബട്ടൺ ഉപയോഗിച്ച് ഫോമിൽ നൽകിയ ഡാറ്റทั้งหมด ക്ലിയർ ചെയ്യാൻ കഴിയും. ഉപയോക്താവിന്റെ എല്ലാ എൻട്രികളും റീസെറ്റ് ചെയ്യും, ഫീൽഡുകൾ ശൂന്യവായെത്തും.
<form>
<input type="text" name="name" placeholder="നിങ്ങളുടെ പേര്">
<button type="reset">റീസെറ്റ്</button>
</form>
Difference Between Submit and Reset:
- Submit Button: ഉപയോക്താവ് ഫോമിലെ ഡാറ്റ സമർപ്പിക്കാൻ.
- Reset Button: ഫോമിലെ എല്ലാ ഫീൽഡുകളും ശൂന്യമാക്കാൻ.
Input Type Submit:
സബ്‌മിറ്റ് ബട്ടണിന് input ടാഗും ഉപയോഗിക്കാം.
<form action="/submit" method="post">
<input type="submit" value="സബ്‌മിറ്റ് ചെയ്യുക">
</form>
Input Type Reset:
റീസെറ്റ് ബട്ടൺ ഇൻപുട്ട് ടാഗ് ഉപയോഗിച്ചും നിർമ്മിക്കാവുന്നതാണ്.
<form>
<input type="reset" value="റീസെറ്റ്">
</form>
CSS ഉപയോഗിച്ച് സബ്‌മിറ്റ്, റീസെറ്റ് ബട്ടണുകൾ സ്റ്റൈൽ ചെയ്യുക:
CSS ഉപയോഗിച്ച് സബ്‌മിറ്റ്, റീസെറ്റ് ബട്ടണുകൾക്ക് എങ്ങനെ സ്റ്റൈലിംഗ് നൽകാമെന്ന് കാണാം. ബട്ടണുകളുടെ നിറം, പാഡിങ്, ഫോണ്ട് എന്നിവയെല്ലാം മാറ്റാവുന്നതാണ്.
button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: darkgreen;
}
Disable ചെയ്ത സബ്‌മിറ്റ് ബട്ടൺ:
ബട്ടൺ പ്രവർത്തനരഹിതമാക്കാനും, “disabled” ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം. ഇത് സബ്‌മിറ്റ് ബട്ടണിന് ക്ലിക്ക് ചെയ്യൽ തടയും.
<button type="submit" disabled>Disabled Submit</button>
JavaScript ഉപയോഗിച്ച് സബ്‌മിറ്റ്, റീസെറ്റ് ചെയ്യൽ:
JavaScript ഉപയോഗിച്ച് സബ്‌മിറ്റ് ബട്ടൺ ക്ലിക്കുചെയ്യുമ്പോൾ ഫോമുകൾ സാധൂകരിക്കാനാകും (validation). ഒരു ഉപയോക്താവ് ശൂന്യമായ ഫീൽഡുകൾ സമർപ്പിക്കുന്നത് തടയാനും ഇതുപയോഗിക്കാം.
<form name="myForm" onsubmit="return validateForm()">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("പേര് ഫീൽഡ് നിറയ്ക്കണം");
return false;
}
}
</script>
ഫോമുകളുടെ method ആട്രിബ്യൂട്ടും Submit Button:
ഫോമിന്റെ method ആട്രിബ്യൂട്ട് ഫോമിലെ ഡാറ്റ കൈകാര്യം ചെയ്യുന്നത് എന്ത് രീതിയിലാണ് എന്ന് വ്യക്തമാക്കുന്നു:
- GET: URL ലൂടെ ഡാറ്റ കാണിച്ചു സമർപ്പിക്കുന്നു.
- POST: ഡാറ്റ URL-ൽ കാണിക്കാതെ സമർപ്പിക്കുന്നു.
<form action="/submit" method="post">
<input type="text" name="name" placeholder="പേര്">
<input type="submit" value="സബ്‌മിറ്റ് ചെയ്യുക">
</form>
Button Type-കളുടെ പ്രാധാന്യം:
HTML-ൽ ബട്ടണുകളുടെ type നിർണായകമാണ്. ബട്ടണിന് വിവിധ പ്രവർത്തനങ്ങൾ നൽകാൻ സഹായിക്കുന്നു:
- type=”submit”: ഫോമുകൾ സബ്‌മിറ്റ് ചെയ്യുന്നു.
- type=”reset”: ഫോമുകൾ റീസെറ്റ് ചെയ്യുന്നു.
- type=”button”: സാധാരണ ബട്ടൺ പ്രവർത്തനങ്ങൾക്കായി.
സങ്കലനം:
HTML സബ്‌മിറ്റ് ബട്ടൺ ഫോമിന്റെ പ്രധാന ഘടകമാണ്, അതിന്റെ സഹായത്തോടെ ഡാറ്റ സമർപ്പിക്കാം. റീസെറ്റ് ബട്ടൺ ഫോമിലെ എല്ലാ ഡാറ്റയും ക്ലിയർ ചെയ്യാനാണ്. സബ്‌മിറ്റ്, റീസെറ്റ് ബട്ടണുകളുടെ ശരിയായ ഉപയോഗം ഫോമുകൾക്ക് ഇന്ററാക്ടീവ് അനുഭവം നൽകുന്നു.
