વેબ ડેવલપમેન્ટમાં HTML Inputs સૌથી મહત્વપૂર્ણ ફોર્મ એલિમેન્ટ્સમાંના એક છે. જ્યારે આપણે વેબ ફોર્મ બનાવીએ છીએ ત્યારે યુઝર પાસેથી માહિતી મેળવવા માટે વિવિધ પ્રકારના HTML <input> એલિમેન્ટનો ઉપયોગ કરીએ છીએ — જેમ કે નામ, ઈમેઈલ, પાસવર્ડ, તારીખ, રંગ, ફાઇલ અપલોડ વગેરે.
આ માર્ગદર્શિકામાં, આપણે HTML Inputs ના બધા પ્રકારો, તેનો ઉપયોગ, કોડ ઉદાહરણો અને બેસ્ટ પ્રેક્ટિસીસ ગુજરાતી ભાષામાં શીખીશું.
HTML Inputs શું છે?
HTML <input> એ ફોર્મનો એ ભાગ છે જે યુઝરને માહિતી દાખલ કરવાની પરવાનગી આપે છે. દરેક input ટાઇપનો પોતાનો ઉપયોગ હોય છે. ઉદાહરણ તરીકે, type="email" ફક્ત ઈમેઈલ ફોર્મેટ સ્વીકારશે જ્યારે type="number" માત્ર અંક સ્વીકારશે.
HTML Inputs ના પ્રકારો અને ઉદાહરણો
1. Text Input
<input type="text" name="fullname" placeholder="તમારું પૂરું નામ" required>2. Password Input
<input type="password" name="password" minlength="6" required>3. Email Input
<input type="email" name="email" placeholder="તમારું ઈમેઈલ">4. Number Input
<input> એલિમેન્ટનું type=”number” એક ઇનપુટ ફીલ્ડ બનાવે છે, જે યુઝરને માત્ર સંખ્યાત્મક મૂલ્ય દાખલ કરવાની પરવાનગી આપે છે. તમે min અને max એટ્રિબ્યુટ્સનો ઉપયોગ કરીને ન્યૂનતમ અને મહત્તમ મૂલ્ય દાખલ કરવાની મર્યાદા પણ નક્કી કરી શકો છો.
<input type="number" name="age" min="18" max="60">5. Date Input
<input type="date" name="dob" required>6. Time Input
<input type="time" name="appointment">7. Radio Input
<input type="radio"> રેડિયો બટન પરિભાષિત કરે છે, જે યુઝરને સંબંધિત વિકલ્પોના સમૂહમાંથી એક વિકલ્પ પસંદ કરવાની પરવાનગી આપે છે. એક સમયે ફક્ત એક જ રેડિયો બટન વિકલ્પ પસંદ કરી શકાય છે.
<input type="radio" name="gender" value="male"> પુરુષ
<input type="radio" name="gender" value="female"> સ્ત્રી8. Checkbox Input
<input type="checkbox"> ચોરસ બોક્સ તરીકે દર્શાવવામાં આવે છે, જેને યુઝર દ્વારા ચેક અથવા અનચેક કરીને આપેલ વિકલ્પોમાંથી પસંદગીઓ કરી શકાય છે.
નોંધ: “રેડિયો” બટન અને ચેકબોક્સ દેખાવમાં સમાન લાગે છે, પરંતુ તેમાં ફરક છે — રેડિયો બટન એક સમયે ફક્ત એક જ વિકલ્પ પસંદ કરવાની પરવાનગી આપે છે, જ્યારે ચેકબોક્સ એક સમયે શૂન્યથી લઈને અનેક વિકલ્પો સુધી પસંદ કરવાની પરવાનગી આપે છે.
<input type="checkbox" name="hobby" value="reading"> વાંચન
<input type="checkbox" name="hobby" value="travel"> પ્રવાસ9. File Input
<input type="file">નો ઉપયોગ યુઝરના ડિવાઇસમાંથી એક અથવા વધુ ફાઇલો પસંદ કરવા માટે થાય છે. એક વખત ફાઇલ પસંદ કર્યા પછી અને ફોર્મ સબમિટ કર્યા પછી, આ ફાઇલને JS કોડ અને File API ની મદદથી સર્વર પર અપલોડ કરી શકાય છે.
<input type="file" name="resume" accept=".pdf">10. Color Input
<input type="color" name="favcolor">11. Range Input
<input type="range" name="volume" min="0" max="100">12. URL Input
<input type="url" name="website" placeholder="https://example.com">13. Search Input
<input type="search" name="query" placeholder="શોધો...">14. Hidden Input
<input type="hidden" name="userid" value="12345">15. Reset Button
<input type="reset">નો ઉપયોગ બટન માટે પણ થાય છે, પરંતુ જ્યારે યુઝર ક્લિક ઇવેન્ટ કરે છે ત્યારે તે ડિફોલ્ટ પ્રમાણે બધા દાખલ કરેલા મૂલ્યો રીસેટ કરી દે છે.
<input type="reset" value="ફોર્મ સાફ કરો">16. Image Button
<input type="image" src="submit.png" alt="મોકલો">રિયલ લાઇફ ઉદાહરણ ફોર્મ
<form action="/submit" method="post">
<label>નામ:</label>
<input type="text" name="name" required><br>
<label>ઈમેઈલ:</label>
<input type="email" name="email" required><br>
<label>જન્મ તારીખ:</label>
<input type="date" name="dob"><br>
<label>પ્રિય રંગ:</label>
<input type="color" name="color"><br>
<label>પ્રોફાઇલ ઈમેજ:</label>
<input type="file" name="photo"><br>
<input type="submit" value="સબમિટ કરો">
</form>
HTML Inputs માટે બેસ્ટ પ્રેક્ટિસીસ
- દરેક ફીલ્ડ માટે યોગ્ય
typeપસંદ કરો. - જરૂરી ફીલ્ડ્સમાં
requiredઉમેરો. - Data validation માટે HTML5 attributes (
pattern,min,max) વાપરો. - Mobile-friendly design માટે Responsive CSS સાથે કામ કરો.
- Accessibility માટે
labelટેગ વાપરવાનું ભૂલશો નહીં.
FAQ – HTML Inputs વિશે સામાન્ય પ્રશ્નો
Q: HTML માં કેટલા પ્રકારના Inputs છે?
A: HTML5 માં 20 થી વધુ પ્રકારના Inputs છે, જેમ કે text, email, password, date, range, color વગેરે.
Q: Text Input અને Textarea માં શું ફરક છે?
A: Text Input એક લીટી માટે છે, જ્યારે Textarea બહુ લાઇનો માટે ઉપયોગ થાય છે.
Q: File Input માં ફક્ત ઈમેજ કેવી રીતે અપલોડ કરાવવી?
A: accept="image/*" એટ્રિબ્યુટ ઉમેરો.
નિષ્કર્ષ
HTML Inputs વેબ ડેવલપમેન્ટમાં ફોર્મ્સ માટે જરૂરી છે. યોગ્ય Input Type અને Attributes પસંદ કરીને, તમે તમારા ફોર્મ્સને વધુ યુઝર-ફ્રેન્ડલી અને સિક્યોર બનાવી શકો છો.
2 Comments