Jenis input HTML

Bab ini mendeskripsikan jenis input elemen <input>.

Jenis input: teks

<input type="text"> mengdefinikan untukInput teksmedan input baris tunggal:

Contoh

<form>
 Nama pertama:<br>
<input type="text" name="firstname">
<br>
 Nama belakang:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Nama pertama:


Nama belakang:

Jenis input: password

<input type="password"> 定義Medan kata sandi：

Contoh

<form>
 Nama pengguna:<br>
<input type="text" name="username">
<br>
 Kata sandi pengguna:<br>
<input type="password" name="psw">
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Nama pengguna:


Kata sandi pengguna:

Keterangan:akar kata di medan password akan dilakukan penghalusan (diperlihatkan sebagai bintang atau bulatan tebal).

Jenis input: submit

<input type="submit"> 定義hantardata borang kePerangkat pelaksanaan borangtombol.

Perangkat pelaksanaan borang (form-handler) biasanya adalah halaman pelayan yang mengandung skrip untuk mengolah data input.

Tentukan penanganan formulir (form-handler) di atribut action formulir.

Contoh

<form action="action_page.php">
Nama pertama:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nama belakang:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Nama pertama:


Nama belakang:


Jika Anda melanggar atribut value tombol pengiriman, tombol itu akan mendapatkan teks baku:

Contoh

<form action="action_page.php">
Nama pertama:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nama belakang:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Coba Sendiri

Input Type: radio

<input type="radio"> 定義 tombol radio.

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

Contoh

<form>
<input type="radio" name="sex" value="male" checked>Laki-laki
<br>
<input type="radio" name="sex" value="female">Wanita
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Laki-laki

Wanita

Input Type: checkbox

<input type="checkbox"> 定義 kotak centang.

Kotak centang memungkinkan pengguna memilih NOLAKU ATAU BAGAI APA PUN SEBUAH ATAU BAGAI APA PUN SEBUAH DARI SEBUAH JUMLAH TERTENTU Pilihan.

Contoh

<form>
<input type="checkbox" name="vehicle" value="Bike">Saya ada sepeda
<br>
<input type="checkbox" name="vehicle" value="Car">Saya ada kereta 
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Saya ada sepeda

Saya ada kereta

Input Type: button

<input type="button"> 定義按鈕。

Contoh

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

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Jenis input HTML5

HTML5 menambahkan beberapa jenis input baru:

  • warna
  • tarikh
  • datetime
  • datetime-local
  • emel
  • bulan
  • nombor
  • siraman
  • cari
  • tel
  • masa
  • url
  • minggu

Keterangan:Jenis input lama web pelayar yang tidak disokong akan dianggap jenis input teks.

Jenis input: nombor

<input type="number"> Untuk medan input yang sepatutnya mengandungi nilai nombor.

Anda boleh menentukan had untuk nombor.

Bergantung kepada sokongan pelayar, had boleh diterapkan ke medan input.

Contoh

