ఒక <label> ఫారమ్ నియంత్రణకు సহజ ప్రాప్య నామం మరియు పెద్ద క్లిక్ లక్ష్యం ఇస్తుంది. వాటిని సంబంధితం చేయడానికి రెండు మార్గాలు ఉన్నాయి, మరియు దీన్ని చేయడం సహజ ప్రాప్యతకు అవసరం.
for + id (స్పష్టమైన)Email address
లేబిల్ యొక్క for ఇన్పుట్ యొక్క id కి సరిపోతుంది. మార్కప్లో ఇవి సంక్షిప్త నిర్దేశాలపై ఉన్నప్పటికీ ఇది పని చేస్తుంది.
<label>
Email address
<input type="email" />
</label>
ఇన్పుట్ లేబిల్ లోపల గూటిబడి ఉంది — id అవసరం లేదు.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
వాడుకరి టైప్ చేసినప్పుడు placeholder అదృశ్యమవుతుంది మరియు విశ్వసనీయంగా ప్రకటించబడదు — దీన్ని ఎక్కడైనా ఒకే లేబిల్గా ఉపయోగించవద్దు.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
aria-label (లేదా aria-labelledby) ను ఉపయోగించండి విజ్జ దృశ్యమానమైన లేబిల్ నిజానికి సాధ్యం కానప్పుడు.
సరిగ్గా సంబంధితమైన లేబిల్లు ఫారమ్ల కోసం అత్యంత ప్రభావవంతమైన సహజ ప్రాప్య అభ్యాసాలలో ఒకటి — అవి ప్రతిটి నియంత్రణకు సహాయక సాంకేతికత కోసం పేరు ఇస్తాయి మరియు ప్రతిఒక్కరికీ క్లిక్ లక్ష్యాలను విస్తరిస్తాయి.
సరిగ్గా <label> కు ప్రాధాన్యమివ్వండి; అవసరమైనప్పుడు మాత్రమే aria-label కు వెనుకకు వెళ్లండి, మరియు placeholder ని లేబిల్గా ఎప్పుడూ ఆధారపడవద్దు.