ആഗോള HTML ആട്രിബ്യൂട്ടുകൾ. HTML5 ഫോം ആട്രിബ്യൂട്ടുകൾ

HTML5-ൽ, എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇതിനകം ഈ നിലവാരത്തെ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിലും. 2011 ഡിസംബർ വരെ, നിലവാരം ഇപ്പോഴും വികസനത്തിലാണ്.

HTML5 നിരവധി പുതിയ വാക്യഘടന സവിശേഷതകൾ ചേർക്കുന്നു - , കൂടാതെ . നേറ്റീവ് പ്ലഗിന്നുകളും API-കളും അവലംബിക്കാതെ തന്നെ വെബിൽ ഗ്രാഫിക്സും മീഡിയയും ഉൾച്ചേർക്കുന്നതും നിയന്ത്രിക്കുന്നതും എളുപ്പമാക്കുന്നതിനാണ് ഈ ഘടകങ്ങൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. , , എന്നിവ പോലുള്ള മറ്റ് പുതിയ ഘടകങ്ങൾ പ്രമാണത്തിൻ്റെ (പേജ്) സെമാൻ്റിക് ഉള്ളടക്കം സമ്പുഷ്ടമാക്കാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു.

പുതിയ HTML5 ടാഗുകൾ

1. വിഭാഗം ടാഗുകൾ (ലേഖനം, അസൈഡ്, അടിക്കുറിപ്പ്, തലക്കെട്ട്, hgroup, nav, വിഭാഗം)
2. ഉള്ളടക്ക ഗ്രൂപ്പിംഗ് ടാഗുകൾ (ചിത്രം, ഫിഗ് ക്യാപ്ഷൻ)
3. സെമാൻ്റിക് ടെക്സ്റ്റ് ഹൈലൈറ്റിംഗിനുള്ള ടാഗുകൾ (bdo, mark, time, ruby, rt, rp, wbr)
4. ഉള്ളടക്കം ചേർക്കുന്നതിനുള്ള ടാഗുകൾ (ഓഡിയോ, വീഡിയോ, ക്യാൻവാസ്, ഉൾച്ചേർക്കൽ, ഉറവിടം)
5. ഫോം ഘടകങ്ങൾക്കുള്ള ടാഗുകൾ (ഡാറ്റലിസ്റ്റ്, കീജെൻ, ഔട്ട്പുട്ട്, പുരോഗതി, മീറ്റർ)
6. സംവേദനാത്മക ഘടകങ്ങൾ (വിശദാംശങ്ങൾ, സംഗ്രഹം, കമാൻഡ്, മെനു)

ടാഗ് സംക്ഷിപ്ത വിവരണം

	ഒരു ലേഖനം നിർവചിക്കുന്നു
	പ്രധാന പേജ് ഉള്ളടക്കം മാറ്റിവെച്ച് ഉള്ളടക്കം നിർവചിക്കുന്നു
	ഓഡിയോ ഉള്ളടക്കം നിർവചിക്കുന്നു
	ഗ്രാഫിക്സ് നിർവചിക്കുന്നു
	ഒരു കമാൻഡ് ബട്ടൺ നിർവചിക്കുന്നു
	ഒരു ഓർഡർ ലിസ്റ്റിലേക്ക് ഡാറ്റ നിർവചിക്കുന്നു
	ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് നിർവചിക്കുന്നു
	ഒരു ഡാറ്റ ടെംപ്ലേറ്റ് നിർവചിക്കുന്നു
	മൂലക വിശദാംശങ്ങൾ നിർവചിക്കുന്നു
	സംഭാഷണം നിർവ്വചിക്കുന്നു (സംഭാഷണം)
	സെർവറിലുടനീളം അയച്ച ഇവൻ്റിൻ്റെ ഉദ്ദേശ്യം നിർവചിക്കുന്നു
	ഒരു കൂട്ടം മീഡിയ ഉള്ളടക്കവും അവയുടെ അടിക്കുറിപ്പുകളും നിർവചിക്കുന്നു
	ഒരു വിഭാഗത്തിനോ പേജിനോ ഉള്ള അടിക്കുറിപ്പ് നിർവചിക്കുന്നു
	വിഭാഗമോ പേജിൻ്റെ ശീർഷക മേഖലയോ നിർവചിക്കുന്നു
	തിരഞ്ഞെടുത്ത വാചകം നിർവചിക്കുന്നു
	മുൻകൂട്ടി നിശ്ചയിച്ച പരിധിക്കുള്ളിൽ അളവുകൾ നിർവചിക്കുന്നു
	നാവിഗേഷൻ ലിങ്കുകൾ നിർവചിക്കുന്നു
	ഒരു ഡാറ്റാ പാറ്റേണിൽ ഒരു നെസ്റ്റഡ് പോയിൻ്റ് നിർവചിക്കുന്നു
	ചില തരം ഫലങ്ങളെ നിർവചിക്കുന്നു
	ഏതെങ്കിലും തരത്തിലുള്ള ഒരു ജോലിയുടെ പുരോഗതി നിർണ്ണയിക്കുന്നു
	ടെംപ്ലേറ്റുകൾ അപ്ഡേറ്റ് ചെയ്യുന്നതിനുള്ള നിയമങ്ങൾ നിർവ്വചിക്കുന്നു
	ഒരു വിഭാഗം (വിഭാഗം) നിർവചിക്കുന്നു
	മീഡിയ ഉറവിടങ്ങൾ നിർവചിക്കുന്നു
	തീയതി/സമയം നിർവചിക്കുന്നു
	വീഡിയോ നിർവചിക്കുന്നു

പിന്തുണയ്ക്കാത്ത ടാഗുകൾ: ടാഗ് സംക്ഷിപ്ത വിവരണം

	പിന്തുണയ്ക്കുന്നില്ല.
	ഒരു ചുരുക്കെഴുത്ത് നിർവചിക്കുന്നു
	പിന്തുണയ്ക്കുന്നില്ല.
	ഒരു ആപ്ലെറ്റ് നിർവചിക്കുന്നു
	പിന്തുണയ്ക്കുന്നില്ല.
	ഫോണ്ട് സജ്ജീകരിക്കാൻ CSS-ന് പകരം ഉപയോഗിക്കുന്നു
	പിന്തുണയ്ക്കുന്നില്ല.
	വലിയ വാചകം നിർവചിക്കുന്നു
	പിന്തുണയ്ക്കുന്നില്ല.
	പിന്തുണയ്ക്കുന്നില്ല.
	ഒരു ഫ്രെയിമിനെ പിന്തുണയ്ക്കാത്ത ഒരു വിഭാഗം നിർവചിക്കുന്നു
	പിന്തുണയ്ക്കുന്നില്ല.
	പിന്തുണയ്ക്കുന്നില്ല.
	സ്ട്രൈക്ക്ത്രൂ ടെക്സ്റ്റ് നിർവചിക്കുന്നു
	പിന്തുണയ്ക്കുന്നില്ല.

TTY ടെക്സ്റ്റ് നിർവചിക്കുന്നു പിന്തുണയ്ക്കുന്നില്ല.

