|
🧾 HTML පාඩම 4 – Forms 📝 සහ User Input 📩

🧾 HTML පාඩම 4 – Forms 📝 සහ User Input 📩

technology web development
By Rasanjana • 2025-04-24 05:07:05

හොඳයි machan! 😎 දැන් අපිට තියෙන්නේ HTML පාඩම 4 – මේකෙදි අපි බලමු Forms 📝 ගැන. Website එකකින් user ගෙන් data collect කරන්න HTML forms කියන එක must know skill එකක්! 🔥

👋 හෙලෝ ගැන්!

ඔයා දැන් lists, tables වගේ basic structure හැමදෙයිම දන්නවනේ. දැන් බලමු කොහොමද වෙබ් පිටුවකින් user input collect කරන්නෙ කියලා. මේක තමයි form එකෙන් කරන්නෙ. 🔍


📌 Form එකක් හදන හැටි

HTML form එකක් කියන්නේ <form> tag එකකින් surround කරන structure එකක්. මෙතැන තියෙන්නේ විවිධ input types – text boxes, buttons, checkboxes, radio buttons, dropdowns, etc.


🛠️ Form Basic Structure එක

<form action="submit.php" method="post">
  <!-- input fields go here -->
</form>

Attribute Description action Form එක submit වුනාම යන file එක (backend) method GET හෝ POST (data pass කරන විදිහ) ✏️ Text Input Field

<label for="name">ඔයාගෙ නම 🤔:</label>
<input type="text" id="name" name="name">


🔒 Password Field

<label for="pw">මුරපදය 🔐:</label>
<input type="password" id="pw" name="pw">


🎯 Radio Buttons

<p>your gender 👤:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">පුරුෂ</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">ස්ත්‍රී</label>


✅ Checkboxes

<p>ඔයාට කැමති පාඨමාලා 🧑‍🎓:</p>
<input type="checkbox" name="course" value="html"> HTML<br>
<input type="checkbox" name="course" value="css"> CSS<br>
<input type="checkbox" name="course" value="js"> JavaScript


🔽 Dropdown List

<label for="country">ඔයාගෙ රට 🌍:</label>
<select id="country" name="country">
  <option value="lk">ශ්‍රී ලංකාව</option>
  <option value="in">ඉන්දියාව</option>
  <option value="us">ඇමරිකාව</option>
</select>


🧾 Text Area

<label for="msg">ඔයාගෙ සටහන 📝:</label><br>
<textarea id="msg" name="message" rows="4" cols="50"></textarea>


📩 Submit Button

<input type="submit" value="යවන්න 🚀">


💻 Full Form Example එක

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson 4 - HTML Form</title>
  </head>
  <body>
    <h2>📬 ලියාපදිංචි වීමේ පෝරමය</h2>
    <form action="submit.php" method="post">
      <label for="name">නම 🤔:</label><br>
      <input type="text" id="name" name="name"><br><br>

      <label for="pw">මුරපදය 🔐:</label><br>
      <input type="password" id="pw" name="pw"><br><br>

      <p>gender👤:</p>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">පුරුෂ</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">ස්ත්‍රී</label><br><br>

      <p>පාඨමාලා තෝරන්න 🧑‍💻:</p>
      <input type="checkbox" name="course" value="html"> HTML<br>
      <input type="checkbox" name="course" value="css"> CSS<br><br>

      <label for="country">රට 🌍:</label>
      <select id="country" name="country">
        <option value="lk">ශ්‍රී ලංකාව</option>
        <option value="in">ඉන්දියාව</option>
      </select><br><br>

      <label for="msg">සටහන 📝:</label><br>
      <textarea id="msg" name="message" rows="4" cols="40"></textarea><br><br>

      <input type="submit" value="යවන්න 🚀">
    </form>
  </body>
</html>


📌 Summary එක:

  • <form> – form එක wrap කරන tag
  • <input> – text, password, radio, checkbox වගේ fields
  • <label> – label text එකක්
  • <textarea> – පොඩි paragraph field එකක්
  • <select> + <option> – dropdown එකක්

⏭️ ඊළඟ පාඩම – HTML වල Semantic Tags 🧠

ඔයාට හරියට webpage layout එකක් හදන්න දැනගන්න ඕනෙ <header>, <footer>, <article> වගේ semantic tags!


Rasanjana

Rasanjana

Member since 2025-04-09 13:55:06

Comments

Please login to post a comment.

No comments yet. Be the first to comment!