Mafaa ya Hisia ya form* ya Input ya HTML

Makala hii inahusu HTML <input> Muungano wa elementi wa form* Muungano wa elementi wa form* Hatua.

Muungano wa form

input ya form Muungano hufikia ujumbe wa <input> Fomu iliyohusisha elementi.

Chaguo cha muungano lazima kuingie katika id ya <form> iliyotumika.

Mifano

Makina ya ingia iliyopo kwenye fomu ya HTML (lakini inaonekana kama kipengele cha fomu):

<form action="/action_page.php" id="form1">
  <label for="fname">Mikuyu:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Tuma">
</form>
<label for="lname">Jina:</label>
<input type="text" id="lname" name="lname" form="form1">

Jifunze kwa kufanya

muungano wa formaction

input ya formaction muungano hufikia ujumbe wa kufikia kazi kwa kushughulikia ingia (data) wa faili inayohusishwa kwa kufikia kazi.

Maelezo:muungano hutoa mabaki wa <form> muungano wa elementi wa action Hatua.

formaction Mfano huu una uwanja wa kufikiria kwa aina za input hizo: submit na image.

Mifano

Fomu ya HTML inayotumia mabaki ya kufikia kazi mbili, kila moja ina uwezo wa kufikia kazi tofauti (action):

<form action="/action_page.php">
  <label for="fname">Mikuyu:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Jina:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Tuma">
  <input type="submit" formaction="/action_page2.php" value="kutumia kwa kumwambia mwanachama wa meneja">
</form>

Jifunze kwa kufanya

muungano wa formenctype

input ya formenctype muungano hufikia ujumbe wa kwa uwezo wa kuingia data ya fomu kwa sababu ya kufikia kazi (inaonyesha kwa fomu inayotumia method="post").

Maelezo:Hatua hii itakapokabidhi <form> muungano wa elementi wa enctype.

formenctype Mfano huu una uwanja wa kufikiria kwa aina za input hizo: submit na image.

Mifano

Fomu inayotumia mabaki ya kufikia kazi ya kifungu kwa ingia mbili: mmoja inatuma data ya fomu inayotumia kufikia kazi kwa kuzingatia mabaki na mwingine inatuma data ya fomu inayotumia kufikia kazi kwa kuzingatia Multipart/form-data:

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Jina la kwanza:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Tuma">
  <input type="submit" formenctype="multipart/form-data"
  value="kutumia Multipart/form-data kwa kufikia kazi">
</form>

Jifunze kwa kufanya

muungano wa formmethod

input ya formmethod muungano hufikia ujumbe wa HTTP kwa URL ya kufanya kazi.

Maelezo:Hatua hii itakapokabidhi <form> muungano wa elementi wa method.

formmethod Mfano huu una uwanja wa kufikiria kwa aina za input hizo: submit na image.

Data ya forma inaweza kusaidia kwa URL kama variable (method="get") au kama kifungu ya HTTP post (method="post").

Tahadari za GET:

  • Kuandaa data ya forma katika uraifu wa name/value
  • Hata hivi ingaa kusoma data za GET inayohusiana na data muhimu (data ya forma inaonekana katika URL!)
  • Ukubwa wa URL una uharibifu (2048 herufi)
  • Ina uwanja wa kufikiria kwa formu ya kushika data ambazo watu huzama kuandaa katika book marki.
  • GET ina uwanja wa data ya uadilifu, kama vile uzoefu wa Google.

Tahadari za POST:

  • Kuandaa data ya forma katika mawaka ya uanzilishi wa tafadhali wa HTTP (hakuna hali ya kuonyesha data ya forma iliyosoma katika URL)
  • POST ina ukurabu bila hadi, inaweza kusaidia kusoma data kubwa.
  • Inasababisha kufikirika kwamba formu ya POST inapungua kuzingia.

Tahadari:Tafadhali ingaa kushika data za forma ambazo zina taarifu muhimu au mafanikio ya mtu!

Mifano

Formu yenye mibato ya kushika maeneo ya uwanja: kimoja ina kuwa method="get" ina kusoma data ya forma. Mengine ina kuwa method="post" ina kusoma data ya forma:

<form action="/action_page.php" method="get">
  <label for="fname">Mikuyu:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Jina:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Kushika kwa GET">
  <input type="submit" formmethod="post" value="Kushika kwa POST">
</form>

Jifunze kwa kufanya

Mfano formtarget

input ya formtarget Mfano huu anasema jina au kichwa cha kielektroniki ambao anasababisha kuonyesha jibu lililoingia katika forma baada ya kushika.

Maelezo:Hatua hii itakapokabidhi <form> mfano ya elementi ya target.

formtarget Mfano huu una uwanja wa kufikiria kwa aina za input hizo: submit na image.

Mifano

Formu yenye mibato ya kushika maeneo ya uwanja na mawingu tofauti:

<form action="/action_page.php">
  <label for="fname">Mikuyu:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Jina:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Tuma">
  <input type="submit" formtarget="_blank" value="Kusubiri katika tab au window mpya">
</form>

Jifunze kwa kufanya

mfano formnovalidate

input ya formnovalidate Mfano huzushiwe kuwa inahitaji kuthibitisha <input> element wakati wa kuhakikisha.

Maelezo:Hatua hii itakapokabidhi <form> Hatua ya novalidate ya elementi.

formnovalidate Hatua inayopakiwa kwa aina za kuingia za: submit.

Mifano

Foramu yenye mibabu wa hatua mbili (kuwasilisha na kumtambua):

<form action="/action_page.php">
  <label for="email">Ingiza barua yako:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Tuma">
  <input type="submit" formnovalidate="formnovalidate">
  value="Tuma bila utambuzi">
</form>

Jifunze kwa kufanya

Hatua ya novalidate

novalidate Hatua ni <form> Hatua.

Ikiwa ikisetwa, hatua ya novalidate inasababisha kuwa hatua ya kuwasilisha haitakayofikirika kumtambua data za formu yote.

Mifano

Inaingia kwa sababu ya hatua ya kuwasilisha haitakayofikirika kumtambua data za formu yote:

<form action="/action_page.php" novalidate>
  <label for="email">Ingiza barua yako:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Tuma">
</form>

Jifunze kwa kufanya

HTML Form na Vitu vya Input

Tafiti Maelezo
<form> Kuhakikisha kufanya formu ya HTML kwa kuingia wa mtumiaji.
<input> Kuhakikisha kufanya vifaa vya kuingia vya HTML.

Kwa kusoma orodha kubwa ya vifano vya HTML, tafuta tovuti yetu Kiongozi cha Toleo cha Tafiti ya HTML.