അടിവരയിട്ട വാചകം നിർവചിക്കുന്നു	പിന്തുണയ്ക്കുന്നില്ല. വിന്യസിച്ച വാചകം നിർവചിക്കുന്നു	HTML5 ആട്രിബ്യൂട്ടുകളുടെ പട്ടിക
ആട്രിബ്യൂട്ട് മൂല്യം സംക്ഷിപ്ത വിവരണം	തൃപ്തികരമായ	സത്യം
തെറ്റായ	പിന്തുണയ്ക്കുന്നില്ല. ഉപയോക്താവിന് ഉള്ളടക്കം (ഉള്ളടക്കം) എഡിറ്റ് ചെയ്യാനാകുമോ എന്ന് നിർണ്ണയിക്കുന്നു സന്ദർഭ മെനു	മെനു_ഐഡി
ഒരു ഘടകത്തിൻ്റെ സന്ദർഭ മെനു നിർവചിക്കുന്നു	പിന്തുണയ്ക്കുന്നില്ല. വിന്യസിച്ച വാചകം നിർവചിക്കുന്നു	വലിച്ചിടാവുന്ന
തെറ്റായ	ഓട്ടോ	ഉപയോക്താവിന് ഒരു ഘടകം വലിച്ചിടാൻ കഴിയുമോ എന്ന് നിർണ്ണയിക്കുന്നു
അപ്രസക്തമായ	മൂലകത്തിന് മൂല്യമില്ലെന്ന് വ്യക്തമാക്കുന്നു. മൂല്യമുള്ള ഘടകം പ്രദർശിപ്പിക്കില്ല	ref
URL/id	ഓട്ടോ	മറ്റൊരു ഡോക്യുമെൻ്റ്/ഒരു ഡോക്യുമെൻ്റിൻ്റെ ഭാഗത്തേക്കുള്ള ലിങ്ക് നിർവചിക്കുന്നു (ആട്രിബ്യൂട്ട് മൂല്യം സജ്ജീകരിക്കുമ്പോൾ മാത്രം ഉപയോഗിക്കുന്നു)

രജിസ്ട്രേഷൻ മാർക്ക്

reg_mark

ഒരു മൂലകത്തിൻ്റെ രജിസ്റ്റർ ചെയ്ത അടയാളം വ്യക്തമാക്കുന്നു

ടെംപ്ലേറ്റ്

മൂലകത്തിൽ പ്രയോഗിക്കേണ്ട മറ്റൊരു പ്രമാണത്തിലേക്കുള്ള ലിങ്ക്/ഒരു ഡോക്യുമെൻ്റിൻ്റെ ഭാഗത്തെ നിർവ്വചിക്കുന്നു

HTML5 പേജ് ലേഔട്ട് ഘടന

സാധാരണ വെബ്‌സൈറ്റ് പേജ് ഘടന ഉപയോഗിക്കുമ്പോൾ, അനുബന്ധ ക്ലാസ് (, , , , മുതലായവ) ഉള്ള ഒരു ഡിവി ടാഗ് ഉപയോഗിച്ച് വിവരിച്ചിരിക്കുന്ന നിരവധി സാധാരണ ബ്ലോക്കുകൾ നിങ്ങൾക്ക് തിരിച്ചറിയാൻ കഴിയും.

ലിങ്ക് കോഡിൽ വ്യക്തമാക്കിയ അക്ഷരമോ നമ്പറോ ഉപയോഗിച്ച് ഒരു പ്രത്യേക കീ കോമ്പിനേഷൻ ഉപയോഗിച്ച് ഒരു ലിങ്ക് സജീവമാക്കാൻ ആക്‌സസ്‌കീ ആട്രിബ്യൂട്ട് നിങ്ങളെ അനുവദിക്കുന്നു. ബ്രൗസറുകൾ വ്യത്യസ്ത കീ കോമ്പിനേഷനുകൾ ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, accesskey="s" എന്നതിന് ഇനിപ്പറയുന്ന കോമ്പിനേഷനുകൾ പ്രവർത്തിക്കുന്നു.

ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ: Alt + S
Chrome: Alt+S
ഓപ്പറ: Shift + Esc, എസ്
സഫാരി: Alt+S
ഫയർഫോക്സ്: Shift + Alt + S

ഒരു സ്റ്റൈൽഷീറ്റുമായി ഒരു നിർദ്ദിഷ്ട ടാഗ് ബന്ധപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു സ്റ്റൈൽ ക്ലാസ് വ്യക്തമാക്കുന്നു. ഒരു മൂല്യത്തിൽ ഒരേസമയം നിരവധി ക്ലാസുകൾ വ്യക്തമാക്കാൻ കഴിയും, അവയെ ഒരു സ്‌പെയ്‌സ് ഉപയോഗിച്ച് വേർതിരിക്കുന്നു.

ഉപയോക്താവിന് എഡിറ്റുചെയ്യാൻ ഘടകം ലഭ്യമാണെന്ന് അറിയിക്കുന്നു - ഇത് ടെക്സ്റ്റ് ഇല്ലാതാക്കാനും പുതിയൊരെണ്ണം നൽകാനും അനുവദിച്ചിരിക്കുന്നു. പഴയപടിയാക്കുക, ബഫറിൽ നിന്ന് ടെക്‌സ്‌റ്റ് ഒട്ടിക്കുക, തുടങ്ങിയ സ്റ്റാൻഡേർഡ് കമാൻഡുകളും പ്രവർത്തിക്കുന്നു.

ഒരു ഘടകത്തിനായുള്ള സന്ദർഭ മെനു സജ്ജമാക്കുന്നു. ടാഗ് ഉപയോഗിച്ച് സൃഷ്ടിച്ച മെനുവിൻ്റെ ഐഡൻ്റിഫയറാണ് മൂല്യം.

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

വലിച്ചിടാവുന്ന

കൂടുതൽ കൃത്രിമത്വത്തിനായി ഒരു ഘടകം വലിച്ചിടാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഡ്രോപ്പ്സോൺ

വലിച്ചിടുന്ന ഘടകം എന്തുചെയ്യണമെന്ന് വ്യക്തമാക്കുന്നു.

ഒരു മൂലകത്തിൻ്റെ ഉള്ളടക്കം കാഴ്ചയിൽ നിന്ന് മറയ്ക്കുന്നു. അത്തരമൊരു ഘടകം പേജിൽ പ്രദർശിപ്പിക്കില്ല, പക്ഷേ സ്ക്രിപ്റ്റുകളിലൂടെ ആക്സസ് ചെയ്യാൻ കഴിയും.

ഒരു ഐഡൻ്റിഫയർ സജ്ജീകരിക്കുന്നു - ഒരു ഘടകത്തിൻ്റെ തനതായ പേര്, അത് അതിൻ്റെ ശൈലി മാറ്റാനും സ്ക്രിപ്റ്റുകളിലൂടെ ആക്സസ് ചെയ്യാനും ഉപയോഗിക്കുന്നു. ഡോക്യുമെൻ്റ് കോഡിലെ ഐഡൻ്റിഫയർ ഒരൊറ്റ പകർപ്പിലായിരിക്കണം, മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഒരിക്കൽ മാത്രം ദൃശ്യമാകും.

itemid, itemprop, itemref, itemscope, itemtype

മൈക്രോഡാറ്റയിൽ പ്രവർത്തിക്കാൻ രൂപകൽപ്പന ചെയ്ത ഒരു കൂട്ടം ആട്രിബ്യൂട്ടുകൾ.

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

വാചകത്തിലെ അക്ഷരവിന്യാസവും വ്യാകരണവും ശരിയാണോ എന്ന് പരിശോധിക്കാൻ ബ്രൗസറിനോട് പറയുന്നു. മിക്കവാറും എല്ലാ ഘടകങ്ങളിലും ആട്രിബ്യൂട്ട് സജ്ജീകരിക്കാമെങ്കിലും, ഫോം ഫീൽഡുകളിലും ( , ) എഡിറ്റ് ചെയ്യാവുന്ന ഘടകങ്ങളിലും മാത്രമേ പ്രഭാവം ദൃശ്യമാകൂ (അവയ്ക്ക് ഉള്ളടക്കമാക്കാവുന്ന ആട്രിബ്യൂട്ട് സെറ്റ് ഉണ്ട്).

CSS നിയമങ്ങൾ ഉപയോഗിച്ച് ഒരു ഘടകം സ്റ്റൈൽ ചെയ്യാൻ ഉപയോഗിക്കുന്നു.

