പരിധിയില്ലാത്ത html സമർപ്പിക്കുക. html ഫോം സമർപ്പിക്കുന്നതിൻ്റെ വിചിത്രമായ പെരുമാറ്റം. ഉദാഹരണം: സമർപ്പിക്കലും പുനഃസജ്ജമാക്കലും ഉപയോഗിക്കുന്നത്

ഈ ലേഖനത്തിന് എന്ത് തലക്കെട്ട് നൽകണമെന്ന് ഞാൻ വളരെക്കാലം ചിന്തിച്ചു, മികച്ചതൊന്നും കൊണ്ടുവരാൻ കഴിഞ്ഞില്ല. പ്രസ്താവിച്ചതിൻ്റെ സാരാംശം എങ്ങനെയെങ്കിലും പ്രതിഫലിപ്പിക്കുന്ന ഒരേയൊരു തലക്കെട്ടാണിത്. സത്യം പറഞ്ഞാൽ, അതിനെ എന്താണ് വിളിക്കുന്നതെന്ന് എനിക്കറിയില്ല, അതിനാൽ ഈ വിഷയത്തെക്കുറിച്ചുള്ള ഒരു തിരയൽ എഞ്ചിനിൽ കുറച്ച് വിവരങ്ങളെങ്കിലും കണ്ടെത്താൻ ശ്രമിച്ച അതേ രീതിയിൽ ഞാൻ ലേഖനത്തിന് പേരിട്ടു.

സൈറ്റുകളിലൊന്നിൽ എനിക്ക് ഒരു ഫോമിൽ രണ്ട് ബട്ടണുകൾ ഉപയോഗിക്കേണ്ടതുണ്ട് സമർപ്പിക്കുക, ബട്ടൺ അമർത്തുന്നതിനെ ആശ്രയിച്ച്, പൂരിപ്പിച്ച ഡാറ്റ വ്യത്യസ്ത PHP "ഹാൻഡ്ലറുകൾ" ലേക്ക് അയയ്ക്കും. ഗൂഗിൾ എനിക്ക് ന്യായമായ ഒന്നിനും ഉത്തരം നൽകിയില്ല, പ്രത്യക്ഷത്തിൽ ഞാൻ അത് ശരിയായ രീതിയിൽ ചോദിച്ചില്ല, അതിനാൽ എനിക്ക് അത് സ്വയം കൊണ്ടുവരേണ്ടി വന്നു.

അതിനാൽ ഞാൻ അത് നിങ്ങളുടെ പരിഗണനയ്ക്കായി വെച്ചു.

പ്രശ്നത്തിൻ്റെ സാരാംശം

ഇത് സ്വയം നടപ്പിലാക്കിയതിന് ശേഷം, ജെഎസ് സ്ക്രൂ ചെയ്ത സാധാരണ ബട്ടണുകളുടെ ഉപയോഗത്തെ അടിസ്ഥാനമാക്കിയുള്ള നിരവധി പരിഹാരങ്ങൾ ഞാൻ ഇപ്പോഴും കണ്ടെത്തി.

ഞാൻ എൻ്റെ പ്ലാൻ ഏതാണ്ട് അതേ രീതിയിൽ നടപ്പിലാക്കി, പക്ഷേ സാധാരണ സമർപ്പിക്കൽ തരം ഉപയോഗിച്ചു. എല്ലാം പ്രവർത്തിക്കുന്നതായി തോന്നുന്നു, എൻ്റെ അഭിപ്രായത്തിൽ എൻ്റെ പരിഹാരം കൂടുതൽ യുക്തിസഹമായി ശരിയാണ്.

സൗജന്യ ഹോസ്റ്റിംഗിലും നിങ്ങൾ പ്രൊഫഷണൽ ഹോസ്റ്റിംഗ് തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ ഈ പരിഹാരം ഒരുപോലെ നന്നായി പ്രവർത്തിക്കും. ഈ രീതി പൂർണ്ണമായും ക്ലയൻ്റ് ഭാഗത്ത് നടപ്പിലാക്കുന്നു, മാത്രമല്ല സെർവറിൻ്റെ വേഗത കുറയ്ക്കാൻ പാടില്ല.

എനിക്ക് എന്താണ് വേണ്ടതെന്നും അത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്നും മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കുന്നതിന്, വ്യത്യസ്‌ത പേജുകളിലേക്ക് ഡാറ്റ അയയ്‌ക്കുന്ന 2 സമർപ്പിക്കലുകൾ ഉള്ള ഒരു ഫോമിൻ്റെ രൂപത്തിൽ ശരിക്കും പ്രവർത്തനക്ഷമമായ ഒരു ഉദാഹരണം ഇതാ.

ഉപയോക്താവിൽ നിന്ന് വെബ് സെർവറിലേക്ക് ഡാറ്റ അയയ്ക്കുന്നതിനാണ് ഫോമുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. HTML-ലെ ഫോമുകളിൽ ടെക്സ്റ്റ് ഫീൽഡുകളും ടെക്സ്റ്റ് ഏരിയകളും ചെക്ക്ബോക്സുകളും റേഡിയോ ബട്ടണുകളും ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റുകളും അടങ്ങിയിരിക്കാം. ഇവയെല്ലാം രൂപത്തിൻ്റെ ഘടകങ്ങളാണ്. ഓരോ ഘടകങ്ങളും സൈറ്റിന് ചില അർത്ഥങ്ങൾ അറിയിക്കാൻ സഹായിക്കുന്നു.
അതിൻ്റെ കേന്ദ്രത്തിൽ, ഒരു HTML ഫോം എന്നത് നിങ്ങളുടെ വിവരങ്ങൾ നൽകുന്നതിനുള്ള മേഖലകൾ കാണുന്ന ഒരു വെബ് പേജാണ്. നിങ്ങൾ ഫോം പൂരിപ്പിച്ച് സമർപ്പിക്കുക ക്ലിക്ക് ചെയ്ത ശേഷം, ഫോമിൽ നിന്നുള്ള വിവരങ്ങൾ പാക്കേജുചെയ്‌ത് സെർവർ സൈഡ് സ്‌ക്രിപ്റ്റ് (ഹാൻഡ്‌ലർ ഫയൽ) വഴി പ്രോസസ്സ് ചെയ്യുന്നതിനായി വെബ് സെർവറിലേക്ക് അയയ്‌ക്കും. പ്രോസസ്സ് ചെയ്ത ശേഷം, മറ്റൊരു വെബ് പേജ് നിങ്ങൾക്ക് ഒരു പ്രതികരണമായി തിരികെ നൽകും. ഫോം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഇനിപ്പറയുന്ന ചിത്രം വ്യക്തമായി കാണിക്കുന്നു:

HTML ഫോമുകൾ സൃഷ്ടിക്കുന്നതിൽ ബുദ്ധിമുട്ടുള്ള കാര്യമൊന്നുമില്ല. ഒരു ചെറിയ HTML കോഡ് പാഴ്‌സ് ചെയ്യുക, തുടർന്ന് അത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണുക എന്നതാണ് ഫോമുകളെക്കുറിച്ചുള്ള ഒരു ആശയം ലഭിക്കാനുള്ള എളുപ്പവഴി. ഇനിപ്പറയുന്ന ഉദാഹരണം ഒരു ലളിതമായ HTML ഫോം സൃഷ്ടിക്കുന്നതിനുള്ള വാക്യഘടന കാണിക്കുന്നു:

ഉദാഹരണം: ലളിതമായ HTML ഫോം

സ്വയം പരീക്ഷിച്ചു നോക്കൂ"

എൻ്റെ ആദ്യ രൂപം:
പേര്:
കുടുംബപ്പേര്:

ലളിതമായ രൂപം

ഘടകം

ഘടകം ഉപയോഗിച്ച് വെബ് പേജുകളിലേക്ക് ഫോമുകൾ ചേർക്കുന്നു . ടെക്സ്റ്റ് ഫീൽഡുകളും ബട്ടണുകളും മറ്റ് HTML ടാഗുകളും പോലുള്ള ഘടകങ്ങൾ ഉൾപ്പെടെ എല്ലാ ഫോം ഉള്ളടക്കത്തിനും ഇത് ഒരു കണ്ടെയ്നർ നൽകുന്നു. എന്നിരുന്നാലും, അതിൽ മറ്റൊരു ഘടകം ഉൾക്കൊള്ളാൻ കഴിയില്ല .
സെർവറിലേക്ക് ഫോം അയയ്‌ക്കാൻ, "സമർപ്പിക്കുക" ബട്ടൺ ഉപയോഗിക്കുക, ഫോമിലെ "Enter" കീ അമർത്തിയാൽ അതേ ഫലം ലഭിക്കും. ഫോമിൽ "സമർപ്പിക്കുക" ബട്ടൺ ഇല്ലെങ്കിൽ, സമർപ്പിക്കാൻ "Enter" കീ ഉപയോഗിക്കാം.
മിക്ക മൂലക ആട്രിബ്യൂട്ടുകളും ഫോമിൻ്റെ പ്രോസസ്സിംഗിനെ ബാധിക്കുക, അതിൻ്റെ രൂപകൽപ്പനയല്ല. അവയിൽ ഏറ്റവും സാധാരണമായവ നടപടിഒപ്പം രീതി. ആട്രിബ്യൂട്ട് നടപടിസെർവർ പ്രോസസ്സ് ചെയ്യുന്നതിന് ഫോമിലെ വിവരങ്ങൾ അയയ്‌ക്കുന്ന URL അടങ്ങിയിരിക്കുന്നു. ആട്രിബ്യൂട്ട് രീതിഫോം ഡാറ്റ സമർപ്പിക്കാൻ ബ്രൗസറുകൾ ഉപയോഗിക്കേണ്ട HTTP രീതിയാണ്.

ഘടകം

മിക്കവാറും എല്ലാ ഫോം ഫീൽഡുകളും എലമെൻ്റ് ഉപയോഗിച്ചാണ് സൃഷ്ടിച്ചിരിക്കുന്നത് (ഇംഗ്ലീഷ് ഇൻപുട്ടിൽ നിന്ന് - ഇൻപുട്ട്). മൂലകത്തിൻ്റെ രൂപം അതിൻ്റെ ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യത്തെ ആശ്രയിച്ച് മാറ്റുക തരം:

ചില ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഇതാ തരം:

വാചകവും പാസ്‌വേഡും നൽകുന്നു

ഫോം ഘടകങ്ങളുടെ ഏറ്റവും ലളിതമായ തരങ്ങളിലൊന്നാണ് ഒരു ടെക്സ്റ്റ് ഫീൽഡ്, ഒരൊറ്റ വരിയിൽ വാചകം നൽകുന്നതിന് രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. ഈ ടെക്‌സ്‌റ്റ് ഇൻപുട്ട് തരം ഡിഫോൾട്ടായി സജ്ജീകരിച്ചിരിക്കുന്നു, അതിനാൽ ആട്രിബ്യൂട്ട് വ്യക്തമാക്കാൻ നിങ്ങൾ മറന്നാൽ പ്രദർശിപ്പിക്കുന്ന വൺ-ലൈൻ ഫീൽഡാണിത്. തരം. ഒരു ഫോമിലേക്ക് ഒരു വൺ-ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ട് ഫീൽഡ് ചേർക്കാൻ, നിങ്ങൾ എലമെൻ്റിനുള്ളിൽ ചെയ്യണം ആട്രിബ്യൂട്ട് രജിസ്റ്റർ ചെയ്യുക തരംടെക്സ്റ്റ് മൂല്യത്തോടൊപ്പം:

പാസ്‌വേഡ് ഇൻപുട്ട് ഫീൽഡ് ഒരു സാധാരണ ടെക്സ്റ്റ് ഫീൽഡാണ്. ഒരൊറ്റ വരി ടെക്സ്റ്റ് ഫീൽഡിൻ്റെ അതേ ആട്രിബ്യൂട്ടുകളെ ഇത് പിന്തുണയ്ക്കുന്നു. ആട്രിബ്യൂട്ട് പേര്ഉപയോക്താവ് നൽകിയ പാസ്‌വേഡിനൊപ്പം സെർവറിലേക്ക് അയയ്‌ക്കുന്ന പാസ്‌വേഡ് എൻട്രി ഫീൽഡിൻ്റെ പേര് സജ്ജമാക്കുന്നു. ഒരു പാസ്‌വേഡ് ഫീൽഡ് സൃഷ്‌ടിക്കാൻ, നിങ്ങൾ പാസ്‌വേഡ് ആട്രിബ്യൂട്ട് സജ്ജീകരിക്കേണ്ടതുണ്ട് തരം(പാസ്‌വേഡ് (ഇംഗ്ലീഷ്) - പാസ്‌വേഡ്):

ഒരു പാസ്‌വേഡ് ഫീൽഡ് ഉപയോഗിച്ച് ഒരു ഫോം സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം:

ഉദാഹരണം: പാസ്‌വേഡ് ഫീൽഡ്

സ്വയം പരീക്ഷിച്ചു നോക്കൂ"

നിങ്ങളുടെ ലോഗിൻ:

Password:

നിങ്ങളുടെ ലോഗിൻ:

Password:

ഈ ആട്രിബ്യൂട്ടിനൊപ്പം നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം പരമാവധി നീളം, നൽകിയിരിക്കുന്ന സ്ട്രിംഗിൽ നൽകാനാകുന്ന പരമാവധി പ്രതീകങ്ങളുടെ എണ്ണം നിർണ്ണയിക്കുന്ന മൂല്യം. ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇൻപുട്ട് ഫീൽഡിൻ്റെ ദൈർഘ്യം സജ്ജമാക്കാനും കഴിയും വലിപ്പം. സ്ഥിരസ്ഥിതിയായി, മിക്ക ബ്രൗസറുകളും ഒരു ടെക്സ്റ്റ് ഫീൽഡിൻ്റെ വീതി 20 പ്രതീകങ്ങളായി പരിമിതപ്പെടുത്തുന്നു. ഒരു ആട്രിബ്യൂട്ടിന് പകരം പുതിയ ഫോം ഘടകങ്ങളുടെ വീതി നിയന്ത്രിക്കാൻ വലിപ്പം, കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (CSS) ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.
ആട്രിബ്യൂട്ട് മൂല്യംഫോം ലോഡ് ചെയ്യുമ്പോൾ ടെക്സ്റ്റ് ഫീൽഡിൽ സ്ഥിരസ്ഥിതിയായി പ്രദർശിപ്പിക്കുന്ന മൂല്യം വ്യക്തമാക്കുന്നു. ഫീൽഡിൽ ഒരു ഡിഫോൾട്ട് മൂല്യം നൽകുന്നതിലൂടെ, ഏത് ഡാറ്റയും ഏത് ഫോർമാറ്റിലാണ് ഉപയോക്താവ് ഇവിടെ നൽകേണ്ടതെന്നും നിങ്ങൾക്ക് കൃത്യമായി ഉപയോക്താവിനോട് വിശദീകരിക്കാൻ കഴിയും. ഇത് ഒരു സാമ്പിൾ പോലെയാണ്, കാരണം ഉപയോക്താവിന് ഫോം പൂരിപ്പിക്കുന്നത് കൂടുതൽ സൗകര്യപ്രദമാണ്, അവൻ്റെ മുന്നിൽ ഒരു ഉദാഹരണം കാണുന്നു.

സ്വിച്ചുകൾ (റേഡിയോ)

ഘടകം തരം റേഡിയോലോജിക് "OR" തത്വം ഉപയോഗിക്കുന്ന സ്വിച്ചുകൾ സൃഷ്ടിക്കുന്നു, നിരവധി മൂല്യങ്ങളിൽ ഒന്ന് മാത്രം തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു: നിങ്ങൾ ഒരു സ്ഥാനം തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, മറ്റുള്ളവരെല്ലാം നിഷ്‌ക്രിയമാകും. ഒരു ടോഗിൾ എലമെൻ്റിൻ്റെ അടിസ്ഥാന വാക്യഘടന ഇതാണ്:

ആട്രിബ്യൂട്ട് പേര്സ്വിച്ചുകൾക്ക് ആവശ്യമാണ് കൂടാതെ ഒരു ഗ്രൂപ്പിലേക്ക് നിരവധി സ്വിച്ച് ഘടകങ്ങൾ സംയോജിപ്പിക്കുന്നതിൽ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. ഒരു ഗ്രൂപ്പിലേക്ക് റേഡിയോ ബട്ടണുകൾ സംയോജിപ്പിക്കാൻ, നിങ്ങൾ ഒരേ ആട്രിബ്യൂട്ട് മൂല്യം സജ്ജമാക്കണം പേര്വ്യത്യസ്ത ആട്രിബ്യൂട്ട് മൂല്യവും മൂല്യം. ആട്രിബ്യൂട്ട് മൂല്യംസെർവറിലേക്ക് അയയ്‌ക്കേണ്ട തിരഞ്ഞെടുത്ത റേഡിയോ ബട്ടണിൻ്റെ മൂല്യം സജ്ജമാക്കുന്നു. ഓരോ റേഡിയോ ബട്ടൺ ഘടകത്തിൻ്റെയും മൂല്യം ഗ്രൂപ്പിനുള്ളിൽ അദ്വിതീയമായിരിക്കണം, അതുവഴി ഉപയോക്താവ് തിരഞ്ഞെടുത്ത പ്രതികരണ ഓപ്ഷൻ സെർവറിന് അറിയാം.
ആട്രിബ്യൂട്ട് സാന്നിധ്യം പരിശോധിച്ചു(ഇംഗ്ലീഷിൽ നിന്ന് - ഇൻസ്റ്റാൾ ചെയ്തത്) സ്വിച്ച് എലമെൻ്റിൽ, ആവശ്യമെങ്കിൽ പേജ് ലോഡുചെയ്യുമ്പോൾ സ്ഥിരസ്ഥിതിയായി ഏത് നിർദ്ദിഷ്ട ഓപ്ഷനുകളാണ് തിരഞ്ഞെടുക്കേണ്ടതെന്ന് സൂചിപ്പിക്കുന്നു. ഗ്രൂപ്പിൽ നിന്നുള്ള ഒരു റേഡിയോ ബട്ടൺ ഘടകത്തിന് മാത്രമേ ഈ ആട്രിബ്യൂട്ട് സജ്ജമാക്കാൻ കഴിയൂ:

സ്വയം പരീക്ഷിച്ചു നോക്കൂ"

നിങ്ങൾക്ക് എത്രവയസ്സുണ്ട്?

18 ന് താഴെ
18 മുതൽ 24 വരെ
25 മുതൽ 35 വരെ
35-ൽ കൂടുതൽ

നിങ്ങൾക്ക് എത്രവയസ്സുണ്ട്?

18 ന് താഴെ
18 മുതൽ 24 വരെ
25 മുതൽ 35 വരെ
35-ൽ കൂടുതൽ

ചെക്ക്ബോക്സുകൾ

