Belajar Html: Belajar Mengenai Jenis-Jenis Input Type

January 21, 2022

Elemen input pada HTML merupakan sebuah elemen yang digunakan untuk membuat sebuah form untuk mengisi data. Ada banyak jenis tipe elemen input di dalam HTML. Tentu dengan fungsi yang berbeda-beda juga, Diantaranya adalah sebagai berikut:

text
password
textarea
select
select multipe
checkbox
radio
file
submit atau button
hidden
email
number
date (day, month, year)
range

Pada saat kita membuat form semua elemen input bergantung dengan atribut name dalam pengirimannya. Pada saat data terkirim ke dalam server nama yang tertera dalam atribut akan menjadi nama data yang dikirim.

1.input text

Input text merupakan elemen input yang dipakai untuk tipe data text. Biasanya digunakan untuk mengisi nama, alamat, email, dan sebagainya. Contoh Penulisan-nya adalah sebagai berikut:


  
   <input name="nama" type="text" />

2.input password

Elemen input ini adalah jenis input yang teksnya tersembunyi karena biasanya digunakan untuk mengisi sebuah password. Contoh Penulisan-nya adalah sebagai berikut:


  
   <input name="password" type="password" />

3.input textarea

Teksarea merupakan elemen input yang dapat digunakan untuk menginput teks yang barisnya lebih dari satu atau banyak. Contoh Penulisan-nya adalah sebagai berikut:


  
<textarea name="alamat"></textarea>

4.input select

Input select merupakan input yang digunakan untuk memilih diantara beberapa pilihan. pilihan di dalam input dinyatakan dengan elemen option.sedangkan yang dikirim ke dalam server dinyatakan dalam atribut value pada elemen option tersebut. Contoh Penulisan-nya adalah sebagai berikut:


  
   <select name="hobi">
  <option value="">--Pilih Hobi--</option>
  <option selected="" value="1">1. Renang</option>
  <option value="2">2. Membaca</option>
  <option value="3">3. Melukis</option>
  <option value="4">4. Memasak</option>
  <option value="5">5. Bernyanyi</option>
</select>

5.input select multipe

Sama halnya elemen input select namun saya langsung dapat memilih lebih dari 1 option. Contoh Penulisan-nya adalah sebagai berikut:


  
   <select multipe="" name="hobi">
  <option value="">--Pilih Hobi--</option>
  <option selected="" value="1">1. Renang</option>
  <option value="2">2. Membaca</option>
  <option value="3">3. Melukis</option>
  <option value="4">4. Memasak</option>
  <option value="5">5. Bernyanyi</option>
</select>

6.input checkbox

Elemen ini ditandai dengan tanda ceklis Ketika kita memilih pilihan yang akan kita input. Contoh Penulisan-nya adalah sebagai berikut:


  
<input name="hobi[]" type="checkbox" value="1" />1. Renang<br />
<input name="hobi[]" type="checkbox" value="2" />2. Membaca<br />
<input name="hobi[]" type="checkbox" value="3" />3. Melukis<br />
<input name="hobi[]" type="checkbox" value="4" />4. Memasak<br />
<input name="hobi[]" type="checkbox" value="5" />5. Bernyanyi<br />

7.input radio

Sama halnya dengan option radio merupakan salah satu input yang harus memilih satu diantara pilihan yang tersedia. Contoh Penulisan-nya adalah sebagai berikut:


  
<input name="hobi" type="radio" value="1" />1. Renang<br />
<input name="hobi" type="radio" value="2" />2. Membaca<br />
<input name="hobi" type="radio" value="3" />3. Melukis<br />
<input name="hobi" type="radio" value="4" />4. Memasak<br />
<input name="hobi" type="radio" value="5" />5. Bernyanyi<br />

8.input file

Input file merupakan input yang digunakan untuk memilih dan mengirimkan file ke server. input ini ini harus ditambahkan dengan atribut enctype="multipart/form-data". Contoh Penulisan-nya adalah sebagai berikut:


  
 <input name="nama_file" type="file" />

9.input submit

Input ini merupakan input yang digunakan untuk mengirim data yang sudah kita isi. Contoh Penulisan-nya adalah sebagai berikut:


  
<input type="submit" value="Kirim" />

10.input hidden

Input ini ini merupakan input yang tidak ditampilkan karena bersifat hidden. Contoh Penulisan-nya adalah sebagai berikut:


  
<input name="username" type="hidden" value="value_nya" />

11.input email

Input ini merupakan input yang digunakan untuk mengisi sebuah alamat email. Browser akan mau validasi Apakah inputan yang kita isi memang berjenis email atau tidak. Contoh Penulisan-nya adalah sebagai berikut:


  
 <input name="email" required="" type="email" />

12.input number

Input ini merupakan yang digunakan untuk mengisi sebuah angka dalam inputan, nilai angkanya bisa angka positif maupun angka negatif. Contoh Penulisan-nya adalah sebagai berikut:


  
<input name="angka" type="number" />

13.input date

Input ini merupakan input yang hanya berisi tentang tanggal. Contoh Penulisan-nya adalah sebagai berikut:


  
<input name="tanggal" type="date" />

14.input range

Input ini merupakan input yang memilih angka dalam batasan nilai tertentu. Contoh Penulisan-nya adalah sebagai berikut:


  
<input max="10" name="angka" type="range" value="7" />

Input Type merupakan salah satu elemen yang sangat penting pada HTML karena sering digunakan untuk mengisi sebuah form data agar data-data tersebut dikirim melalui server yang berkaitan dengan bahasa pemrograman PHP.

Ini Adalah Materi Dasar Dalam Bahasa Markup Html Yaitu Belajar Mengenai Jenis-Jenis Input Type. Tentu, Sangat Mudah Di Pelajari Untuk Pemula. Masih Banyak Yang Akan Kita Pelajari Mengenai Bahasa Markup Html ini.

Html Pemrogramman

faiznurullah