3. ഫോം ഫീൽഡുകൾ സൃഷ്ടിക്കുക

ഘടകം മിക്ക ഫോം ഫീൽഡുകളും സൃഷ്ടിക്കുന്നു. ഒരു മൂലകത്തിന്റെ ആട്രിബ്യൂട്ടുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന ഫീൽഡ് തരം അനുസരിച്ച് വ്യത്യാസപ്പെട്ടിരിക്കുന്നു.

CSS ശൈലികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഫോണ്ട് സൈസ്, ഫോണ്ട് തരം, നിറം, ടെക്സ്റ്റിന്റെ മറ്റ് പ്രോപ്പർട്ടികൾ എന്നിവ മാറ്റാം, അതുപോലെ ബോർഡറുകൾ, പശ്ചാത്തല നിറം, പശ്ചാത്തല ചിത്രം എന്നിവ ചേർക്കുക. ഫീൽഡിന്റെ വീതി വീതി പ്രോപ്പർട്ടി കൊണ്ടാണ് വ്യക്തമാക്കിയിരിക്കുന്നത്.

4. ടെക്സ്റ്റ് ഇൻപുട്ട് ഫീൽഡുകൾ

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

പൂച്ച

7. ബട്ടണുകൾ

ഘടകം ...ക്ലിക്ക് ചെയ്യാവുന്ന ബട്ടണുകൾ സൃഷ്ടിക്കുന്നു. സൃഷ്ടിച്ച ബട്ടണുകളിൽ നിന്ന് വ്യത്യസ്തമായി ( , , , ), മൂലകത്തിനുള്ളിൽ നിങ്ങൾക്ക് ഉള്ളടക്കം സ്ഥാപിക്കാൻ കഴിയും - ടെക്സ്റ്റ് അല്ലെങ്കിൽ ഇമേജ്.

ഘടകം ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന്

വ്യത്യസ്ത ബ്രൗസറുകൾക്ക് തരം ആട്രിബ്യൂട്ട് വ്യക്തമാക്കേണ്ടതുണ്ട്, ഉദാഹരണത്തിന്, .

ഒരു ഫോമിലേക്ക് ഡാറ്റ സമർപ്പിക്കാനോ ഫോം ഉള്ളടക്കം മായ്‌ക്കാനോ മറ്റെന്തെങ്കിലും നടപടിയെടുക്കാനോ ബട്ടണുകൾ ഉപയോക്താക്കളെ അനുവദിക്കുന്നു. നിങ്ങൾക്ക് ഒരു ബട്ടണിൽ ബോർഡറുകൾ സൃഷ്ടിക്കാനും പശ്ചാത്തലം മാറ്റാനും വാചകം വിന്യസിക്കാനും കഴിയും.

8. ഫോമുകളിലെ ചെക്ക്ബോക്സുകളും റേഡിയോ ബട്ടണുകളും

നിർമ്മാണം ഉപയോഗിച്ച് ഫോമുകളിലെ ചെക്ക്ബോക്സുകൾ സജ്ജീകരിച്ചിരിക്കുന്നു , കൂടാതെ സ്വിച്ച് - ഉപയോഗിക്കുന്നു .

ചെക്ക്ബോക്സുകൾ, റേഡിയോ ബട്ടണുകളിൽ നിന്ന് വ്യത്യസ്തമായി, ഒരു രൂപത്തിൽ പലതിലേക്ക് സജ്ജമാക്കാൻ കഴിയും. ചെക്ക് ബോക്സുകൾക്കായി ചെക്ക് ചെയ്ത ആട്രിബ്യൂട്ട് വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, പേജ് ലോഡ് ചെയ്യുമ്പോൾ, അനുബന്ധ ഫോം ഫീൽഡുകളിലെ ചെക്ക്ബോക്സുകൾ ഇതിനകം തിരഞ്ഞെടുക്കപ്പെടും.

ഘടകം റേഡിയോ ബട്ടണുകളും ചെക്ക്ബോക്സുകളും ഉപയോഗിച്ച് തിരഞ്ഞെടുക്കൽ നടപ്പിലാക്കുമ്പോൾ ഉപയോഗിക്കുന്നു. അതുമായി ബന്ധപ്പെട്ട ടെക്‌സ്‌റ്റിൽ ക്ലിക്കുചെയ്‌ത് നിങ്ങൾക്ക് ആവശ്യമുള്ള ഇനം തിരഞ്ഞെടുക്കാനാകും. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ സ്ഥാപിക്കേണ്ടതുണ്ട് മൂലകത്തിനുള്ളിൽ .

ഒരു സൈറ്റ് സന്ദർശകനിൽ നിന്ന് കുറച്ച് ഡാറ്റ ശേഖരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ HTML ഫോമുകൾ ആവശ്യമാണ്. ഉദാഹരണത്തിന്, ഉപയോക്തൃ രജിസ്ട്രേഷൻ സമയത്ത് പേര്, ഇമെയിൽ വിലാസം, ക്രെഡിറ്റ് കാർഡ് മുതലായവ പോലുള്ള ഡാറ്റ ശേഖരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു.

സൈറ്റ് സന്ദർശകരിൽ നിന്ന് ഫോം ഇൻപുട്ട് എടുക്കുകയും തുടർന്ന് അത് CGI, ASP സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ സ്ക്രിപ്റ്റ് മുതലായവ പോലുള്ള അവസാന ആപ്ലിക്കേഷനിലേക്ക് പോസ്റ്റ് ചെയ്യുകയും ചെയ്യും. PHP എൻഡ് ആപ്ലിക്കേഷൻ ആപ്ലിക്കേഷനിലെ നിർദ്ദിഷ്ട ബിസിനസ്സ് ലോജിക്കിനെ അടിസ്ഥാനമാക്കി കൈമാറ്റം ചെയ്ത ഡാറ്റയിൽ ആവശ്യമായ പ്രോസസ്സിംഗ് നടത്തും.

ടെക്‌സ്‌റ്റ് ഫീൽഡുകൾ, ടെക്‌സ്‌റ്റേറിയ ഫീൽഡുകൾ, ഡ്രോപ്പ്-ഡൗൺ മെനു, റേഡിയോ ബട്ടണുകൾ, ചെക്ക് ബോക്‌സുകൾ തുടങ്ങിയ വിവിധ ഫോം ഘടകങ്ങൾ ലഭ്യമാണ്.

ടാഗ് ചെയ്യുക ഒരു HTML ഫോം സൃഷ്ടിക്കാൻ HTML ഉപയോഗിക്കുന്നു, അതിന് ഇനിപ്പറയുന്ന വാക്യഘടനയുണ്ട്:

ഇൻപുട്ട്, ടെക്‌സ്‌റ്റേറിയ തുടങ്ങിയ ഘടകങ്ങൾ രൂപീകരിക്കുക.

ഫോം ആട്രിബ്യൂട്ടുകൾ

പൊതുവായ ആട്രിബ്യൂട്ടുകളിൽ നിന്ന് വേറിട്ട്, ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന ഫോം ആട്രിബ്യൂട്ടുകളുടെ ഒരു ലിസ്റ്റ് ഇനിപ്പറയുന്നതാണ്:

കുറിപ്പ്:നിങ്ങൾക്ക് റഫർ ചെയ്യാം പേൾ & സിജിഐഫോം ഡാറ്റ അപ്‌ലോഡ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള വിശദാംശങ്ങൾക്ക്.

HTML ഫോം നിയന്ത്രണങ്ങൾ

ഒരു HTML ഫോം ഉപയോഗിച്ച് ഡാറ്റ ശേഖരിക്കാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന വ്യത്യസ്ത തരത്തിലുള്ള ഫോം നിയന്ത്രണങ്ങളുണ്ട്:

ചെക്ക്ബോക്സ് നിയന്ത്രണങ്ങൾ

റേഡിയോ ബോക്സ് നിയന്ത്രണങ്ങൾ

നിയന്ത്രണ ബോക്സ് തിരഞ്ഞെടുക്കുക

ചോയ്സ് ബോക്സുകൾ സംഭരിക്കുക

മറഞ്ഞിരിക്കുന്ന നിയന്ത്രണങ്ങൾ

ക്ലിക്ക് ചെയ്യാവുന്ന ബട്ടണുകൾ

ഇമാജിൻ ആൻഡ് ബാക്ക് ബട്ടൺ

ടെക്സ്റ്റ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ

ഫോമുകളിൽ മൂന്ന് തരത്തിലുള്ള ടെക്സ്റ്റ് ഇൻപുട്ട് ഉപയോഗിക്കുന്നു:

സിംഗിൾ ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ -സെർച്ച് ബോക്സുകൾ അല്ലെങ്കിൽ പേരുകൾ പോലുള്ള ഉപയോക്തൃ ഇൻപുട്ടിന്റെ ഒരു വരി മാത്രം ആവശ്യമുള്ള ഇനങ്ങൾക്ക് ഈ നിയന്ത്രണം ഉപയോഗിക്കുന്നു. ടാഗ് ഉപയോഗിച്ചാണ് അവ സൃഷ്ടിക്കുന്നത് HTML.

പാസ്‌വേഡ് ഇൻപുട്ട് നിയന്ത്രണം -ഇതും ഒരു വൺ-ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ട് ആണ്, എന്നാൽ ഉപയോക്താവ് അതിൽ പ്രവേശിക്കുമ്പോൾ തന്നെ അത് പ്രതീകത്തെ മറയ്ക്കുന്നു. അവയും ടാഗ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് HTML.

മൾട്ടി-ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ -ഒരു ഓഫറിനേക്കാൾ ദൈർഘ്യമുള്ള ഉപയോക്തൃ വിശദാംശങ്ങൾ നൽകാൻ ആവശ്യമുള്ളപ്പോൾ ഇത് ഉപയോഗിക്കുന്നു. ഒരു ടാഗ് ഉപയോഗിച്ചാണ് മൾട്ടി-ബാൻഡ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ സൃഷ്ടിക്കുന്നത് </b> HTML.</p> </ul><h2>സിംഗിൾ ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ</h2> <p>തിരയൽ ബോക്സുകളോ പേരുകളോ പോലുള്ള ഉപയോക്തൃ ഇൻപുട്ടിന്റെ ഒരു വരി മാത്രം ആവശ്യമുള്ള ഇനങ്ങൾക്ക് ഈ നിയന്ത്രണം ഉപയോഗിക്കുന്നു. ടാഗ് ഉപയോഗിച്ചാണ് അവ സൃഷ്ടിക്കുന്നത് <input>HTML.</p> <h3>ഉദാഹരണം</h3> <p>പേരിന്റെ ആദ്യഭാഗവും അവസാന നാമവും സ്വീകരിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു വരി ടെക്സ്റ്റ് ഇൻപുട്ടിന്റെ അടിസ്ഥാന ഉദാഹരണം ഇതാ:</p><p> <!DOCTYPE html> <html> <head> <title>ടെക്സ്റ്റ് ഇൻപുട്ട് നിയന്ത്രണം</title> </head> <body> <form >പേരിന്റെ ആദ്യഭാഗം: <input type="text" name="first_name" /> <br>പേരിന്റെ അവസാന ഭാഗം: <input type="text" name="last_name" /> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>ഇത് ഇനിപ്പറയുന്നവ നൽകും:</p> <h3>ഗുണവിശേഷങ്ങൾ</h3> <p> <input>ഒരു ടെക്സ്റ്റ് ഫീൽഡ് സൃഷ്ടിക്കാൻ.</p> <h2>പാസ്‌വേഡ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ</h2> <p>ഇതും ഒരു വൺ-ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ടാണ്, എന്നാൽ ഉപയോക്താവ് അതിൽ പ്രവേശിച്ചുകഴിഞ്ഞാൽ അത് പ്രതീകത്തെ മറയ്ക്കുന്നു. അവയും ടാഗ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് <input> <b>password</b>.</p> <h3>ഉദാഹരണം</h3> <p>ഒരു ഉപയോക്തൃ പാസ്‌വേഡ് സ്വീകരിക്കാൻ ഉപയോഗിക്കുന്ന ഒറ്റവരി പാസ്‌വേഡ് ഇൻപുട്ടിന്റെ അടിസ്ഥാന ഉദാഹരണം ഇതാ:</p><p> <!DOCTYPE html> <html> <head> <title>പാസ്‌വേഡ് ഇൻപുട്ട് നിയന്ത്രണം</title> </head> <body> <form >ഉപയോക്തൃ ഐഡി: <input type="text" name="user_id" /> <br>Password: <input type="password" name="password" /> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>ഇത് ഇനിപ്പറയുന്നവ നൽകും:</p> <h3>ഗുണവിശേഷങ്ങൾ</h3> <p>ഒരു ടാഗിനുള്ള ആട്രിബ്യൂട്ടുകളുടെ പട്ടിക പിന്തുടരുന്നു <input>ഒരു പാസ്‌വേഡ് ഫീൽഡ് സൃഷ്ടിക്കാൻ.</p> <h2>ഒന്നിലധികം ടെക്സ്റ്റ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ</h2> <p>ഒരു ഓഫറിനേക്കാൾ ദൈർഘ്യമേറിയ ഉപയോക്തൃ വിശദാംശങ്ങൾ നൽകാൻ ആവശ്യമുള്ളപ്പോൾ ഇത് ഉപയോഗിക്കുന്നു. ഒരു ടാഗ് ഉപയോഗിച്ചാണ് മൾട്ടി-ബാൻഡ് ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ സൃഷ്ടിക്കുന്നത് <textarea>HTML.</p> <h3>ഉദാഹരണം</h3> <p>ഒരു ഇനത്തിന്റെ വിവരണം എടുക്കാൻ ഉപയോഗിക്കുന്ന മൾട്ടി-ലൈൻ ടെക്സ്റ്റ് ഇൻപുട്ടിന്റെ അടിസ്ഥാന ഉദാഹരണം ഇതാ:</p><p> <!DOCTYPE html> <html> <head> <title>മൾട്ടിപ്പിൾ-ലൈൻ ഇൻപുട്ട് നിയന്ത്രണം</title> </head> <body> <form>വിവരണം: <br /> <textarea rows="5" cols="50" name="description">ഇവിടെ വിവരണം നൽകുക...



ഇത് ഇനിപ്പറയുന്നവ നൽകും:

ഗുണവിശേഷങ്ങൾ

ഒരു ടാഗിനുള്ള ആട്രിബ്യൂട്ടുകളുടെ പട്ടിക പിന്തുടരുന്നു .</p> <h2>ചെക്ക്ബോക്സ് നിയന്ത്രണം</h2> <p>ഒന്നിൽ കൂടുതൽ ഓപ്‌ഷനുകൾ തിരഞ്ഞെടുക്കുമ്പോൾ ചെക്ക്‌ബോക്‌സുകൾ ഉപയോഗിക്കുന്നു. അവയും ടാഗ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് <input>HTML എന്നാൽ തരം ആട്രിബ്യൂട്ട് സജ്ജീകരിച്ചിരിക്കുന്നു <b>ചെക്ക്ബോക്സ്</b>.</p> <h3>ഉദാഹരണം</h3> <p>2 ചെക്ക്ബോക്സുകളുള്ള ഒരു ഫോമിനുള്ള HTML കോഡിന്റെ ഒരു ഉദാഹരണം ഇതാ:</p><p> <!DOCTYPE html> <html> <head> <title>ചെക്ക്ബോക്സ് നിയന്ത്രണം</title> </head> <body> <form> <input type="checkbox" name="maths" value="ഓൺ">കണക്ക് <input type="checkbox" name="physics" value="ഓൺ">ഭൗതികശാസ്ത്രം</form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>ഇത് ഇനിപ്പറയുന്നവ നൽകും:</p> <h3>ഗുണവിശേഷങ്ങൾ</h3> <p>ഒരു ടാഗിനുള്ള ആട്രിബ്യൂട്ടുകളുടെ പട്ടിക പിന്തുടരുന്നു <checkbox>.</p> <h2>റേഡിയോ ബട്ടൺ നിയന്ത്രണം</h2> <p>നിരവധി ഓപ്ഷനുകൾ ഉള്ളപ്പോൾ റേഡിയോ ബട്ടണുകൾ ഉപയോഗിക്കേണ്ടത് ആവശ്യമാണ്, ഒരു ഓപ്ഷൻ മാത്രം. അവയും ടാഗ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് <input>HTML എന്നാൽ തരം ആട്രിബ്യൂട്ട് സജ്ജീകരിച്ചിരിക്കുന്നു <b>റേഡിയോ പ്രക്ഷേപണങ്ങൾ</b>.</p> <h3>ഉദാഹരണം</h3> <p>2 റേഡിയോ ബട്ടണുകളുള്ള ഒരു ഫോമിനുള്ള HTML കോഡിന്റെ ഉദാഹരണം ഇതാ:</p><p> <!DOCTYPE html> <html> <head> <title>റേഡിയോ ബോക്സ് നിയന്ത്രണം</title> </head> <body> <form> <input type="radio" name="subject" value="കണക്ക്">കണക്ക് <input type="radio" name="subject" value="ഭൗതികശാസ്ത്രം">ഭൗതികശാസ്ത്രം</form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>ഇത് ഇനിപ്പറയുന്നവ നൽകും:</p> <h3>ഗുണവിശേഷങ്ങൾ</h3> <p>ഒരു റേഡിയോ ബട്ടണിനുള്ള ആട്രിബ്യൂട്ടുകളുടെ ഒരു ലിസ്റ്റ് താഴെ കൊടുക്കുന്നു.</p> <h2>ബോക്സ് നിയന്ത്രണം തിരഞ്ഞെടുക്കുക</h2> <p>ഡ്രോപ്പ് ഡൗൺ ബോക്സ് എന്നും വിളിക്കപ്പെടുന്ന ഒരു സെലക്ട് ബോക്സ്, ഒരു ഡ്രോപ്പ് ഡൗൺ ലിസ്റ്റിന്റെ രൂപത്തിൽ വ്യത്യസ്ത ഓപ്ഷനുകൾ ലിസ്റ്റുചെയ്യാനുള്ള ഓപ്ഷൻ നൽകുന്ന ഒരു ബോക്സാണ്, അവിടെ നിന്ന് ഉപയോക്താവിന് ഒന്നോ അതിലധികമോ ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാം.</p> <h3>ഉദാഹരണം</h3> <p>ഒരു ഡ്രോപ്പ് ഡൗൺ ബോക്സുള്ള ഒരു ഫോമിനുള്ള HTML കോഡിന്റെ ഉദാഹരണം ഇതാ</p><p> <!DOCTYPE html> <html> <head> <title>ബോക്സ് നിയന്ത്രണം തിരഞ്ഞെടുക്കുക</title> </head> <body> <form> <select name="dropdown"> <option value="കണക്ക്" selected>കണക്ക്</option> <option value="ഭൗതികശാസ്ത്രം">ഭൗതികശാസ്ത്രം</option> </select> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <h2>വിവരണം</h2> <p>HTML ടാഗ് <form>സെർവറിലേക്ക് ഉപയോക്തൃ ഇൻപുട്ട് അയയ്‌ക്കാൻ ഉപയോഗിക്കുന്ന ഒരു HTML ഫോം സൃഷ്‌ടിക്കുന്നു.</p> <p>ഘടകത്തിനുള്ളിൽ ഉപയോക്തൃ ഇൻപുട്ടിനായി ഫോം തന്നെ ഒരു മാർഗവും നൽകാത്തതിനാൽ <form>ഡാറ്റ നൽകുന്നതിനുള്ള വ്യത്യസ്ത വഴികൾ ഉപയോക്താവിന് നൽകുകയെന്ന ലക്ഷ്യത്തോടെയുള്ള മറ്റ് ഘടകങ്ങൾ അടങ്ങിയിരിക്കുന്നു:</p> <p>ഈ ഘടകങ്ങൾക്ക് പുറമേ, നിങ്ങൾക്ക് ഫോമിനുള്ളിൽ മറ്റേതെങ്കിലും HTML ഘടകങ്ങൾ ഉപയോഗിക്കാം.</p> <p>സ്ഥിരസ്ഥിതിയായി, വെബ് പേജിൽ ഫോം ഒരു തരത്തിലും പ്രദർശിപ്പിക്കില്ല, അതിനുള്ളിലെ ഘടകങ്ങൾ മാത്രമേ ദൃശ്യമാകൂ, എന്നാൽ CSS ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഫോമിന് ഏത് രൂപവും നൽകാം.</p> <h2>ഗുണവിശേഷങ്ങൾ</h2>accept-charset: പ്രോസസ്സിംഗിനായി സെർവറിലേക്ക് സമർപ്പിച്ച ഫോം ഇൻപുട്ടിനായി ഒരു പ്രതീക എൻകോഡിംഗ് അല്ലെങ്കിൽ സ്പേസ്-വേർതിരിക്കപ്പെട്ട പ്രതീക സെറ്റുകളുടെ ലിസ്റ്റ് വ്യക്തമാക്കുന്നു. നിർദ്ദിഷ്ട എൻകോഡിംഗ് പിന്തുണയ്‌ക്കാത്ത പ്രതീകങ്ങൾ ഡാറ്റയിൽ ഉൾപ്പെടുന്നുവെങ്കിൽ, അവയ്‌ക്ക് അനുയോജ്യമായ എൻകോഡിംഗ് നിർണ്ണയിക്കാൻ ബ്രൗസർ ശ്രമിക്കുന്നു. ഉചിതമായ എൻകോഡിംഗ് നിർണ്ണയിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, അക്ഷരങ്ങൾ സംഖ്യാ കോഡുകളായി എൻകോഡ് ചെയ്യപ്പെടും. <p>ഡിഫോൾട്ട് മൂല്യം റിസർവ് ചെയ്‌ത സ്‌ട്രിംഗാണ് "അജ്ഞാത" (ബ്രൗസറുകൾ ഈ മൂല്യത്തെ മൂലകം അടങ്ങിയ ഡോക്യുമെന്റിന് സമാനമായ പ്രതീക എൻകോഡിംഗായി വ്യാഖ്യാനിക്കുന്നു <form>). പ്രവർത്തനം: പൂർത്തിയാക്കിയ ഫോമിൽ നിന്ന് ഡാറ്റ അയയ്‌ക്കുന്നതിനുള്ള വിലാസം സൂചിപ്പിക്കുന്നു, അവിടെ ഈ വിവരങ്ങൾ പ്രോസസ്സ് ചെയ്യും. autocomplete: ഫോം സ്വയം പൂർത്തീകരണം പ്രവർത്തനക്ഷമമാക്കണോ അപ്രാപ്തമാക്കണോ എന്ന് നിർണ്ണയിക്കുന്നു. സ്വയമേവ പൂരിപ്പിക്കൽ പ്രവർത്തനക്ഷമമാക്കുമ്പോൾ, ഉപയോക്താവ് മുമ്പ് ഫോം ഉപയോഗിച്ച സമയത്ത് നൽകിയ മൂല്യങ്ങൾ ബ്രൗസർ സ്വയമേവ പൂരിപ്പിക്കുന്നു. സാധ്യമായ ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ:</p><ul><li><b>ഓൺ:</b>ഉപയോക്താവ് മുമ്പ് നൽകിയ മൂല്യങ്ങൾ ബ്രൗസർ സ്വയമേവ പ്രദർശിപ്പിക്കുന്നു (സ്ഥിര മൂല്യം).</li> <li><b>ഓഫ്:</b>ഓരോ തവണയും ഫോം ഉപയോഗിക്കുമ്പോൾ ഉപയോക്താവ് ഓരോ ഫീൽഡിനുമുള്ള മൂല്യങ്ങൾ നൽകണം. മുമ്പ് നൽകിയ മൂല്യങ്ങൾ കാണിക്കില്ല.</li> </ul><p>ശ്രദ്ധിക്കുക: ഓട്ടോകംപ്ലീറ്റ് ആട്രിബ്യൂട്ടിനെ Opera ബ്രൗസർ പിന്തുണയ്ക്കുന്നില്ല.</p><p>എൻക്‌ടൈപ്പ്: സെർവറിലേക്ക് സമർപ്പിക്കുമ്പോൾ ഫോം ഡാറ്റ എങ്ങനെ എൻകോഡ് ചെയ്യപ്പെടുന്നുവെന്ന് വ്യക്തമാക്കുന്നു. method="post" ആട്രിബ്യൂട്ടിനൊപ്പം മാത്രമേ ഉപയോഗിക്കാനാകൂ. സാധ്യമായ മൂല്യങ്ങൾ:</p><ul><li><b>അപേക്ഷ/x-www-form-urlencoded:</b>സ്ഥിരസ്ഥിതി: അയയ്‌ക്കുന്നതിന് മുമ്പ് എല്ലാ പ്രതീകങ്ങളും എൻകോഡ് ചെയ്‌തിരിക്കുന്നു (സ്‌പെയ്‌സുകൾ "+" പ്രതീകങ്ങളിലേക്കും പ്രത്യേക പ്രതീകങ്ങൾ ASCII HEX മൂല്യങ്ങളിലേക്കും പരിവർത്തനം ചെയ്യുന്നു).</li> <li><b>മൾട്ടിപാർട്ട്/ഫോം-ഡാറ്റ:</b>പ്രതീകങ്ങൾ എൻകോഡ് ചെയ്തിട്ടില്ല. ഘടകങ്ങൾക്കായി ഉപയോഗിക്കുന്നു <input>, ആരുടെ തരത്തിലുള്ള ആട്രിബ്യൂട്ട് "ഫയൽ" ആയി സജ്ജീകരിച്ചിരിക്കുന്നു.</li> <li><b>ടെക്സ്റ്റ്/പ്ലെയിൻ:</b>സ്‌പെയ്‌സുകൾ "+" പ്രതീകമായി പരിവർത്തനം ചെയ്യപ്പെടുന്നു, പക്ഷേ അപ്പോസ്ട്രോഫിസ് പോലുള്ള പ്രത്യേക പ്രതീകങ്ങളെ ഹെക്‌സാഡെസിമൽ മൂല്യങ്ങളിലേക്ക് എൻകോഡ് ചെയ്യുന്നില്ല.</li> </ul>രീതി: ഫോം ഡാറ്റ സമർപ്പിക്കുമ്പോൾ ഉപയോഗിക്കുന്ന HTTP ഡാറ്റ കൈമാറ്റ രീതി വ്യക്തമാക്കുന്നു. സാധ്യമായ മൂല്യങ്ങൾ: <ul><li><b>നേടുക:</b> URL-ന്റെ അവസാനം കൂട്ടിച്ചേർത്ത്, ബ്രൗസറിന്റെ വിലാസ ബാറിലേക്ക് name=value couple ആയി ഡാറ്റ കൈമാറുന്നു. പ്രധാന URL-നും ട്രാൻസ്മിറ്റ് ചെയ്ത ഡാറ്റയ്ക്കും ഇടയിൽ ഒരു സെപ്പറേറ്ററായി ഒരു ചോദ്യചിഹ്നം (?) ഉപയോഗിക്കുന്നു, കൂടാതെ ട്രാൻസ്മിറ്റ് ചെയ്ത ഡാറ്റ പരസ്പരം വേർതിരിക്കുന്നതിന് ഒരു ആമ്പർസാൻഡ് പ്രതീകം (&) ഉപയോഗിക്കുന്നു. ചെറിയ ഡാറ്റ അയയ്ക്കുമ്പോൾ ഈ രീതി ഉപയോഗിക്കുന്നു.</li> <li><b>പോസ്റ്റ്:</b> URL-ന്റെ ഭാഗമായിട്ടല്ല, ബ്രൗസർ അഭ്യർത്ഥനയുടെ ഉള്ളടക്കമായിട്ടാണ് ഡാറ്റ അയച്ചിരിക്കുന്നത്. വലിയ അളവിലുള്ള ഡാറ്റ അയയ്ക്കാൻ ഈ രീതി ഉപയോഗിക്കുന്നു.</li> </ul>രീതി ആട്രിബ്യൂട്ട് വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, സ്ഥിരസ്ഥിതിയായി GET രീതി ഉപയോഗിക്കും. പേര്: ഫോമിന്റെ പേര് വ്യക്തമാക്കുന്നു. ഒരു ഘടകത്തെ പേര് ഉപയോഗിച്ച് പരാമർശിക്കുന്നതിനോ സമർപ്പിച്ചതിന് ശേഷം ഫോം ഡാറ്റയെ പരാമർശിക്കുന്നതിനോ ഈ പേര് JavaScript-ൽ ഉപയോഗിക്കാം. ഒരു പ്രമാണത്തിൽ നിരവധി ഫോമുകൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, അവയുടെ പേരുകൾ ആവർത്തിക്കരുത്, കൂടാതെ ഒരു ശൂന്യമായ സ്ട്രിംഗ് ആട്രിബ്യൂട്ട് മൂല്യമായി അവശേഷിപ്പിക്കരുത്. novalidate: ഫോമിൽ നൽകിയ ഡാറ്റ സമർപ്പിക്കുന്നതിന് മുമ്പ് സാധൂകരിക്കപ്പെടില്ലെന്ന് സൂചിപ്പിക്കുന്നു. നോവാലിഡേറ്റ് ബൂളിയൻ ആട്രിബ്യൂട്ടിനുള്ള സാധ്യമായ മൂല്യങ്ങൾ: <form novalidate> <form novalidate="novalidate"> <form novalidate=""> <p>ശ്രദ്ധിക്കുക: നോവാലിഡേറ്റ് ആട്രിബ്യൂട്ട് IE9-ലും അതിന് മുമ്പുള്ളവയിലും സഫാരിയിലും പിന്തുണയ്‌ക്കുന്നില്ല.</p><p>ലക്ഷ്യം: ഫോം സമർപ്പിച്ചതിന് ശേഷം ലഭിച്ച പ്രതികരണം എവിടെ പ്രദർശിപ്പിക്കണമെന്ന് വ്യക്തമാക്കുന്ന ഒരു ഫ്രെയിം നാമം അല്ലെങ്കിൽ കീവേഡ് നിർവചിക്കുന്നു.</p><ul><li><b>_ശൂന്യം:</b>ഒരു പുതിയ വിൻഡോയിലോ ടാബിലോ പ്രമാണം തുറക്കുന്നു.</li> <li><b>_സ്വയം:</b>ലിങ്ക് സ്ഥിതിചെയ്യുന്ന അതേ ഡയറക്ടറിയിൽ ഒരു പ്രമാണം തുറക്കുന്നു (സ്ഥിരസ്ഥിതി).</li> <li><b>_മാതാവ്:</b>പാരന്റ് ഫ്രെയിമിൽ പ്രമാണം തുറക്കുന്നു.</li> <li><b>_മുകളിൽ:</b>വിൻഡോയുടെ മുഴുവൻ വീതിയിലും പ്രമാണം തുറക്കുന്നു.</li> <li><b>ഫ്രെയിം_നാമം:</b>ഒരു iframe-ൽ ഒരു ഡോക്യുമെന്റ് തുറക്കുന്നു, അതിന്റെ പേര് ഒരു മൂല്യമായി സൂചിപ്പിച്ചിരിക്കുന്നു.</li> </ul><p>ടാഗ് ചെയ്യുക <form>ഗ്ലോബൽ ആട്രിബ്യൂട്ടുകളും ഇവന്റുകളും പിന്തുണയ്ക്കുന്നു</p> <h2>സ്ഥിരസ്ഥിതി ശൈലി</h2>ഫോം (പ്രദർശനം: ബ്ലോക്ക്; മാർജിൻ-ടോപ്പ്: 0എം; ) <h3>ഉദാഹരണം</h3> <form action="demo_form.asp">പേര്: <input type="text" name="fname" value="മിക്കി"><br>കുടുംബപ്പേര്: <input type="text" name="lname" value="മൗസ്"><br> <input type="submit" value="സമർപ്പിക്കുക"> </form> <br><p>HTML ലെ ഫോമുകൾ ഏറ്റവും സങ്കീർണ്ണമാണ്, എന്നാൽ മറുവശത്ത്, HTML ലെ ഏറ്റവും രസകരമായ വിഷയം.</p> <p>വെബ് ഫോമുകൾ സൈറ്റ് സന്ദർശകരെ പ്രത്യേക ഫീൽഡുകളിലേക്ക് ചില വിവരങ്ങൾ നൽകുന്നതിന് അനുവദിക്കുന്നു, ഡെവലപ്പർക്ക് അത് അദ്ദേഹത്തിന് സൗകര്യപ്രദമായ ഒരു ഫോമിൽ ലഭിക്കും.</p> <p>ഒരു ഫോമിന്റെ ഉദാഹരണം ഒരു അതിഥി പുസ്തകം, ഒരു ചോദ്യാവലി അല്ലെങ്കിൽ ഒരു ഓൺലൈൻ ടെസ്റ്റ് ആകാം. വെബ്സൈറ്റിൽ രജിസ്റ്റർ ചെയ്യുമ്പോൾ, ഒരു ഓൺലൈൻ സ്റ്റോറിൽ ഓർഡറുകൾ നൽകുമ്പോൾ, ഫോമുകൾ പൂരിപ്പിക്കുന്നു.</p> <p>HTML ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു ഫോം ഫ്രെയിംവർക്ക് സൃഷ്ടിക്കാൻ കഴിയും: ടെക്സ്റ്റ് ഫീൽഡുകൾ, മെനുകൾ, ലിസ്റ്റുകൾ, ബട്ടണുകൾ, ചെക്ക്ബോക്സുകൾ, റേഡിയോ ബട്ടണുകൾ. അതായത്, ഫോമിൽ ചില വിവരങ്ങൾ നൽകിയിട്ടുള്ള ആ ഘടകങ്ങൾ.</p> <p>തുടർന്ന് ഫോമിൽ നൽകിയ ഡാറ്റ പ്രോസസ്സിംഗിനായി സെർവറിലേക്ക് അയയ്ക്കുന്നു. എന്നാൽ HTML ഇവിടെ ശക്തിയില്ലാത്തതാണ് - അതിനോട് ഘടിപ്പിച്ചിരിക്കുന്ന ഒരു പ്രോഗ്രാമോ സ്ക്രിപ്റ്റോ ഇതിനകം തന്നെ ഫോം പ്രോസസ്സ് ചെയ്യുന്നതിൽ പ്രവർത്തിക്കുന്നു. അത്തരം പ്രോഗ്രാമുകൾ സാധാരണയായി PHP അല്ലെങ്കിൽ JavaScript ൽ എഴുതുന്നു.</p> <h4>ഫോം ആട്രിബ്യൂട്ടുകൾ - ടാഗ് <form></h4> <p>ഒരു വെബ് പേജിൽ നിരവധി ഫോമുകൾ ഉണ്ടാകാം ( <i>ഡെവലപ്പർക്ക് ആവശ്യമുള്ളത്രയും</i>). അവ ഓരോന്നും ടാഗ് ഉപയോഗിച്ച് ആരംഭിക്കുന്നു <form>ഒരു ക്ലോസിംഗ് ടാഗിൽ അവസാനിക്കുന്നു</form> .</p> <p>ഏത് ഫോമിനും പ്രവർത്തന ആട്രിബ്യൂട്ട് നിർബന്ധമാണ് - അത് ഫോം നൽകുന്ന ഫയലിന്റെ വിലാസം വ്യക്തമാക്കുന്നു ( <i>അതിൽ നൽകിയ ഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്നു</i>).</p> <p>ഫോം ഉള്ളടക്കം എങ്ങനെ സമർപ്പിക്കുമെന്ന് രീതി ആട്രിബ്യൂട്ട് വ്യക്തമാക്കുന്നു. രണ്ട് രീതികളുണ്ട് - GET, POST. ഇപ്പോൾ ഈ പാരാമീറ്ററുകൾ പരിശോധിക്കുന്നതിൽ അർത്ഥമില്ല, കാരണം GET, POST രീതികൾ ഉപയോഗിച്ച് വിവരങ്ങൾ അയയ്ക്കുന്ന വിഷയം ഡാറ്റ പ്രോസസ്സിംഗ് ഭാഷകളുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു ( <i>ഉദാഹരണത്തിന് PHP</i>). ഫോമുകളിൽ മിക്ക കേസുകളിലും ഉപയോഗിക്കുന്നത് POST ഡാറ്റാ ട്രാൻസ്ഫർ രീതിയാണെന്ന് അറിഞ്ഞാൽ മതി.</p> <p>ടാഗ് നാമം ആട്രിബ്യൂട്ട് <form>ഓപ്ഷണൽ ആണ്. എന്നാൽ പ്രമാണത്തിൽ നിരവധി ഫോമുകൾ ഉണ്ടെങ്കിൽ, അവ ഓരോന്നും കൈകാര്യം ചെയ്യുന്നയാൾ എങ്ങനെയെങ്കിലും തിരിച്ചറിയണം. അതിനാൽ, ഈ കേസിൽ നെയിം ആട്രിബ്യൂട്ടിന്റെ സാന്നിധ്യം ആവശ്യമാണ് - ഇത് ഫോമിന്റെ തനതായ പേര് വ്യക്തമാക്കുന്നു.</p> <p>നിങ്ങൾക്ക് ഇൻപുട്ട് ഡാറ്റയ്‌ക്കായി എൻകോഡിംഗ് സജ്ജമാക്കാനും കഴിയും - സ്വീകരിക്കുക-ചാർജറ്റ് ആട്രിബ്യൂട്ട് ഇതിന് ഉത്തരവാദിയാണ്, കൂടാതെ, ടാർഗെറ്റ് ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്, സമർപ്പിച്ച ഫോം പ്രോസസ്സ് ചെയ്യുന്നതിന്റെ ഫലം പ്രദർശിപ്പിക്കുന്ന വിൻഡോ നിർവ്വചിക്കുക ( <i>പുതിയതോ നിലവിലുള്ളതോ ആയ വിൻഡോയിൽ</i>).</p> <p>എന്നാൽ ടാഗ് തന്നെ <form>അർത്ഥമില്ല, കാരണം ഫോം ആദ്യം എവിടെയെങ്കിലും നൽകേണ്ട ഡാറ്റ കൈമാറുന്നു!</p> <h4>ഡാറ്റ ഇൻപുട്ട്. ഫോം ഫീൽഡുകൾ - ടാഗ് <input></h4> <p>ടാഗ് ചെയ്യുക <input>ഫോമുകളിൽ കാണപ്പെടുന്ന ഏറ്റവും സാധാരണമായ ടാഗ് ഇതാണ്. ഒരു ഫോമിലേക്ക് ഡാറ്റ നൽകുന്നതിന് സഹായിക്കുന്ന വിവിധ ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നതിനാണ് ഇത് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്: ടെക്സ്റ്റ് ഫീൽഡുകൾ, ബട്ടണുകൾ, ചെക്ക്ബോക്സുകൾ, റേഡിയോ ബട്ടണുകൾ.</p> <p>ടൈപ്പാണ് ടാഗിന്റെ പ്രധാന ആട്രിബ്യൂട്ട് <input>. ഇത് ഫീൽഡ് തരം സജ്ജീകരിക്കുന്നു ( <i>ഘടകം</i>) ഫോമുകൾ:</p> <table width="100%" border="1"><tr><td width="300px"> <p>ആട്രിബ്യൂട്ട് മൂല്യം തരം="..."</p> </td> <td width="245px"> <p>ഫലമായി</p> </td> <td> <p>വിവരണം</p> </td> </tr><tr><td> <p><input type="text" size="20" value="നിങ്ങളുടെ പേര്..." ></p> </td> <td align="center"> </td> <td><p>വാചകം നൽകുന്നതിനുള്ള ഒറ്റവരി ടെക്സ്റ്റ് ഫീൽഡ്. വലിപ്പം ആട്രിബ്യൂട്ട് അക്ഷരങ്ങളിൽ ഫീൽഡിന്റെ വീതി വ്യക്തമാക്കുന്നു.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"> </td> <td><p>ഒരു പാസ്വേഡ് നൽകുന്നതിനുള്ള ടെക്സ്റ്റ് ഫീൽഡ്. <br>പരമാവധി ലെങ്ത് ആട്രിബ്യൂട്ട് നൽകാനാകുന്ന പരമാവധി പ്രതീകങ്ങൾ സജ്ജമാക്കുന്നു</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> </td> <td><p>മാറുക. <br>വാഗ്ദാനം ചെയ്യുന്നവയിൽ നിന്ന് നിങ്ങൾക്ക് ഒരു ഓപ്ഷൻ മാത്രമേ തിരഞ്ഞെടുക്കാനാകൂ. പരിശോധിച്ച ആട്രിബ്യൂട്ട് മുൻകൂട്ടി പരിശോധിച്ച ഫീൽഡ് വ്യക്തമാക്കുന്നു.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> </td> <td><p>ചെക്ക്ബോക്സ്. <br>തിരഞ്ഞെടുക്കാൻ നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്.</span>ആട്രിബ്യൂട്ട് <span>ചെക്ക് ചെയ്‌തത് മുൻകൂട്ടി പരിശോധിച്ച ഫീൽഡ് നിർവചിക്കുന്നു.</p> </td> </tr><tr><td><p><input type="button" value="ബട്ടൺ" ></p> </td> <td align="center"> </td> <td><p>ബട്ടൺ. <br>മൂല്യ ആട്രിബ്യൂട്ട് ബട്ടണിലെ ലേബൽ സജ്ജമാക്കുന്നു.</p> </td> </tr><tr><td><p><input type="reset" value="പുനഃസജ്ജമാക്കുക" ></p> </td> <td align="center"> </td> <td><p>റീസെറ്റ് ബട്ടൺ. <br>ഫോം ഫീൽഡുകൾ അവയുടെ യഥാർത്ഥ രൂപത്തിലേക്ക് തിരികെ നൽകുന്നു. നൽകിയ ഡാറ്റ പുനഃസജ്ജമാക്കുക.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"> </td> <td><p>നൽകിയ ഡാറ്റ അയയ്ക്കുന്നതിനുള്ള ബട്ടൺ.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"> </td> <td><p>അയച്ച ഫയലിന്റെ പേര് നൽകുന്നതിനുള്ള ഫീൽഡ്.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"> </td> <td><p>ഇമേജ് ബട്ടൺ. <br>സെർവറിലേക്ക് ഡാറ്റ അയയ്ക്കാനും ഇത് ഉപയോഗിക്കുന്നു. src ആട്രിബ്യൂട്ട് ഇമേജ് ഫയലിന്റെ വിലാസം വ്യക്തമാക്കുന്നു.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"> </td> <td><p>മറഞ്ഞിരിക്കുന്ന ഫീൽഡ് - ഉപയോക്താവിന് അദൃശ്യമാണ്.</p> </td> </tr></table><h3>ഡ്രോപ്പ്ഡൗൺ - ടാഗുകൾ <select>ഒപ്പം <option></h3> <p>ടാഗ് ചെയ്യുക <select>ടാഗ് പോലെ തന്നെ <input>വിവരങ്ങൾ ശേഖരിക്കാൻ സഹായിക്കുന്നു - ഒന്നോ അതിലധികമോ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കാൻ കഴിയുന്ന ഒരു ലിസ്റ്റ് ഇത് സൃഷ്ടിക്കുന്നു. ഓരോ ഘടകങ്ങളും ഒരു മൂല്യവുമായി പൊരുത്തപ്പെടുന്നു, അത് പ്രോസസ്സിംഗിനായി സെർവറിലേക്ക് അയയ്ക്കുന്നു.</p> <p>സൃഷ്‌ടിച്ച ലിസ്റ്റിന്റെ തരം വലുപ്പ ആട്രിബ്യൂട്ടിന്റെ മൂല്യത്തെ ആശ്രയിച്ചിരിക്കുന്നു: വലുപ്പം= "1" ( <i>സ്ഥിര മൂല്യം</i>) ലിസ്റ്റ് ഡ്രോപ്പ്-ഡൗൺ ആയിരിക്കും.</p> <p>വലുപ്പ ആട്രിബ്യൂട്ടിനുള്ള മറ്റൊരു മൂല്യം പ്രദർശിപ്പിച്ച ലിസ്റ്റ് ഇനങ്ങളുടെ എണ്ണവുമായി പൊരുത്തപ്പെടും. ഉദാഹരണത്തിന്, size="3" ഉപയോഗിച്ച്, മൂന്ന് ഘടകങ്ങൾ ദൃശ്യമാകും. മറ്റ് ലിസ്റ്റ് ഇനങ്ങൾ കാണുന്നതിന് ( <i>എന്തെങ്കിലും ഉണ്ടെങ്കിൽ</i>) നിങ്ങൾ ലംബമായ സ്ക്രോൾ ബാർ ഉപയോഗിക്കണം, അത് യാന്ത്രികമായി ചേർക്കുന്നു.</p> <p>സ്ഥിരസ്ഥിതിയായി, ഒരു ലിസ്റ്റ് ഇനം മാത്രമേ തിരഞ്ഞെടുക്കാനാകൂ. ഒരു ടാഗിലേക്ക് ഒന്നിലധികം ആട്രിബ്യൂട്ട് ചേർക്കുന്നു <select>മൗസും Ctrl, Shift കീകളും ഉപയോഗിച്ച് ഒന്നിലധികം ലിസ്റ്റ് ഇനങ്ങൾ തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.</p> <p>ഒന്നിലധികം ആട്രിബ്യൂട്ട് ഉണ്ടെങ്കിൽ, ലിസ്റ്റ് ഇനങ്ങളുടെ എല്ലാ അല്ലെങ്കിൽ ഭാഗവും പ്രദർശിപ്പിക്കും ( <i>ബ്രൗസറിനെ ആശ്രയിച്ച്</i>) ഒരു നിശ്ചിത എണ്ണം ദൃശ്യമായ ഇനങ്ങളിലേക്ക് വലുപ്പ ആട്രിബ്യൂട്ട് സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ.</p> <p>ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിന്റെ ആവശ്യമായ ഘടകം ടാഗ് ആണ് <option>. ഇത് ടാഗിനുള്ളിൽ സ്ഥിതിചെയ്യുന്നു <select>കൂടാതെ ഓരോ ലിസ്റ്റ് ഇനവും സൃഷ്ടിക്കുന്നു.</p> <p>ടാഗിന്റെ പേര് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു <select>പട്ടികയ്ക്ക് ഒരു പേര് നൽകിയിരിക്കുന്നു, കൂടാതെ ടാഗിന്റെ മൂല്യ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു <option>ലിസ്റ്റ് ഘടകത്തിന് ഒരു മൂല്യം നൽകിയിരിക്കുന്നു. അങ്ങനെ, ഒരു "പേര് = മൂല്യം" ജോഡി സെർവറിലേക്ക് അയയ്ക്കുന്നു - ലിസ്റ്റിന്റെ പേരും തിരഞ്ഞെടുത്ത ഘടകത്തിന്റെ മൂല്യവും.</p> <p>ഒരു ടാഗിന്റെ തിരഞ്ഞെടുത്ത ആട്രിബ്യൂട്ട് <option>മുമ്പ് തിരഞ്ഞെടുത്ത ഒരു ലിസ്റ്റ് ഇനം നിർവചിക്കുന്നു, കൂടാതെ അപ്രാപ്തമാക്കിയ ആട്രിബ്യൂട്ട് ലിസ്റ്റ് ഇനത്തെ തടയുന്നു - അത് തിരഞ്ഞെടുക്കാൻ കഴിയില്ല.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>നാല് പ്രധാന ദിശകളിൽ ഒന്നാണ് കർദ്ദിനാൾ ദിശ:</p> <br> <select name= "storona" > <br> <option value= "വടക്ക്" >വടക്ക്</option><br> <option value= "തെക്ക്" >തെക്ക്</option><br> <option value= "പടിഞ്ഞാറ്" >പടിഞ്ഞാറ്</option><br> <option value= "കിഴക്ക്" >കിഴക്ക്</option> <br> </select><br><p>ലോകത്തിലെ 7 അത്ഭുതങ്ങൾ!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >ചിയോപ്സിന്റെ പിരമിഡ്</option><br> <option value= "2" selected> <span>ബാബിലോണിലെ ഹാംഗിംഗ് ഗാർഡൻസ്</span> </option><br> <option value= "3" disabled> <span>ഒളിമ്പിയയിലെ സിയൂസ് പ്രതിമ</span> </option><br> <option value= "4" > <span>എഫെസസിലെ ആർട്ടെമിസ് ക്ഷേത്രം</span> </option><br> <option value= "5" > <span>ഹാലികാർനാസസിലെ ശവകുടീരം</span> </option><br> <option value= "6" > <span>റോഡ്സിന്റെ കൊളോസസ്</span> </option><br> <option value= "7" > <span>അലക്സാണ്ട്രിയൻ വിളക്കുമാടം</span> </option><br> </select><br><p> <input type= "reset" value= "പുനഃസജ്ജമാക്കുക" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <h3>മൾട്ടിലൈൻ ടെക്സ്റ്റ് ഫീൽഡ് - ടാഗ് <textarea></h3> <p>ടാഗ് ചെയ്യുക <textarea>ഒരു മൾട്ടിലൈൻ ടെക്സ്റ്റ് ഫീൽഡ് സൃഷ്ടിക്കുന്നു. ഹാൻഡ്‌ലറിലേക്ക് ഡാറ്റ കൈമാറുമ്പോൾ സംരക്ഷിക്കപ്പെടുന്ന ലൈൻ ബ്രേക്കുകൾ ഉണ്ടാക്കുന്നത് അനുവദനീയമാണ്.</p> <p>ടാഗ് നാമം ആട്രിബ്യൂട്ട് <textarea>നിർബന്ധമാണ് - ഇത് ഉപയോഗിച്ച്, ടെക്സ്റ്റ് ഫീൽഡിന് ഒരു പേര് നൽകിയിരിക്കുന്നു.</p> <p>അപ്രാപ്തമാക്കിയ ആട്രിബ്യൂട്ട് ഫീൽഡിനെ പ്രവർത്തനരഹിതമാക്കുന്നു - ഫീൽഡിലെ ഉള്ളടക്കങ്ങൾ മാറ്റാൻ കഴിയില്ല, അത് ആക്‌സസ് ചെയ്യാൻ കഴിയില്ല. റീഡ്-ഓൺലി ആട്രിബ്യൂട്ട് ഫീൽഡ് റീഡ്-ഒൺലി ആണെന്ന് സൂചിപ്പിക്കുന്നു - ഉപയോക്താവിന് ഉള്ളടക്കം എഡിറ്റുചെയ്യാനുള്ള കഴിവില്ല, പക്ഷേ അത് ലഭ്യമാണ് - ഇത് തിരഞ്ഞെടുക്കാനും, ഉദാഹരണത്തിന്, പകർത്താനും കഴിയും.</p> <p>നിങ്ങൾക്ക് യഥാക്രമം കോളുകളും വരികളും ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് അക്ഷരങ്ങളിൽ ടെക്സ്റ്റ് ഫീൽഡിന്റെ വീതിയും ഫീൽഡിന്റെ ഉയരവും വരികളിൽ സജ്ജമാക്കാൻ കഴിയും.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>ഫീൽഡിന്റെ ഉള്ളടക്കം അതിന്റെ വലുപ്പം കവിയുന്നുവെങ്കിൽ, ഒരു സ്ലൈഡർ ദൃശ്യമാകും.</span>