ഘടകം തരം ചെക്ക്ബോക്സ്നിങ്ങൾ നൽകുന്ന ഓപ്ഷനുകളിൽ നിന്ന് തിരഞ്ഞെടുക്കാനുള്ള കഴിവ് ഉപയോക്താവിന് നൽകുന്ന റേഡിയോ ബട്ടണുകൾക്ക് സമാനമായ ചെക്ക്ബോക്സുകൾ സൃഷ്ടിക്കുന്നു. റേഡിയോ ബട്ടണുകളിൽ നിന്നുള്ള പ്രധാന വ്യത്യാസം, സന്ദർശകന് ഒരേസമയം നിരവധി ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാൻ കഴിയും എന്നതാണ്, കൂടാതെ ഫ്ലാഗുകൾ സ്വയം സർക്കിളുകളേക്കാൾ ചതുരങ്ങളാൽ സൂചിപ്പിച്ചിരിക്കുന്നു. റേഡിയോ ബട്ടണുകൾ പോലെ, ഓരോ ഇനത്തിനും ഒരേ ആട്രിബ്യൂട്ട് മൂല്യം നൽകി ഒരു കൂട്ടം ചെക്ക്ബോക്സുകൾ സൃഷ്ടിക്കപ്പെടുന്നു പേര്എന്നിരുന്നാലും, ഓരോ ചെക്ക്ബോക്സിനും അതിൻ്റേതായ അർത്ഥമുണ്ട്. ഒരു ചെക്ക്ബോക്സിൻ്റെ അടിസ്ഥാന വാക്യഘടന ഇതാണ്:

ആട്രിബ്യൂട്ട് പരിശോധിച്ചു, റേഡിയോ ബട്ടണുകൾ പോലെ, പേജ് ലോഡ് ചെയ്യുമ്പോൾ സ്ഥിരസ്ഥിതിയായി ചെക്ക്ബോക്സ് പരിശോധിക്കണമെന്ന് വ്യക്തമാക്കുന്നു. ഈ ആട്രിബ്യൂട്ട് നിരവധി ഗ്രൂപ്പ് ചെക്ക്ബോക്സുകൾക്കായി ഒരേസമയം സജ്ജമാക്കാൻ കഴിയും.
ചെക്ക്‌ബോക്‌സുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഇനിപ്പറയുന്ന ഉദാഹരണത്തിന് നിരവധി ഡിഫോൾട്ട് ഉത്തര ചോയ്‌സുകൾ ഉണ്ട്:

ഉദാഹരണം: റേഡിയോ ബട്ടണുകൾ ഉപയോഗിക്കുന്നത്

സ്വയം പരീക്ഷിച്ചു നോക്കൂ"

ജാസ്
ബ്ലൂസ്
പാറ
ചാൻസൻ
രാജ്യം

ഏത് തരത്തിലുള്ള സംഗീതമാണ് നിങ്ങൾ ഇഷ്ടപ്പെടുന്നത്?

ജാസ്
ബ്ലൂസ്
പാറ
ചാൻസൻ
രാജ്യം

ബട്ടണുകൾ സമർപ്പിക്കുകയും പുനഃസജ്ജമാക്കുകയും ചെയ്യുക

ഘടകം തരം സമർപ്പിക്കുകക്ലിക്ക് ചെയ്യുമ്പോൾ, ഫോമിലേക്ക് ഉപയോക്താവ് നൽകിയ ഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്നതിന് ബ്രൗസറിനെ സെർവർ സ്‌ക്രിപ്റ്റിലേക്ക് അയയ്‌ക്കുന്ന ഒരു ബട്ടൺ സൃഷ്‌ടിക്കുന്നു. ഫോം മായ്‌ക്കുന്ന ഒരു ബട്ടൺ ഞങ്ങൾ സൃഷ്‌ടിച്ചാൽ, ഞങ്ങൾ ആട്രിബ്യൂട്ട് അസൈൻ ചെയ്യുന്നു തരം"റീസെറ്റ്" മൂല്യം. ഘടകം തരം സമർപ്പിക്കുകഒരു ഓപ്ഷണൽ ആട്രിബ്യൂട്ട് നൽകാം പേര്. ആട്രിബ്യൂട്ട് മൂല്യംബട്ടണിലെ ലേബൽ സൂചിപ്പിക്കുന്ന വാചകം വ്യക്തമാക്കാൻ ഈ ഘടകത്തിൽ ഉപയോഗിക്കുന്നു. സ്ഥിരസ്ഥിതിയായി, ബ്രൗസറുകൾ ബട്ടണിൽ "സമർപ്പിക്കുക" എന്ന് എഴുതിയിരിക്കുന്നു; ഈ ലിഖിതത്തിൽ നിങ്ങൾ തൃപ്തനല്ലെങ്കിൽ, അത് സ്വയം നൽകുക. വ്യത്യസ്ത ബ്രൗസറുകളിൽ സ്ഥിരീകരണ ബട്ടണുകളുടെ ശൈലികൾ വ്യത്യാസപ്പെട്ടിരിക്കാമെന്നതിനാൽ, CSS ടൂളുകൾ ഉപയോഗിച്ച് ബട്ടണിൻ്റെ ശൈലി സ്വയം ഇച്ഛാനുസൃതമാക്കുകയോ ഗ്രാഫിക്കൽ ബട്ടണുകൾ ഉപയോഗിക്കുകയോ ചെയ്യുന്നതാണ് നല്ലത്.
സ്ഥിരീകരണവും ക്ലിയർ ബട്ടണുകളും സൃഷ്ടിക്കുന്നു:

ഉദാഹരണം: സമർപ്പിക്കലും പുനഃസജ്ജമാക്കലും ഉപയോഗിക്കുന്നത്

സ്വയം പരീക്ഷിച്ചു നോക്കൂ"

റീസെറ്റ് ബട്ടണിൽ ക്ലിക്കുചെയ്യുന്നത് ഉപയോക്താവ് നൽകിയ ഏത് ഡാറ്റയും റീസെറ്റ് ചെയ്യുന്നു.

പ്രവർത്തന ആട്രിബ്യൂട്ട്.

മൂലകത്തിനുള്ള പ്രധാനം

