Theory
Data ક્યાં જાય છે?
એક student FestConnect નું form ભરે છે: નામ, email, event, ફોન. એ Register દબાવે છે. ખાનાં ખાલી થઈ જાય છે. હવે શું? એ data ખરેખર ક્યાં ગયો?
એ input નાં ખાનાંમાંથી કોઈ આ નક્કી કરતું નથી. એમની આસપાસ વીંટાયેલું <form> tag નક્કી કરે છે. Form એ પાત્ર વત્તા સૂચનાઓનો સમૂહ છે: submit થાય ત્યારે, મારી અંદરનું બધું ભેગું કરો, અને એને અમુક પાના પર, અમુક રીત થી મોકલો. એ બે સૂચનાઓ છે action અને method attributes.
Theory
સરનામું અને પહોંચાડવાની રીતવાળું કવર
Form એ કવર છે. એની અંદરનું દરેક input એ કાગળની ચિઠ્ઠી છે જે તમે અંદર નાખો છો. Submit થતાં કવર બંધ થઈને ટપાલમાં જાય છે.
actionએ કવર પરનું સરનામું છે: કયું પાનું એને ઝીલે છે.methodએ પહોંચાડવાની રીત છે: કોઈ પણ વાંચી શકે એવા postcard પર લખેલું (GET), કે અંદર બંધ કરેલું જેથી ફક્ત ઝીલનાર જ ખોલે (POST).
Theory
action અને method
- action: એ URL જે data સંભાળે છે, ઉદાહરણ તરીકે
action="register.php". - method: data કેવી રીતે મુસાફરી કરે છે.
- GET data ને URL ના છેડે જોડે છે:
register.php?name=Aditi&event=Robotics. દેખાય એવું, bookmark થઈ શકે એવું, લંબાઈની મર્યાદાવાળું. શોધ અને સલામત વાચન માટે સારું. - POST data ને છુપાયેલા request ના શરીરમાં મૂકે છે. URL માં દેખાતું નથી, લંબાઈની મર્યાદા નહીં. નોંધણી, login, અને જે કંઈ બદલે છે કે ખાનગી છે એના માટે વાપરો.
જો તમે method છોડી દો, તો મૂળભૂત GET છે.
Practical
FestConnect ના form નું ખોખું
<form action="register.php" method="post" autocomplete="on">
<!-- input controls go here (next lesson) -->
<input type="text" name="fullname">
<input type="email" name="email">
<button type="submit">Register</button>
</form>
<!-- method="post" keeps the phone/email out of the visible URL -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
Form ની બીજી ચાવીઓ
| Attribute | એ શું કરે છે |
|---|---|
| novalidate | submit વખતે browser નું જડેલું validation બંધ કરે છે |
| autocomplete | on કે off: browser નાં સંઘરેલાં મૂલ્યો સૂચવવાં |
| target | પ્રતિભાવ ક્યાં ખૂલે (_self મૂળભૂત, _blank નવું tab) |
Think first
નોંધણી માટે GET કે POST?
FestConnect ફોન નંબર અને email ભેગાં કરે છે. Form એ GET વાપરવું જોઈએ કે POST, અને બીજી પસંદગીથી શું ખોટું થાત? Tap કરતાં પહેલાં જવાબ આપો.
Show the answer
POST વાપરો. GET સાથે, ફોન અને email સરનામાની પટ્ટીમાં બેસત (register.php?email=aditi@x.com&phone=98...), ખભા પરથી દેખાત, browser ના ઇતિહાસમાં સંઘરાત, અને servers માં નોંધાત. GET તમે કેટલું મોકલી શકો એની મર્યાદા પણ મૂકે છે. POST data ને request ના શરીરમાં છુપાવે છે અને એને લંબાઈની મર્યાદા નથી, અને એટલે જ દરેક login અને sign-up નું form એ વાપરે છે.
Quiz
FestConnect પરનું search નું ખાનું વાપરનારાઓને URL ની નકલ કરીને પરિણામોની link મિત્રો સાથે વહેંચવા દે છે. કઈ method બંધબેસે છે, અને શા માટે?
- GET: પ્રશ્ન URL માં બેસે છે, એટલે link વહેંચી અને bookmark કરી શકાય છે
- POST: એ શોધનો શબ્દ છુપાવે છે, અને વહેંચવા માટે એ જ જોઈએ
- બંનેમાંથી કોઈ પણ: method ની URL પર કોઈ અસર નથી
- novalidate: URLs ને વહેંચી શકાય એવાં એ જ બનાવે છે
Show the answer
GET: પ્રશ્ન URL માં બેસે છે, એટલે link વહેંચી અને bookmark કરી શકાય છે
તમે વહેંચવા માંગતા હો એવી શોધ માટે GET બરાબર સાચું છે: શબ્દ URL માં વસે છે (?q=robotics), એટલે link ની નકલ કરવાથી પરિણામો ફરી મળે છે (A). POST શબ્દને શરીરમાં છુપાવે છે, એટલે URL માં વહેંચવા જેવું કશું હોતું નથી (B). Method ચોક્કસ URL બદલે છે (C એ તો આખો GET/POST નો ભેદ છે). novalidate (D) ફક્ત validation બંધ કરે છે અને એને URLs સાથે કશું લેવાદેવા નથી.
Watch out
GET સામે POST નો ફાંદો
Form નો આ સૌથી વધુ પુછાતો પ્રશ્ન છે. સારાંશ બરાબર રાખો:
- GET: data URL માં, દેખાય એવો, bookmark થાય એવો, મર્યાદિત લંબાઈ, વાચન/શોધ માટે.
- POST: data શરીરમાં, છુપાયેલો, અમર્યાદિત, લખાણ/login/sign-up માટે.
Marks ગુમાવનારાં: 'POST હંમેશા વધુ સલામત છે' કહેવું (POST એ encryption નથી, ફક્ત HTTPS છે; POST તો ફક્ત data ને URL થી દૂર રાખે છે), અને મૂળભૂત method એ GET છે એ ભૂલી જવું.
Theory
આ ખાલી મંચ છે
અત્યારે form ની અંદર લગભગ કશું નથી. હવે પછીનો પાઠ એને ખરેખરાં નિયંત્રણોથી ભરે છે: લખાણનાં ખાનાં, radios, checkboxes, dropdowns. એ દરેકે આ <form> ની અંદર બેસવું પડે અને name વહન કરવું પડે, કારણ કે એ નામ જ એ લેબલ છે જેની હેઠળ એનું મૂલ્ય action પર મોકલાય છે. Unit 5 માં તમે data નીકળે એ પહેલાં JavaScript નું validation ઉમેરશો.
Summary
Key takeaways
- <form> input નાં નિયંત્રણોને વીંટે છે અને submit થતાં એમનો data મોકલે છે.
- action = એ URL જે data ઝીલે છે; method = એ કેવી રીતે મોકલાય છે.
- GET data ને દેખાતા URL માં મૂકે છે (વહેંચી શકાય, લંબાઈની મર્યાદા, વાચન માટે); POST એને શરીરમાં છુપાવે છે (login/sign-up માટે, અમર્યાદિત).
- મૂળભૂત method એ GET છે; POST એ encryption નથી, ફક્ત HTTPS છે.
- novalidate જડેલું validation બંધ કરે છે; autocomplete સંઘરેલાં મૂલ્યો ચાલુ/બંધ કરે છે; target પ્રતિભાવ ક્યાં ખૂલે એ ગોઠવે છે.
- Memory hook: સરનામું (action) અને પહોંચાડવાની રીત (method) વાળું કવર.