ഫോമുകൾ സമർപ്പിക്കുന്നതിന് ഇൻപുട്ട് ടാഗ് ഉപയോഗിക്കുക
നിങ്ങളുടെ വെബ്സൈറ്റിൽ സംവേദനാത്മകത ചേർക്കുന്നതിനുള്ള ഏറ്റവും പ്രധാന രീതികളിലൊന്നാണ് HTML ഫോമുകൾ. നിങ്ങളുടെ വായനക്കാരിൽ നിന്ന് ചോദ്യങ്ങൾ ചോദിക്കാനും ഉത്തരങ്ങൾ അഭ്യർത്ഥിക്കാനും, ഡാറ്റാബേസുകളിൽ നിന്ന് കൂടുതൽ വിവരങ്ങൾ, ഗെയിമുകൾ സജ്ജീകരിക്കൽ എന്നിവയും അതിലധികം കാര്യങ്ങളും നൽകാൻ കഴിയും. നിങ്ങളുടെ ഫോമുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന പല HTML ഘടകങ്ങളും ഉണ്ട്. ഒരിക്കൽ നിങ്ങൾ നിങ്ങളുടെ ഫോം നിർമ്മിച്ചു കഴിഞ്ഞാൽ, ആ ഡാറ്റ സെർവറിലേക്ക് സമർപ്പിക്കുന്നതിനുള്ള നിരവധി മാർഗങ്ങളുണ്ട് അല്ലെങ്കിൽ ഫോം പ്രവർത്തനം പ്രവർത്തിപ്പിക്കുന്നത് ആരംഭിക്കുക.
നിങ്ങളുടെ ഫോമുകൾ സമർപ്പിക്കാൻ കഴിയുന്ന നിരവധി മാർഗ്ഗങ്ങൾ ഇവയാണ്:
-
- സെർവറിലേക്ക് ഡാറ്റ ലഭ്യമാക്കുന്നതിനുള്ള ഏറ്റവും സാധാരണ രീതിയാണ് ഇത്, പക്ഷെ ഇത് വളരെ വ്യക്തമായിരിക്കാം.
-
- ഒരു ചിത്രം ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ സൈറ്റിന്റെ ശൈലിയിൽ നിങ്ങളുടെ submit ബട്ടൺ സജ്ജമാക്കുന്നതിന് വളരെ എളുപ്പമാക്കുന്നു. എന്നാൽ ചില ആളുകൾ അത് സമർപ്പിക്കുന്നതിനുള്ള ബട്ടണായി തിരിച്ചറിയുന്നില്ല.
- <ഇൻപുട്ട് തരം = "ബട്ടൺ">
- INPUT ടാഗ് ബട്ടൺ INPUT ടാഗ് പോലെ സമാന ഓപ്ഷനുകൾ നൽകുന്നു, പക്ഷേ സ്റ്റാൻഡേർഡ് സമർപ്പിക്കുന്ന തരം പോലെ കാണപ്പെടുന്നു. ഇത് സജീവമാക്കാൻ JavaScript ആവശ്യമാണ്.
-
- COMMAND ഘടകം HTML5 ൽ പുതിയതാണ്, കൂടാതെ ബന്ധപ്പെട്ട പ്രവർത്തനങ്ങളോടെ സ്ക്രിപ്റ്റുകളും ഫോമുകളും സജീവമാക്കുന്നതിനുള്ള ഒരു മാർഗം ഇത് നൽകുന്നു. ഇത് JavaScript ൽ സജീവമാണ്.
INPUT എലമെന്റ്
ഒരു ഫോം സമർപ്പിക്കുന്നതിനാണ് INPUT എലമെൻറ് ഏറ്റവും സാധാരണമാർഗ്ഗം, നിങ്ങൾ ഒരു തരം (ബട്ടൺ, ഇമേജ് അല്ലെങ്കിൽ സമർപ്പിക്കൽ) തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ ആവശ്യമെങ്കിൽ ഫോം ക്രിയേറ്റ് ചെയ്യാൻ ചില സ്ക്രിപ്റ്റിംഗ് ചേർക്കുക.
എലമെന്റിനെ എഴുതാം. നിങ്ങൾ അങ്ങനെ ചെയ്താൽ, നിങ്ങൾക്ക് വ്യത്യസ്ത ബ്രൗസറുകളിൽ വ്യത്യസ്ത ഫലങ്ങൾ ഉണ്ടാകും. മിക്ക ബ്രൗസറുകളും "സമർപ്പിക്കുക" എന്ന് പറയുന്ന ഒരു ബട്ടൺ ഉണ്ടാക്കുന്നു, എന്നാൽ "ചോദ്യം ചോദിക്കൂ" എന്ന് പറയുന്ന ഒരു ബട്ടൺ ഫയർഫോക്സ് നിർമ്മിക്കുന്നു. ബട്ടൺ പറയുന്നത് മാറ്റാൻ നിങ്ങൾ ഒരു ആട്രിബ്യൂട്ട് ചേർക്കേണ്ടതാണ്:
മൂല്യം = "ഫോം സമർപ്പിക്കുക">
മൂലകം അത് പോലെ എഴുതുന്നു, എന്നാൽ നിങ്ങൾ മറ്റെല്ലാ കാര്യങ്ങളും ഉപേക്ഷിച്ചാൽ ബ്രൗസറിൽ ദൃശ്യമാകുന്ന എല്ലാം ശൂന്യമായ ചാര നിറമായിരിക്കും. ബട്ടണിലേക്ക് വാചകം ചേർക്കാൻ, മൂല്യത്തിന്റെ ഗുണവിശേഷത ഉപയോഗിക്കുക. എന്നാൽ നിങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നില്ലെങ്കിൽ ഈ ബട്ടൺ ഫോം സമർപ്പിക്കുകയില്ല.
onclick = "സമർപ്പിക്കുക ();">
ഫോം സമർപ്പിക്കുന്നതിന് സ്ക്രിപ്റ്റ് ആവശ്യമായ ബട്ടൺ തരം സമാനമാണ്. ഒരു ടെക്സ്റ്റ് മൂല്യം പകരം, നിങ്ങൾ ഒരു ഇമേജ് സോഴ്സ് URL ചേർക്കേണ്ടതാണ്.
src = "submit.gif">
BUTTON എലമെന്റ്
BUTTON എലമെന്റിനായി ഒരു ഉദ്ഘാടന ടാഗും ഒരു ക്ലോസിംഗ് ടാഗും ആവശ്യമാണ്. നിങ്ങൾ അത് ഉപയോഗിക്കുമ്പോഴെല്ലാം ടാഗ് ഉള്ളിൽ നിങ്ങൾ ഉൾക്കൊള്ളുന്ന ഏത് ഉള്ളടക്കവും ബട്ടണിൽ ഉൾപ്പെടുത്തും. തുടർന്ന് സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ബട്ടൺ സജീവമാക്കുക.
ഫോം സമർപ്പിക്കുക
നിങ്ങളുടെ ബട്ടണിലെ ചിത്രങ്ങൾ ഉൾപ്പെടുത്താനോ കൂടുതൽ രസകരമായ ബട്ടൺ സൃഷ്ടിക്കുന്നതിന് ഇമേജുകളും വാചകവും സംയോജിപ്പിക്കാനോ കഴിയും.
ഫോം സമർപ്പിക്കുക
COMMAND ഘടകം
COMMAND ഘടകം HTML5 ൽ പുതിയതാണ്. ഇത് FORM ഉപയോഗിക്കേണ്ടതില്ല, എന്നാൽ ഇത് ഒരു ഫോമിനായി സമർപ്പിക്കുക ബട്ടൺ ആയി പ്രവർത്തിക്കാൻ കഴിയും. നിങ്ങൾക്ക് ആവശ്യമുള്ള ഫോമുകൾ ആവശ്യമില്ലാതെ ഫോമുകൾ ആവശ്യമില്ലാതെ തന്നെ കൂടുതൽ സംവേദനാത്മക പേജുകൾ സൃഷ്ടിക്കുന്നതിന് ഈ ഘടകം നിങ്ങളെ അനുവദിക്കുന്നു. എന്തെങ്കിലും പറയുന്നതിന് നിങ്ങൾക്ക് കമാൻഡ് വേണമെങ്കിൽ നിങ്ങൾ ഒരു ലേബൽ ആട്രിബ്യൂട്ടിൽ വിവരങ്ങൾ എഴുതുന്നു.
ലേബൽ = "ഫോം സമർപ്പിക്കുക">
നിങ്ങളുടെ കമാൻഡിനെ ഒരു ഇമേജ് പ്രതിനിധാനം ചെയ്യാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ ഐക്കൺ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു.
icon = "submit.gif">
ഈ ലേഖനം HTML ഫോം ട്യൂട്ടോറിയലിന്റെ ഭാഗമാണ് . HTML ഫോമുകൾ എങ്ങിനെ ഉപയോഗിക്കാമെന്ന് അറിയാൻ പൂർണ്ണ ട്യൂട്ടോറിയലിലൂടെ വായിക്കുക.
നിങ്ങൾ മുൻ പേജിൽ പഠിച്ചതുപോലെ, HTML ഫോമുകൾ സമർപ്പിക്കുന്നതിന് നിരവധി വ്യത്യസ്ത രീതികളുണ്ട്. ഇൻപുട്ട് ടാഗ്, BUTTON ടാഗുകൾ എന്നിവയാണ് അവയിൽ രണ്ടെണ്ണം. ഈ രണ്ട് ഘടകങ്ങളും ഉപയോഗിക്കാൻ നല്ല കാരണങ്ങളുണ്ട്.
INPUT എലമെന്റ്
ഒരു ഫോം സമർപ്പിക്കുന്നതിനുള്ള ഏറ്റവും എളുപ്പ മാർഗം ടാഗ് ആണ്. ഒരു ടാഗിന് അതിനപ്പുറമുള്ള ഒന്നും അതിന് ആവശ്യമില്ല. ബട്ടണിൽ ഒരു ഉപഭോക്താവ് ക്ലിക്കുചെയ്യുമ്പോൾ അത് സ്വയമേവ സമർപ്പിക്കുന്നു. നിങ്ങൾ ഒരു സ്ക്രിപ്റ്റും ചേർക്കേണ്ടതില്ല, ഒരു ഇൻപുട്ട് ടാഗ് ക്ലിക്കുചെയ്യുമ്പോൾ ബ്രൗസറുകൾ ഫോം സമർപ്പിക്കാൻ അറിയണം.
പ്രശ്നം ഈ ബട്ടൺ വളരെ വൃത്തികെട്ടതും സമനിലവുമാണ് എന്നതാണ്. അതിലേക്ക് ഇമേജുകൾ ചേർക്കാൻ നിങ്ങൾക്ക് കഴിയില്ല. മറ്റേതൊരു ഘടകം പോലെ നിങ്ങൾക്കിഷ്ടമാകും, പക്ഷെ അത് ഒരു വൃത്തികെട്ട ബട്ടൺ പോലെ ഇപ്പോഴും അനുഭവിക്കാൻ കഴിയും.
JavaScript ഓഫാക്കിയിരിക്കുന്ന ബ്രൗസറുകളിൽപ്പോലും നിങ്ങളുടെ ഫോം ആക്സസ് ചെയ്യേണ്ട സമയത്ത് INPUT രീതി ഉപയോഗിക്കുക.
BUTTON എലമെന്റ്
BUTTON ഘടകം ഫോമുകൾ സമർപ്പിക്കുന്നതിന് കൂടുതൽ ഓപ്ഷനുകൾ നൽകുന്നു. ഒരു BUTTON എലമെന്റിനുള്ളിൽ നിങ്ങൾക്ക് ഒന്നും നൽകാം, അതിനെ സമർപ്പിക്കുക ബട്ടണാക്കി മാറ്റാം. സാധാരണയായി ആളുകൾ ചിത്രങ്ങളും പാഠവും ഉപയോഗിക്കുന്നു. എന്നാൽ നിങ്ങൾ ഒരു ഡിവിഐ ഉണ്ടാക്കുകയും നിങ്ങൾ ആഗ്രഹിക്കുകയാണെങ്കിൽ ആ മുഴുവൻ ബട്ടണും സമർപ്പിക്കുകയും ചെയ്യാം.
BUTTON എലമെന്റിനുള്ള ഏറ്റവും വലിയ പോരായ്മ അത് ഫോം സ്വപ്രേരിതമായി സമർപ്പിക്കുന്നില്ല എന്നതാണ്. ഇത് പ്രവർത്തനക്ഷമമാക്കാൻ സ്ക്രിപ്റ്റിന് ചില തരം ആവശ്യമാണ്. അതിനാൽ ഇത് INPUT രീതിയേക്കാൾ പ്രാപ്യമാണ്. Javascript ലഭ്യമല്ലാത്ത ഉപയോക്താക്കൾക്ക് സമർപ്പിക്കാൻ ഒരു BUTTON ഘടകം മാത്രമുള്ള ഒരു ഫോം സമർപ്പിക്കാൻ കഴിയില്ല.
നിർണ്ണായകമല്ലാത്ത ഫോമുകളിൽ BUTTON രീതി ഉപയോഗിക്കുക. കൂടാതെ, ഒരു ഫോമിനുള്ളിൽ കൂടുതൽ സമർപ്പണ ഓപ്ഷനുകൾ ചേർക്കുന്നതിനുള്ള മികച്ച മാർഗമാണിത്.
ഈ ലേഖനം HTML ഫോം ട്യൂട്ടോറിയലിന്റെ ഭാഗമാണ്. HTML ഫോമുകൾ എങ്ങിനെ ഉപയോഗിക്കാമെന്നതിനെക്കുറിച്ച് കൂടുതലറിയാൻ ഇത് വായിക്കുക