ਟੈਕਸਟੁਅਲ ਇਨਪੁਟਸ, ਕਸਟਮ ਸਿਲੈਕਟਸ, ਅਤੇ ਕਸਟਮ ਫਾਈਲ ਇਨਪੁਟਸ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਟੈਕਸਟ, ਬਟਨ ਜਾਂ ਬਟਨ ਸਮੂਹਾਂ ਨੂੰ ਜੋੜ ਕੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਵਧਾਓ।
ਬੁਨਿਆਦੀ ਉਦਾਹਰਨ
ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਐਡ-ਆਨ ਜਾਂ ਬਟਨ ਰੱਖੋ। ਤੁਸੀਂ ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ। <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
ਸਮਗਰੀ ਵੀ, ਜੋ ਇੱਕ ਫਾਰਮ ਫੀਲਡ ਵਿੱਚ ਸਮਗਰੀ ਹੋਣ ਤੋਂ ਬਾਅਦ ਗਾਇਬ ਹੋ ਜਾਂਦੀ ਹੈ) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਲਾਭ ਪਹੁੰਚਾਏਗੀ, ਕੁਝ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਲੇਬਲ ਟੈਕਸਟ ਦੀ ਕਮੀ ਅਜੇ ਵੀ ਸਮੱਸਿਆ ਹੋ ਸਕਦੀ ਹੈ। ਦਿਖਣਯੋਗ ਲੇਬਲ ਦੇ ਕੁਝ ਰੂਪ ਆਮ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਉਪਯੋਗਤਾ ਦੋਵਾਂ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਪਹੁੰਚ ਹੈ।