Pengesahan Borang

Artikel ini menerangkan tentang pengesahan borang.

Ia menerangkan pengesahan borang dalam HTML.

YouTube Video

Pengesahan Borang HTML

Gambaran Keseluruhan Pengesahan Borang HTML

• Pengesahan borang HTML ialah satu mekanisme untuk memastikan data memenuhi syarat tertentu sebelum pengguna menghantarnya. Ini mengurangkan kesilapan di pelayan dan meningkatkan pengalaman pengguna.

Atribut 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>

• Atribut required menetapkan bahawa medan input mesti diisi sebelum menghantar borang.

Atribut 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>

• Atribut pattern digunakan untuk mengesahkan sama ada input borang sepadan dengan corak regex tertentu. Sebagai contoh, ini memeriksa sama ada nama pengguna hanya mengandungi aksara alfanumerik.

Atribut min dan 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>

• Atribut <min> dan <max> digunakan untuk menentukan nilai minimum dan maksimum yang dibolehkan untuk elemen input. Ia biasanya digunakan dengan jenis input seperti number, range, dan date.
• Dalam contoh ini, anda boleh memasukkan nombor antara 18 dan 99.

Atribut minlength dan 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>

• Atribut minlength menetapkan bilangan minimum aksara yang diperlukan untuk medan input, manakala atribut maxlength menetapkan bilangan maksimum aksara yang dibenarkan.
• Dalam contoh ini, anda boleh memasukkan teks antara 4 hingga 12 aksara.

Atribut type="email"

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>

• Atribut type="email" digunakan untuk memastikan masukan berada dalam format alamat e-mel yang sah. Atribut ini menyediakan fungsi pengesahan terbina dalam untuk medan masukan alamat e-mel.

Atribut type="url"

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>

• <input type="url"> menyediakan medan masukan yang memerlukan format URL yang betul. Pelayar akan secara automatik memeriksa sama ada masukan itu sah sebagai URL.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video