Theory
એક form, સાત પ્રકારના પ્રશ્નો
FestConnect નું form પૂછે છે: તમારું નામ (મુક્ત લખાણ), તમારું વર્ષ (એક પસંદ કરો), કયાં events (અનેક પસંદ કરો), T-shirt નું માપ (dropdown), કોઈ ખાસ વિનંતી (એક ફકરો), તમારી college (લખો, કે સૂચવેલી યાદીમાંથી પસંદ કરો), અને છેલ્લે Register કે Clear.
એ જવાબનાં સાત જુદાં સ્વરૂપ છે, અને HTML પાસે દરેક માટે એક નિયંત્રણ છે. ગોખવાનું ઘણું લાગે છે. એવું નથી, કારણ કે એ બધાં એક જ નિયમ પાળે છે.
Formula
એક નિયમ: name એ ચાવી છે
Form submit થાય ત્યારે, દરેક નિયંત્રણ એક name=value ની જોડ મોકલે છે. તમે નિયંત્રણને આપેલું name એ એ લેબલ છે જેની હેઠળ server એનું મૂલ્ય નોંધે છે.
'Aditi' લખેલું <input type="text" name="fullname"> એ fullname=Aditi મોકલે છે.
name નહીં, તો data મોકલાય નહીં. નીચેનું દરેક નિયંત્રણ એ મૂલ્ય પેદા કરવાની જુદી રીત જ છે, અને દરેકને name જોઈએ.
Theory
કુટુંબ, જવાબના સ્વરૂપ પ્રમાણે
- input type="text": મુક્ત લખાણની એક લીટી.
- input type="radio": જૂથમાંથી બરાબર એક પસંદ કરો. જૂથનાં બધાં બટન એક જ name વહેંચે છે.
- input type="checkbox": ગમે તેટલાં પસંદ કરો (દરેકને પોતાનું name હોઈ શકે કે વહેંચાયેલું).
- input type="submit" / "reset": form મોકલો / એને ખાલી કરો.
- option સંતાનો સાથેનું select: dropdown.
- textarea (
rows,cols): અનેક લીટીવાળું ખાનું. - button (
type,onclick): click થાય એવું બટન જે JavaScript ચલાવી શકે. - datalist: લખાણના input માટે સૂચનો, છતાં મુક્ત રીતે લખવાની છૂટ.
Practical
FestConnect નાં ખરેખરાં નિયંત્રણો
<form action="register.php" method="post">
<label for="fullname">Name</label>
<input type="text" id="fullname" name="fullname">
<!-- radio group: one name, pick ONE -->
<label><input type="radio" name="year" value="1"> First</label>
<label><input type="radio" name="year" value="2"> Second</label>
<!-- checkboxes: pick MANY -->
<label><input type="checkbox" name="events" value="robotics"> Robotics</label>
<label><input type="checkbox" name="events" value="dance"> Dance</label>
<label for="size">T-shirt</label>
<select id="size" name="size">
<option value="s">S</option>
<option value="m">M</option>
</select>
<label for="note">Special request</label>
<textarea id="note" name="note" rows="3" cols="30"></textarea>
<!-- datalist: suggest, but allow free text -->
<input list="colleges" name="college">
<datalist id="colleges">
<option value="Ganpat University">
<option value="MSU Baroda">
</datalist>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
કયા જવાબ માટે કયું નિયંત્રણ
| જવાબનું સ્વરૂપ | નિયંત્રણ | પસંદગી |
|---|---|---|
| લખાણની એક લીટી | input type=text | લાગુ નથી |
| સમૂહમાંથી એક | radio (વહેંચાયેલું name) | બરાબર એક |
| સમૂહમાંથી ગમે તે | checkbox | શૂન્ય કે અનેક |
| લાંબી યાદીમાંથી એક | select વત્તા option | બરાબર એક |
| એક ફકરો | textarea | લાગુ નથી |
| ઇશારા સાથેનું લખાણ | input વત્તા datalist | લખો કે પસંદ કરો |
Think first
ફક્ત **એક** જ વર્ષ કેમ પસંદ થાય છે?
ઉપરના code માં, 'First' અને 'Second' બંને વર્ષનાં radios name="year" વાપરે છે. સમજાવો કે એક જ name વહેંચવું એ જ કેવી રીતે એમને એક જ કાં તો/કાં તો ના જૂથ તરીકે વર્તાવે છે. જો તમે એમને જુદાં નામ આપો તો શું તૂટે?
Show the answer
એક જ name વાળાં radios એક જૂથ બનાવે છે, અને જૂથ ફક્ત એક જ પસંદગીની છૂટ આપે છે: 'Second' પસંદ કરવાથી 'First' નું નિશાન નીકળી જાય છે. વહેંચાયેલું name એ જ જૂથ બનાવવાની પ્રયુક્તિ છે. જો તમે એમને જુદાં નામ આપો (year1, year2), તો browser બે અસંબંધિત એક-બટનવાળાં જૂથ જુએ છે, એટલે વાપરનાર બંને પર નિશાન કરી શકે, જે radio નો આખો મુદ્દો જ મારી નાખે છે. એક જ name = એક જ પસંદગી.
Quiz
તમને students પાસે એ **બધા** events પસંદ કરાવવા છે જેમાં એ હાજર રહેશે (એ અનેકમાં જોડાઈ શકે છે). કયું નિયંત્રણ સાચું છે?
- Checkboxes, દરેક event દીઠ એક
- એક જ name વહેંચતાં radio buttons
- એક લીટીવાળું લખાણનું input
- દરેક event દીઠ એક submit નું બટન
Show the answer
Checkboxes, દરેક event દીઠ એક
Checkboxes ગમે તેટલી પસંદગીની છૂટ આપે છે, જે 'અનેક events માં હાજર રહેવું' સાથે મળે છે (A). એક જ name વહેંચતાં radios ફક્ત એકની છૂટ આપે છે (B), જે અનેક માન્ય હોય ત્યારે ખોટું છે. લખાણનું input (C) એમની પાસે events નાં નામ હાથે લખાવે છે, જે ભૂલભરેલું અને શોધી ન શકાય એવું છે. Submit નાં બટન (D) form મોકલે છે, એ વિકલ્પ પસંદ કરવાની રીત નથી. Radio = એક, checkbox = અનેક એ મુખ્ય ભેદ છે.
Watch out
આ કુટુંબના ત્રણ ફાંદા
1. Radios જે બધાં સ્વતંત્ર રીતે નિશાન થાય છે: તમે જૂથને એક વહેંચાયેલું name આપવાનું ભૂલી ગયા છો.
2. એવું label જે click કરતાં પોતાના ખાનામાં focus ન કરે: label પરનું for એ input પરના id બરાબર હોવું જોઈએ (for="size" <-> id="size"). એમને મેળવવાથી ટપકાવવાનું નિશાન પણ મોટું થાય છે, જે phones પર મહત્ત્વનું છે.
3. Form ની અંદર `type` વગરનું `<button>` form ને submit કરી દે છે, અને ઘણી વાર અણધારી રીતે પાનું ફરી load થાય છે. જો બટન ફક્ત JavaScript ચલાવવા માટે જ હોય, તો type="button" લખો.
Theory
આ નામો JavaScript માં પાછાં આવે છે
તમે અહીં ગોઠવેલાં name અને id એ જ હાથા છે જેને Unit 4 અને Unit 5 document.getElementById("fullname") થી પકડે છે, જેથી વાપરનારે શું લખ્યું એ વાંચી શકાય અને submit પહેલાં validate થઈ શકે. અત્યારે સારાં, અર્થપૂર્ણ નામ (fullname, email, year) આપવાથી પછી JavaScript વાંચી શકાય એવું રહે છે. બેદરકાર નામ (t1, t2) તમને પજવે છે.
Summary
Key takeaways
- Form ના દરેક નિયંત્રણને name જોઈએ: એ જ ચાવી છે જેની હેઠળ એનું મૂલ્ય મોકલાય છે (name નહીં, data નહીં).
- input text = એક લીટી; radio = એક પસંદ કરો (જૂથ એક name વહેંચે છે); checkbox = અનેક પસંદ કરો; submit/reset મોકલે/ખાલી કરે.
- select વત્તા option = dropdown; textarea (rows, cols) = અનેક લીટી; datalist = સૂચનો, છતાં મુક્ત લખાણની છૂટ.
- દરેક નિયંત્રણને <label> સાથે જોડો, અને label ના for ને input ના id સાથે મેળવો.
- type વગરનું <button> form submit કરે છે; ફક્ત JS વાળાં બટન માટે type="button" વાપરો.
- Memory hook: name એ ચાવી છે; radio એક, checkbox અનેક.