Lesson – 61 : વેબ પેજેસમાં વપરાતા વિવિધ કન્ટ્રોલ્સની કલ્પનાઓ

વેબ પેજ બનાવવાનું મુખ્ય ઉદ્દેશ્ય યૂઝરને સારો અનુભવ આપવાનો છે. વેબ પેજ પર યૂઝર સાથે ઈન્ટરેક્ટ કરવા માટે વિવિધ પ્રકારના કન્ટ્રોલ્સ (Controls) નો ઉપયોગ થાય છે. આ કન્ટ્રોલ્સની મદદથી યૂઝર માહિતી દાખલ કરી શકે છે, પસંદગી કરી શકે છે, ફોર્મ સબમિટ કરી શકે છે અને વેબસાઇટને વધુ ઉપયોગી બનાવી શકે છે.

form controls


🔹 1. Text Box (ટેક્સ્ટ બોક્સ)

ટેક્સ્ટ બોક્સનો ઉપયોગ યૂઝર પાસેથી ટેક્સ્ટ ઇન્ડપુટ મેળવવા માટે થાય છે.
ઉદાહરણ: નામ, સરનામું, ઇમેલ વગેરે.

<input type="text" placeholder="Enter your name">

🔹 2. Password Box (પાસવર્ડ બોક્સ)

પાસવર્ડ દાખલ કરવા માટે વપરાતો કન્ટ્રોલ છે. આમાં દાખલ થઈ રહેલો ટેક્સ્ટ દૃશ્યમાન નથી થતો.

<input type="password" placeholder="Enter Password">

🔹 3. Radio Button (રેડિયો બટન)

એક સમયે માત્ર એક જ વિકલ્પ પસંદ કરવા માટે વપરાય છે.

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

🔹 4. Check Box (ચેકબોક્સ)

એક કરતાં વધુ વિકલ્પો પસંદ કરવા માટે વપરાય છે.

<input type="checkbox"> I agree

🔹 5. Drop-Down List / Select Box (ડ્રોપ-ડાઉન લિસ્ટ)

યૂઝરને વિકલ્પોની યાદીમાંથી એક પસંદ કરવાની તક આપે છે.

<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>

🔹 6. Button (બટન)

ફોર્મ સબમિટ કરવા, રીસેટ કરવા અથવા કોઈ ક્રિયા કરવા માટે વપરાય છે.

<button>Submit</button>

🔹 7. Text Area (ટેક્સ્ટ એરિયા)

લાંબી માહિતી (જેમ કે Feedback, Address) દાખલ કરવા માટે.

<textarea rows="4" cols="30"></textarea>

🔹 8. File Upload Control (ફાઇલ અપલોડ કન્ટ્રોલ)

યૂઝરને ફાઇલ અપલોડ કરવાની મંજૂરી આપે છે.

<input type="file">

🔹 9. Image Control (ઇમેજ કન્ટ્રોલ)

વેબ પેજમાં ચિત્ર મૂકવા માટે વપરાય છે.

<img src="image.jpg" alt="Sample Image">

🔹 10. Date, Time and Number Controls

આ HTML5 દ્વારા ઉમેરાયેલા આધુનિક કન્ટ્રોલ્સ છે.

  • Date Picker

<input type="date">
  • Time Picker

<input type="time">
  • Number Box

<input type="number" min="1" max="10">

વેબ ડેવલપમેન્ટમાં કન્ટ્રોલ્સનો ઉપયોગ ખૂબ જ મહત્વનો છે કારણ કે તેઓ વેબ પેજને ઇન્ટરેક્ટિવ અને યુઝર-ફ્રેન્ડલી બનાવે છે. દરેક કન્ટ્રોલ એક વિશિષ્ટ કાર્ય માટે બનેલો હોય છે અને યોગ્ય કન્ટ્રોલ પસંદ કરવાથી વેબસાઇટનું યુઝર એક્સ્પીરિઅન્સ પણ વધારે સારો બને છે.