ഒരു ഗുണമാണ് നടപടി, ഇത് ഫോമിനായുള്ള ഡാറ്റ ഹാൻഡ്‌ലറെ വ്യക്തമാക്കുന്നു. ഫോം ഡാറ്റ ഉപയോഗിച്ച് എന്തുചെയ്യണമെന്ന് വിവരിക്കുന്ന ഒരു ഫയലാണ് ഡാറ്റ ഹാൻഡ്‌ലർ. ഈ പ്രോസസ്സിംഗിൻ്റെ ഫലം ബ്രൗസറിലേക്ക് തിരികെ വരുന്ന ഒരു പുതിയ HTML പേജാണ്. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ആട്രിബ്യൂട്ടിൽ നടപടിഫോം പ്രോസസ്സ് ചെയ്യുന്നതിനായി സെർവറിലെ ഒരു ഹാൻഡ്‌ലർ ഫയലിലേക്കുള്ള URL പാത്ത് വ്യക്തമാക്കുന്നു (ചിലപ്പോൾ സ്ക്രിപ്റ്റ് പേജ് എന്ന് വിളിക്കുന്നു). വാക്യഘടന ഇപ്രകാരമാണ്:

…

പ്രോസസ്സിംഗ് ഫയൽ സെർവറിൽ സ്ഥിതിചെയ്യുന്നു mytestserver.comഫോൾഡറിൽ നെയിംഫോൾഡർഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്ന സെർവർ സ്ക്രിപ്റ്റിൻ്റെ പേരും - obrabotchik.php. നിങ്ങൾ വെബ് പേജിലെ ഫോമിൽ നൽകിയ എല്ലാ ഡാറ്റയും അവനിലേക്ക് കൈമാറും. .php എക്സ്റ്റൻഷൻ സൂചിപ്പിക്കുന്നത് PHP-യിൽ എഴുതിയ ഒരു സ്ക്രിപ്റ്റ് ഉപയോഗിച്ചാണ് നിർദ്ദിഷ്ട ഫോം പ്രോസസ്സ് ചെയ്യുന്നത്. ഹാൻഡ്‌ലർ തന്നെ മറ്റൊരു ഭാഷയിൽ എഴുതാം, ഉദാഹരണത്തിന് ഇത് സ്ക്രിപ്റ്റിംഗ് ഭാഷയായ പൈത്തൺ, റൂബി മുതലായവ ആകാം.
എല്ലായ്പ്പോഴും ആട്രിബ്യൂട്ട് മൂല്യം സജ്ജീകരിക്കുന്നത് നല്ലതാണ് നടപടി. ഫോം അത് സ്ഥിതിചെയ്യുന്ന അതേ പേജിലേക്ക് മൂല്യങ്ങൾ കൈമാറുകയാണെങ്കിൽ, പ്രവർത്തന ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യമായി ഒരു ശൂന്യമായ സ്ട്രിംഗ് നൽകുക: action="".

രീതി ആട്രിബ്യൂട്ട്

ആട്രിബ്യൂട്ട് രീതിസെർവറിലേക്ക് വിവരങ്ങൾ എങ്ങനെ കൈമാറണമെന്ന് വ്യക്തമാക്കുന്നു. നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന ഫോം സമർപ്പിക്കൽ രീതി നിങ്ങൾ ഫോമിനൊപ്പം സമർപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ഡാറ്റയെ ആശ്രയിച്ചിരിക്കുന്നു. ഈ ഡാറ്റയുടെ അളവ് ഇവിടെ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. നിങ്ങളുടെ ഫോമിൻ്റെ ഉറവിട ഡാറ്റ ബ്രൗസറിൽ നിന്ന് സെർവറിലേക്ക് കൈമാറുന്നതിനുള്ള രണ്ട് രീതികളാണ് ഏറ്റവും ജനപ്രിയമായത്: നേടുകഒപ്പം പോസ്റ്റ്. നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന ഏത് രീതിയിലും ഈ രീതി സജ്ജീകരിക്കാൻ കഴിയും, നിങ്ങൾ അത് വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, സ്ഥിരസ്ഥിതി ഉപയോഗിക്കും നേടുക. അവയിൽ ഓരോന്നിൻ്റെയും ഉപയോഗം നമുക്ക് പരിഗണിക്കാം.

പോസ്റ്റ് രീതി

രീതി പോസ്റ്റ്പാക്കേജുകൾ ഡാറ്റ രൂപപ്പെടുത്തുകയും ഉപയോക്താവ് ശ്രദ്ധിക്കാതെ സെർവറിലേക്ക് അയയ്ക്കുകയും ചെയ്യുന്നു, കാരണം ഡാറ്റ സന്ദേശത്തിൻ്റെ ബോഡിയിൽ അടങ്ങിയിരിക്കുന്നു. വെബ് ബ്രൗസർ, രീതി ഉപയോഗിക്കുമ്പോൾ പോസ്റ്റ്ഫോം ഡാറ്റയും തുടർന്ന് പ്രത്യേക തലക്കെട്ടുകളും അടങ്ങുന്ന ഒരു അഭ്യർത്ഥന സെർവറിലേക്ക് അയയ്ക്കുന്നു. ഈ അഭ്യർത്ഥനയുടെ ഉള്ളടക്കം സെർവറിന് മാത്രമേ ലഭ്യമാകൂ എന്നതിനാൽ, രീതി പോസ്റ്റ്പാസ്‌വേഡുകൾ, ബാങ്ക് കാർഡ് വിശദാംശങ്ങൾ, ഉപയോക്താക്കളുടെ മറ്റ് സ്വകാര്യ വിവരങ്ങൾ എന്നിവ പോലുള്ള രഹസ്യാത്മക ഡാറ്റ കൈമാറാൻ ഉപയോഗിക്കുന്നു. രീതി പോസ്റ്റ്ഈ രീതിയിൽ നിന്ന് വ്യത്യസ്തമായി വലിയ അളവിലുള്ള വിവരങ്ങൾ അയയ്‌ക്കുന്നതിനും അനുയോജ്യമാണ് നേടുക, കൈമാറ്റം ചെയ്യപ്പെടുന്ന പ്രതീകങ്ങളുടെ എണ്ണത്തിൽ ഇതിന് നിയന്ത്രണങ്ങളൊന്നുമില്ല.

GET രീതി

നിങ്ങൾക്ക് ഇതിനകം അറിയാവുന്നതുപോലെ, ഒരു ബ്രൗസറിൻ്റെ പ്രധാന ജോലി സെർവറിൽ നിന്ന് വെബ് പേജുകൾ സ്വീകരിക്കുക എന്നതാണ്. അതിനാൽ നിങ്ങൾ രീതി ഉപയോഗിക്കുമ്പോൾ നേടുക, നിങ്ങളുടെ ബ്രൗസർ എല്ലായ്പ്പോഴും ചെയ്യുന്നതുപോലെ വെബ് പേജ് വീണ്ടെടുക്കുന്നു. രീതി നേടുകഫോം ഡാറ്റയും പൊതിയുന്നു, പക്ഷേ സെർവറിലേക്ക് അഭ്യർത്ഥന അയയ്‌ക്കുന്നതിന് മുമ്പ് അത് URL-ൻ്റെ അവസാനം ചേർക്കുന്നു. രീതി എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കാൻ നേടുക, നമുക്ക് അത് പ്രവർത്തനത്തിൽ നോക്കാം. ഈ പാഠത്തിൽ നിന്നുള്ള ആദ്യ ഉദാഹരണം (ഉദാഹരണം: ലളിതമായ HTML ഫോം) നോട്ട്പാഡിൽ (ഉദാഹരണത്തിന് നോട്ട്പാഡ്++) തുറന്ന് HTML കോഡിൽ ഒരു ചെറിയ മാറ്റം വരുത്തുക:

ആ. മാറ്റിസ്ഥാപിക്കുക പോസ്റ്റ്ഓൺ നേടുക.
എന്ന പേരിൽ ഫയൽ സേവ് ചെയ്യുക file_name.htmlകൂടാതെ ബ്രൗസർ പേജ് (F5) പുതുക്കുക, തുടർന്ന് ഫോം പൂരിപ്പിക്കുക, ഉദാഹരണത്തിന് വാസ്യ പുപ്കിൻ, കൂടാതെ "സമർപ്പിക്കുക" ബട്ടൺ ക്ലിക്ക് ചെയ്യുക. നിങ്ങളുടെ ബ്രൗസറിൻ്റെ അഡ്രസ് ബാറിൽ ഇതുപോലൊന്ന് നിങ്ങൾ കാണും:

File_name.html?firstname=Vasya&lastname=Pupkin

ഇപ്പോൾ നിങ്ങൾക്ക് URL-ൽ തന്നെ ഓരോ ഫോം ഘടകത്തിൻ്റെയും പേരും അതിൻ്റെ മൂല്യവും കാണാൻ കഴിയും.
URL ബാക്കിയുള്ള ഫോം ഡാറ്റയിൽ നിന്ന് ഒരു ചോദ്യചിഹ്നത്താൽ വേർതിരിച്ചിരിക്കുന്നു, കൂടാതെ വേരിയബിൾ പേരുകളും മൂല്യങ്ങളും ഒരു ആമ്പർസാൻഡ് ഉപയോഗിച്ച് വേർതിരിക്കുന്നു (&) .
നിങ്ങൾ വലിയ അളവിലുള്ള വിവരങ്ങൾ കൈമാറുന്നില്ലെങ്കിൽ ഈ രീതി ഉപയോഗിക്കേണ്ടതാണ്.
ബാങ്ക് കാർഡ് നമ്പറോ പാസ്‌വേഡോ സംഭരിക്കുന്നത് പോലെ നിങ്ങളുടെ ഫോമിലെ ഡാറ്റ സെൻസിറ്റീവ് ആണെങ്കിൽ ഈ രീതി പ്രവർത്തിക്കില്ല.
കൂടാതെ, രീതി നേടുകഫോം സഹിതം സെർവറിലേക്ക് ഫയലുകൾ അയയ്‌ക്കണമെങ്കിൽ അത് അനുയോജ്യമല്ല.

ഫോം ഘടകങ്ങൾ ഗ്രൂപ്പുചെയ്യുന്നു

അർത്ഥവുമായി ബന്ധപ്പെട്ട ഫോം ഘടകങ്ങൾ ടാഗുകൾക്കിടയിൽ ഗ്രൂപ്പുചെയ്യാനാകും

ഒപ്പം

. ബ്രൗസർ പ്രദർശിപ്പിക്കും

ഒരു കൂട്ടം ഫോം ഘടകങ്ങളെ ചുറ്റിപ്പറ്റിയുള്ള ഒരു ഫ്രെയിമിൻ്റെ രൂപത്തിൽ. കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (CSS) ഉപയോഗിച്ച് ഫ്രെയിമിൻ്റെ രൂപം മാറ്റാവുന്നതാണ്.
ഓരോ ഗ്രൂപ്പിനും ഒരു ശീർഷകം ചേർക്കുന്നതിന്, നിങ്ങൾക്ക് ഒരു ഘടകം ആവശ്യമാണ് , ഫ്രെയിമിൽ ഉൾച്ചേർക്കേണ്ട ഗ്രൂപ്പ് ടൈറ്റിൽ ടെക്സ്റ്റ് വ്യക്തമാക്കുന്നു.

HTML5 ൻ്റെ ആവിർഭാവത്തോടെ, ഫോമുകൾ കൂടുതൽ ബഹുമുഖമായി മാറി. ഇൻപുട്ട് എലമെൻ്റിൽ ഇപ്പോൾ ഇമെയിൽ വിലാസങ്ങൾ, തീയതികൾ എന്നിവയും അതിലേറെയും അടങ്ങിയിരിക്കാം, അവ ജാവാസ്ക്രിപ്റ്റ് അവലംബിക്കാതെ തന്നെ ആവശ്യാനുസരണം അടയാളപ്പെടുത്താൻ കഴിയും - ഇവ ഏറ്റവും വിലപ്പെട്ട സവിശേഷതകളിൽ ചിലതാണ്. കൂടാതെ, ഇപ്പോൾ നിങ്ങൾക്ക് ഒരു ഫോമിനായി നിരവധി സബ്‌മിറ്റ് ബട്ടണുകൾ ഉപയോഗിക്കാം, കൂടാതെ സമർപ്പിക്കുക ബട്ടൺ ഫോമിന് പുറത്ത് നീക്കുന്നത് ഇപ്പോൾ സാധ്യമാണ്.

ഒരു ഫോമിൽ ഒന്നിലധികം സമർപ്പിക്കുന്നു

അടുത്തിടെ വരെ, നിങ്ങൾക്ക് ഒരു ഫോമിലേക്ക് ഒരു സമർപ്പിക്കൽ ബട്ടൺ മാത്രമേ ചേർക്കാൻ കഴിയുമായിരുന്നുള്ളൂ, അല്ലാത്തപക്ഷം ഫോം അവസാന ബട്ടൺ മാത്രമേ പ്രോസസ്സ് ചെയ്യുകയുള്ളൂ. "ഫോം" ഫോം എലമെൻ്റിലേക്ക് method="post" ഉം url ഉം ചേർക്കുന്നതിലൂടെ ഞങ്ങൾക്ക് ഒരു വർക്കിംഗ് ഫോം ലഭിച്ചു.