<form>
  Kuantiti (antara 1 dan 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Coba Sendiri

Had input

Di sini adalah beberapa had input biasa (beberapa di antaranya adalah yang ditambahkan dalam HTML5):

Sifat Keterangan
disabled Tetapkan medan input sepatutnya dibenarkan.
max Tetapkan nilai maksimum medan input.
maxlength Tetapkan jumlah aksara maksimum medan input.
min Tetapkan nilai minimum medan input.
pattern Tetapkan ekspresi regular untuk memeriksa nilai input melalui.
readonly Tetapkan medan input hanya baca (tidak dapat diubah).
required Tetapkan medan input adalah wajib (wajib diisi).
size Tetapkan lebar medan input (dalam aksara).
step Tetapkan angka yang sah untuk interval angka medan input.
value Tetapkan nilai lalai medan input.

Anda akan belajar lebih banyak tentang had input di bab berikutnya.

Contoh

<form>
  Kuantiti:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Coba Sendiri

Jenis input: tarikh

<input type="date"> Untuk medan input yang sepatutnya mengandungi tarikh.

Berdasarkan keupayaan pelayar, pilihan tarikh akan muncul di medan input.

Contoh

<form>
  Hari lahir:
  <input type="date" name="bday">
</form>

Coba Sendiri

Anda boleh menambahkan had untuk input:

Contoh

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

Coba Sendiri

Jenis input: color

<input type="color"> Digunakan untuk medan input yang seharusnya mengandungi warna.

Berdasarkan keupayaan pelayar, pemilihan warna akan muncul di medan input.

Contoh

<form>
  Pilih warna kegemaran anda:
  <input type="color" name="favcolor">
</form>

Coba Sendiri

Jenis input: range

<input type="range"> Digunakan untuk medan input yang seharusnya mengandungi nilai dalam rentang tertentu.

Berdasarkan keupayaan pelayar, medan input dapat dipaparkan sebagai kontrol tangkur.

Contoh

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

Coba Sendiri

Anda dapat menggunakan sifat berikut untuk menentukan had: min, max, step, value.

Jenis input: month

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

Berdasarkan keupayaan pelayar, pilihan tarikh akan muncul di medan input.

Contoh

<form>
  Tarikh lahir (bulan dan tahun):
  <input type="month" name="bdaymonth">
</form>

Coba Sendiri

Jenis input: week

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

Berdasarkan keupayaan pelayar, pilihan tarikh akan muncul di medan input.

Contoh

<form>
  Pilih minggu:
  <input type="week" name="week_year">
</form>

Coba Sendiri

Jenis input: time

<input type="time"> Membolehkan pengguna memilih masa (tanpa zaman tempat).

Berdasarkan keupayaan pelayar, pilihan masa akan muncul di medan input.

Contoh

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

Coba Sendiri

Jenis input: datetime

<input type="datetime"> Membolehkan pengguna memilih tarikh dan masa (dengan zaman tempat).

Berdasarkan keupayaan pelayar, pilihan tarikh akan muncul di medan input.

Contoh

<form>
  Tarikh (tarikh dan masa):
  <input type="datetime" name="bdaytime">
</form>

Coba Sendiri

Jenis input: datetime-local

<input type="datetime-local"> Membolehkan pengguna memilih tarikh dan masa (tanpa zaman tempat).

Berdasarkan keupayaan pelayar, pilihan tarikh akan muncul di medan input.

Contoh

<form>
  Tarikh (tarikh dan masa):
  <input type="datetime-local" name="bdaytime">
</form>

Coba Sendiri

Tipe Input: email

<input type="email"> Untuk bidang input yang seharusnya mengandung alamat email.

Berdasarkan dukungan browser, alamat email dapat diverifikasi otomatis saat disubmit.

Beberapa ponsel cerdas mengidentifikasi tipe email dan menambahkan ".com" ke papan tombol untuk mencocokkan input email.

Contoh

<form>
  E-mail:
  <input type="email" name="email">
</form>

Coba Sendiri

Tipe Input: search

<input type="search"> Untuk bidang pencarian (ekspresi bidang pencarian mirip dengan bidang teks biasa).

Contoh

<form>
  Cari Google:
  <input type="search" name="googlesearch">
</form>

Coba Sendiri

Tipe Input: tel

<input type="tel"> Untuk bidang input yang seharusnya mengandung nomor telepon.

Hanya Safari 8 yang mendukung tipe tel saat ini.

Contoh

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

Coba Sendiri

Tipe Input: url

<input type="url"> Untuk bidang input yang seharusnya mengandung alamat URL.

Berdasarkan dukungan browser, bidang URL dapat diverifikasi otomatis saat disubmit.

Beberapa ponsel cerdas mengidentifikasi tipe URL dan menambahkan ".com" ke papan tombol untuk mencocokkan input URL.

Contoh

<form>
  Tambahkan halaman rumah anda:
  <input type="url" name="homepage">
</form>

Coba Sendiri