Belajar HTML Part 25 - Input Type dalam Form

Pembahasan ini mengenai input type pada form HTML.

Input Type Text

<input type="text"> mendefinisikan satu baris kolom untuk menginput teks.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan">
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
<br><br>
<input type="submit">
</form>

<p>Perhatikan bahwa lebar default kolom teks adalah 20 karakter. </p>

</body>
</html>

Hasilnya:

Input Type Password

<input type="password"> mendefinisikan sebuah kolom untuk mengisi password. Berbeda dengan input type text, pada output input type password ketika kita mengetikkan sesuatu, maka isian yang kita ketikkan tidak akan ditampilkan, melainkan akan digantikan dengan karakter khusus, yaitu berupa circle atau bulatan hitam kecil.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Username:<br>
<input type="text" name="namauser">
<br>
Password:<br>
<input type="password" name="password">
</form>

<p>Karakter pada kolom password tidak ditampilkan, tetapi hanya ditandai dengan circle atau lingkaran hitam kecil.</p>

</body>
</html>

Hasilnya:

Input Type Submit

<input type="submit"> mendefinisikan tombol untuk mengirimkan data formulir ke form-handler.

Form-handler merupakan seuah tipikal sebuah halaman server dengan script untuk memproses data yang diinput melalui form.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan">
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>Pada contoh ini form belum terhubung ke form-handler</p>

<p>Apabila form kita sudah terhubung denga form-handler, maka pada saat diklik "Submit" maka data yang kita input melalui kolom-kolom tersebut akan terkirim ke server. </p>

</body>
</html>

Hasilnya:

Jika kita menghapus type="value" pada tombol submit, maka browser hanya akan menampilkan teks biasa.

Input Type Reset

<input type="reset"> mendefinisikan sebuah tombol reset yang akan mengatur ulang semua nilai form ke nilai default.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan">
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form> 

<p>Jika kita mengisi kolom input pada form, setelah itu meng-klik tombol "reset", maka semua data yang kita isi dalam kolom tersebut akan direset ke nilai default atau nilai semula. Apabila nilai semula kosong, maka kolom tersebut akan kosong. Dan apabila kolomnya berisi nilai default, maka akan dikembalikan ke nilai default tersebut.</p>

</body>
</html>

Hasilnya:

Jika kita mengisi kolom input pada form, setelah itu meng-klik tombol "reset", maka semua data yang kita isi dalam kolom tersebut akan direset ke nilai default atau nilai semula. Apabila nilai semula kosong, maka kolom tersebut akan kosong. Dan apabila kolomnya berisi nilai default, maka akan dikembalikan ke nilai default tersebut.

Input Type Radio

<input type="radio"> mendefinisikan tombol radio yang bentuknya seperti lingkaran hitam kecil. Dengan menggunakan tombol radio, kita hanya bisa memilih satu diantara beberapa pilihan.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
  <input type="radio" name="jeniskelamin" value="Laki-Laki" checked> Laki-Laki<br>
  <input type="radio" name="jeniskelamin" value="Perempuan"> Perempuan<br>
  <input type="radio" name="jeniskelamin" value="Lainnya"> Lainnya<br><br>
  <input type="submit">
</form> 

</body>
</html>

Hasilnya:

Input Type Checkbox

<input type="checkbox"> mendefinisikan sebuah kotak centang .

Artinya pengguna bisa memilih atau tidak memilih sama sekali pilihan dari sejumlah pilihan.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
<input type="checkbox" name="hobi1" value="Ngoding">Aku memiliki hobi ngoding
<br>
<input type="checkbox" name="hobi2" value="Belajar">AKu memiliki hobi belajar 
<br><br>
<input type="submit">
</form> 

</body>
</html>

Hasilnya:

Input Type Button

<input type="button"> mendefinisikan sebuah tombol button yang bisa di-klik.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<input type="button" onclick="alert('Hello World!')" value="Klik disini!">

</body>
</html>

Hasilnya:

Catatan: Peringatan seperti di atas hanya berlaku pada contoh tersebut

Input Type pada HTML5

HTML5 menambahkan beberapa input type yang baru:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

Input type yang baru tidak didukung oleh web browser lama. Oleh karena itu, output dari input type yang baru akan ditampilkan seperti <input type="text">.

Input Type Color

<input type="color"> digunakan untuk membuat kolom input yang berisi warna. Bergantung pada dukungan browser, sebuah color picker muncul di kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
Sebuah color picker muncul di kolom input.
</p>

<form>
  Pilih warna favorit Anda:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form>

<p>
<b>Catatan:</b>
type="color" tidak didukung oleh Internet Explorer 11 (dan versi sebelumnya) dan juga Safari 9.1 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Input Type Date

<input type="date"> digunakan untuk membuat kolom input yang berisi tanggal. Bergantung pada dukungan browser, date picker akan muncul di kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
Sebuah date picker akan muncul di kolom input.
</p>

<form>
  Birthday:
  <input type="date" name="bday">
  <input type="submit">
</form>