ഫീൽഡിന്റെ ഉള്ളടക്കം അതിന്റെ വലുപ്പം കവിയുന്നുവെങ്കിൽ, ഒരു സ്ലൈഡർ ദൃശ്യമാകും.

ഒരു ഫോം ഉപയോഗിക്കുന്നതിനുള്ള ഉദാഹരണം

ഇനി ഫോം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നോക്കാം.



വിദ്യാഭ്യാസ വീഡിയോ ഓർഡർ ഫോം:




നിങ്ങളുടെ പേര്: *







നിങ്ങളുടെ ഓർഡർ:





HTML-ലെ വീഡിയോ ട്യൂട്ടോറിയൽ
CSS-ലെ വീഡിയോ ട്യൂട്ടോറിയൽ
PHP-യെക്കുറിച്ചുള്ള വീഡിയോ ട്യൂട്ടോറിയൽ





മീഡിയ തിരഞ്ഞെടുക്കുക:




സി.ഡി




ഡിവിഡി




യുഎസ്ബി ഫ്ലാഷ്




നിങ്ങളുടെ ഇമെയിൽ: *







നിങ്ങളുടെ വിലാസം: *













വിവരണം

ടാഗ് ചെയ്യുക

ഒരു വെബ് പേജിൽ ഒരു ഫോം ഇൻസ്റ്റാൾ ചെയ്യുന്നു. ഉപയോക്താവും സെർവറും തമ്മിലുള്ള ഡാറ്റാ കൈമാറ്റത്തിനായി ഉദ്ദേശിച്ചുള്ളതാണ് ഫോം. ഫോമുകളുടെ ആപ്ലിക്കേഷന്റെ വ്യാപ്തി സെർവറിലേക്ക് ഡാറ്റ അയയ്‌ക്കുന്നതിൽ പരിമിതപ്പെടുത്തിയിട്ടില്ല; ക്ലയന്റ് സ്‌ക്രിപ്റ്റുകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഫോമിന്റെ ഏത് ഘടകവും ആക്‌സസ് ചെയ്യാനും അത് മാറ്റാനും നിങ്ങളുടെ വിവേചനാധികാരത്തിൽ പ്രയോഗിക്കാനും കഴിയും.
ഒരു ഡോക്യുമെന്റിൽ എത്ര ഫോമുകൾ വേണമെങ്കിലും അടങ്ങിയിരിക്കാം, എന്നാൽ ഒരു സമയം ഒരു ഫോം മാത്രമേ സെർവറിലേക്ക് സമർപ്പിക്കാൻ കഴിയൂ. ഇക്കാരണത്താൽ, ഫോം ഡാറ്റ പരസ്പരം സ്വതന്ത്രമായിരിക്കണം.
സെർവറിലേക്ക് ഫോം സമർപ്പിക്കാൻ, സമർപ്പിക്കുക ബട്ടൺ ഉപയോഗിക്കുക, ഫോമിനുള്ളിലെ എന്റർ കീ അമർത്തുന്നതിലൂടെ ഇത് നേടാനാകും. സമർപ്പിക്കുക ബട്ടൺ ഫോമിൽ ഇല്ലെങ്കിൽ, എന്റർ കീ അതിന്റെ ഉപയോഗത്തെ അനുകരിക്കുന്നു.
ഫോം സെർവറിലേക്ക് സമർപ്പിക്കുമ്പോൾ, ടാഗിന്റെ പ്രവർത്തന ആട്രിബ്യൂട്ട് വ്യക്തമാക്കിയ പ്രോഗ്രാമിലേക്ക് ഡാറ്റയുടെ നിയന്ത്രണം കൈമാറും. . ബ്രൗസർ ആദ്യം വിവരങ്ങൾ തയ്യാറാക്കുന്നത് “പേര്=മൂല്യം” ജോടിയുടെ രൂപത്തിലാണ്, അവിടെ ടാഗിന്റെ പേര് ആട്രിബ്യൂട്ട് അനുസരിച്ചാണ് പേര് നിർണ്ണയിക്കുന്നത്. , മൂല്യം ഉപയോക്താവ് നൽകുകയോ സ്ഥിരസ്ഥിതി ഫോം ഫീൽഡിലേക്ക് സജ്ജമാക്കുകയോ ചെയ്യുന്നു. ഡാറ്റ അയയ്ക്കാൻ GET രീതിയാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, വിലാസ ബാറിന് ഇനിപ്പറയുന്ന ഫോം എടുക്കാം.
http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5
CGI പ്രോഗ്രാം വിലാസത്തിന് ശേഷം വ്യക്തമാക്കിയ ചോദ്യചിഹ്നത്തിന് ശേഷം പാരാമീറ്ററുകൾ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്നു, അവ ഒരു ആംപർസാൻഡ് പ്രതീകം (&) കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു. നോൺ-ലാറ്റിൻ പ്രതീകങ്ങൾ ഹെക്‌സാഡെസിമൽ പ്രാതിനിധ്യത്തിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടുന്നു (%HH എന്ന രൂപത്തിൽ, ഇവിടെ HH എന്നത് ASCII പ്രതീക മൂല്യത്തിന്റെ ഹെക്‌സാഡെസിമൽ കോഡാണ്), കൂടാതെ സ്‌പെയ്‌സിന് പകരം ഒരു പ്ലസ് (+) നൽകുന്നു.
കണ്ടെയ്നറിനുള്ളിൽ അനുവദിച്ചിരിക്കുന്നു മറ്റ് ടാഗുകൾ സ്ഥാപിക്കുക, പക്ഷേ ഫോം തന്നെ വെബ് പേജിൽ ഒരു തരത്തിലും പ്രദർശിപ്പിക്കില്ല, അതിന്റെ ഘടകങ്ങളും നെസ്റ്റഡ് ടാഗുകളുടെ ഫലങ്ങളും മാത്രമേ ദൃശ്യമാകൂ.
വാക്യഘടന
...

ഗുണവിശേഷങ്ങൾ

സെർവറിന് ഡാറ്റ സ്വീകരിക്കാനും പ്രോസസ്സ് ചെയ്യാനും കഴിയുന്ന എൻകോഡിംഗ് സജ്ജമാക്കുന്നു. ഫോം ഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്ന പ്രോഗ്രാമിന്റെ അല്ലെങ്കിൽ ഡോക്യുമെന്റിന്റെ വിലാസം. ഫോം ഫീൽഡുകളുടെ സ്വയമേവ പൂരിപ്പിക്കൽ പ്രവർത്തനക്ഷമമാക്കുന്നു. ഫോം ഡാറ്റ എൻകോഡ് ചെയ്യുന്നതിനുള്ള രീതി. HTTP പ്രോട്ടോക്കോൾ രീതി. ഫോമിന്റെ പേര്. ഇൻപുട്ടിന്റെ കൃത്യതയ്ക്കായി ഫോം ഡാറ്റയുടെ അന്തർനിർമ്മിത പരിശോധന അസാധുവാക്കുന്നു. ഹാൻഡ്‌ലർ നൽകിയ ഫലം ലോഡ് ചെയ്യുന്ന വിൻഡോയുടെയോ ഫ്രെയിമിന്റെയോ പേര്.

ക്ലോസിംഗ് ടാഗ്

ആവശ്യമാണ്.

HTML5 IE Cr Op Sa Fx

"OS" എന്ന ചുരുക്കെഴുത്ത് എങ്ങനെയാണ് സൂചിപ്പിക്കുന്നതെന്ന് നിങ്ങൾ കരുതുന്നു?

ഉദ്യോഗസ്ഥർ
ഓപ്പറേറ്റിംഗ് സിസ്റ്റം
വലിയ വരയുള്ള ഈച്ച





ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.

അരി. 1. ബ്രൗസർ വിൻഡോയിലെ ഫോം ഘടകങ്ങളുടെ കാഴ്ച