HTML Tables & Forms – Data Show Karna Aur Collect Karna Sikhiye

on

HTML Tables & Forms – Data Show Karna Aur Collect Karna Sikhiye

HTML Table, HTML Form, Form input types, Contact Form in HTML, How to collect data using HTML, Web development in Hindi

📖 Aaj Ke Blog Mein Aap Seekhenge:

  • Table kya hoti hai aur kaise banate hain
  • Table rows, columns, headers ka use
  • HTML Form banana
  • Input types: text, email, password, radio, checkbox
  • Submit button ka use
  • Real-life example: Contact Form

🧾 1. HTML Tables – Data Ko Organize Karna

✅ Basic Table Structure:

<table> 
  <tr> 
    <th>Name</th> 
    <th>Age</th> 
  </tr> 
  <tr> 
    <td>Rahul</td> 
    <td>21</td> 
  </tr> 
  <tr> 
    <td>Anjali</td> 
    <td>23</td> 
  </tr> 
</table>

📘 Tags Explanation:

  • <table> – Table start karta hai
  • <tr> – Table row
  • <th> – Table heading
  • <td> – Table data cell

✅ Table Borders:

<table border="1">...</table>

✍️ 2. HTML Forms – Data Collect Karne Ka Tareeka

Forms ka use hota hai user input collect karne ke liye — jaise login, signup, ya contact form.

✅ Basic Form Structure:

<form action="/submit" method="post"> 
  <label>Name:</label> 
  <input type="text" name="username" /><br><br>

  <label>Email:</label> 
  <input type="email" name="email" /><br><br>

  <label>Password:</label> 
  <input type="password" name="pass" /><br><br>

  <input type="submit" value="Submit" /> 
</form>

🔘 3. More Input Types

✅ Radio Buttons:

<label>Gender:</label><br> 
<input type="radio" name="gender" value="male" /> Male  
<input type="radio" name="gender" value="female" /> Female

✅ Checkboxes:

<label>Skills:</label><br> 
<input type="checkbox" name="skills" value="HTML" /> HTML  
<input type="checkbox" name="skills" value="CSS" /> CSS  
<input type="checkbox" name="skills" value="JS" /> JavaScript

🛠️ Complete Example – Contact Form

<h2>Contact Us</h2>
<form action="/submit" method="post">
  <label>Name:</label><br>
  <input type="text" name="name" /><br><br>

  <label>Email:</label><br>
  <input type="email" name="email" /><br><br>

  <label>Message:</label><br>
  <textarea name="message"></textarea><br><br>

  <input type="submit" value="Send Message" />
</form>

💡 SEO & Best Practices:

  • <label> ka use accessibility ke liye karein
  • name attribute meaningful rakhein (backend integration ke liye)
  • placeholder use karein user guidance ke liye
  • method="post" ya get situation ke hisaab se use karein

🔁 Practice Challenge:

  1. Ek table banao with: Student Name, Roll No., Course
  2. Ek simple contact form banao with: Name, Email, Message
  3. Submit button ka use karo

✅ Aaj Aapne Kya Seekha?

  • Table structure banana with headings & data
  • Forms se user se data lena
  • Multiple input types ka use
  • Real-world contact form banana

Follow karo WebDevSeekho aur roz naye web development tutorials padho! 🚀

Comments

Post a Comment