HTML ബട്ടണുകൾ എന്താണ്?
HTML ബട്ടണുകൾ (Buttons) ഉപയോക്താക്കളുമായി ഇന്ററാക്ട് ചെയ്യാൻ, ടെക്സ്റ്റ്, ഫോമുകൾ, മറ്റു പ്രവർത്തനങ്ങൾ നിർവഹിക്കാൻ ഉപയോഗിക്കുന്ന വളരെ പ്രധാനപ്പെട്ട ഒരു ഘടകമാണ്. HTML-ൽ, <button>ടാഗും <input> ടാഗും ബട്ടണുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്നു.
HTML <button> ടാഗ്:
HTML <button> ടാഗ് ബട്ടണുകൾ സൃഷ്ടിക്കാനായി ഉപയോഗിക്കുന്നു. ബട്ടൺ ക്ലിക്കുചെയ്താൽ, ബ്രൗസറുകൾക്ക് ഓരോ പ്രവർത്തനവും നിർവഹിക്കാനാകും.
<button>ഇവിടെ ക്ലിക്ക് ചെയ്യുക</button>
Example:
<button>സബ്‌മിറ്റ് ചെയ്യുക</button>
ബട്ടണുകൾക്ക് അതിശയിപ്പിക്കുന്ന ഫംഗ്ഷനുകൾ:
<button> ടാഗ് വ്യത്യസ്ത type ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് വ്യത്യസ്ത പ്രവർത്തനങ്ങൾ ചെയ്യുന്നു:
- type=”submit”: ഒരു ഫോമിനെ സബ്‌മിറ്റ് ചെയ്യുന്നതിനായി.
- type=”reset”: ഫോമിലെ ഡാറ്റ ഒഴിവാക്കാൻ.
- type=”button”: സാധാരണ ബട്ടണായി പ്രവർത്തിക്കുന്നു, ഉപയോക്താവിന്റെ ക്ലിക്കുകളെ കൈകാര്യം ചെയ്യാം.
<form>
<button type="submit">സബ്‌മിറ്റ്</button>
<button type="reset">റീസെറ്റ്</button>
</form>
CSS ഉപയോഗിച്ച് ബട്ടണുകൾ സ്റ്റൈൽ ചെയ്യുക:
CSS ഉപയോഗിച്ച് ബട്ടണുകളുടെ ആകൃതി, നിറം, ചൂട, വലിപ്പം തുടങ്ങിയവ മാറ്റാവുന്നതാണ്. ഉദാഹരണത്തിന്:
<button style="background-color: blue; color: white; padding: 10px 20px; border-radius: 5px;">ക്ലിക്ക്</button>
ഇമേജുകൾ ബട്ടണുകളായി ഉപയോഗിക്കുക:
ചിലപ്പോൾ, ബട്ടൺ പോലെ പ്രവർത്തിക്കുന്ന ഇമേജുകൾ ഉപയോഗിക്കാൻ കഴിയും:
<button>
<img src="button-image.jpg" alt="Button">
</button>
Icon-കളുള്ള ബട്ടണുകൾ:
CSS അല്ലെങ്കിൽ Font Awesome പോലുള്ള സവിശേഷ ഫോണ്ടുകൾ ഉപയോഗിച്ച് ബട്ടണുകൾക്ക് ഐക്കണുകൾ ചേർക്കാം.
<button>
<i class="fa fa-thumbs-up"></i> Like
</button>
Disable ചെയ്ത ബട്ടണുകൾ:
ബട്ടൺ പ്രവർത്തനക്ഷമമല്ലാതാക്കാനും “disable” ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം. ഇത് ഉപയോക്താവ് ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത് തടയുന്നു.
<button disabled>ഇത് പ്രവർത്തനക്ഷമമല്ല</button>
Input Button:
ബട്ടണുകൾ സൃഷ്ടിക്കാൻ <input> ടാഗും ഉപയോഗിക്കുന്നു.
<input type="button" value="Click Me">
JavaScript ഉപയോഗിച്ച് ബട്ടണുകൾ ഇന്ററാക്ടീവ് ആക്കുക:
JavaScript ഉപയോഗിച്ച് HTML ബട്ടണുകൾക്ക് പ്രവർത്തനങ്ങൾ നൽകാവുന്നതാണ്. ഉദാഹരണത്തിന്, ഒരു ബട്ടൺ ക്ലിക്കുചെയ്യുമ്പോൾ സന്ദേശം പ്രദർശിപ്പിക്കാം:
<button onclick="alert('നിങ്ങൾ ക്ലിക്കുചെയ്തു!')">Click Me</button>
ബട്ടൺ ഗ്രൂപ്പുകൾ സൃഷ്ടിക്കുക:
CSS ഉപയോഗിച്ച് ബട്ടൺ ഗ്രൂപ്പുകൾ സൃഷ്ടിക്കാനും അവയെ തമ്മിൽ അനുപാതികമായി ഫോർമാറ്റ് ചെയ്യാനും കഴിയും.
<div class="button-group">
<button>Home</button>
<button>About</button>
<button>Contact</button>
</div>
ബട്ടണുകൾക്ക് ആക്രിതികൾ നൽകുക:
CSS ഉപയോഗിച്ച് ബട്ടണുകൾക്ക് വേറിട്ട ആകൃതികൾ, നിറങ്ങൾ, മറുകിടലുകൾ എന്നിവ ഉപയോഗിച്ച് മികച്ച ദൃശ്യാനുഭവം നൽകാവുന്നതാണ്.
<button style="border-radius: 50%; padding: 10px;">Circle Button</button>
സങ്കലനം:
HTML-ൽ ബട്ടണുകൾ ഫോർമുകൾ സമർപ്പിക്കാനും JavaScript വഴിയുള്ള പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാനും ഉപയോഗിക്കുന്നു. <button> ടാഗ്, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് ബട്ടണുകൾക്ക് ശക്തമായ ഇന്ററാക്റ്റിവിറ്റി നൽകാവുന്നതാണ്.
