Namaskar dosto!
Agar aap HTML seekh rahe ho, toh HTML Form ek bahut hi important topic hai jo har beginner ko achhe se samajhna chahiye.
Is article mein aapko milega:
- HTML form kya hota hai?
- HTML form Kaha kaha use hote Hain?
- HTML form banane ka basic structure kya hai?
- Form tag aur uske important attributes kaun-kaun se hain?
- HTML Form ke important elements kaun-kaun se hain?
- Contact Form Ka Example โ Code Aur Output Ke Saath
- FAQs (Frequently Asked Questions)
HTML Form Kya Hota Hai?
Dosto, HTML Form ka use karke hum user se data collect kar sakte hain โ jaise ki unka naam, mobile number, email ID, address waqaira.
Aapne kai websites pe forms dekhe honge jaise:
- Signup Form
- Login Form
- Contact Us Form
Yeh sabhi examples, HTML Form ka hi use karke banaye jaate hain.
In forms ki madad se user apna data enter karta hai, jo aage ki process ke liye use hota hai.
HTML Form Kaha Kaha Use Hote Hain?
Dosto, HTML Form ka use un jagahon par hota hai jaha hame user se information collect karni hoti hai. Yeh forms mostly websites par use hote hain โ jaise ki:
- Signup aur Login Forms โ jahan user apna email aur password enter karta hai
- Contact Us Forms โ jahan user apna naam, email aur message bhejta hai
- Feedback ya Job Application Forms โ jahan users apne details submit karte hain
- Online Surveys aur Quiz Forms โ jahan user se opinion ya response liya jaata hai
- Checkout Forms (E-commerce websites) โ jahan user shipping aur payment info deta hai
Dosto, in sabhi situations mein HTML Form kaafi important hota hai, kyunki isi ke through user ka input website tak pahuchta hai.
Aur aise har type ke form ko hum HTML form ka use karke hi banate hain.
HTML form banane ka basic structure kya hai?
Dosto, HTML form banane ke liye sabse pehle humein HTML ka <form> tag use karna hota hai.Yeh tag form ka starting aur ending point define karta hai jisme hum input fields, buttons, aur labels add karte hain.
Basic Syntax of HTML Form:
<form>
<!-- Form content yahan likha jaata hai -->
</form>Dosto,Yeh structure ek blank form banata hai, jisme aap alag-alag elements add karke usse complete form bana sakte ho โ jaise name input, submit button, etc.
Form tag aur uske important attributes kaun-kaun se hain?
1. action attribute
Doston, form tag ko declare karne ke baad humein sabse pehle action attribute dena hota hai. Jaise:
<form action="Aditya.html">action attribute kya karta hai?
action attribute yeh batata hai ki jab user form submit karega, to form ka data kahan send hoga โ yani kaunsi file ya URL par.
Aap isme kisi HTML page, PHP file, ya backend script ka path de sakte ho.
Example se samjho:
Socho aapne ek form banaya jisme user apna naam, email aur phone number fill karta hai. Jab user submit button pe click karega, to saara data action attribute me jo file mention hai (jaise Aditya.html) us file tak send ho jaata hai.
Yeh file backend ho sakti hai โ jaise:
- PHP file (jaise submit.php)
- database-connected script
- ya koi email service
Isliye form ke andar action attribute dena zaroori hota hai โ bina iske form data kisiko nahi milega.
2. method attribute (GET ya POST)
Doston, form banate waqt action ke saath-saath humein method attribute bhi dena hota hai. Jaise:
<form action="submit.php" method="post">method attribute kya karta hai?
method attribute batata hai ki form data server par kaise bhejna hai โ yani kis method se.
Do main method hote hain:
- GET
- POST
GET Method:
- Dosto GET Method ke use karke Form ka data URL ke through bheja jaata hai.
- Example:
submit.php?name=Aditya&email=abc@gmail.com - Data sabko dikhta hai (secure nahi hota)
- Mostly search forms mein use hota hai.
POST Method:
- Dosto POST Method Me Data securely background mein bheja jaata hai.
- URL mein data dikhta nahi.
- Login forms, sign-up, payment jaise sensitive forms mein use hota hai.
- Ye secure aur professional method hota hai.
Dosto, Jab bhi user ka personal ya sensitive data lena ho โ hamesha method=”post” use karo.
3. autocomplete attribute
Dosto,Ab baat karte hain autocomplete attribute ki
<form action="submit.php" method="post" autocomplete="on">autocomplete attribute kya karta hai?
Ye attribute browser ko batata hai ki user ke pehle bhar chuke data ko yaad rakhe ya nahi.
2 value ho sakti hai:
- on โ Browser user ke naam, email, address jaise details ko yaad rakhega.
- off โ Browser koi bhi data save nahi karega.
Example se samjho:
Dosto,Agar aap login form mein autocomplete=”on” rakhte ho, to jab user pehle login kar chuka ho to browser uska email ya password suggest karega.
Lekin agar aap sensitive form (jaise payment) bana rahe ho to autocomplete=”off” use karo, taaki browser kuch bhi save na kare.
4. target attribute
Dosto,Ye attribute batata hai ki form submit hone ke baad page kahan open hoga. Jaisa ki new tab mein ya existing tab me.
- “_self” โ same tab (default)
- “_blank” โ new tab mein open hoga
Example:
<form action="submit.php" target="_blank">HTML Form ke important elements kaun-kaun se hain?
| Element | Description | Example Syntax | Real-life Use |
|---|---|---|---|
| <form> | Pura form banane ke liye container | <form action=”submit.html”> | User se data collect karna |
| <input> | Text, email, password jaise fields ke liye | <input type=”text”> | Naam, email, password lena |
| <label> | Kisi input field ka naam dikhane ke liye | <label for=”name”>Name:</label> | Field ko identify karna easy hota hai |
| <textarea> | Multi-line text input ke liye | <textarea rows=”4″ cols=”50″></textarea> | Feedback ya comments lena |
| <select> | Dropdown menu dikhane ke liye | <select><option>HTML</option></select> | Options dena jaise courses, country |
| <option> | <select> ke andar choices define karta hai | <option value=”html”>HTML</option> | Dropdown ke options create karna |
| <button> | Form submit karne ya action perform karne ke liye | <button type=”submit”>Submit</button> | Form submit karna |
| <fieldset> | Form ke elements ko group karne ke liye | <fieldset>…</fieldset> | Related fields ko group karna |
| <legend> | <fieldset> ka title batata hai | <legend>Personal Info</legend> | Form section ka title |
Contact Form Ka Example โ Code Aur Output Ke Saath
<h2>Contact Form</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" placeholder="Apka Naam"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Apka Email"><br><br>
<label for="reason">Reason for Contact:</label><br>
<select id="reason" name="reason">
<option value="">Select an option</option>
<option value="feedback">Feedback</option>
<option value="support">Support</option>
<option value="other">Other</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" placeholder="Apka message likhiye..."></textarea><br><br>
<button type="submit">Submit</button>
</form>Form Output Preview:
FAQs (Frequently Asked Questions)
1. HTML Form kya hai?
HTML Form ek aisa element hota hai jiska use hum user se data collect karne ke liye karte hain โ jaise unka naam, mobile number, email ID, aur address.HTML forms ka use Signup Form, Login Form, ya Contact Us Form jaise features banane ke liye hota hai.
2. HTML mein form kaise banaye jaate hain?
HTML mein form banane ke liye <form> tag ka use hota hai. Iske andar hum input fields jaise <input>,<textarea> aur <button> lagate hain. Inka use karke hum user se data le sakte hain.
Ek simple form banane ke liye yeh basic structure follow kiya jaata hai.
3. HTML form mein button kaise banaye?
HTML form mein button banane ke liye aap <button> tag ya <input type=”submit”>
ka use kar sakate ho. Ye button,form submit karne ke liye hota hai.
Example:
<form>
<input type=”text” placeholder=”Naam”>
<button type=”submit”>Submit</button>
</form>
4. Form banane ke liye sahi HTML kya hai?
Form banane ke liye sabse important HTML tag hota hai <form>.
Iske andar aap input fields jaise <input>,<textarea>,<select>, aur buttons daalte ho.
Example:
<form action=”submit.php” method=”post”>
<input type=”text” name=”name” placeholder=”Apna Naam Likho” required>
<input type=”email” name=”email” placeholder=”Email Id daalo” required>
<button type=”submit”>Submit</button>
</form>
Yeh basic structure hai jo har form mein hona chahiye.
action attribute se form submit hone ke baad data kahan jayega, wo batate hain.
method attribute se pata chalta hai ki data kaise bhejna hai (GET ya POST).
5. HTML form ka use kab karna chahiye?
HTML form tab use karo jab aapko user se data lena ho, jaise signup, login, contact message, ya payment details.
6. HTML ka use karke form kaise banaye?
HTML mein form banane ke liye <form> tag ka use karo. Iske andar input fields jaise
<input>, <textarea> aur buttons add karo.
Example:
<form action=”submit.php” method=”post”>
<input type=”text” name=”name” placeholder=”Apna Naam Likho” required>
<input type=”email” name=”email” placeholder=”Email daalo” required>
<button type=”submit”>Submit</button>
</form>
dosto Is tarah aap simple aur functional form bana sakte ho.
Conclusion
Dosto, HTML form banana web development ka ek basic aur important hissa hai. Is article mein aapne seekha ki form kya hota hai, uska structure kaisa hota hai, aur kaise aap apne website par user se information le sakte ho. Agar aap ye steps follow karoge aur practice karte rahoge, toh aap jaldi hi apne forms ko achhi tarah bana paoge. Form banana shuru karo, naye experiments karo, aur apni website ko aur interactive banao. Simple baat hai โ practice se hi perfection aata hai!
Next Article Padhein:
- HTML Heading Tags for Beginners with Examples (Avoid These Common Mistakes!)
- HTML Kya Hai? HTML เคเฅเคฏเคพ เคนเฅ? 2025 Ki Complete Beginner Guide (With Examples)
dosto, Agar aapko yeh article helpful laga ho to ise share karein, comment karein, aur apne dosto ko bhi recommend karein.
Next article kis topic par chahiye? Comment karke zarur batao.
Written by: Aditya (Programming Sikho)