ടാബ് കീ ഉപയോഗിച്ച് ഘടകങ്ങൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ ഫോക്കസ് ലഭിക്കുന്ന ക്രമം ടാബിൻഡെക്സ് ആട്രിബ്യൂട്ട് സജ്ജമാക്കുന്നു. പരിവർത്തനം ഒരു ചെറിയ മൂല്യത്തിൽ നിന്ന് വലിയ ഒന്നിലേക്ക് സംഭവിക്കുന്നു, ഉദാഹരണത്തിന് 1 മുതൽ 2 വരെ, തുടർന്ന് 3 ലേക്ക് അങ്ങനെ. ഈ സാഹചര്യത്തിൽ, കർശനമായ ക്രമം പ്രധാനമല്ല; ചില സംഖ്യകൾ ഒഴിവാക്കാനും ഏത് നമ്പറിൽ നിന്നും ആരംഭിക്കാനും ഇത് അനുവദിച്ചിരിക്കുന്നു. മൂലകങ്ങളുടെ ടാബിൻഡെക്സ് മൂല്യങ്ങൾ ഒന്നുതന്നെയാണെങ്കിൽ, കോഡിലെ അവയുടെ രൂപത്തിൻ്റെ ക്രമം കണക്കിലെടുക്കുന്നു.

നിങ്ങൾ ഒരു ഘടകത്തിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ ദൃശ്യമാകുന്ന ഒരു ടെക്സ്റ്റ് ടൂൾടിപ്പ് സൃഷ്ടിക്കുന്നു. അത്തരമൊരു ടൂൾടിപ്പിൻ്റെ രൂപം ബ്രൗസറിനെയും ഓപ്പറേറ്റിംഗ് സിസ്റ്റം ക്രമീകരണങ്ങളെയും ആശ്രയിച്ചിരിക്കുന്നു, HTML കോഡോ ശൈലികളോ ഉപയോഗിച്ച് മാറ്റാൻ കഴിയില്ല.

ഞങ്ങൾ അത് ഇതിനകം മനസ്സിലാക്കിയിട്ടുണ്ട്. അവർക്ക് ഉള്ളടക്കമുണ്ടെന്ന് ഞങ്ങൾ കണ്ടെത്തി. എന്നിരുന്നാലും, അത് മാത്രമല്ല. ടാഗുകൾക്ക് അവയുടെ കഴിവുകൾ വർദ്ധിപ്പിക്കുന്ന ആട്രിബ്യൂട്ടുകളും ഉണ്ട്, ആട്രിബ്യൂട്ടുകൾക്ക് മൂല്യങ്ങളുമുണ്ട്. അവരുടെ സഹായത്തോടെ, നിങ്ങൾക്ക് ഒരു ഘടകത്തിനായി പാരാമീറ്ററുകൾ സജ്ജമാക്കാനും ഡിസൈൻ ശൈലി നിർണ്ണയിക്കാനും കഴിയും. ഉദാഹരണത്തിന്, ടാഗ് ഉപയോഗിച്ച്

നിങ്ങൾ ഖണ്ഡിക അടയാളപ്പെടുത്തി. എന്നാൽ അത് എങ്ങനെ വലതുവശത്തേക്ക് വിന്യസിക്കാം? ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് അനുബന്ധ മൂല്യമുള്ള ഒരു പ്രത്യേക ആട്രിബ്യൂട്ട് ആവശ്യമാണ്. ചില ടാഗുകൾക്ക് ഒരു ജോഡി ഇല്ലാത്തതുപോലെ, ചില ആട്രിബ്യൂട്ടുകൾ മൂല്യങ്ങളില്ലാതെ ഉപയോഗിക്കാം.

ആട്രിബ്യൂട്ടുകൾ എങ്ങനെ എഴുതാം?

ആട്രിബ്യൂട്ടുകൾ സംവരണം ചെയ്ത വാക്കുകളാണ് (ടാഗുകൾ പോലെ, ആംഗിൾ ബ്രാക്കറ്റുകൾ ഇല്ലാതെ മാത്രം), എന്നാൽ അവയുടെ അർത്ഥങ്ങൾ വ്യത്യസ്തമായിരിക്കും. ടാഗുകൾ പോലെ, ചെറിയ അക്ഷരങ്ങളിൽ മൂല്യങ്ങളുള്ള ആട്രിബ്യൂട്ടുകൾ എഴുതാൻ ശുപാർശ ചെയ്യുന്നു, എന്നിരുന്നാലും ബ്രൗസറുകൾ പൊതുവേ ശ്രദ്ധിക്കുന്നില്ല - ഇത് നല്ല പെരുമാറ്റത്തിൻ്റെ ഒരു നിയമം മാത്രമാണ്: റഷ്യൻ ഭാഷയിൽ, ക്യാപ്സ് ലോക്ക് ചെയ്യുമ്പോൾ എഴുതാനും ഇത് ഉപയോഗിക്കുന്നില്ല. പ്രവർത്തനക്ഷമമാക്കിയിരിക്കുന്നു. എന്തുകൊണ്ടാണ് HTML മോശമായിരിക്കുന്നത്?

ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഇനിപ്പറയുന്ന ഫോർമാറ്റിൽ എഴുതിയിരിക്കുന്നു:

ആട്രിബ്യൂട്ട്=”മൂല്യം” lang=”en”

നിങ്ങൾ എല്ലായ്പ്പോഴും ഓപ്പണിംഗ് ടാഗിനുള്ളിൽ റിസർവ് ചെയ്ത വാക്കിന് ശേഷം ആട്രിബ്യൂട്ടുകൾ എഴുതണം.

ഖണ്ഡിക

സാധാരണ ഒരു ടാഗിന് ഒന്നിലധികം ആട്രിബ്യൂട്ടുകൾ ലഭ്യമാണ്. അവ ഏത് ക്രമത്തിലാണ് പട്ടികപ്പെടുത്തിയിരിക്കുന്നത് എന്നത് പ്രശ്നമല്ല.

യൂണിവേഴ്സൽ ആട്രിബ്യൂട്ടുകൾ

ഓരോ HTML ടാഗിനും അതിൻ്റേതായ ആട്രിബ്യൂട്ടുകൾ ഉണ്ട്. ചില ആട്രിബ്യൂട്ടുകൾ ഒന്നിലധികം ടാഗുകൾക്കായി ലഭ്യമായേക്കാം, മറ്റുള്ളവ ഒന്നിൽ മാത്രമേ പ്രവർത്തിക്കൂ. ഏത് ടാഗിലും ഉപയോഗിക്കാവുന്ന ഒരു കൂട്ടം സാർവത്രിക (ആഗോള) ആട്രിബ്യൂട്ടുകളും ഉണ്ട്. ഈ വിഭാഗത്തിൻ്റെ ആട്രിബ്യൂട്ടുകൾ നമുക്ക് ചുരുക്കമായി നോക്കാം.

ഒരു നിർദ്ദിഷ്‌ട പേജ് ഒബ്‌ജക്‌റ്റ് ആക്‌സസ് ചെയ്യുന്നതിന് ഒരു കീബോർഡ് കുറുക്കുവഴി സജ്ജമാക്കാൻ ആക്‌സസ്‌കീ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു നിർദ്ദിഷ്‌ട ലിങ്ക് പിന്തുടരാൻ ഉപയോക്താവ് Alt+1 കീ കോമ്പിനേഷൻ ഉപയോഗിക്കുന്നുണ്ടെന്ന് നിങ്ങൾക്ക് ഉറപ്പാക്കാം. അങ്ങനെ, ഒരു കീ നാവിഗേഷൻ സിസ്റ്റം വികസിപ്പിക്കുക.

ആട്രിബ്യൂട്ട് മൂല്യം 0-9 അക്കങ്ങളോ ലാറ്റിൻ അക്ഷരമാലയിലെ അക്ഷരങ്ങളോ ആകാം:

ഒന്നിനൊപ്പം കീ കോമ്പിനേഷൻ അമർത്തിയാൽ ലിങ്ക് തുറക്കും

CSS ഉപയോഗിച്ച് ഒരു മുൻനിശ്ചയിച്ച ഡിസൈനുമായി ഒരു ടാഗ് ബന്ധപ്പെടുത്താൻ ക്ലാസ് നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് കോഡ് ഗണ്യമായി കുറയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, കാരണം ഒരേ CSS ബ്ലോക്ക് ആവർത്തിച്ച് നൽകുന്നതിനുപകരം, നിങ്ങൾക്ക് അനുയോജ്യമായ ക്ലാസിൻ്റെ പേര് നൽകാം.
Contenteditable ഉപയോഗിച്ച്, നിങ്ങൾക്ക് HTML പേജിൻ്റെ ഏത് ഘടകവും എഡിറ്റ് ചെയ്യാൻ ഉപയോക്താവിനെ അനുവദിക്കാം: ഇല്ലാതാക്കുക, തിരുകുക, വാചകം മാറ്റുക. അതേ ആട്രിബ്യൂട്ട് എഡിറ്റ് ചെയ്യാനും അപ്രാപ്തമാക്കാനും സാധ്യമാക്കുന്നു. ഇതിന് രണ്ട് മൂല്യങ്ങൾ മാത്രമേയുള്ളൂ: ശരി - എഡിറ്റിംഗ് അനുവദിക്കുക, തെറ്റ് - പ്രവർത്തനരഹിതമാക്കുക.
സന്ദർഭ മെനു ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്, നിങ്ങളുടെ വിവേചനാധികാരത്തിൽ അദ്വിതീയ സന്ദർഭ മെനു ഇനങ്ങളുള്ള ഏത് ഡോക്യുമെൻ്റ് ഘടകവും നിങ്ങൾക്ക് നൽകാം. മെനു തന്നെ ടാഗിൽ സൃഷ്ടിച്ചിരിക്കുന്നു, കൂടാതെ സന്ദർഭമെനു ആട്രിബ്യൂട്ടിന് അതിൻ്റെ ഐഡൻ്റിഫയർ നൽകിയിട്ടുണ്ട്.
dir വാചകത്തിൻ്റെ ദിശ വ്യക്തമാക്കുന്നു: ഇടത്തുനിന്ന് വലത്തോട്ട് (ltr) അല്ലെങ്കിൽ വലത്തുനിന്ന് ഇടത്തേക്ക് (rtl).
ഈ ആട്രിബ്യൂട്ട് ഉള്ള ഒരു പേജ് ഘടകം വലിച്ചിടാൻ ഉപയോക്താവിനെ അപ്രാപ്തമാക്കാനോ (തെറ്റായ) അനുവദിക്കാനോ (ശരി) draggable നിങ്ങളെ അനുവദിക്കുന്നു.
ഡ്രോപ്പ് സോൺ ബ്രൗസറിനോട് ഡ്രോപ്പ് ചെയ്ത ഘടകവുമായി എന്തുചെയ്യണമെന്ന് പറയുന്നു: പകർത്തുക (മൂല്യം പകർപ്പ്), നീക്കുക (നീക്കുക) അല്ലെങ്കിൽ അതിലേക്ക് ഒരു ലിങ്ക് സൃഷ്ടിക്കുക (ലിങ്ക്).
മറച്ചത് - ഒരു ഘടകത്തിൻ്റെ ഉള്ളടക്കം മറയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ആട്രിബ്യൂട്ട്, അതുവഴി അത് ബ്രൗസറിൽ ദൃശ്യമാകില്ല. ആട്രിബ്യൂട്ട് തെറ്റ് എന്ന് സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ, ഒബ്ജക്റ്റ് പ്രദർശിപ്പിക്കും, ശരി - അത് മറച്ചിരിക്കുന്നു.
ഐഡി ഘടകത്തിൻ്റെ ഐഡൻ്റിഫയർ വ്യക്തമാക്കുന്നു - ഒബ്‌ജക്റ്റിൻ്റെ ശൈലി മാറ്റുന്നതിനും സ്‌ക്രിപ്റ്റുകൾക്ക് അത് ആക്‌സസ് ചെയ്യുന്നതിനും ആവശ്യമായ ഒരു തരം പേര്. ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യം അതിൻ്റെ പേരായിരിക്കും. ഇത് ഒരു ലാറ്റിൻ അക്ഷരത്തിൽ ആരംഭിക്കണം, കൂടാതെ അക്കങ്ങളും ഒരേ ലാറ്റിൻ അക്ഷരമാലയിലെ അക്ഷരങ്ങളും (വലുതും ചെറുതും), ഹൈഫനുകളും (-) അടിവരകളും (_) അടങ്ങിയിരിക്കാം. റഷ്യൻ അക്ഷരങ്ങൾ ഉൾക്കൊള്ളാൻ കഴിയില്ല.
ഏത് ഭാഷയിലാണ് ഉള്ളടക്കം എഴുതിയിരിക്കുന്നതെന്ന് മനസിലാക്കാനും അതിനനുസരിച്ച് സ്റ്റൈൽ ചെയ്യാനും lang ബ്രൗസറിനെ സഹായിക്കുന്നു (ഉദാഹരണത്തിന്, ഭാഷകൾ വ്യത്യസ്ത ഉദ്ധരണികൾ ഉപയോഗിച്ചേക്കാം). മൂല്യങ്ങൾ ഭാഷാ കോഡുകളാണ് (റഷ്യൻ - ru, ഇംഗ്ലീഷ് - en, മുതലായവ).
അക്ഷരപ്പിശക് പരിശോധന പ്രാപ്തമാക്കുന്നു (ശരി) അല്ലെങ്കിൽ പ്രവർത്തനരഹിതമാക്കുന്നു (തെറ്റായ) അക്ഷരത്തെറ്റ് പരിശോധന. ഉപയോക്താവ് വാചകം നൽകുന്ന ഫോം ഫീൽഡ് ടാഗുകളിൽ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
CSS കോഡ് ഉപയോഗിച്ച് ഒരു മൂലകത്തിൻ്റെ ഡിസൈൻ സജ്ജമാക്കാൻ ശൈലി നിങ്ങളെ അനുവദിക്കുന്നു.
ഫോക്കസ് ലഭിക്കുന്നതിന് ആ ആട്രിബ്യൂട്ടുള്ള ഒരു ഒബ്‌ജക്റ്റിനായി ഉപയോക്താവ് എത്ര തവണ ടാബ് കീ അമർത്തണമെന്ന് നിർണ്ണയിക്കാൻ tabindex നിങ്ങളെ അനുവദിക്കുന്നു. ക്ലിക്കുകളുടെ എണ്ണം ആട്രിബ്യൂട്ട് മൂല്യം നിർണ്ണയിക്കുന്നു - ഒരു പോസിറ്റീവ് പൂർണ്ണസംഖ്യ.
ശീർഷകം - നിങ്ങൾ മൗസ് ഒരു മൂലകത്തിന് മുകളിലൂടെ നീക്കി കുറച്ച് സമയത്തേക്ക് അനങ്ങാതെ വെച്ചാൽ ദൃശ്യമാകുന്ന ടൂൾടിപ്പ്. അർത്ഥത്തിലെ വരി ഒരു സൂചനയായിരിക്കും.

വിവർത്തനം ടാഗ് ഉള്ളടക്കങ്ങളുടെ വിവർത്തനം അനുവദിക്കുന്നു (അതെ) അല്ലെങ്കിൽ നിരസിക്കുന്നു (ഇല്ല).
align മൂലകത്തിൻ്റെ വിന്യാസം വ്യക്തമാക്കുന്നു. ഉദാഹരണത്തിന്, ടെക്‌സ്‌റ്റ് ഇടത്തേക്ക് (ഇടത്), വലത്തോട്ടോ മധ്യത്തിലേയ്‌ക്കോ അല്ലെങ്കിൽ ന്യായീകരിക്കാനോ നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കാം. ചിത്രങ്ങൾക്കായി (ടാഗ് ) ലൈനിൻ്റെ ഏറ്റവും ഉയർന്ന ഘടകത്തിൻ്റെ മുകളിലെ ബോർഡറിലേക്കും (മുകളിൽ), താഴെയുള്ള ബോർഡറിലേക്കും (താഴെ) വിന്യസിക്കാനും കഴിയും, കൂടാതെ മധ്യഭാഗത്തിൻ്റെ മൂല്യം ചിത്രത്തിൻ്റെ മധ്യരേഖയെ വരിയുടെ അടിസ്ഥാനരേഖയുമായി പൊരുത്തപ്പെടുത്തുന്നു.

