Input Type di HTML: Code dan Jenis-Jenis Sintaknya

Pada bahasan kali ini menjelaskan perbedaan tipe atribut inputan pada elemen <input> HTML.

Input Type di HTML

Berikut adalah macam-macam input type berbeda yang dapat digunakan dalam HTML:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Tips: Nilai default dari atribut type adalah “teks”.

Input Type Text

<input type="text"> mendefinisikan text field input sebaris.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Text field</h2>
<p><strong>input type="text"</strong> mendefinisikan text field input sebaris.</p>

<form action="/action_page.php">
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Nama Belakang:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Perhatikan bahwa form sendiri tidak terlihat</p>
<p>Perhatikan juga bahwa lebar default text field adalah 20 karakter.</p>

</body>
</html>

Input Type Password

<input type="password"> mendefinisikan field untuk menginputkan password.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Field Password</h2>

<p><strong>input type="password"</strong> mendefinisikan field untuk menginputkan password.</p>

<form action="/action_page.php">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Karakter difield password disamarkan (ditampilkan dengan simbol bintang atau lingkaran).</p>

</body>
</html>

Karakter pada field password disamarkan (ditampilkan dengan simbol bintang atau lingkaran).

Input Type Submit

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

Form-handler biasanya adalah halaman dengan script server untuk memproses data masukan.

Form-handler ditentukan dalam atribut action pada form.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p>

<form action="/action_page.php">
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Nama Belakang</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p>

</body>
</html>

Jika nilai atribut pada submit button dihilangkan tombol tersebut akan menampilkan teks default, seperti ini:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Nama Belakang:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form> 

</body>
</html>

Input Type Reset

<input type="reset"> mendefinisikan tombol reset yang akan mengatur ulang semua nilai formulir ke nilai defaultnya.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Reset Button</h2>

<p><strong>input type="reset"</strong> dmendefinisikan tombol reset yang akan mengatur ulang semua nilai formulir ke nilai defaultnya.</p>

<form action="/action_page.php">
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Nama Belakang:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 

<p>Jika Anda mengubah nilai input dan kemudian mengklik tombol "Reset", data formulir akan disetel ulang ke nilai default.</p>

</body>
</html>

Jika Anda mengubah nilai input dan kemudian mengklik tombol “Reset”, data formulir akan disetel ulang ke nilai default.

Input Type Radio

<input type="radio"> mendefinisikan radio button.

Radio button memungkinkan pengguna memilih HANYA SALAH SATU dari sejumlah opsi pilihan.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p><strong>input type="radio"</strong>  mendefinisikan radio button.</p>

<form action="/action_page.php">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Laki-laki</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Perempuan</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Lainnya</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Input Type Checkbox

<input type="checkbox"> mendefinisikan checkbox.

Checkbox memungkinkan pengguna memilih opsi NOL atau LEBIH dari sejumlah opsi pilihan.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p><strong>input type="checkbox"</strong> mendefinisikan checkbox.</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> Aku punya sepeda</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Aku punya mobil</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> Aku punya kapal</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Input Type Button

<input type="button"> mendefinisikan tombol atau button.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Input Button</h2>

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

</body>
</html>

Input Type Color

<input type="color"> digunakan untuk mendefiniskan input field yang harus berisi warna.

Tergantung pada dukungan browser, pemilih warna dapat muncul pada field input.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Tampilan Color Picker</h2>

<p><strong>input type="color"</strong> digunakan untuk mendefiniskan input field yang harus berisi warna.</p>

<form action="/action_page.php">
  <label for="favcolor">Pilih warna favoritmu:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>

<p><b>Catatan:</b> type="color" tidak didukung di Internet Explorer 11 atau Safari 9.1 (atau versi yang lebih lama).</p>

</body>
</html>

Input Type Date]

The <input type="date"> digunakan untuk field input yang harus berisi tanggal.

Pemilih tanggal (date picker) dapat muncul di field input tergantung pada dukungan browser.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>

<p><strong>input type="date"</strong>  digunakan untuk field input yang harus berisi tanggal.</p>

