Pagpapatunay ng Form

Pagpapatunay ng Form

Ipinaliliwanag ng artikulong ito ang pagpapatunay ng form.

Ipinaliliwanag nito ang pagpapatunay ng form sa HTML.

YouTube Video

Pagpapatunay ng Form sa HTML

Pangkalahatang-ideya ng Pagpapatunay ng Form sa HTML

  • Ang pagpapatunay ng form sa HTML ay isang mekanismo upang tiyakin na ang datos ay tumutugma sa tiyak na mga kundisyon bago ito isumite ng user. Binabawasan nito ang mga error sa bahagi ng server at pinapabuti ang karanasan ng user.

Katangiang required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>
  • Tinutukoy ng katangiang required na ang mga input fields ay kailangang punan bago isumite ang form.

Katangiang pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>
  • Ginagamit ang katangiang pattern upang tiyakin kung ang input ng form ay tumutugma sa isang tiyak na regex na pattern. Halimbawa, tinitiyak nito kung ang username ay naglalaman lamang ng mga alphanumeric na karakter.

Mga Katangiang min at max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>
  • Ang mga katangiang <min> at <max> ay ginagamit upang tukuyin ang pinakamababa at pinakamataas na pinapayagang halaga para sa isang input na elemento. Karaniwang ginagamit ang mga ito sa mga uri ng input tulad ng number, range, at date.
  • Sa halimbawang ito, maaari kang maglagay ng numero sa pagitan ng 18 at 99.

Mga Katangiang minlength at maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>
  • Tinutukoy ng katangiang minlength ang pinakamababang bilang ng mga karakter na kinakailangan para sa isang input field, habang tinutukoy ng katangiang maxlength ang pinakamataas na bilang ng mga pinapayagang karakter.
  • Sa halimbawang ito, maaari kang maglagay ng teksto na may haba mula 4 hanggang 12 na mga karakter.

Ang type="email" na katangian

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>
  • Ang type="email" na katangian ay ginagamit upang matiyak na ang input ay nasa wastong format ng email address. Ang katangiang ito ay nagbibigay ng built-in na kakayahang mag-validate para sa mga field ng input ng email address.

Ang type="url" na katangian

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>
  • Ang <input type="url"> ay nagbibigay ng input field na nangangailangan ng tamang format ng URL. Awtomatikong sinusuri ng browser kung ang input ay wasto bilang isang URL.

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