Jenis Masukan HTML


Bab ini menjelaskan berbagai jenis <input>elemen HTML.


Jenis Masukan HTML

Berikut adalah berbagai jenis input yang dapat Anda gunakan 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">

Tip: Nilai default typeatribut adalah "teks".


Teks Jenis Masukan

<input type="text">mendefinisikan bidang input teks satu baris :

Contoh

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama keluarga:


Masukkan Jenis Kata Sandi

<input type="password">mendefinisikan bidang kata sandi :

Contoh

<form>
  <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">
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Nama pengguna:

Kata sandi:

Karakter dalam bidang kata sandi ditutupi (ditampilkan sebagai tanda bintang atau lingkaran).



Jenis Masukan Kirim

<input type="submit">mendefinisikan tombol untuk mengirimkan data formulir ke penangan formulir .

Form-handler biasanya adalah halaman server dengan skrip untuk memproses data input.

Form-handler ditentukan dalam action atribut form:

Contoh

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

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama keluarga:


Jika Anda menghilangkan atribut nilai tombol kirim, tombol akan mendapatkan teks default:

Contoh

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

Atur Ulang Jenis Masukan

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

Contoh

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

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama keluarga:


Jika Anda mengubah nilai input dan kemudian mengklik tombol "Reset", data formulir akan diatur ulang ke nilai default.


Radio Jenis Masukan

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

Tombol radio memungkinkan pengguna memilih HANYA SATU dari sejumlah pilihan yang terbatas:

Contoh

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:




Kotak Centang Jenis Masukan

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

Kotak centang memungkinkan pengguna memilih opsi NOL atau LEBIH dari sejumlah pilihan terbatas.

Contoh

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:




Tombol Jenis Masukan

<input type="button">mendefinisikan tombol :

Contoh

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

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:


Warna Jenis Masukan

Digunakan untuk kolom input yang <input type="color">harus berisi warna.

Bergantung pada dukungan browser, pemilih warna dapat muncul di bidang input.

Contoh

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Tanggal Jenis Masukan

<input type="date">Digunakan untuk bidang input yang harus berisi tanggal .

Bergantung pada dukungan browser, pemilih tanggal dapat muncul di bidang input.

Contoh

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

Anda juga dapat menggunakan atribut minand maxuntuk menambahkan batasan pada tanggal:

Contoh

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Jenis Input Tanggal-waktu-lokal

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

Bergantung pada dukungan browser, pemilih tanggal dapat muncul di bidang input.

Contoh

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Jenis Masukan Email

Digunakan untuk kolom input yang <input type="email">harus berisi alamat email.

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

Beberapa ponsel cerdas mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan input email.

Contoh

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

File Jenis Masukan

Menentukan <input type="file"> bidang pilih file dan tombol "Jelajahi" untuk mengunggah file.

Contoh

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Jenis Masukan Tersembunyi

<input type="hidden"> Mendefinisikan bidang input tersembunyi (tidak terlihat oleh pengguna) .

Bidang tersembunyi memungkinkan pengembang web menyertakan data yang tidak dapat dilihat atau diubah oleh pengguna saat formulir dikirimkan.

Bidang tersembunyi sering kali menyimpan catatan database apa yang perlu diperbarui saat formulir dikirimkan.

Catatan: Meskipun nilai tidak ditampilkan kepada pengguna di konten halaman, nilai tersebut terlihat (dan dapat diedit) menggunakan alat pengembang browser atau fungsi "Lihat Sumber". Jangan gunakan input tersembunyi sebagai bentuk keamanan!

Contoh

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Jenis Masukan Bulan

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

Bergantung pada dukungan browser, pemilih tanggal dapat muncul di bidang input.

Contoh

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Nomor Jenis Masukan

<input type="number">Mendefinisikan bidang input numerik .

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

Example

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Example

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

HTML Exercises

Test Yourself With Exercises

Exercise:

In the form below, add an input field for text, with the name "username" .

<form action="/action_page.php">
<>
</form>


HTML Input Type Attribute

Tag Description
<input type=""> Specifies the input type to display