<form action="/action_page.php">
  <label for="birthday">Tanggal Lahir:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>

<p><strong>Catatan:</strong> type="date" tidak didukung pada browser Safari atau Internet Explorer 11 (atau versi lebih lama).</p>

</body>
</html>

Anda juga dapat menggunakan atribut min dan max untuk menambahkan batasan pada tanggal.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Batasan pada Date Field</h2>

<p>Gunakan atribut min dan max untuk menambahkan batasan pada tanggal.</p>

<form action="/action_page.php">
  <label for="datemax">Masukan tanggal sebelum 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Masukan tanggal setelah 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
  
  <input type="submit" value="Submit">
</form>

<p><strong>Catatan:</strong> type="date" tidak didukung di Safari atau Internet Explorer 11 (atau versi lebih lama).</p>

</body>
</html>

Input Type Datetime-local

<input type="datetime-local"> menentukan field input tanggal dan waktu, tanpa zona waktu.

Pemilih tanggal (date picker) dapat muncul di field input tergantung pada dukungan browser.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Local Date Field</h2>

<p><strong>input type="datetime-local"</strong> menentukan field input tanggal dan waktu, tanpa zona waktu.</p>

<form action="/action_page.php">
  <label for="birthdaytime">Tanggal Lahir (tanggal dan waktu)</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="datetime-local" tidak didukung di Firefox, Safari, atau Internet Explorer 12 (atau versi lebih lama).</p>

</body>
</html>

Input Type Email

<input type="email"> digunakan untuk field input yang harus berisi alamat email.

Tergantung pada dukungan browser, alamat email dapat divalidasi secara otomatis saat dikirimkan.

Beberapa smartphone bahkan mampu mengenali jenis email, dan menambahkan “.com” ke keyboard untuk mencocokkan masukan email.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Email Field</h2>

<p><strong>input type="email"</strong> digunakan pada field input yang harus berisi alamat email.</p>

<form action="/action_page.php">
  <label for="email">Masukan alamat email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type File

<input type="file"> menentukan field pilih file dan tombol “Browse” untuk mengunggah file.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>

<p>Menampilkan field pilih file yang memungkinkan file dipilih untuk diunggah:</p>
<form action="/action_page.php">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Month

The <input type="month"> memungkinkan pengguna untuk memilih bulan dan tahun.

Pemilih tanggal (date picker) dapat muncul di field input tergantung pada dukungan browser.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Month Field</h2>

<p><strong>input type="month"</strong>  memungkinkan pengguna untuk memilih bulan dan tahun.</p>

<form action="/action_page.php">
  <label for="bdaymonth">Tanggal lahir(Bulan dan Tahun):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

<p><strong>Catatan:</strong> type="month" tidak didukung di Firefox, Safari, atau Internet Explorer 11 (atau versi lebih lama).</p>

</body>
</html>

Input Type Number

The <input type="number"> Mendifinisikan field input numeric.

Anda juga dapat mengatur batasan angka yang diterima.

Contoh berikut menampilkan kolom input numerik, di mana Anda dapat memasukkan nilai dari 1 hingga 5:

<!DOCTYPE html>
<html>
<body>

<h2>Number Field</h2>

<p><strong>input type="number"</strong>  Mendifinisikan field input numeric.</p>

<p>Anda dapat menggunakan atribut min dan max untuk menambahkan batasan numerik di kolom input:</p>

