BAB 026 - (Form) Tipe Input

Tipe Input HTML

Ada banyak tipe input yang didukung HTML 5, yaitu :

  • <input type="text">
  • <input type="password">
  • <input type="submit">
  • <input type="reset">
  • <input type="button">

  • <input type="radio">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="month">
  • <input type="datetime-local">
  • <input type="time">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="range">
  • <input type="search">
  • <input type="tel">
  • <input type="url">
  • <input type="week">

 

 

<input type="text">

<input type="text"> adalah sebuah input text box 1 baris.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="password">

<input type="password"> adalah sebuah input text box 1 baris dengan karakternya disamarkan dengan tanda bintang/lingkaran.

Contoh :

Cobalah utak-atik contoh diatas


 

<input type="submit">

<input type="submit"> sebuah tombol untuk mengirim seluruh input data ke kehalaman berikutnya sesuai action form untuk diproses. (tombol kirim).

Contoh :

Cobalah utak-atik contoh diatas


 

<input type="reset">

<input type="reset"> untuk mereset ulang semua input data ke tampilan awal.

Contoh :
(cobalah isi textbox lalu tekan tombol reset)

Cobalah utak-atik contoh diatas


 

<input type="button">

<input type="button"> adalah input tipe tombol/button.

Input tipe button jarang digunakan didalam form (biasanya menggunakan tipe submit), biasanya digunakan untuk memanggil perintah Java Script.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="radio">

<input type="radio"> adalah input tipe radio button.

Input ini memiliki atribut checked untuk memberikan nilai awal terpilih.

Contoh :

Cobalah utak-atik contoh diatas

 

 


<input type="checkbox">

<input type="checkbox"> adalah input tipe check box.

Input ini memiliki atribut checked untuk memberikan nilai awal terpilih.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="color">

<input type="color"> adalah input pemilihan warna.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="date">

<input type="date"> adalah input pemilihan tanggal.

Input ini memiliki atribut min & max jika menginginkan adanya batasan tanggal.


Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="month">

<input type="month"> adalah input pemilihan Bulan & Tahun.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="datetime-local">

<input type="datetime-local"> adalah input pemilihan tanggal.dan waktu, dengan tidak ada zona waktu.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="time">

<input type="time"> adalah input pemilihan waktu, dengan tidak ada zona waktu.

Contoh :

Cobalah utak-atik contoh diatas

 

 


<input type="email">

<input type="email"> adalah sebuah input text box 1 baris deangan validasi format email.

Contoh :

Cobalah utak-atik contoh diatas


 

<input type="file">

<input type="file"> adalah input pemilihan file dengan tombol "browse".

Input ini biasanya digunakan untuk upload file.

Contoh :

Cobalah utak-atik contoh diatas

 


<input type="number">

<input type="number"> adalah sebuah input text box 1 baris deangan validasi format number integer.

Input tipe ini memiliki atribut min & max, jika diinginkan adanya batasan.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="url">

<input type="url"> adalah sebuah input text box 1 baris deangan validasi format URL.

Contoh :

Cobalah utak-atik contoh diatas

 

 

<input type="range">

<input type="range"> adalah sebuah slider yang dapat digeser untuk memilih angka dari range number.

Kisaran default adalah 0 sampai 100. Namun, kita dapat mengatur pembatasan nomor apa yang diterima dengan atribut min, max, dan step

Contoh :

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

 

 

<input type="search">

<input type="search"> adalah sebuah input text box 1 baris untuk pencarian (search).

Perilaku Input tipe ini sama seperti input tipe teks biasa.

Contoh :

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

 

 

<input type="tel">

<input type="tel"> adalah sebuah input text box 1 baris deangan validasi format nomor telepon.

Contoh :

<form>
    Telephone:
    <input type="tel" name="telp">
</form>

 

 

<input type="week">

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

Input tipe ini jarang digunakan, hanya dibutuhkan dalam suatu kondisi khusus tertentu saja.

Contoh :

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

 


Sebelumnya
BAB 025 - (Form) Atribut Input
  Berikutnya
BAB 027 - (Form) Input Lainnya

 

(0) Komentar

Beri komentar





Hanya komentar yang sudah di-approve admin yang tampil.

KESIMPULAN : Tipe Input HTML Ada banyak tipe input yang didukung HTML 5, yaitu : <input type="text"> <input type="password"> <input type="submit"> <input type="reset"> <input type="button"> <input type="radio"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="month"> <input type="datetime-local"> <input type="time"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="range"> <input type="search"> <input type="tel"> <input type="url"> <input type="week">     <input type="text"> <input type="text"> adalah sebuah input text box 1 baris. Contoh : Cobalah utak-atik contoh diatas     <input type="password"> <input type="password"> adalah sebuah input text box 1 baris dengan karakternya disamarkan dengan tanda bintang/lingkaran. Contoh : Cobalah utak-atik contoh diatas   <input type="submit"> <input type="submit"> sebuah tombol untuk mengirim seluruh input data ke kehalaman berikutnya sesuai action form untuk diproses. (tombol kirim). Contoh : Cobalah utak-atik contoh diatas   <input type="reset"> <input type="reset"> untuk mereset ulang semua input data ke tampilan awal. Contoh : (cobalah isi textbox lalu tekan tombol reset) Cobalah utak-atik contoh diatas   <input type="button"> <input type="button"> adalah input tipe tombol/button. Input tipe button jarang digunakan didalam form (biasanya menggunakan tipe submit), biasanya digunakan untuk memanggil perintah Java Script. Contoh : Cobalah utak-atik contoh diatas    <input type="radio"> <input type="radio"> adalah input tipe radio button. Input ini memiliki atribut checked untuk memberikan nilai awal terpilih. Contoh : Cobalah utak-atik contoh diatas     <input type="checkbox"> <input type="checkbox"> adalah input tipe check box. Input ini memiliki atribut checked untuk memberikan nilai awal terpilih. Contoh : Cobalah utak-atik contoh diatas     <input type="color"> <input type="color"> adalah input pemilihan warna. Contoh : Cobalah utak-atik contoh diatas     <input type="date"> <input type="date"> adalah input pemilihan tanggal. Input ini memiliki atribut min & max jika menginginkan adanya batasan tanggal. Contoh : Cobalah utak-atik contoh diatas     <input type="month"> <input type="month"> adalah input pemilihan Bulan & Tahun. Contoh : Cobalah utak-atik contoh diatas     <input type="datetime-local"> <input type="datetime-local"> adalah input pemilihan tanggal.dan waktu, dengan tidak ada zona waktu. Contoh : Cobalah utak-atik contoh diatas     <input type="time"> <input type="time"> adalah input pemilihan waktu, dengan tidak ada zona waktu. Contoh : Cobalah utak-atik contoh diatas     <input type="email"> <input type="email"> adalah sebuah input text box 1 baris deangan validasi format email. Contoh : Cobalah utak-atik contoh diatas   <input type="file"> <input type="file"> adalah input pemilihan file dengan tombol "browse". Input ini biasanya digunakan untuk upload file. Contoh : Cobalah utak-atik contoh diatas   <input type="number"> <input type="number"> adalah sebuah input text box 1 baris deangan validasi format number integer. Input tipe ini memiliki atribut min & max, jika diinginkan adanya batasan. Contoh : Cobalah utak-atik contoh diatas     <input type="url"> <input type="url"> adalah sebuah input text box 1 baris deangan validasi format URL. Contoh : Cobalah utak-atik contoh diatas     <input type="range"> <input type="range"> adalah sebuah slider yang dapat digeser untuk memilih angka dari range number. Kisaran default adalah 0 sampai 100. Namun, kita dapat mengatur pembatasan nomor apa yang diterima dengan atribut min, max, dan step Contoh : <form>      <input type="range" name="intensitas" min="0" max="10"> </form>     <input type="search"> <input type="search"> adalah sebuah input text box 1 baris untuk pencarian (search). Perilaku Input tipe ini sama seperti input tipe teks biasa. Contoh : <form>      Search Google :      <input type=" search" name="googlesearch"> </form>     <input type="tel"> <input type="tel"> adalah sebuah input text box 1 baris deangan validasi format nomor telepon. Contoh : <form>     Telephone:     <input type="tel" name="telp"> </form>     <input type="week"> <input type="week"> memungkinkan pengguna untuk memilih satu minggu dan satu tahun. Input tipe ini jarang digunakan, hanya dibutuhkan dalam suatu kondisi khusus tertentu saja. Contoh : <form>      Pilih minggu :      <input type="week" name="weeks"> </form>  

 

 

Step By Step Belajar HTML 5

 

 

Artikel Lainnya :