ഇപ്പോൾ സ്ഥിതി മാറിയിരിക്കുന്നു - "ഫോംമെത്തോഡ്", "ഫോർമക്ഷൻ" എന്നീ പുതിയ പ്രോപ്പർട്ടികൾ HTML-ലേക്ക് ചേർത്തു. "സമർപ്പിക്കുക" ബട്ടണിലേക്ക് നേരിട്ട് ഒരു പോസ്റ്റ് രീതിയും url-ഉം ചേർക്കാൻ അവർ നിങ്ങളെ അനുവദിക്കുന്നു, അതിനാൽ നിങ്ങൾ ഫോമിലേക്ക് ഒന്നും ചേർക്കേണ്ടതില്ല. ഈ പാരാമീറ്ററുകൾ ഫോമിന് പകരം "സമർപ്പിക്കുക" ബട്ടണിൽ ഘടിപ്പിച്ചിരിക്കുന്നത് ഫോമിന് കൂടുതൽ വഴക്കം നൽകുന്നു. ഇപ്പോൾ നിങ്ങൾക്ക് ഫോമിന് ആവശ്യമുള്ളത്ര ബട്ടണുകൾ ഉണ്ടാക്കാം.

ഇപ്പോൾ ഓരോ "സമർപ്പിക്കുക" ബട്ടണും വ്യത്യസ്‌ത URL-ലേതാണ്, ഇതെല്ലാം ലേഔട്ട് സമയത്ത് ജാവാസ്ക്രിപ്റ്റ് കോഡ് എഴുതേണ്ടതിൻ്റെ ആവശ്യകത ഇല്ലാതാക്കുന്നു. ഇതെല്ലാം നന്നായി പ്രവർത്തിക്കുന്നു, ഇപ്പോൾ നിങ്ങൾ ഒരു ബട്ടണിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, ഫോമിന് ഫോം രീതിയും രൂപീകരണവും ലഭിക്കും, ഇത് സ്റ്റാൻഡേർഡ് രീതിയും പ്രവർത്തന പാരാമീറ്ററുകളും പുനരാലേഖനം ചെയ്യും. ഫോമിൽ പുതിയ പാരാമീറ്ററുകൾ ഇല്ലാതെ ഒരു സാധാരണ "സമർപ്പിക്കുക" ബട്ടൺ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, അത് ഫോം എലമെൻ്റിനായി സജ്ജമാക്കിയ ഫോം മൂല്യങ്ങൾ തിരികെ നൽകും.

എല്ലാ ജനപ്രിയ ബ്രൗസറുകളും ഫോം രീതിയും ഫോർമാറ്റ് പ്രോപ്പർട്ടിയും പിന്തുണയ്ക്കുന്നു

ഫോമിന് പുറത്തുള്ള ഫോം ഘടകങ്ങൾ (ഇൻപുട്ട്, സെലക്ട്, ടെക്സ്റ്റ് ഏരിയ).

ഒരു ഫോമിൻ്റെ എല്ലാ ഘടകങ്ങളും ഒരു മൂലകത്തിനുള്ളിൽ സ്ഥിതിചെയ്യണം എന്നത് പൊതുവായി അംഗീകരിക്കപ്പെട്ട വസ്തുതയാണ്

. ഇത് ഫോമുകളുടെ രൂപകൽപ്പനയിലെ വഴക്കം കുറയ്ക്കുന്നു. പുതിയ "ഫോം" ആട്രിബ്യൂട്ടിന് നന്ദി, ഇപ്പോൾ ഏത് ഘടകവും ഫോമിന് പുറത്തേക്ക് നീക്കാനും ഏത് ഫോം ഘടകവും പേജിൻ്റെ ഏത് ഭാഗത്തും സ്ഥാപിക്കാനും കഴിയും. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് ഒരു ഫോം ആവശ്യമാണ് ഒരു ഐഡി ചേർക്കുക, തുടർന്ന് ആ ഐഡിയുടെ മൂല്യം എല്ലാ ഘടകങ്ങളിലേക്കും ഒരു ആട്രിബ്യൂട്ടായി ചേർക്കുക.

ഇന്ന്, ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ (പതിപ്പ് 10 വരെ) ഒഴികെ, എല്ലാ ജനപ്രിയ ബ്രൗസറുകളും ഫോം ആട്രിബ്യൂട്ട് പിന്തുണയ്ക്കുന്നു.

ഫോറങ്ങളിലെ ടോപ്പ് 10 ചോദ്യങ്ങളിൽ ഒന്നായിരിക്കാം ഈ ചോദ്യം :) മിക്കവാറും ഇത് ഡിസൈനറുടെയോ ഉപഭോക്താവിൻ്റെയോ ആവശ്യകതയാണ്.

അതിനാൽ, ഒറ്റനോട്ടത്തിൽ, പരിഹാരം ലളിതമാണ്:

<ഒരു href = "#" onclick = "document.getElementById("myform").submit(); തെറ്റ് തിരികെ നൽകുക;"> അയക്കുക</a>

എന്നാൽ (വിചിത്രമെന്നു പറയട്ടെ) അടുത്ത ചോദ്യം ഉയർന്നുവരുന്നു: സന്ദർശകന് JS പ്രവർത്തനരഹിതമാക്കിയാലോ?

നമുക്ക് നമ്മുടെ കോഡ് ഇതിലേക്ക് മാറ്റാം:

<ഇൻപുട്ട് തരം = "സമർപ്പിക്കുക" മൂല്യം = "(! LANG:സമർപ്പിക്കുക" class = "link" / > !}

നമുക്ക് കുറച്ച് JS ചേർക്കാം:

addEvent(വിൻഡോ, "ലോഡ്" , വിൻഡോലോഡ്) ;
/* ക്രോസ്-ബ്രൗസർ ഒരു ഇവൻ്റ് ഹാൻഡ്‌ലർ ചേർക്കുന്നു */
ഫംഗ്ഷൻ addEvent(obj, evType, fn) (
എങ്കിൽ (obj.addEventListener) (
obj.addEventListener (evType, fn, false);
) ഇല്ലെങ്കിൽ (obj.attachEvent) (
obj.attachEvent("on" + evType, fn);
}
}
/* മൂലകത്തിൻ്റെ പാരൻ്റ് ഫോം നേടുക */
ഫംഗ്‌ഷൻ getParentForm(obj) (
അതേസമയം ((obj = obj.parentNode ) ) (
എങ്കിൽ (obj.nodeName == "ഫോം" ) (
ബ്രേക്ക് ;
}
}
തിരികെ obj;
}
/* ഞങ്ങൾ ലിങ്ക് ക്ലാസുള്ള എല്ലാ സബ്‌മിറ്റ് ബട്ടണുകൾക്കായി നോക്കുകയും അവയ്ക്ക് പകരം ലിങ്കുകൾ നൽകുകയും ചെയ്യുന്നു */
ഫംഗ്ഷൻ വിൻഡോലോഡ്() (
var ബട്ടണുകൾ = document.getElementsByTagName("ഇൻപുട്ട്" ) ;
വേണ്ടി (var i = 0; i< buttons.length ; i++ ) {

link.appendChild(document.createTextNode(ബട്ടണുകൾ[ i].getAttribute("value") ));
link.setAttribute ("href" , "#" );
addEvent(ലിങ്ക്, "ക്ലിക്ക്" , linkClick) ;
var പേരൻ്റ് = ബട്ടണുകൾ[ i].parentNode ;
parent.removeChild (ബട്ടണുകൾ[ i] );
parent.appendChild(ലിങ്ക്) ;
}
}
}
/* ലിങ്കിൽ ക്ലിക്ക് ചെയ്ത് ഫോം സമർപ്പിക്കുക */
ഫംഗ്‌ഷൻ ലിങ്ക് ക്ലിക്ക്(ഇ) (
var e = window.event || ഇ;
var ലക്ഷ്യം = ഇ.ലക്ഷ്യം || e.srcElement;
var parentForm = getParentForm(ലക്ഷ്യം) ;
parentForm.submit();
എങ്കിൽ (window.event) (e.returnValue = false;) else (e.preventDefault();)
}

ഇപ്പോൾ, JS പ്രവർത്തനരഹിതമാക്കിയാൽ, സന്ദർശകൻ ഒരു ലിങ്കിന് പകരം ഒരു ബട്ടൺ കാണും, തുടർന്നും ഫോം സമർപ്പിക്കാൻ കഴിയും. എന്നാൽ ഞങ്ങൾ അവിടെ നിൽക്കില്ല. JS പ്രവർത്തനരഹിതമാക്കിയാലും ബട്ടൺ ഒരു ലിങ്ക് പോലെയാക്കാം. ബട്ടൺ സ്‌റ്റൈൽ ചെയ്യുന്നതിനായി, ഞങ്ങൾ ടാഗ് ബട്ടണിലേക്ക് മാറ്റും, ഒപ്പം സ്‌പാൻ ആവശ്യമായതിനാൽ ഫയർഫോക്‌സിൽ അടിവരയിടുന്ന ടെക്‌സ്‌റ്റ് ചേർക്കാനാകും.

<ബട്ടൺ തരം = "സമർപ്പിക്കുക" ക്ലാസ് = "ലിങ്ക്" > അയക്കുക</span>

അതിനനുസരിച്ച് JS ഭാഗവും മാറ്റും.

var ബട്ടണുകൾ = document.getElementsByTagName("ബട്ടൺ");
വേണ്ടി (var i = 0; i< buttons.length ; i++ ) {
എങ്കിൽ (ബട്ടണുകൾ[ i].getAttribute("type" ) == "സമർപ്പിക്കുക" && ബട്ടണുകൾ[ i].className == "ലിങ്ക്" ) (
var ലിങ്ക് = document.createElement("a");
link.appendChild(document.createTextNode(ബട്ടണുകൾ[ i].firstChild.firstChild.nodeValue));

CSS ഇതുപോലെ കാണപ്പെടും:

button.link(
/* IE-യിലെ ഇൻഡൻ്റേഷൻ നീക്കം ചെയ്യാൻ ആദ്യത്തെ രണ്ട് പ്രോപ്പർട്ടികൾ ആവശ്യമാണ് */
കവിഞ്ഞൊഴുകുക: ദൃശ്യം;
വീതി: ഓട്ടോ;
/* ഇൻഡൻ്റേഷൻ നീക്കം ചെയ്യുക */
മാർജിൻ: 0;
പാഡിംഗ്: 0;
/* എല്ലാ ബട്ടൺ ഡിസൈൻ ഘടകങ്ങളും നീക്കം ചെയ്യുക */
പശ്ചാത്തലം: ഒന്നുമില്ല;
അതിർത്തി: ഒന്നുമില്ല;
/* ലിങ്കുകൾക്കുള്ള സാധാരണ കഴ്സർ */
കഴ്സർ: പോയിൻ്റർ;
}
/* ലിങ്ക് സാധാരണയായി അടിവരയിട്ടിരിക്കുന്നു */
button.link സ്പാൻ(
നിറം: #00f;
ടെക്സ്റ്റ് അലങ്കാരം: അടിവരയിടുക;
}

ഫയർഫോക്സിനായി, നിങ്ങൾക്ക് -moz-user-select: text; അതിനാൽ ബട്ടൺ ടെക്സ്റ്റ് ഹൈലൈറ്റ് ചെയ്യാൻ കഴിയും, പക്ഷേ ഇത് ആവശ്യമാണോ എന്ന് എനിക്ക് സംശയമുണ്ട്.

ശേഷിക്കുന്ന ശൈലികൾ നിർദ്ദിഷ്ട രൂപകൽപ്പനയെ ആശ്രയിച്ചിരിക്കും.

കുറച്ച് കുറിപ്പുകൾ:

സജീവമായതും സന്ദർശിച്ചതും IE6 നായി കപട ക്ലാസുകൾ പ്രയോഗിക്കാനും ബട്ടണിലേക്ക് ഹോവർ ചെയ്യാനും കഴിയില്ല.
ഒരു ഫോമിനുള്ള നിരവധി ബട്ടണുകൾ സാധാരണയായി IE6-ൽ പ്രവർത്തിക്കില്ല
JS ഇല്ലാതെ നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയും. ലിങ്കിൻ്റെ സ്വാഭാവികത നിങ്ങൾക്ക് എത്രത്തോളം പ്രധാനമാണ് എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു.

യുപിഡി
insa , ക്രോസ്-ബ്രൗസർ അനുയോജ്യമല്ല (അഭിപ്രായങ്ങൾ വായിക്കുക).

(സാധാരണയായി ഉപയോക്താവ് ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുന്നതിനാൽ), ഉപയോക്തൃ ഏജൻ്റ് സെർവറിലേക്ക് ഫോം സമർപ്പിക്കാൻ ശ്രമിക്കുന്നു.