<form action="/action_page.php">
  <label for="quantity">Jumlah (Antara 1 samapi 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Terbatas

Berikut adalah daftar beberapa inputab terbatas yang umum.

Atribut	Deskripsi
checked	Menentukan bahwa kolom input harus pre-selected ketika halaman dimuat (untuk type = “checkbox” atau type = “radio”)
disabled	Menentukan bahwa kolom input harus dinonaktifkan
max	Menentukan nilai maksimum untuk sebuah field input
maxlength	Menentukan jumlah karakter maksimum untuk sebuah field input
min	Menentukan jumlah karakter minimum untuk sebuah field input
pattern	Menentukan ekspresi reguler untuk memeriksa nilai masukan
readonly	Menentukan bahwa kolom input hanyadapat dibaca (tidak dapat diubah)
required	Menentukan bahwa kolom input diperlukan (harus diisi)
size	Menentukan lebar (dalam karakter) dari field input
step	Menentukan interval nomor resmi untuk field input
value	Menentukan nilai default untuk kolom input

Contoh berikut menampilkan kolom input numerik, di mana Anda dapat menginput nilai dari 0 hingga 100, dalam 10 step. Dan nilai defaultnya adalah 30.

<!DOCTYPE html>
<html>
<body>

<h2>Numeric Steps</h2>

<p>Bergantung pada dukungan browser: Step akan diterapkan pada field input.</p>

<form action="/action_page.php">
  <label for="quantity">Jumlah:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Range

<input type=”range”> mendefinisikan kontrol untuk memasukkan angka yang nilai pastinya tidak penting (seperti slider control). Rentang default yang dimiliki adalah 0 hingga 100. Namun, Anda dapat mengatur batasan pada angka apa yang diterima dengan atribut min, max, dan step.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Range Field</h2>

<p>Bergantung pada dukungan browser: Jenis input "range" dapat ditampilkan sebagai control slider.<p>

<form action="/action_page.php" method="get">
  <label for="vol">Volume (antara 0 sampai 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Search

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

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Search Field</h2>
<p><strong>input type="search"</strong> digunakan untuk kolom pencarian (kolom pencarian berbentuk seperti kolom teks biasa):</p>

<form action="/action_page.php">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Tel

<input type="tel"> digunakan untuk field inputan yang harus berisi nomor telepon.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>

<p><strong>input type="tel"</strong> digunakan untuk field inputan yang harus berisi nomor telepon.</p>

<form action="/action_page.php">
  <label for="phone">Masukan nomor telepon:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Time

<input type="time"> memungkinkan pengguna untuk memilih waktu (tanpa zona waktu).

Pemilih waktu (time picker) dapat muncul di field input tergantung pada dukungan browser.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>Menampilkan Time Input Control</h1>

<p><strong>input type="time"</strong> memungkinkan pengguna untuk memilih waktu (tanpa zona waktu).</p>

<p>Jika browser mendukungnya, pemilih waktu akan muncul saat memasuki field input.</p>

<form action="/action_page.php">
  <label for="appt">SPilih waktu:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="Submit">
</form>

<p><strong>Catatan:</strong> type="time" tidak didukung di Safari atau Internet Explorer 12 (atau versi lebih lama).</p>

</body>
</html>

Input Type Url

<input type="url"> digunakan untuk input field yang harus berisi alamat URL.

Bergantung pada dukungan browser, field url dapat divalidasi secara otomatis saat dikirim.

Beberapa smartphone bahkan mampu mengenali jenis url, dan menambahkan “.com” ke keyboard untuk mencocokkan masukan url.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>Tampilan URL Input Field</h1>

<p><strong>input type="url"</strong> digunakan untuk input field yang harus berisi alamat URL.</p>

<form action="/action_page.php">
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Week

<input type="week"> memungkinkan pengguna untuk memilih minggu dan tahun.

Pemilih waktu (time picker) dapat muncul di field input tergantung pada dukungan browser.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>Tampilan Week Input Control</h1>

<p><strong>input type="week"</strong> memungkinkan pengguna untuk memilih minggu dan tahun.</p>

<p>Jika browser mendukungnya, pemilih tanggal akan muncul saat memasuki field input.</p>

<form action="/action_page.php">
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="Submit">
</form>

<p><strong>Catatan:</strong> type="week" tidak didukung di Firefox, Safari, atau Internet Explorer 11 (atau versi sebelumnya).</p>

</body>
</html>

Atribut Input Type HTML

Tag	Deskripsi
<input type=””>	menentukan tipe input yang akam ditampilkan

html input

Input Type di HTML: Code dan Jenis-Jenis Sintaknya