നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ മെച്ചപ്പെടുത്താൻ പഠിക്കുക
നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ രൂപം മെച്ചപ്പെടുത്തുന്നതിനുള്ള മികച്ച മാർഗമാണ് CSS ഉപയോഗിച്ച് സ്റ്റൈൽ ഫോമുകൾ എങ്ങനെയാണ് പഠിക്കുക. HTML ഫോമുകൾ മിക്ക വെബ് പേജുകളിലും ഉഗ്രമായ കാര്യങ്ങളിൽ തർക്കവിഷയമാണ്. അവർ പലപ്പോഴും ബോറടിപ്പിക്കുന്നതും പ്രയോജനകരവുമാണ്.
CSS ഉപയോഗിച്ച്, അത് മാറ്റാൻ കഴിയും. കൂടുതൽ വിപുലമായ ഫോം ടാഗുകൾ ഉപയോഗിച്ച് CSS സമന്വയിപ്പിക്കുന്നത് ചില നല്ല രൂപഭാവങ്ങളുള്ള ഫോമുകൾ നൽകാം.
നിറങ്ങൾ മാറ്റുക
വാചകം പോലെ തന്നെ ഫോം വേർതിരിച്ചെടുക്കുന്നതിനുള്ള ഫോർഗ്രൗണ്ടും പശ്ചാത്തല വർണങ്ങളും നിങ്ങൾക്ക് മാറ്റാം.
എല്ലാ ഫോം എലമെൻറിന്റെയും പശ്ചാത്തല വർണ്ണം മാറ്റാനുള്ള ഒരു എളുപ്പവഴി ഇൻപുട്ട് ടാഗിൽ പശ്ചാത്തല-കളർ വസ്തു ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, എല്ലാ കോഡുകളിലും ഈ കോഡ് ഒരു നീല പശ്ചാത്തല വർണ്ണം (# 9cf) ഉപയോഗിക്കുന്നു.
ഇൻപുട്ട് {
പശ്ചാത്തല വർണം: # 9 സിഎഫ്;
നിറം: # 000;
}
ചില ഫങ്ഷൻ ഘടകങ്ങളുടെ പശ്ചാത്തല വർണ്ണം മാറ്റുന്നതിന്, ടെക്സ്റ്ററ ചേർക്കുക, സ്റ്റൈൽ തിരഞ്ഞെടുക്കുക. ഉദാഹരണത്തിന്:
ഇൻപുട്ട്, ടെംപ്റേ, തിരഞ്ഞെടുക്കുക {
പശ്ചാത്തല വർണം: # 9 സിഎഫ്;
നിറം: # 000;
}
നിങ്ങളുടെ പശ്ചാത്തല വർണ്ണം ഇരുണ്ടതാക്കുകയാണെങ്കിൽ ടെക്സ്റ്റ് വർണ്ണം മാറ്റണമെന്ന് ഉറപ്പാക്കുക. കോൺട്രാസിങ്ങ് നിറങ്ങൾ ഫോം ഘടകങ്ങൾ കൂടുതൽ സ്പഷ്ടമാക്കുന്നതിന് സഹായിക്കുന്നു. ഉദാഹരണത്തിന്, കറുത്ത ചുവപ്പ് പശ്ചാത്തല വർണത്തിലുള്ള ടെക്സ്റ്റ് ടെക്സ്റ്റ് വർണ്ണം വെളുപ്പാണെങ്കിൽ കൂടുതൽ എളുപ്പമാണ്. ഉദാഹരണത്തിന്, ഈ കോഡ് ചുവപ്പ് പശ്ചാത്തലത്തിൽ വെളുത്ത വാചകം സ്ഥാപിക്കുന്നു.
ഇൻപുട്ട്, ടെംപ്റേ, തിരഞ്ഞെടുക്കുക {
പശ്ചാത്തല വർണം: # c00;
നിറം: # ff;
}
നിങ്ങൾക്ക് ഫോം ടാഗ് തന്നെ ഒരു പശ്ചാത്തല വർണം നൽകാം. ഫോം ടാഗ് ഒരു ബ്ലോക്ക് എലമെൻറാണെന്ന് ഓർമ്മിക്കുക, അതിനാലാണ് എല്ലാ ദീർഘചതുരങ്ങൾക്കും നിറം നിറയും.
പ്രദേശം വേറിട്ടതാക്കാൻ ഒരു ബ്ലോക്ക് ഘടകത്തിലേക്ക് നിങ്ങൾക്ക് ഒരു മഞ്ഞ പശ്ചാത്തലം ചേർക്കാൻ കഴിയും, ഇത് പോലെ:
ഫോം {
പശ്ചാത്തല വർണം: # ff;
}
ബോർഡറുകൾ ചേർക്കുക
നിറങ്ങൾ പോലെ, വിവിധ രൂപഘടകങ്ങളുടെ ബോർഡറുകൾ മാറ്റാം. നിങ്ങൾക്ക് മുഴുവൻ ഫോമിലുമുള്ള ഒരൊറ്റ ബോർഡർ ചേർക്കാൻ കഴിയും. പാഡിംഗ് ചേർക്കുമെന്ന് ഉറപ്പാക്കുക, അല്ലെങ്കിൽ നിങ്ങളുടെ ഫോം ഘടകങ്ങൾ അതിർത്തിക്ക് അടുത്തായി വലയം ചെയ്യുകയുമില്ല.
പാഡിംഗിന്റെ 5 പിക്സലുകളുള്ള 1-പിക്സൽ കറുത്ത അതിർത്തിക്കുള്ള കോഡിന്റെ മാതൃക ഇതാണ്:
ഫോം {
അതിർത്തി: 1px ഖര # 000;
പാഡിംഗ്: 5px;
}
നിങ്ങൾക്ക് ഫോം തന്നെക്കാൾ അതിനപ്പുറം അതിരുകൾ നൽകാൻ കഴിയും. ഇൻപുട്ട് ഇനങ്ങളുടെ ബോർഡർ മാറ്റാൻ കഴിയുന്ന വിധം മാറ്റുക:
ഇൻപുട്ട് {
അതിർത്തി: 2px dashed # c00;
}
ടൈപ്പുചെയ്യൽ ബോക്സുകൾ പോലെ കുറവായി തോന്നുന്നതുവരെ ഇൻപുട്ട് ബോക്സുകളിൽ ബോർഡറുകൾ ഇടുമ്പോൾ ജാഗ്രത പുലർത്തുക, കൂടാതെ ഫോമിൽ പൂരിപ്പിക്കാൻ കഴിയുമെന്ന് ചിലർ തിരിച്ചറിഞ്ഞില്ല.
സ്റ്റൈൽ ഫീച്ചറുകൾ സംയോജിപ്പിക്കുക
നിങ്ങളുടെ ഫോം ഘടകങ്ങൾ ചിന്തയോടെയും ചില CSS- ഉം ചേർത്ത്, നിങ്ങളുടെ സൈറ്റിന്റെ രൂപകൽപ്പനയും ലേഔട്ടുകളും പൂർത്തിയാക്കുന്ന ഒരു നല്ല ഫോം സജ്ജമാക്കാൻ കഴിയും.