Code Spark

HTML FORM
-------------------------------------

HTML Form (የHTML ፎርም) ምንድን ነው? 📝✨
የHTML ፎርም ተጠቃሚዎች መረጃዎችን እንዲያስገቡና ወደ ሰርቨር እንዲልኩ የሚያስችል የHTML አካል ነው። ለምሳሌ፣ የይለፍ ቃል፣ የተጠቃሚ ስም፣ ኢሜይል አድራሻ፣ አስተያየት፣ ወዘተ. ማስገባት እንችላለን። 🤩🚀

የHTML ፎርም መሰረታዊ አካላት (Basic Components of HTML Form)
<form> Tag (የ<form> መለያ) 📦🔒

ይህ መለያ የፎርሙን መጀመሪያና መጨረሻ ያመለክታል። (Defines the beginning and end of a form)

የፎርሙን ተግባርና መረጃ የሚላክበትን መንገድ ይገልጻል። (Specifies the form's action and method)

ዋና ዋናዎቹ ባህሪያት action እና method ናቸው። (Main attributes: action and method)

action: መረጃው የሚላክበትን የሰርቨር ፋይል (ለምሳሌ፣ process.php) ያመለክታል። 🚀 (Specifies the server file to which the form data is sent)

method: መረጃው የሚላክበትን መንገድ ይወስናል (ለምሳሌ፣ GET ወይም POST)። (Determines the HTTP method used to submit the form)

GET: መረጃውን በURL ውስጥ ይልካል (ለትንሽ መረጃ ተስማሚ ነው፣ ነገር ግን ደህንነቱ የተጠበቀ አይደለም)። 🧐 (Sends form data in the URL)

POST: መረጃውን በHTTP ጥያቄ ውስጥ ይልካል (ለብዙ መረጃና ለደህንነት ተስማሚ ነው)። 👍 (Sends form data in the HTTP request body)

ምሳሌ:

   <form action="process.php" method="post">
    </form>

<input> Tag (የ<input> መለያ) ⌨️🖱️
ተጠቃሚዎች መረጃዎችን እንዲያስገቡ የሚያስችል የግብዓት መስክ ይፈጥራል። (Creates input fields for user input)

የግብዓት አይነቶች በtype ባህሪ ይገለፃሉ (ለምሳሌ፣ text, password, email, checkbox, radio, submit)።
(Input types are defined by the type attribute)

type="text": የጽሑፍ ግብዓት መስክ ይፈጥራል። 📝 (Creates a text input field)

ምሳሌ:

     <label for="username">የተጠቃሚ ስም:</label><br>
<input type="text" id="username" name="username"><br>

type="password": የይለፍ ቃል ግብዓት መስክ ይፈጥራል (የተጻፈው ጽሑፍ በነጥቦች ወይም በከዋክብት ይሸፈናል)። 🔒👀 (Creates a password input field)

ምሳሌ:

     <label for="password">የይለፍ ቃል:</label><br>
<input type="password" id="password" name="password"><br>

type="email": የኢሜይል አድራሻ ግብዓት መስክ ይፈጥራል (የኢሜይል ቅርጸት ትክክል መሆኑን ያረጋግጣል)። 📧✔️ (Creates an email input field)

ምሳሌ:

     <label for="email">ኢሜይል:</label><br>
<input type="email" id="email" name="email"><br>

type="checkbox": የአማራጭ ሳጥን ይፈጥራል (ብዙ አማራጮችን መምረጥ ይቻላል)። ✅☑️ (Creates a checkbox input)

ምሳሌ:

     <label for="vehicle1">መኪና አለኝ</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Car"><br>
<label for="vehicle2">ብስክሌት አለኝ</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Bike"><br>

type="radio": የክብ አማራጭ ይፈጥራል (አንድ አማራጭ ብቻ መምረጥ ይቻላል)። 🔘⭕ (Creates a radio button input)

ምሳሌ:

     <label for="male">ወንድ</label>
<input type="radio" id="male" name="gender" value="male"><br>
<label for="female">ሴት</label>
<input type="radio" id="female" name="gender" value="female"><br>

type="submit": ፎርሙን የሚያስገባ ቁልፍ ይፈጥራል (መረጃውን ወደ ሰርቨር ይልካል)። 🚀👍 (Creates a submit button)

ምሳሌ:

     <input type="submit" value="አስገባ">

<label> Tag (የ<label> መለያ) 🏷️📝
የግብዓት መስክን መለያ ይሰጣል (ተጠቃሚዎች የትኛውን መረጃ ማስገባት እንዳለባቸው እንዲያውቁ ይረዳል)። (Provides a label for an input element)

for ባህሪው የትኛውን ግብዓት እንደሚያመለክት ይገልጻል። (The for attribute links the label to an input element)

ምሳሌ:

   <label for="username">የተጠቃሚ ስም:</label>

<textarea> Tag (የ<textarea> መለያ) 📝💬
ብዙ መስመር ያለው የጽሑፍ ግብዓት መስክ ይፈጥራል (ለአስተያየት ወይም ለረጅም ጽሑፍ ተስማሚ ነው)። (Creates a multiline text input field)

ምሳሌ:

   <label for="comment">አስተያየት:</label><br>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>

<select> Tag (የ<select> መለያ) ⬇️📋
ተጠቃሚዎች ከአማራጮች ዝርዝር ውስጥ አንዱን እንዲመርጡ ያስችላል። (Creates a dropdown list)

<option> መለያዎች አማራጮችን ይገልጻሉ። (The <option> tags define the options in the list)

ምሳሌ:

   <label for="cars">መኪና ይምረጡ:</label><br>
<select id="cars" name="cars">
    <option value="volvo">ቮልቮ</option>
    <option value="saab">ሳብ</option>
    <option value="fiat">ፊያት</option>
    <option value="audi">አውዲ</option>
</select><br>

የHTML ፎርም ምሳሌ (HTML Form Example)

<form action="process.php" method="post">
    <label for="username">የተጠቃሚ ስም:</label><br>
    <input type="text" id="username" name="username"><br><br>

👍3

1.19K viewsedited 22:54