Tag berkaitan dengan borang

Artikel ini menerangkan tag berkaitan dengan borang.

Ini menerangkan pelbagai medan borang seperti input teks dan menu lungsur.

YouTube Video

Tag berkaitan dengan borang

Tag <form>

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

• Tag <form> digunakan untuk mentakrifkan keseluruhan borang.
• Atribut action menetapkan destinasi, dan atribut method menetapkan kaedah (GET atau POST).
• Anda juga boleh menentukan atribut target, serupa dengan tag <a>.

Tag <input> (medan input teks)

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

• <input type="text"> mencipta medan input teks satu baris. Pengguna boleh memasukkan sebarang teks.

• Atribut placeholder menentukan teks deskriptif yang muncul apabila medan input kosong. Ini membantu pengguna memahami input yang dijangkakan dengan mudah. Teks ini hilang secara automatik apabila input dimulakan.

  • placeholder sesuai untuk memberikan maklumat tambahan dan tidak sesuai untuk arahan penting seperti input wajib. Dalam kes sedemikian, anda harus menggunakan label.

Tag <input> (medan input kata laluan)

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

• <input type="password"> mencipta medan untuk memasukkan kata laluan. Aksara yang dimasukkan disembunyikan dan dilindungi untuk memastikan keselamatan.

Tag <input> (medan input alamat emel)

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

• <input type="email"> mencipta medan untuk memasukkan alamat emel dan termasuk pengesahan untuk memastikan format emel yang betul.

Tag <input> (kotak semak)

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

• <input type="checkbox"> mencipta kotak pilihan. Apabila pilihan berganda ada, pengguna boleh memilih berbilang item.

Tag <input> (butang radio)

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

• <input type="radio"> mencipta butang radio yang membolehkan pengguna memilih hanya satu pilihan daripada satu set.

Tag <input> (butang hantar)

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

• <input type="submit"> mencipta butang untuk menghantar data dalam borang.
• Nilai atribut value dimasukkan dalam data borang apabila dihantar.

Tag <input> (Butang Tetap Semula)

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

• <input type="reset"> mencipta butang yang menetapkan semula semua nilai input dalam borang.

Tag <input> (medan tersembunyi)

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

• <input type="hidden"> mencipta medan tersembunyi yang tidak dipaparkan pada skrin dan digunakan untuk menghantar data ke belakang apabila borang dihantar.

Tag <input> (pemilih warna)

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

• <input type="color"> memaparkan pemilih warna dan mencipta medan input untuk pengguna memilih warna.

Tag <input> (medan input tarikh)

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

• <input type="date"> mencipta medan input tarikh yang memaparkan kalendar untuk memilih tarikh.

Tag <input> (medan input masa)

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

• <input type="time"> mencipta medan untuk memasukkan masa dan pemilih masa akan dipaparkan.

Tag <input> (medan input fail)

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

• <input type="file"> mencipta medan input untuk pengguna memilih dan memuat naik fail.
• Atribut enctype bagi tag form mesti ditetapkan kepada multipart/form-data.

Tag <input> (nombor)

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

• <input type="number"> mencipta medan input nombor yang membenarkan tetapan nilai minimum, nilai maksimum, dan langkah (berapa jumlah kenaikan/penurunan).

Tag <input> (medan pemilihan julat untuk nombor)

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

• <input type="range"> mencipta medan input di mana pengguna boleh memilih nilai dalam julat menggunakan peluncur.

Tag <textarea>

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

• Tag <textarea> mencipta medan input teks berbilang baris. Ia sesuai untuk memasukkan teks panjang atau komen.

Tag <select>

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

• Tag <select> mencipta menu lungsur, dan pilihan ditakrifkan dengan tag <option>. Pengguna boleh memilih satu atau beberapa 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>

• Untuk membolehkan pemilihan berbilang, tambah atribut multiple. Menentukan atribut ini memaparkan pilihan dalam bentuk kotak senarai.

Tag <optgroup>

 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>

• Tag <optgroup> digunakan untuk mengumpulkan item yang berkaitan bersama-sama. Atribut label membolehkan anda menetapkan nama kumpulan, memberikan pilihan yang jelas kepada pengguna walaupun senarai panjang.

Tag <label>

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

• Tag <label> mentakrifkan label untuk medan input, kotak semak, dan butang radio, meningkatkan kebolehgunaan dan kebolehcapaian.
• Sebagai contoh, mengklik label boleh memfokuskan medan input atau menghidupkan atau mematikan kotak semak.

Tag <fieldset>

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>

• Tag <fieldset> mengelompokkan kawalan borang yang berkaitan, dan tag <legend> memberikan tajuk untuk kumpulan tersebut.

Tag <button>

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

• Tag <button> mentakrifkan butang yang boleh diklik yang mencetuskan penghantaran borang atau tindakan lain.

  Apabila type="button" dinyatakan, ia berfungsi sebagai butang biasa. Mengkliknya tidak menghantar borang atau mencetuskan tindakan lalai lain. Ia digunakan apabila anda ingin menetapkan tindakan tersuai dengan JavaScript.

  Apabila type="submit" dinyatakan, ia berfungsi sebagai butang hantar untuk borang. Apabila butang ini diklik, borang yang mengandungi butang tersebut akan dihantar.

  Apabila type="reset" dinyatakan, ia berfungsi sebagai butang set semula untuk borang. Mengkliknya akan menetapkan semula semua medan input dalam borang dan mengembalikannya ke keadaan asal.

  Jika atribut type tidak dinyatakan, beberapa pelayar mungkin menganggapnya sebagai type="submit", jadi adalah dinasihatkan untuk menyatakan jenisnya dengan jelas bagi memastikan tingkah laku yang dimaksudkan.

• Tag <button> boleh merangkumi kandungan HTML lain di antara tag pembuka dan penutup, membolehkan anda mencipta butang dengan ikon atau teks yang kompleks.

• Untuk butang hantar menggunakan tag <input>, nilai atribut value disertakan dalam data borang, tetapi dengan tag <button>, ia tidak dihantar secara lalai.

  Dengan menentukan atribut name dan value untuk tag <button>, nilainya boleh dihantar sebagai data borang.

Tag <datalist>

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

• Tag <datalist> menyediakan senarai pilihan yang boleh dipilih untuk elemen <input>. Pengguna boleh memilih dari senarai atau memasukkan nilai mereka sendiri.

Tag <output>

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>

• Tag <output> memaparkan hasil pengiraan atau interaksi pengguna. Ia digunakan untuk memaparkan hasil pengiraan secara dinamik dalam borang atau skrip.
• Untuk atribut for, nyatakan ID elemen borang yang ingin anda hubungkan, dipisahkan dengan ruang.

Tag <progress>

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

• Tag <progress> menunjukkan kepada pengguna kemajuan sesuatu tugasan. Sebagai contoh, ia dapat menunjukkan secara visual kemajuan muat turun atau pemasangan fail.

Tag <meter>

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

• Tag <meter> mewakili ukuran numerik dalam julat yang diketahui. Ia digunakan untuk memaparkan ukuran seperti penggunaan cakera atau tolok bahan bakar dalam julat tertentu.

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

YouTube Video