അലൈൻ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് ശുപാർശ ചെയ്യുന്നില്ല എന്നത് ഓർമിക്കേണ്ടതാണ്, കൂടാതെ CSS ഉപയോഗിച്ച് ടെക്സ്റ്റ് വിന്യസിക്കുന്നതാണ് നല്ലത്.

ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഉദാഹരണം

ഉദാഹരണമായി, HTML കോഡിൻ്റെ ലൈൻ പരിഗണിക്കുക:

ഈ വാചകം എഡിറ്റ് ചെയ്യാവുന്നതാണ്

മുഴുവൻ വരിയും ഉപയോക്താവിന് ബ്രൗസറിൽ എഡിറ്റുചെയ്യാൻ കഴിയുന്ന വാചകത്തിൻ്റെ ഒരു ഖണ്ഡിക സൃഷ്ടിക്കുന്നു.

വരിയുടെ ഓരോ ഘടകങ്ങളും നോക്കാം.

- ഖണ്ഡിക സംഭരിക്കുന്ന കണ്ടെയ്നറിൻ്റെ ഓപ്പണിംഗ് ടാഗ്.

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

ചിഹ്നങ്ങൾക്കിടയിൽ > ഒപ്പം< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true” - ഇതാണ് ആട്രിബ്യൂട്ടും അതിൻ്റെ മൂല്യവും. സ്കൂളിൽ എങ്ങനെയെന്ന് ഓർക്കുക: x=3. ഇവിടെയും സമാനമാണ്: ഉള്ളടക്കം = "ശരി". ഘടകത്തിൻ്റെ ഉള്ളടക്കം ഉപയോക്താവിന് എഡിറ്റ് ചെയ്യാൻ കഴിയുമോ എന്ന് വ്യക്തമാക്കുന്നു, ഒരു തുല്യ ചിഹ്നത്താൽ വേർതിരിച്ച ഉദ്ധരണികളിൽ എഴുതിയത്:

ആട്രിബ്യൂട്ട്=”മൂല്യം” ഉള്ളടക്കം=”ശരി”

XHTML/HTML4-ൻ്റെ കാലത്ത്, അനിയന്ത്രിതമായ DOM-മായി ബന്ധപ്പെട്ട ഡാറ്റ സംഭരിക്കുന്നതിന് ഡവലപ്പർമാർക്ക് കുറച്ച് ഓപ്ഷനുകൾ മാത്രമേ ഉണ്ടായിരുന്നുള്ളൂ. നിങ്ങൾക്ക് നിങ്ങളുടേതായ ആട്രിബ്യൂട്ടുകൾ കണ്ടുപിടിക്കാൻ കഴിയും, പക്ഷേ ഇത് അപകടകരമായിരുന്നു - നിങ്ങളുടെ കോഡ് സാധുവായിരിക്കില്ല, ബ്രൗസറുകൾ നിങ്ങളുടെ ഡാറ്റയെ അവഗണിച്ചേക്കാം, കൂടാതെ പേര് സ്റ്റാൻഡേർഡ് HTML ആട്രിബ്യൂട്ടുകളുമായി പൊരുത്തപ്പെടുന്നെങ്കിൽ അത് പ്രശ്നങ്ങൾ ഉണ്ടാക്കാം.

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

ഞങ്ങളുടെ JavaScript കോഡ് ID msglist ഉള്ള ഒരു ഘടകത്തിനായി നോക്കും. സ്‌ക്രിപ്റ്റ് ഉപയോഗിച്ച്, user_ എന്ന് തുടങ്ങുന്ന ക്ലാസുകൾക്കായി ഞങ്ങൾ തിരയും, ഞങ്ങളുടെ കാര്യത്തിൽ "ബോബ്" എന്നത് ഉപയോക്തൃ ഐഡി ആയിരിക്കും, കൂടാതെ ആ ഉപയോക്താവിൻ്റെ എല്ലാ സന്ദേശങ്ങളും ഞങ്ങൾ പ്രദർശിപ്പിക്കും.

പരമാവധി എണ്ണം സന്ദേശങ്ങൾ സജ്ജീകരിക്കാനും ആറ് മാസത്തിലധികം (180 ദിവസം) പഴയ സന്ദേശങ്ങൾ ഒഴിവാക്കാനും ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് പറയാം:

ഞങ്ങളുടെ ക്ലാസ് ആട്രിബ്യൂട്ട് വളരെ വേഗത്തിൽ അലങ്കോലപ്പെടും - ഒരു തെറ്റ് വരുത്തുന്നത് എളുപ്പമാണ്, കൂടാതെ JavaScript-ൽ സ്ട്രിംഗുകൾ പാഴ്‌സിംഗ് ചെയ്യുന്നത് കൂടുതൽ കൂടുതൽ ബുദ്ധിമുട്ടാണ്.

HTML5 ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

ഭാഗ്യവശാൽ, ഇഷ്‌ടാനുസൃത ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാനുള്ള കഴിവ് HTML5 അവതരിപ്പിച്ചു. ഡാറ്റ- യ്‌ക്കൊപ്പം പ്രിഫിക്‌സ് ചെയ്‌ത ഏത് ചെറിയക്ഷര നാമവും നിങ്ങൾക്ക് ഉപയോഗിക്കാം, ഉദാഹരണത്തിന്:

ഇഷ്‌ടാനുസൃത ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ:

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

JavaScript പ്രോസസ്സിംഗ് ഉദാഹരണം #1: getAttribute, setAttribute

getAttribute, setAttribute രീതികൾ ഉപയോഗിച്ച് ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ നേടാനും മാറ്റാനും എല്ലാ ബ്രൗസറുകളും നിങ്ങളെ അനുവദിക്കുന്നു:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

ഇത് പ്രവർത്തിക്കുന്നു, എന്നാൽ പഴയ ബ്രൗസറുകളുമായുള്ള അനുയോജ്യത നിലനിർത്താൻ മാത്രമേ ഉപയോഗിക്കാവൂ.

ജാവാസ്ക്രിപ്റ്റിലെ പ്രോസസ്സിംഗിൻ്റെ ഉദാഹരണം നമ്പർ 2: jQuery ലൈബ്രറിയുടെ ഡാറ്റ() രീതി

jQuery 1.4.3 പോലെ, ഡാറ്റ() രീതി HTML5 ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ കൈകാര്യം ചെയ്യുന്നു. നിങ്ങൾ ഡാറ്റ-പ്രിഫിക്‌സ് വ്യക്തമായി വ്യക്തമാക്കേണ്ടതില്ല, അതിനാൽ ഇതുപോലുള്ള കോഡ് പ്രവർത്തിക്കും:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

എന്നിരുന്നാലും, അത്തരം ആട്രിബ്യൂട്ടുകളുടെ മൂല്യങ്ങളെ ഉചിതമായ തരങ്ങളിലേക്ക് (ബൂലിയൻസ്, നമ്പറുകൾ, ഒബ്‌ജക്‌റ്റുകൾ, അറേകൾ അല്ലെങ്കിൽ നൾ) പരിവർത്തനം ചെയ്യാൻ jQuery ശ്രമിക്കുന്നുവെന്നും അത് DOM-നെ ബാധിക്കുമെന്നും അറിയുക. setAttribute-ൽ നിന്ന് വ്യത്യസ്തമായി, ഡാറ്റ() രീതി, ഡാറ്റ-ലിസ്റ്റ്-സൈസ് ആട്രിബ്യൂട്ടിനെ ഭൗതികമായി മാറ്റിസ്ഥാപിക്കില്ല - നിങ്ങൾ jQuery-ക്ക് പുറത്ത് അതിൻ്റെ മൂല്യം പരിശോധിക്കുകയാണെങ്കിൽ - അത് ഇപ്പോഴും 5 ആയിരിക്കും.

JavaScript പ്രോസസ്സിംഗിൻ്റെ ഉദാഹരണം നമ്പർ 3: ഡാറ്റാ സെറ്റുകളിൽ പ്രവർത്തിക്കുന്നതിനുള്ള API

അവസാനമായി, ഒരു DOMStringMap ഒബ്‌ജക്‌റ്റ് തിരികെ നൽകുന്ന HTML5 ഡാറ്റാസെറ്റുകളിൽ പ്രവർത്തിക്കാൻ ഞങ്ങൾക്ക് ഒരു API ഉണ്ട്. ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഡാറ്റ പ്രിഫിക്‌സുകളില്ലാതെ ഒരു ഒബ്‌ജക്‌റ്റിലേക്ക് മാപ്പ് ചെയ്‌തിരിക്കുന്നു, പേരുകളിൽ നിന്ന് ഹൈഫനുകൾ നീക്കംചെയ്യുന്നു, കൂടാതെ പേരുകൾ തന്നെ ഒട്ടകകേസിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു, ഉദാഹരണത്തിന്:

ആട്രിബ്യൂട്ട് പേര്	ഡാറ്റാസെറ്റ് API പേര്
ഡാറ്റ-ഉപയോക്താവ്	ഉപയോക്താവ്
ഡാറ്റ-മാക്സേജ്	പരമാവധി
ഡാറ്റ-ലിസ്റ്റ്-വലിപ്പം	ലിസ്റ്റ് വലിപ്പം

ഞങ്ങളുടെ പുതിയ കോഡ്:

Var msglist = document.getElementById("msglist"); var ഷോ = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

ഈ API-യെ എല്ലാ ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു, എന്നാൽ IE10-ഉം അതിൽ താഴെയുമല്ല. ഈ ബ്രൗസറുകൾക്ക് ഒരു പരിഹാരമുണ്ട്, എന്നാൽ നിങ്ങൾ പഴയ ബ്രൗസറുകൾക്കായി എഴുതുകയാണെങ്കിൽ jQuery ഉപയോഗിക്കുന്നത് കൂടുതൽ പ്രായോഗികമാണ്.

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

ഈ ലേഖനത്തിൽ ഞങ്ങൾ പുതിയ ആട്രിബ്യൂട്ടുകൾ പര്യവേക്ഷണം ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കും, അടുത്തതിൽ ഞങ്ങൾ ഡാറ്റാ എൻട്രി തരങ്ങൾ നോക്കും.

ഉപയോക്താക്കളെ ആകർഷിക്കുമ്പോൾ പുതിയ ഫീച്ചറുകൾ നമ്മുടെ ജീവിതം കൂടുതൽ എളുപ്പമാക്കുമെന്ന് കാണാം. ഇവിടെ ഏറ്റവും ആകർഷകമായ കാര്യം എന്താണ്? നിങ്ങൾക്ക് അവ ഇപ്പോൾ ഉപയോഗിക്കാം. HTML5 ഫോമുകളുടെ വളരെ ഹ്രസ്വമായ ചരിത്രത്തിൽ നിന്ന് ഞങ്ങൾ ആരംഭിക്കും.

ഈ ലേഖനം ക്രിസ്റ്റഫർ മർഫി, ഒലി സ്റ്റുഡോൾം, റിച്ചാർഡ് ക്ലാർക്ക്, ദിവ്യ മണിയൻ എന്നിവർ രചിച്ച Beginning HTML5, CSS3: The Web Evolved എന്ന പുസ്തകത്തിൻ്റെ 6-ാം അധ്യായത്തിൽ നിന്നുള്ള ഒരു ഭാഗമാണ്.

ശ്രദ്ധിക്കുക: ഈ ലേഖനം ഒരു പുസ്‌തകത്തിൽ നിന്നുള്ള ഉദ്ധരണിയായതിനാൽ, സ്‌ക്രീൻഷോട്ടുകൾ എടുത്തതിനുശേഷം ബ്രൗസറിൻ്റെ ആട്രിബ്യൂട്ടുകളുടെയും ഇൻപുട്ട് തരങ്ങളുടെയും കൈകാര്യം ചെയ്യൽ മാറിയിരിക്കാം. കൂടാതെ, ബ്രൗസർ പിന്തുണ പ്രസിദ്ധീകരണത്തിന് ശേഷം വിപുലീകരിച്ചിരിക്കാം, അതിനാൽ അതിൻ്റെ നിലവിലെ നിലയെക്കുറിച്ചുള്ള ലേഖനത്തിൻ്റെ അവസാനത്തെ ലിങ്കുകൾ പരിശോധിക്കുക.

HTML5 ഫോമുകളുടെ ചരിത്രം

HTML5-ൻ്റെ ഫോം വിഭാഗം യഥാർത്ഥത്തിൽ വെബ് ഫോമുകൾ 2.0 എന്ന് വിളിക്കപ്പെടുന്ന ഒരു സ്പെസിഫിക്കേഷൻ ആയിരുന്നു, അത് പുതിയ തരത്തിലുള്ള ഫോം മാനേജ്മെൻ്റ് ടൂളുകൾ ചേർത്തു. ഓപ്പറയിൽ ആരംഭിച്ച് അന്നത്തെ ഓപ്പറ സ്റ്റാഫ് അംഗം ഇയാൻ ഹിക്‌സൺ എഡിറ്റ് ചെയ്‌ത ഇത് 2005-ൻ്റെ തുടക്കത്തിൽ W3C അംഗീകരിച്ചു. W3C ആണ് ഈ ജോലി ആദ്യം നടത്തിയത്. പിന്നീട് ഇത് വെബ് ആപ്ലിക്കേഷനുകൾ 1.0 സ്പെസിഫിക്കേഷനുമായി സംയോജിപ്പിച്ച് വേർപിരിഞ്ഞ വെബ് ഹൈപ്പർടെക്സ്റ്റ് ആപ്ലിക്കേഷൻ ടെക്നോളജി വർക്കിംഗ് ഗ്രൂപ്പിൻ്റെ (WHATWG) HTML5 സ്പെസിഫിക്കേഷൻ്റെ അടിസ്ഥാനമായി.

HTML5 ഡിസൈൻ തത്വങ്ങൾ പ്രയോഗിക്കുന്നു

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

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

ഈ ലേഖനത്തിൽ, ഞങ്ങൾ ഇനിപ്പറയുന്ന 14 പുതിയ ആട്രിബ്യൂട്ടുകൾ നോക്കാം.

പ്ലെയ്സ്ഹോൾഡർ

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

പ്ലെയ്‌സ്‌ഹോൾഡർ ആട്രിബ്യൂട്ട് എങ്ങനെ നടപ്പിലാക്കാമെന്ന് നമുക്ക് നോക്കാം.

< input type = "text" name = "user-name" id = "user-name" placeholder = "കുറഞ്ഞത് 3 പ്രതീകങ്ങൾ" >

ഇതുപോലെ! നിങ്ങൾ ചിന്തിക്കുന്നത് എനിക്ക് കേൾക്കാം, “അയാളുടെ പ്രത്യേകത എന്താണ്? എൻ്റെ ജീവിതകാലം മുഴുവൻ ജാവാസ്ക്രിപ്റ്റിൽ ഞാൻ ഇത് ചെയ്തിട്ടുണ്ട്." അതെ, അത് ശരിയാണ്. എന്നിരുന്നാലും, HTML5 ഉപയോഗിച്ച് ഇത് ബ്രൗസറിൻ്റെ ഭാഗമാകുന്നു, അതായത് കൂടുതൽ ആക്‌സസ് ചെയ്യാവുന്ന ക്രോസ്-ബ്രൗസർ അനുഭവം (JavaScript പ്രവർത്തനരഹിതമാക്കിയിരിക്കുമ്പോൾ പോലും) നേടുന്നതിന് കുറച്ച് സ്‌ക്രിപ്റ്റ് എഴുതേണ്ടതുണ്ട്. Chrome-ൽ പ്ലേസ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് ആട്രിബ്യൂട്ട് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ചിത്രം കാണിക്കുന്നു.

പ്ലെയ്‌സ്‌ഹോൾഡർ ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കാത്ത ബ്രൗസറുകൾ അത് അവഗണിക്കും, അതിനാൽ അത് എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടില്ല. എന്നിരുന്നാലും, ഇത് ഓണാക്കുന്നതിലൂടെ, ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നവർക്ക് നിങ്ങൾ അനുഭവം മെച്ചപ്പെടുത്തുകയും നിങ്ങളുടെ സൈറ്റ് ഭാവി പ്രൂഫ് ആണെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു. എല്ലാ ആധുനിക ബ്രൗസറുകളും പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിനെ പിന്തുണയ്‌ക്കുന്നു.

ഓട്ടോഫോക്കസ്

ഓട്ടോഫോക്കസ് അത് പറയുന്നതുതന്നെ ചെയ്യുന്നു. ഇത് ഇൻപുട്ടിലേക്ക് ചേർക്കുന്നത് പേജ് റെൻഡർ ചെയ്യുമ്പോൾ ഫീൽഡ് സ്വയമേവ ഫോക്കസ് ചെയ്യുന്നു. പ്ലെയ്‌സ്‌ഹോൾഡർ പോലെ, മുൻകാലങ്ങളിൽ ഞങ്ങൾ ഓട്ടോഫോക്കസിനായി JavaScript ഉപയോഗിച്ചിരുന്നു.

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

ഇതൊരു ബൂളിയൻ ആട്രിബ്യൂട്ടാണ് (നിങ്ങൾ XHTML5 എഴുതുന്നില്ലെങ്കിൽ; കുറിപ്പ് കാണുക) ഇത് ഇതുപോലെ നടപ്പിലാക്കുന്നു:

< input type = "text" name = "first-name" id = "first-name" autofocus >

എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇതിനെ പിന്തുണയ്‌ക്കുന്നു, ഒരു പ്ലെയ്‌സ്‌ഹോൾഡർ പോലെ, ഓട്ടോഫോക്കസ് ചെയ്യാത്ത ബ്രൗസറുകൾ അത് അവഗണിക്കുന്നു.

ശ്രദ്ധിക്കുക: ചില പുതിയ HTML5 ഫോം ആട്രിബ്യൂട്ടുകൾ ബൂളിയൻ ആണ്. ഇതിനർത്ഥം അവ നിലവിലുണ്ടെങ്കിൽ ഇൻസ്റ്റാളുചെയ്‌തിട്ടുണ്ടെന്നും നഷ്‌ടമായാൽ ഇൻസ്റ്റാൾ ചെയ്യപ്പെടുന്നില്ലെന്നും അർത്ഥമാക്കുന്നു. HTML5-ൽ അവ പല തരത്തിൽ എഴുതാം.

ഓട്ടോഫോക്കസ് ഓട്ടോഫോക്കസ്="" ഓട്ടോഫോക്കസ്="ഓട്ടോഫോക്കസ്"

ഓട്ടോഫോക്കസ്

ഓട്ടോഫോക്കസ് = ""

ഓട്ടോഫോക്കസ് = "ഓട്ടോഫോക്കസ്"

എന്നിരുന്നാലും, XHTML5 എഴുതുമ്പോൾ, നിങ്ങൾ autofocus="autofocus" ശൈലി ഉപയോഗിക്കണം.

സ്വയം പൂർത്തീകരണം

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

< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" >

ഒരു ഫീൽഡിൻ്റെ യാന്ത്രിക പൂർത്തീകരണ നില, അടങ്ങിയിരിക്കുന്ന ഫോം എലമെൻ്റിലെ ഏതെങ്കിലും സ്വയംപൂർത്തിയായ അവസ്ഥയെ അസാധുവാക്കുന്നു.

ആവശ്യമാണ്

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

< input type = "text" id = "given-name" name = "given-name" required >

നിലവിൽ ആവശ്യമുള്ളത് Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10, Chrome 5+ എന്നിവയിൽ മാത്രമാണ്, അതിനാൽ തൽക്കാലം മറ്റ് ബ്രൗസറുകൾക്കായി നിങ്ങൾ ക്ലയൻ്റ് സൈഡ് ഫീൽഡ് ചെക്ക് സ്ക്രിപ്റ്റുകൾ എഴുതുന്നത് തുടരേണ്ടിവരും (*ചുമ- ചുമ * IE!). Opera, Chrome, Firefox എന്നിവ ഒരു ഫോം സമർപ്പിക്കുമ്പോൾ ഉപയോക്താവിന് ഒരു പിശക് സന്ദേശം കാണിക്കുന്നു. മിക്ക ബ്രൗസറുകളിലും, പ്രഖ്യാപിത ഭാഷയെ അടിസ്ഥാനമാക്കി പിശകുകൾ പ്രാദേശികവൽക്കരിക്കപ്പെടുന്നു. സമർപ്പിക്കുമ്പോൾ Safari ഒരു പിശക് സന്ദേശം കാണിക്കില്ല, പകരം ഫീൽഡ് ഫോക്കസിൽ ഇടുന്നു.

"ആവശ്യമായ" പിശക് സന്ദേശത്തിൻ്റെ ഡിഫോൾട്ട് ഡിസ്പ്ലേ ഓരോ ബ്രൗസറിനനുസരിച്ച് വ്യത്യാസപ്പെടുന്നു; എറർ ബബിൾ നിലവിൽ എല്ലാ ബ്രൗസറുകളിലും CSS ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്യാൻ കഴിയില്ല. എന്നിരുന്നാലും, Chrome-ന് സ്വന്തം പ്രോപ്പർട്ടി ഉണ്ട്, അത് പിശക് സന്ദേശം സ്റ്റൈൽ ചെയ്യാൻ ഉപയോഗിക്കാം. ആവശ്യമായ കപട-ക്ലാസ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിങ്ങളുടെ ഡാറ്റ ഇൻപുട്ടിലേക്ക് ശൈലികൾ നൽകാനും കഴിയും. setCustomValidity() രീതി ഉപയോഗിച്ച് JavaScript-ലെ പദങ്ങളും ശൈലികളും അസാധുവാക്കുക എന്നതാണ് ഒരു ബദൽ. അത്തരം ബ്രൗസർ അടിസ്ഥാനമാക്കിയുള്ള മൂല്യനിർണ്ണയം സെർവർ-സൈഡ് മൂല്യനിർണ്ണയത്തിന് പകരമാവില്ല എന്നതും മറക്കാതിരിക്കുക എന്നത് വളരെ പ്രധാനമാണ്.

പാറ്റേൺ

പാറ്റേൺ ആട്രിബ്യൂട്ട് സാധാരണയായി പല ഡെവലപ്പർമാർക്കും ഒരു വലിയ ആശങ്കയാണ് (ഏത് ഫോം ആട്രിബ്യൂട്ട് പോലെ തന്നെ). മൂല്യം പരിശോധിക്കേണ്ട ഫീൽഡിനായി ഇത് JavaScript റെഗുലർ എക്സ്പ്രഷൻ നിർവചിക്കുന്നു. കോഡുകൾക്കും അക്കൗണ്ട് നമ്പറുകൾക്കും മറ്റും പ്രത്യേകം വെരിഫിക്കേഷൻ പ്രയോഗിക്കുന്നത് പാറ്റേൺ എളുപ്പമാക്കുന്നു. പാറ്റേണിൻ്റെ സാധ്യതകൾ വളരെ വലുതാണ്, ഒരു ഉൽപ്പന്ന നമ്പർ ഉപയോഗിക്കുന്ന ഒരു ലളിതമായ ഉദാഹരണം ഇവിടെയുണ്ട്.

ഉൽപ്പന്ന നമ്പർ:

< label >ഉൽപ്പന്ന നമ്പർ:

< input pattern = "{3}" name = "product" type = "text" title = "ഒറ്റ അക്കം തുടർന്ന് മൂന്ന് വലിയ അക്ഷരങ്ങൾ." / >

< / label >

ഉൽപ്പന്ന നമ്പർ ഒരു അക്കവും തുടർന്ന് മൂന്ന് വലിയ അക്ഷരങ്ങളും (3) ആയിരിക്കണം എന്ന് ഈ പാറ്റേൺ നിർദ്ദേശിക്കുന്നു. നിങ്ങൾക്ക് HTML5 ടെംപ്ലേറ്റുകൾ വെബ്സൈറ്റിൽ കൂടുതൽ ടെംപ്ലേറ്റുകൾ കാണാൻ കഴിയും, അവ ഉപയോഗിച്ച് ആരംഭിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് സാധാരണ പതിവ് എക്സ്പ്രഷൻ ശൈലി ടെംപ്ലേറ്റുകളുടെ ഒരു ലിസ്റ്റ് ഉണ്ട്.

ആവശ്യമുള്ളതുപോലെ, ഓപ്പറ 9.5+, ഫയർഫോക്സ് 4+, സഫാരി 5+, ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ 10, Chrome 5+ എന്നിവ മാത്രമാണ് നിലവിൽ ടെംപ്ലേറ്റുകളെ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾ. എന്നിരുന്നാലും, ബ്രൗസർ മാർക്കറ്റിൻ്റെ ദ്രുതഗതിയിലുള്ള മുന്നേറ്റം കാരണം മറ്റുള്ളവർ ഉടൻ പിടിക്കും.

ലിസ്റ്റും ഡാറ്റലിസ്റ്റ് ഘടകങ്ങളും

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

പട്ടികയും ഡാറ്റലിസ്റ്റും എങ്ങനെ സംയോജിപ്പിക്കുന്നുവെന്ന് ഇനിപ്പറയുന്ന ഉദാഹരണം കാണിക്കുന്നു.

നിങ്ങളുടെ പ്രിയപ്പെട്ട പഴം: ബ്ലാക്ക്‌ബെറി ബ്ലാക്ക് കറൻ്റ് ബ്ലൂബെറി വേറെയാണെങ്കിൽ, ദയവായി വ്യക്തമാക്കുക:

< label >നിങ്ങളുടെ പ്രിയപ്പെട്ട ഫലം:

< datalist id = "fruits" >

< option value = "ബ്ലാക്ക്‌ബെറി" >ബ്ലാക്ക്‌ബെറി< / option >

< option value = "ബ്ലാക്ക് കറൻ്റ്" >ബ്ലാക്ക് കറൻ്റ്< / option >

< option value = "ഞാവൽപഴം" >ഞാവൽപഴം< / option >

< ! -- …-- >

< / datalist >

മറ്റെന്തെങ്കിലും ഉണ്ടെങ്കിൽ, ദയവായി വ്യക്തമാക്കുക:

< input type = "text" name = "fruit" list = "fruits" >

< / label >

ഡാറ്റലിസ്റ്റിലേക്ക് തിരഞ്ഞെടുത്ത ഘടകം ചേർക്കുന്നതിലൂടെ, ഒരു ഓപ്ഷൻ ഘടകം പ്രയോഗിച്ചുകൊണ്ട് നിങ്ങൾക്ക് മികച്ച ഡീഗ്രേഡേഷൻ നേടാനാകും. HTML5-ൻ്റെ ക്രമാനുഗതമായ ഡീഗ്രേഡേഷൻ തത്വങ്ങളുമായി തികച്ചും യോജിക്കുന്ന ജെറമി കീത്ത് സൃഷ്‌ടിച്ച ഗംഭീരമായ ഒരു മാർക്ക്അപ്പ് ടെംപ്ലേറ്റ് ഇതാ.

< label >നിങ്ങളുടെ പ്രിയപ്പെട്ട ഫലം:

< datalist id = "fruits" >

< select name = "fruits" >

< option value = "ബ്ലാക്ക്‌ബെറി" >ബ്ലാക്ക്‌ബെറി< / option >

< option value = "ബ്ലാക്ക് കറൻ്റ്" >ബ്ലാക്ക് കറൻ്റ്< / option >

< option value = "ഞാവൽപഴം" >ഞാവൽപഴം< / option >

< ! -- …-- >

< / select >

മറ്റെന്തെങ്കിലും ഉണ്ടെങ്കിൽ, ദയവായി വ്യക്തമാക്കുക:

< / datalist >

< input type = "text" name = "fruit" list = "fruits" >

< / label >

ലിസ്റ്റിനും ഡാറ്റലിസ്റ്റിനുമുള്ള ബ്രൗസർ പിന്തുണ നിലവിൽ Opera 9.5+, Chrome 20+, Internet Explorer 10, Firefox 4+ എന്നിവയിൽ പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.

ഒന്നിലധികം

ഒന്നിലധികം ബൂളിയൻ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിങ്ങളുടെ ലിസ്റ്റും ഡാറ്റലിസ്റ്റും ഒരു പടി കൂടി മുന്നോട്ട് കൊണ്ടുപോകാം, അതുവഴി നിങ്ങൾക്ക് ഡാറ്റലിസ്റ്റിൽ നിന്ന് ഒന്നിലധികം മൂല്യങ്ങൾ നൽകാനാകും. ഇതാ ഒരു ഉദാഹരണം.

< label >നിങ്ങളുടെ പ്രിയപ്പെട്ട ഫലം:

< datalist id = "fruits" >

< select name = "fruits" >

< option value = "ബ്ലാക്ക്‌ബെറി" >ബ്ലാക്ക്‌ബെറി< / option >

< option value = "ബ്ലാക്ക് കറൻ്റ്" >ബ്ലാക്ക് കറൻ്റ്< / option >

< option value = "ഞാവൽപഴം" >ഞാവൽപഴം< / option >

< ! -- …-- >

< / select >

മറ്റെന്തെങ്കിലും ഉണ്ടെങ്കിൽ, ദയവായി വ്യക്തമാക്കുക:

< / datalist >

< input type = "text" name = "fruit" list = "fruits" multiple >

< / label >

എന്നിരുന്നാലും, ഡാറ്റലിസ്റ്റിൽ മാത്രം ഒന്നിലധികം ഉപയോഗിക്കുന്നില്ല. ഒരു സുഹൃത്തിന് ഇനങ്ങൾ കൈമാറുമ്പോഴോ ഫയലുകൾ അറ്റാച്ചുചെയ്യുമ്പോഴോ ഇവിടെ കാണിച്ചിരിക്കുന്നതുപോലെ, ഒന്നിലധികം ഉപയോഗിക്കുന്നതിൻ്റെ മറ്റൊരു ഉദാഹരണം ഇമെയിൽ വിലാസങ്ങളാണ്:

ഫയലുകൾ അപ്‌ലോഡ് ചെയ്യുക:

< label >ഫയലുകൾ അപ്‌ലോഡ് ചെയ്യുക:

< input type = "file" multiple name = "upload" > < / label >

Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10, Chrome 4+ എന്നിവയിൽ മൾട്ടിപ്പിൾ പിന്തുണയ്ക്കുന്നു.

നവീകരിക്കുകയും രൂപപ്പെടുത്തുകയും ചെയ്യുക

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

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

ഫോംനോവാലിഡേറ്റിൻ്റെ ഉപയോഗം ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ കാണാം:

ഇമെയിൽ:

< form action = "process.php" >

< label for = "email" >ഇമെയിൽ:< / label >

< input type = "text" name = "email" value = "[ഇമെയിൽ പരിരക്ഷിതം]" >

< input type = "submit" formnovalidate value = "സമർപ്പിക്കുക" >

< / form >

ഈ ഉദാഹരണം നോവാലിഡേറ്റിൻ്റെ ഉപയോഗം കാണിക്കുന്നു:

ഇമെയിൽ:

< form action = "process.php" novalidate >