Theory
ચૂપ Portfolio
તમે તમારાં coding નાં કૌશલ્યો દેખાડતું એક તેજસ્વી online portfolio બનાવ્યું છે. એક recruiter તમારી site પર આવે છે, તમારા projects પસંદ કરે છે, અને તમને નોકરીએ રાખવા માંગે છે. પણ એક મોટી સમસ્યા છે: તમારું પાનું એકતરફી રસ્તો છે. એ માત્ર તમારું લખાણ વાંચી શકે છે, પણ તમને સામે જવાબ આપી શકતા નથી. એમની પાસે પોતાનું નામ ટાઈપ કરવાનો, પોતાનું email મૂકવાનો, કે એક સંદેશો છોડવાનો કોઈ રસ્તો નથી. તો આપણે એક નિષ્ક્રિય વાંચવાના webpage ને user નો data ભેગો કરતા interactive portal માં કેવી રીતે ફેરવીએ?
Theory
Bank ની જમા કરવાની ચિઠ્ઠી
એક bank માં ભૌતિક જમા કરવાની ચિઠ્ઠી વિચારો. એમાં તમારા ખાતાના નંબર, નામ, અને રોકડની રકમ માટે નિયુક્ત લંબચોરસ ખાનાં હોય છે. એમાં એ ક્યાં જમા કરવી એની સૂચનાઓ પણ હોય છે. જો તમે રોકડના ખાનામાં તમારું નામ લખો, teller એ નકારી કાઢે છે. એક HTML form બિલકુલ આ કાગળની ચિઠ્ઠી જેવું કામ કરે છે. એ ચોક્કસ data ના પ્રકારો માટે સમર્પિત કોરાં ખાનાં આપે છે અને ખાતરી કરે છે કે ભેગી કરેલી બધી વિગતો એક server ને સોંપતાં પહેલાં બરાબર બાંધી લેવાય.
Theory
એક HTML Form નું શરીરરચનાશાસ્ત્ર
Web development માં, એક HTML form એ એક document નો એવો વિભાગ છે જેમાં user નો data ભેગો કરવા interactive નિયંત્રણો હોય છે. એ વીંટાળનારા <form> tag વાપરીને વ્યાખ્યાયિત થાય છે. એ બે નિર્ણાયક attributes પર આધાર રાખે છે: action, જે લક્ષ્ય URL નિર્દિષ્ટ કરે છે જ્યાં data મોકલાય છે, અને method, જે data ખસેડવા વપરાતો HTTP protocol (સામાન્ય રીતે GET કે POST) વ્યાખ્યાયિત કરે છે. આ વીંટાળનારની અંદર, આપણે લખાણ, પસંદગીઓ, કે button ના clicks પકડવા વિવિધ input elements મૂકીએ છીએ.
At a glance
આવશ્યક HTML form ના ઘટકો અને નિયંત્રણનાં elements.
| Input Element કે Type | મુખ્ય Attribute | હેતુ |
|---|---|---|
| <input type="text"> | name="username" | સામાન્ય અક્ષર-આંકડાના input માટે એક લીટીનું લખાણનું ખાનું બનાવે છે. |
| <input type="email"> | required | Emails પકડે છે અને આપોઆપ સ્વરૂપનું ધોરણ ચકાસે છે. |
| <textarea> | rows="4" | લાંબા પ્રતિભાવના સંદેશા માટે યોગ્ય અનેક લીટીનો લખાણનો વિસ્તાર આપે છે. |
| <input type="submit"> | value="Send" | Form જમા કરવાની પ્રક્રિયા શરૂ કરે છે અને action ના URL પર data મોકલે છે. |
Practical
A Validated Portfolio Contact Form
<form action="submit_contact.php" method="POST">
<label>Your Full Name:</label>
<input type="text" name="fullName" placeholder="Enter name" required>
<label>Email Address:</label>
<input type="email" name="userEmail" placeholder="name@email.com" required>
<label>Your Message:</label>
<textarea name="userMessage" rows="4" placeholder="Write your message here"></textarea>
<input type="submit" value="Send Message">
</form>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
તમે એક college ના assignment માટે એક contact form બનાવી રહ્યા છો. જ્યારે તમે submit નું બટન દબાવો, પાનું refresh થાય છે પણ લખાણના inputs માંથી કોઈ data server ની script પર જતો નથી. તમે સંભવતઃ શું સામેલ કરવાનું ભૂલી ગયા?
- Input tags ની અંદર placeholder attribute
- દરેક input tag ની અંદર name attribute
- Textarea tag ની અંદર text type નું attribute
- Label tags ની અંદર value attribute
Show the answer
દરેક input tag ની અંદર name attribute
Server data નાં fields ને એમના ચોક્કસ name attribute વાપરીને ઓળખે છે. name="username" attribute વગર, browser ટાઈપ કરેલા અક્ષરો ભેગા કરે છે પણ મોકલતી વખતે એમને કયું label જોડવું એ જાણતું નથી, input નો data સંપૂર્ણપણે અવગણતાં.
Think first
ચકાસણીના વર્તનની આગાહી
મનમાં આંકો કે જો એક user type="email" તરીકે વ્યાખ્યાયિત input ના ખાનામાં માત્ર 'hello' ટાઈપ કરીને submit દબાવે તો શું થાય. Tap કરતાં પહેલાં વિચારો.
Show the answer
Browser તરત જમા કરવાની પ્રક્રિયા રોકી દેશે. type="email" માં જડેલા મૂળ ચકાસણીના નિયમને કારણે, એ એક '@' નું ચિહ્ન અને એક માન્ય domain નું સ્વરૂપ અપેક્ષે છે. Form ને જમા થવા દેતાં પહેલાં એ user ને સ્વરૂપ સુધારવાની સૂચના આપતી એક જડેલી pop up ચેતવણી દેખાડશે.
Watch out
ભૂતિયા Submission નો ફાંદો
University ની વ્યવહારુ મૂલ્યાંકનમાં નાપાસ કરાવતી એક મોટી ભૂલ છે name attributes વગર inputs બનાવવા, કે id અને name ગૂંચવવા. Students ઘણી વાર માને છે કે id પૂરતું છે કારણ કે એ CSS દ્વારા element ને style કરે છે. યાદ રાખો: id client side ની styles અને scripts માટે છે, પણ server side ના data ભેગા કરવા name ફરજિયાત છે. name વગરનું એક input એ ભૂતિયું નિયંત્રણ છે: એ screen પર સંપૂર્ણ દેખાય છે પણ સાવ કંઈ મોકલતું નથી!
Formula
Exam ના જવાબની રીત: Form નું માળખું
જ્યારે theory ની પરીક્ષામાં ચકાસાયેલો form code કરવાનું કહેવાય, તમારો જવાબ આ ચાર ઘટકો સાથે ગોઠવો:
- ડબ્બો: સ્પષ્ટ
actionઅનેmethod="POST"attributes સાથે<form>નું વીંટાળનાર વ્યાખ્યાયિત કરો. - ઓળખ: દરેકે દરેક user ના નિયંત્રણના element માટે એક અનન્ય
nameattribute આપો. - ચકાસણી: સંબંધિત input tags પર સીધી
requiredકેtype="email"જેવી મર્યાદાઓ જોડો. - Trigger: Submission process કરવા form ને એક સ્પષ્ટ
<input type="submit">નિયંત્રણથી પૂરો કરો.
Summary
Key takeaways
<form>tag ને લક્ષ્ય માટે એક action attribute અને મોકલવા માટે એક method attribute જોઈએ.- Input elements પોતાનું સંરચનાત્મક વર્તન બદલવા text કે email જેવાં ચોક્કસ type નાં attributes વાપરે છે.
- Backend ના server દ્વારા data સફળતાપૂર્વક પકડાય એ માટે name attribute એકદમ ફરજિયાત છે.
- required અને placeholder જેવાં attributes તરત browser ની ચકાસણી અને મદદરૂપ user ના સંકેતો આપે છે.
- Memory Hook: Action ગોઠવો, દરેક નિયંત્રણને નામ આપો, ચકાસણી ઉમેરો, અને submit એ તમારું લક્ષ્ય છે.