Next baat karte hai forms in HTML ki. Aur isko mai kahungi ki ye HTML ka sabse important topic mujhe lagta hai. Jab bhi hum Facebook jaise platform par jate hai, Instagram par jate hai, Snapchat par jate hai, kahi bhi jate hai, toh shuruat mein hume kya karna padta hai sign up karna padta hai ya kabhi bhi login karna padta hai. Toh hume ek form dikhai deta hai. Jis form mein hume ya toh username add karna padta hai, apna password add karna padta hai. Shuruat mein hume naam, full name, phone number, baki sari cheeze add karni padti hai, Gmail ID dalni padti hai. Toh is tarike ke jo forms hai, ye sare ke sare forms HTML mein create hote hai. Toh forms ko HTML mein create karne ke liye hume use karna padta hai apne form tag ka. Toh forms are used to collect data from the user. Isme hamare example aa jate hai hamare sign up forms hote hai, login forms hote hai, kuch websites pe aap dekhenge help request ka form hota hai, ya fir contact ka form hota hai jisme aap apni ID chod sakte hai ki mujhe koi contact kar lo, mujhe aapka ye saman kharidna hai is tarike ki cheeze. Ab form ka use kiya jata hai form tag ke liye. Ab form tag ka istemal kiya jata hai form ko create karne ke liye. Toh upar dalte hai hum apna opening tag form, niche dalte hai closing tag aur beech mein aata hai form ka baki sara ka sara form content. Toh hum sabse pehle define kar rahe honge ek form ke liye uska action. Action kya hota hai ki form mein jitna bhi data aana hai wo finally kiske paas jayega? Iske liye usually hamare paas ek frontend hota hai yani ek JavaScript file jo ya toh usko process karegi ya wo form ka data kisi backend file ke paas ja sakta hai. Ab yaha pe maine PHP ka example liya hai, matlab backend file ke paas wo form ka data ja raha hai, ye file ka humne naam de diya. Abhi ke liye action hamare liye itna relevant nahi hai. Basically hum bas form design karna seekh rahe hai, uska data kahan ja raha hai, us data ke sath baad mein kya hota hai, ye wala part hamare concern ka abhi nahi hai. Toh sabse pehle ek form ko banakar dekh lete hai. Is upar wale pure part ko hum karne wale hai comment out. Create karte hai apna ek form. Ab form ke andar hume koi action dalna padega. Action mein abhi ke liye dal dete hai ki koi hamari action.php naam ki ek file hogi backend mein, jo is form ke data ko process kar rahi hogi ki aapne login kiya hai toh sari information aapne dali hai kya, sign up kar rahe hai, ki aapko login karna hai toh sara aapne username aur password sahi dala hai kya, ki agar aap sign up kar rahe hai toh fir sari information aapke bhar ke di hai, properly bhar ke di hai, phone number mein aisa toh nahi hai ABCD dal diya hai. Toh is tarike ki sari jo cheeze hoti hai ye action wali file mein check ho rahi hoti hai. Abhi ke liye wo kaam karna hamara concern nahi hai, hume banana hai simple form ko. Toh form ko hum is tarike se kuch define karte hai. Ab form ke andar hum different different elements ka jo hai istemal karte hai. Kabhi kabhi aise bhi form hote hai jiske andar hume kuch apni email ID type karni hoti hai, kabhi kabhi koi option hume select karna hota hai agar aapne Google forms chalaye ho abhi online semesters ke time pe. Koi option hume tick karne hote hai, ya fir koi button ko hume click karna hota hai toh kafi sari cheeze hoti hai. Inme se sabse pehle baat karte hai pehle form element ki jiska naam hai input. Input ko kuch hum is tarike se likhte hai. Input tag isko kaha jata hai jiske andar type hamara hoga text, yani kuch text ye input lega aur placeholder yani iske andar pehle se kya likha hoga. Isko likh kar dekhenge toh better samajh mein aayega. Bana lete hai ek input. Input ke andar type hum de dete hai text. Text humne type diya, placeholder likh liya. Type something here. Toh is tarike ka input tag humne bana liya hai. Ab yaha par hamare liye kya hua ek input box aa gaya hai jiske andar already likha hua hai type something here. Toh jo bhi placeholder ke andar value hoti hai, placeholder ka English mein matlab hota hai ki yahan pe koi aisi cheez hai jo aap kuch nahi likhenge toh wo cheez likhi hogi. Jaise is type something here ke andar main apna naam likh du toh peeche wala jo background text hai wo chala jayega. Toh jab bhi hume background mein kuch text chahiye usko placeholder ke andar dal denge aur kis tarike ka hume input lena hai, input lena hai hume text type ka. Toh text type ka jab bhi input lete hai toh yahan pe hamare paas hum koi bhi text jo hai apna likh paate hai Shraddha 123456 is tarike se. Maan lijiye hum ek aur input bana lete hai. Toh form ke andar ek toh input bana lete hai apne username ka ki apna username enter kar do, ek input banate hai apna password ka ki yahan pe hume enter karna hai password aur isme type kya hai, isme type bhi na password de dete hai. Kar lete hai save. Ab yahan pe username ke andar toh hum enter kar rahe hai apna username. Ab password ke andar kya enter kare? Password ke andar jo bhi hum enter karenge wo dekhiye dots ki form mein display ho raha hai aur hum dekh hi nahi payenge ki wo password mein hum kya cheez enter kar rahe hai. Toh is tarike se jab bhi input mein password lena hota hai, hum type uska password define kar sakte hai. Text define karenge toh wo dikhega, password define karenge toh keys toh press hongi par actually wo bullet points ki form mein aayega toh dikhega nahi kisi aur ko ki kya cheez screen par type ho rahi hai. Ab ye humne input ke do types dekh liye hai text aur password. Next baat karte hai labels ki. Label kya kaam karte hai? Hamare form ke andar label ke do uses hote hai. Matlab kisi bhi input ke upar hum ek label assign kar dete hai. Label ka matlab hota hai basically ek tag assign karna ki hum is cheez ko ek koi special naam de rahe hai ya jaise student ko roll number de dete hai, waise hi hum kisi input element ko ek label de dete hai. Ab label ke do fayde hote hai jinme se sabse pehla fayda hota hai ki jo bhi hamare screen reader users hote hai, matlab ho sakta hai hamari website ko use karne wale kuch log jo hai visually impaired ho, unki eyesight kharab hai ya wo dekh nahi pa rahe hai, toh kuch devices mein ye feature hota hai ki device jo hai automatically detect karta hai ki kya kya element screen par hai aur wo us hisab se bolta hai. Ye feature iPhones ke andar bahut zyada hai ki website par jo jo cheeze likhi hai wo batai jati hai. Toh labels yahan par help karte hai ki un screen reader users ke liye hamare paas pehle se hi unko bol kar bata diya jata hai ki yahan par ek checkbox hai ya yahan par ek button hai ya yahan par ek field hai, input field hai jiske andar aapko apna username type karna hai ya yahan par ek field hai, input field jiske andar aapko apna password type karna hai. Toh wahan par labels jo hai kafi zyada help karte hai. Ek aur jagah labels hume kafi help karte hai, wo hote hai hamare radio buttons. Radio buttons yani wo button jinme aap choice mein ek hi select kar sakte hai, us tarike ke buttons ko hum usually radio buttons kehte hai. Radio button ko kaise define karte hai? Jaise hum ek aur input ka type yahan par le lete hai aur type mein hum likh denge radio. Ab yahan par hume placeholder likhne ki zaroorat nahi hai. Yahan par hum do attributes define karenge. Inme se sabse pehla attribute hai ki class 11th aur dusra attribute hai name. Aur yahan par hum likh denge class 11th. Same tarike se hum ek aur radio button bana sakte hai. Ye radio button kya hoga? Ye represent karega class 12th ko. Iske andar likhenge class 12th. Iske andar aap notice karenge humne naam jo hai dono ko same diya hai. Ab same naam ka fayda kya hoga wo main thodi der mein bataungi. Abhi ke liye bas bana rahe hai value alag alag hai, yani inke naam alag alag hai. Aur ab do hamare paas buttons aa gaye hai class 12th nahi toh class 11th, class 12th nahi toh class 11th. Radio buttons ki speciality hoti hai ek baar mein aap unme se ek hi click kar sakte hai. Matlab multiple options ke liye nahi hote. Jaise aapke JEE Mains ke test hote hai toh usme multiple options agar nahi ho toh uske andar ek hi option charo mein se choose kar sakte hai, toh waise cases ke liye radio buttons hamare hote hai. Ab inme se koi ek hi hum choose kar sakte hai. Ab backend pe main thoda sa halka sa batau extra information ke liye ki kya hota hai. Jis bhi radio button ko aap choose karenge, matlab agar aap 11th ko choose karte hai toh kya hoga? Backend ko information milegi ki aapne class mein choose kiya hai 11th ko. Toh ye value uske paas jayegi. Ye jo humne print karwaya hai ye nahi jata, hamesha value jati hai. Toh value ke andar agar aap likhenge class 10th aur aapne print karwaya hai class 11th, toh yahan toh class 11th ka bacha class 11th pe tick karega lekin hamare backend ke paas information jayegi wo class 10th ki jayegi. Isiliye hamesha jo hai value aur jo hum print karwa rahe hai user ko, wo sync mein hona chahiye. Kyunki user ko ye value nahi dikhti aur backend ko ye wala hamara jo print karwa rahe hai user ko ye wali value nahi dikhti. Toh in do cheezon ka dhyan rakhna hai. Toh radio buttons ke andar similar cheez jo hai wahi kar sakte hai. Ab in dono radio buttons ko hum ek label ke andar dal sakte hai. Label mein likh denge yahan pe for ID. Yahan ab ek ID bhi bana sakte hai. ID is like wahi same cheez ki ek student ko aapne roll number de diya ki ha iska roll number 1664 hai. Ab hum yahan par do similar radio buttons bana sakte hai, ek class 11th ka, dusra bhi class 11th ka bana sakte hai. Par agar hum unko alag alag IDs de de toh wo radio buttons alag alag ho jayenge. Toh ID dene ke liye isko de dete hai man lijiye ID 1 ya iski ID hum 101 bhi rakh sakte hai and iski ID hum rakh sakte hai 102. Toh yahan pe for 101, ye humne yahan likh diya. Yahan pe bhi hum apna label bana sakte hai, ye label hai kiske liye? For ID 102. Toh is label ke andar hum dal denge apne second wale input ko. Toh form ke andar do hamare labels aa gaye. Ek ho gaya 101, ek ho gaya 102. Ab label ka fayda ye hua ki aap agar class 11th par bhi click karenge toh bhi wo tick ho jayega, class 12th par bhi tick karenge toh bhi wo tick ho jayega. Lekin jab tak label exist nahi karte the, jaise agar main isko kar lu copy aur control Z, toh is case mein hamare paas ek bhi label jo the wo nahi tha. Ab is code ko agar main save karu, toh ab main yahan click kar rahi hu toh kuch ho nahi raha. Matlab button jo hai kaam nahi kar rahe. Toh label ka fayda ye hota hai ki jab bhi hamare paas same naam hota hai, matlab name humne same rakh diya hai dono apne input ka radio buttons ka, toh hamare paas ye functionality aa jati hai ki text par bhi hum click kare na, matlab isko save karke text pe bhi click kare toh bhi radio button tick ho jata hai. Ye un cases mein, un users ke liye faydemand hota hai, jinki shayad eyesight thodi si kamzor hai. Jaise screen bahut choti hai us par text jo hai bahut chota dikh raha hai, toh us case mein hum cursor lekar jate hai, zaroori nahi hai hum yahin par tick kar rahe ho, hum yahan kare toh bhi click ho jaye. Un cases mein ye wali jo functionality hai label wali wo bahut faydemand hoti hai, toh ye fayda hota hai same naam dene ka dono ko.
