Mga tag na may kaugnayan sa form

Ipinaliliwanag ng artikulong ito ang mga tag na may kaugnayan sa form.

Ipinaliwanag nito ang iba't ibang mga patlang ng form tulad ng mga text input at dropdown na menu.

YouTube Video

Mga tag na may kaugnayan sa form

<form> na tag

1<form action="/submit" method="post">...</form>

• Ang <form> na tag ay ginagamit upang tukuyin ang buong form.
• Ang action na attribute ay nagtutukoy ng destinasyon, at ang method na attribute ay nagtutukoy ng pamamaraan (GET o POST).
• Maaari mo ring tukuyin ang attribute na target, katulad ng sa <a> na tag.

<input> na tag (field para sa pag-input ng teksto)

1<input type="text" name="username" placeholder="Enter your username">

• Ang <input type="text"> ay lumilikha ng isang input field para sa isang linya ng teksto. Maaaring maglagay ng anumang teksto ang mga gumagamit.

• Ang placeholder na attribute ay nagtatakda ng mapanlarawang teksto na lumalabas kapag ang input na field ay walang laman. Nakakatulong ito sa mga gumagamit na madaling maunawaan ang inaasahang input. Ang tekstong ito ay awtomatikong nawawala kapag nagsimula ang pag-input.

  • Ang placeholder ay angkop para sa pagbibigay ng karagdagang impormasyon at hindi angkop para sa mahahalagang tagubilin tulad ng kinakailangang input. Sa ganitong mga kaso, dapat kang gumamit ng label.

<input> na tag (field para sa pag-input ng password)

1<input type="password" name="password" placeholder="Type your password here">

• Ang <input type="password"> ay lumilikha ng field para sa pagpasok ng password. Ang mga ipinasok na karakter ay itinatago at tinatakpan para sa seguridad.

<input> na tag (field para sa pag-input ng email address)

1<input type="email" name="email" placeholder="Enter your email">

• Ang <input type="email"> ay lumilikha ng field para sa pagpasok ng email address at kasama ang pagpapatunay para matiyak ang tamang format ng email.

<input> na tag (checkbox)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• Ang <input type="checkbox"> ay lumilikha ng isang checkbox. Kapag maraming opsyon ang magagamit, maaaring pumili ng maraming item ang mga gumagamit.

<input> na tag (radio button)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• Ang <input type="radio"> ay lumilikha ng isang radio button na nagpapahintulot sa mga gumagamit na pumili ng isang opsyon lamang mula sa isang set.

<input> na tag (submit button)

1<input type="submit" value="Submit">

• Ang <input type="submit"> ay lumilikha ng button para sa pagsusumite ng data sa form.
• Ang halaga ng value na attribute ay kasama sa form data kapag ito ay naisumite.

<input> tag (Pindutan ng I-reset)

1<input type="reset" value="Reset">

• Ang <input type="reset"> ay lumilikha ng isang button na nag-reset sa lahat ng mga input na halaga sa form.

<input> na tag (nakatagong field)

1<input type="hidden" name="userid" value="12345">

• Ang <input type="hidden"> ay lumilikha ng nakatagong field na hindi ipinapakita sa screen at ginagamit upang magpadala ng data sa backend kapag naisumite ang form.

<input> na tag (color picker)

1<input type="color" name="favcolor" value="#ff0000">

• Ang <input type="color"> ay nagpapakita ng pagpili ng kulay at lumilikha ng input field para sa mga gumagamit na pumili ng kulay.

<input> na tag (field para sa pag-input ng petsa)

1<input type="date" name="birthday">

• Ang <input type="date"> ay lumilikha ng input field ng petsa na nagpapakita ng kalendaryo para sa pagpili ng petsa.

<input> na tag (field para sa pag-input ng oras)

1<input type="time" name="appointment_time">

• Ang <input type="time"> ay lumilikha ng field para sa pagpasok ng oras, at isang tagapili ng oras ay ipinapakita.

<input> tag (patlang ng input para sa file)

1<input type="file" name="resume">

• Ang <input type="file"> ay lumilikha ng input field para sa mga gumagamit na pumili at mag-upload ng mga file.
• Ang enctype na attribute ng form na tag ay dapat itakda sa multipart/form-data.

<input> tag (numero)

1<input type="number" name="quantity" min="1" max="10">

• Ang <input type="number"> ay lumilikha ng isang input field para sa numero na nagpapahintulot sa pagtatakda ng minimum na halaga, maximum na halaga, at hakbang (dagdag/bawas na halaga).

<input> tag (field para sa pagpili ng saklaw para sa mga numero)

1<input type="range" name="volume" min="0" max="100" value="50">

• Ang <input type="range"> ay lumilikha ng isang input field kung saan maaaring pumili ang mga gumagamit ng halaga sa loob ng saklaw gamit ang isang slider.

<textarea> tag

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• Ang <textarea> na tag ay lumilikha ng input field para sa maraming linya ng teksto. Ito ay angkop para sa pagpasok ng mahabang teksto o mga komento.

<select> tag

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• Ang <select> na tag ay lumilikha ng isang dropdown na menu, at ang mga pagpipilian ay tinutukoy gamit ang <option> na tag. Maaaring pumili ang mga gumagamit ng isa o maraming item.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Upang paganahin ang maramihang pagpili, idagdag ang katangiang multiple. Ang pagtukoy ng katangiang ito ay nagpapakita ng mga pagpipilian bilang isang listahan ng kahon.

Ang <optgroup> na tag

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• Ang <optgroup> na tag ay ginagamit upang pagsama-samahin ang mga magkakaugnay na item. Ang katangiang label ay nagbibigay-daan sa iyo na magtalaga ng pangalan ng grupo, na nagbibigay ng malinaw na mga pagpipilian sa mga gumagamit kahit mahaba ang listahan.

<label> tag

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• Ang <label> na tag ay nagtatakda ng mga label para sa mga input na field, mga checkbox, at mga radio button, na nagpapabuti sa paggamit at accessibility.
• Halimbawa, ang pag-click sa isang label ay maaaring magpokus sa isang input field o i-toggle ang isang checkbox na naka-on o naka-off.

<fieldset> na tag

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• Ang <fieldset> na tag ay nag-uuri ng mga magkaugnay na form na kontrol, at ang <legend> na tag ay nagbibigay ng pamagat para sa grupo.

<button> tag

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• Ang <button> na tag ay nagtatakda ng isang pindutang pwedeng i-click na nagti-trigger ng pagsusumite ng form o iba pang aksyon.

  Kapag tinukoy ang type="button", gumagana ito bilang karaniwang button. Ang pag-click dito ay hindi nagsusumite ng form o nagti-trigger ng iba pang mga default na aksyon. Ginagamit ito kapag nais mong magtakda ng mga custom na aksyon sa JavaScript.

  Kapag tinukoy ang type="submit", gumagana ito bilang submit button para sa form. Kapag ang button na ito ay na-click, ang form na naglalaman nito ay isusumite.

  Kapag tinukoy ang type="reset", gumagana ito bilang reset button para sa form. Ang pag-click dito ay irereset ang lahat ng mga input na field sa form at ibabalik ang mga ito sa kanilang orihinal na estado.

  Kung ang type na attribute ay hindi tinukoy, maaaring ituring ito ng ilang mga browser bilang type="submit", kaya inirerekomenda na tahasang tukuyin ang uri upang matiyak ang nilalayong pag-uugali.

• Ang <button> na tag ay maaaring magsama ng iba pang nilalaman ng HTML sa pagitan ng mga pambungad at pangwakas na tag, na ginagawang posible ang paglikha ng mga button na may mga icon o masalimuot na teksto.

• Para sa isang submit button na gumagamit ng <input> na tag, ang halaga ng value na attribute ay kasama sa form data, ngunit sa <button> na tag, ito ay hindi ipinapadala nang default.

  Sa pamamagitan ng pagtukoy ng name at value na mga attribute para sa isang <button> na tag, ang halaga nito ay maaaring ipadala bilang form data.

<datalist> na tag

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• Ang <datalist> na tag ay nagbibigay ng isang listahan ng mga mapipiling opsyon para sa <input> na elemento. Maaaring pumili ang mga gumagamit mula sa listahan o maglagay ng sarili nilang halaga.

<output> na tag

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• Ang <output> na tag ay nagpapakita ng resulta ng mga kalkulasyon o pakikipag-ugnayan ng gumagamit. Ito ay ginagamit upang ipakita ng dynamic ang mga resulta ng kalkulasyon sa loob ng mga form o script.
• Para sa attribute na for, tukuyin ang mga ID ng mga form element na nais mong iugnay, pinaghiwa-hiwalay ng mga espasyo.

<progress> na tag

1<progress value="70" max="100">70%</progress>

• Ang <progress> na tag ay nagpapakita sa mga gumagamit ng progreso ng isang gawain. Halimbawa, maaari nitong ipakita ng biswal ang progreso ng pag-download o pag-install ng file.

<meter> na tag

1<meter value="0.6">60%</meter>

• Ang <meter> na tag ay kumakatawan sa isang numerikong sukat sa loob ng isang kilalang saklaw. Ito ay ginagamit upang ipakita ang mga sukat tulad ng paggamit ng disk o isang gauge ng gasolina sa loob ng isang tiyak na saklaw.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video