Elemen HTML input adalah komponen penting dalam pembuatan formulir berbasis web. Fungsinya adalah untuk membuat kontrol interaktif yang memungkinkan pengguna situs web untuk memasukkan data. Data ini bisa berupa teks, angka, tanggal, dan lainnya, tergantung pada jenis input yang digunakan.

Elemen ini sangat fleksibel dan dapat disesuaikan dengan berbagai kebutuhan. Misalnya, jika Anda ingin pengguna memasukkan email, Anda dapat menggunakan <input type="email">. Untuk kata sandi, gunakan <input type="password">. Untuk pilihan ganda, gunakan <input type="radio"> atau <input type="checkbox">. Berikut adalah input HTML:

1. Input Text

<form>
  <div class="text-wrapper">
    <input type="text" class="text-input" placeholder="Masukkan Kode Anda"/>
	<span class="text-icon" />
  </div>
</form>

<style>
  .text-input {
      width: 100%;
      height: 3rem;
      border-radius: 0.5rem;
      border: 2px solid #CBCBD9;
  }
</style>

Elemen input dengan type text dalam HTML digunakan untuk membuat bidang input teks dalam formulir web. Bidang ini memungkinkan pengguna untuk memasukkan teks bebas, seperti nama, alamat email, atau komentar. 

2. Input Button

<form>
  <input type="button" class="button-input" value="Batal"/>
</form>

<style>
  .button-input { 
    height: 3rem;
    border-radius: 0.5rem;
    background: #F3F3F3;
  }
</style>

Elemen input dengan type button dalam HTML adalah tombol yang dapat digunakan untuk memicu aksi atau peristiwa tertentu pada halaman web tanpa mengirimkan formulir. Tombol ini dapat digunakan dalam berbagai aplikasi dan juga dapat ditemukan sebagai perangkat keras, seperti tombol power pada komputer atau smartphone.

3. Input Submit

<form>
  <input type="submit" class="submit-input" value="Kiriim"/>
</form>

<style>
  .submit-input {
    height: 3rem;
    border-radius: 0.5rem;
    background: #5CD2E6;
  }
</style>

Elemen input dengan type submit dalam HTML adalah tombol yang digunakan untuk mengirimkan data dari formulir ke penanganan formulir. Penanganan formulir biasanya adalah halaman dengan skrip server untuk memproses data masukan.

Selanjutnya, silakan mencoba membuatnya dengan menggunakan semua input sebagaimana tercantum dalam script di bawah ini.

<form>
  <div>
    <input type="text" placeholder="Masukkan Kode Anda"/>
    <span/>
  </div>
  <div>
    <input type="button" value="Batal"/>
    <input type="submit" value="Kirim"/>
  </div>
</form>

<style>
  .text-input {
    width: 100%;
    height: 3rem;
    border-radius: 0.5rem;
    border: 2px solid #CBCBD9;
  }
  
  .button-input {
    height: 3rem;
    border-radius: 0.5rem;
    background: #F3F3F3;
  }
  
  .submit-input {
    height: 3rem;
    border-radius: 0.5rem;
    background: #5CD2E6;
  }
</style>