in English
އިންޕުޓް ގްރޫޕް
ޓެކްސްޗުއަލް އިންޕުޓްސް، ކަސްޓަމް ސެލެކްޓްސް، އަދި ކަސްޓަމް ފައިލް އިންޕުޓްސްގެ ދެފަރާތުގައި ޓެކްސްޓް، ބަޓަން، ނުވަތަ ބަޓަން ގްރޫޕްތައް އިތުރުކޮށްގެން ފޯމް ކޮންޓްރޯލްތައް ފަސޭހައިން ފުޅާކޮށްލާށެވެ.
އަސާސީ މިސާލެވެ
އިންޕުޓެއްގެ ދެފަރާތުގައި އެއް އެޑްއޮން ނުވަތަ ބަޓަން ބަހައްޓާށެވެ. އަދި އިންޕުޓެއްގެ ދެފަރާތުގައި ވެސް އެއްޗެއް ބަހައްޓާލެވިދާނެއެވެ. <label>
އިންޕުޓް ގްރޫޕްގެ ބޭރުގައި s ބަހައްޓަން ހަނދާން ކުރާށެވެ .
އޮޅާލުމެވެ
އިންޕުޓް ގްރޫޕްތައް ޑިފޯލްޓްކޮށް ވިއާ ރެޕް ކުރަނީ flex-wrap: wrap
އިންޕުޓް ގްރޫޕެއްގެ ތެރޭގައި ކަސްޓަމް ފޯމް ފީލްޑް ވެލިޑޭޝަން އެކޮމޮޑޭޓް ކުރުމަށެވެ. މިކަން ޑިސެބިލް ކުރެވިދާނެ .flex-nowrap
.
ސައިޒް ކުރުން
ރިލޭޓިވް ފޯމް ސައިޒިންގ ކްލާސްތައް .input-group
އަމިއްލައަށް އިތުރުކޮށް އެތެރޭގައިވާ ކޮންޓެންޓްތައް އޮޓޮމެޓިކުން ސައިޒް ބަދަލުވާނެ- ކޮންމެ އެލިމެންޓެއްގައި ފޯމް ކޮންޓްރޯލް ސައިޒް ކްލާސްތައް ތަކުރާރު ކުރުމުގެ ބޭނުމެއް ނެތެވެ.
ވަކިވަކި އިންޕުޓް ގްރޫޕް އެލިމެންޓްތަކުގެ މައްޗަށް ސައިޒް ކުރުމަކީ ސަޕޯޓް ނުކުރާ ކަމެކެވެ.
ޗެކްބޮކްސްތަކާއި ރޭޑިއޯތަކެވެ
ޓެކްސްޓްގެ ބަދަލުގައި އިންޕުޓް ގްރޫޕެއްގެ އެޑޮންގެ ތެރޭގައި އެއްވެސް ޗެކްބޮކްސް ނުވަތަ ރޭޑިއޯ އޮޕްޝަނެއް ބަހައްޓާށެވެ.
ގިނަ <input>
s އަށް ވިޝުއަލްކޮށް ސަޕޯޓް ކުރެވޭއިރު، ވެލިޑޭޝަން ސްޓައިލްތައް ލިބެނީ ހަމައެކަނި އެއް އިންޕުޓް ގްރޫޕްތަކަށެވެ <input>
.
އެތައް އެޑޮންއެކެވެ
އެތައް އެޑް-އޮންތަކެއް ސަޕޯޓްކުރާއިރު، ޗެކްބޮކްސް އަދި ރޭޑިއޯ އިންޕުޓް ވަރޝަންތަކާއެކު މިކްސް ކުރެވޭނެއެވެ.
އިންޕުޓް ގްރޫޕްތަކުގެ ތެރޭގައި ކަސްޓަމް ސެލެކްޓްތަކާއި ކަސްޓަމް ފައިލް އިންޕުޓްތަކަށް ސަޕޯޓް ދިނުން ހިމެނެއެވެ. މިތަކެތީގެ ބްރައުޒާ ޑިފޯލްޓް ވަރޝަންތަކަށް ސަޕޯޓް ނުކުރެއެވެ.
ކަސްޓަމް ސެލެކްޓް ކުރާށެވެ
އެކްސެސިބިލިޓީ
އެސިސްޓިވް ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް އެ ފޯމް ކޮންޓްރޯލްތަކުގެ މަގުސަދު ފޯރުކޮށްދެވޭނެ ގޮތަށް ހުރިހާ ފޯމް ކޮންޓްރޯލްތަކެއްގައި އެކަށީގެންވާ އެކްސެސިބަލް ނަމެއް ހުންނަކަން ކަށަވަރުކުރުން. މިކަން ހާސިލް ކުރުމަށް އޮތް އެންމެ ފަސޭހަ ގޮތަކީ <label>
އުނިއިތުރެއް ބޭނުން ކުރުމާއި، ނުވަތަ- ބަޓަންތަކުގެ ޙާލަތުގައި- <button>...</button>
ކޮންޓެންޓްގެ ބައެއްގެ ގޮތުގައި ފުދޭވަރަކަށް ސިފަކުރެވޭ ލިޔުން ހިމަނާލުމެވެ.
ފެންނަ ނުވަތަ އެކަށީގެންވާ ޓެކްސްޓް ކޮންޓެންޓެއް ހިމަނާފައި ނުވާ ހާލަތްތަކުގައި <label>
، އަދިވެސް އެކްސެސިބަލް ނަމެއް ފޯރުކޮށްދިނުމަށް ބަދަލު ގޮތްތަކެއް އެބަހުއްޓެވެ.
<label>
.visually-hidden
ކްލާސް ބޭނުންކޮށްގެން ފޮރުވާފައިވާ އުފެއްދުންތައް
- ބޭނުންކޮށްގެން ލޭބަލްއެއްގެ ގޮތުގައި މަސައްކަތް ކުރެވޭނެ މިހާރު ހުރި އުފެއްދުމަކަށް އިޝާރާތްކުރުން
aria-labelledby
title
އެޓްރިބިއުޓެއް ފޯރުކޮށްދިނުން
- ބޭނުންކޮށްގެން އެލިމެންޓެއްގެ މައްޗަށް އެކްސެސިބަލް ނަން ސާފުކޮށް ސެޓްކުރުން
aria-label
މިއިން އެއްވެސް އެއްޗެއް ނެތްނަމަ، އެހީތެރި ޓެކްނޮލޮޖީތަކުން placeholder
އެކްސެސިބަލް ނަމާއި އެލިމެންޓްތަކަށް ފޯލްބެކެއްގެ ގޮތުގައި އެޓްރިބިއުޓް <input>
ބޭނުންކުރުމަށް ރިޒޯޓް ކުރެވިދާނެއެވެ <textarea>
. މި ބައިގައިވާ މިސާލުތަކުން ހުށަހަޅާފައިވާ މަދު، ކޭސްތަކަށް ޚާއްޞަ ގޮތްތަކެއް ލިބިގެންދެއެވެ.
ލޮލުން ފޮރުވިފައިވާ ކޮންޓެންޓް ( .sr-only
, aria-label
, އަދި placeholder
ކޮންޓެންޓް ވެސް ބޭނުންކުރުމުން، ފޯމް ފީލްޑެއްގައި ކޮންޓެންޓް ހުރުމުން ގެއްލިގެންދާ) އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ފައިދާ ކުރާއިރު، ފެންނަ ލޭބަލް ޓެކްސްޓް ނެތުމަކީ އަދިވެސް ވަކި ޔޫޒަރުންނަށް މައްސަލައަކަށް ވެދާނެއެވެ. ކޮންމެވެސް ވައްތަރެއްގެ ފެންނަ ލޭބަލް އަކީ އާންމުކޮށް އެންމެ ރަނގަޅު ގޮތަކީ، އެކްސެސިބިލިޓީ އާއި ޔޫޒަބިލިޓީ އަށް ވެސް އެންމެ ރަނގަޅު ގޮތެވެ.