<p><strong>Catatan:</strong> type="date" tidak didukung oleh Internet Explorer 11 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Kita juga dapat menambahkan batas waktu tertentu dalam input type ini.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Masukkan tanggal sebelum 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Masukkan tanggal setelah 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit"> 
</form>

<p><strong>Catatan:</strong> type="date" tidak didukung oleh Internet Explorer 11 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Input Type Datetime-local

<input type="datetime-local"> digunakan untuk menentukan kolom input tanggal dan waktu, tanpa zona waktu. Bergantung pada dukungan browser, date picker akan muncul di kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
Sebuah datetime-local picker akan muncul di kolom input.
</p>

<form>
  Birthday (tanggal dan waktu):
  <input type="datetime-local" name="bdaytime">
  <input type="submit" value="Send">
</form>

<p>
<strong>Catatan:</strong>
type="datetime-local" tidak didukung oleh Firefox dan juga Internet Explorer 12 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Input Type Email

<input type="email"> digunakan untuk membuat kolom input yang harus berisi alamat email. Bergantung pada dukungan browser, alamat e-mail dapat divalidasi secara otomatis saat dikirimkan.

Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard agar sesuai saat memasukan email.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
  Email:
  <input type="email" name="email">
  <input type="submit">
</form>

<p>
<b>Catatan:</b>
type="email" tidak didukung oleh IE9 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Input Type Month

<input type="month"> digunakan untuk memungkinkan pengguna ketika memilih bulan dan tahun. Bergantung pada dukungan browser, date picker akan muncul di kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
Sebuah date picker akan muncul di kolom input.
</p>

<form>
  Birthday (bulan dan tahun):
  <input type="month" name="bdaymonth">
  <input type="submit">
</form>
<p>

<strong>Catatan:</strong>
type="month" tidak didukung oleh Firefox dan juga Internet Explorer 11 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Input Type Number

<input type="number"> digunakan untuk membuat kolom input numerik. Kita juga dapat mengatur batasan jumlah nomor yang diterima.

Pada contoh berikut menampilkan kolom input numerik, yaitu kita hanya dapat memasukkan nilai dari 1 sampai 5:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>Pembatasan numerik akan berlaku saat memasukkan angka di kolom input. pada contoh ini, apabila memasukan angka lebih dari 5, maka tidak bisa di submit.</p>

<form>
  Kuantitas (antara 1 dan 5):
  <input type="number" name="kuantitas" min="1" max="5">
  <input type="submit">
</form>

<p><b>Catatan:</b> type="number" tidak didukung oleh IE9 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Input Type Range

<input type="range"> mendefinisikan sebuah kontrol untuk memasukkan nomor yang nilai pastinya tidak penting (seperti kontrol slider). Range default adalah 0 sampai 100. Namun, kita dapat menetapkan batasan jumlah yang diterima oleh min, max, dan langkah atribut.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
input type"range" ditampilkan sebagai slider kontrol.
</p>

<form>
  Point:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

<p>
<b>Catatan:</b>
type="range" tidak didukung oleh Internet Explorer 9 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Input Type Search

<input type="search"> digunakan untuk membuat kolom pencarian (kolom pencarian berperilaku seperti kolom teks biasa).

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
  Pencarian Geevv:
  <input type="search" name="geevvsearch">
  <input type="submit" value="Search">
</form>

</body>
</html>

Hasilnya:

Input Type Tel

<input type="tel"> digunakan untuk membuat kolom input yang harus berisi nomor telepon. Input type tel saat ini hanya didukung oleh browser Safari 8.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
  Telepon:
  <input type="tel" name="usrtel">
  <input type="submit">
</form>

<p><b>Catatan:</b>
type="tel" hanya didukung oleh Safari 8 dan versi terbarunya.
</p>

</body>
</html>

Hasilnya:

Input Type Time

<input type="time"> memungkinkan pengguna untuk memilih waktu (tanpa zona waktu). Bergantung pada dukungan browser, time picker akan muncul di kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
Sebuah time picker akan muncul di kolom input.
</p>

<form>
  Pilih waktu:
  <input type="time" name="usr_time">
  <input type="submit">
</form>

<p><strong>Catatan:</strong>
type="time" tidak didukung oleh Internet Explorer 12 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Input Type Url

<input type="url"> digunakan untuk membuat kolom input yang harus berisi alamat URL. Bergantung pada dukungan browser, kolom url dapat divalidasi secara otomatis saat disubmit.

Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard.

Contoh

<!DOCTYPE html>
<html>

<body>
<head>
<title>Title Halaman</title>
</head>
<form>
  Tambahkan URL:
  <input type="url" name="url">
  <input type="submit">
</form>

<p><b>Catatan:</b>
type="url" tidak didukung oleh IE9 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Input Type Week

<input type="week"> memungkinkan pengguna untuk memilih satu weeks (pekan) dan tahun. Bergantung pada dukungan browser, date picker akan muncul di kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
Sebuah date picker akan muncul di kolom input.
</p>

<form>
  Pilih week:
  <input type="week" name="year_week">
  <input type="submit">
</form>

<p><strong>Catatan:</strong>
type="week" tidak didukung oleh Firefox dan juga Internet Explorer 11 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya: