Cara Membuat Input Fields Tag

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas input fields tag di html. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halaman kursus.

Input field adalah bagian dari elemen form. Banyak nama untuk menyebutkan elemen yang satu ini. Seperti input field, textbox, text field dan lain-lain.

Pada html tag yang digunakan untuk input field adalag tag <input>. Sedangkan jenis atau tipe nya banyak, diantaranya:

  • Teks – type=”text”
  • Angka – type=”number”
  • Tanggal – type=”date”
  • Jam – type=”time”
  • Password – type=”password”
  • Email – type=”email”

Berikut ini contoh kode html nya.

<input type="text">
<input type="number">
<input type="date">
<input type="time">
<input type="password">
<input type="email">

setelah mengetahui beberapa tag fields. Mari kita lihat atribut atau pengaturan tambahan yang tersedia pada tag tersebut.

No.AtributContohKeterangan
1.typetype=”text”Tipe input
2.namename=”kode_brg”Nama/index variabel
3.maxlengthmaxlength=”5″maksimal input 5 karakter

Berikut ini contoh kode nya.

<input type="text" name="kode_brg" maxlength="5">

Coba kamu jalankan dan tes kode diatas. Atribut name berfungsi saat data dikirim.

Contoh Pada Form

Jika kamu mengikuti materi dari awal dan belum pernah menggunakan php. Maka saatnya kita belajar php. Berikut ini contoh kode jika menggunakan form.

<!-- produk.php-->
<form method="POST" action="aksi_tambah_produk.php">
  <input type="text" name="kode_brg" maxlength="5">
  <button type="submit">Proses</button>
</form>

Method yang digunakan adalah post. Aksi dikirim ke aksi_tambah_produk.php. Jadi seperti ini cara mengambil nilai dari input field bernama kode_brg tersebut.

<?php
  //aksi_tambah_produk.php
  $_POST['kode_brg'];
  // untuk menampilkan silahkan tambah echo
?>

Nah, nilai dari atribut name case sensitive. Jadi harus sama. Saat dinamai maupun saat di ambil nilai nya.

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *