HTML Jenis Input

Pelajari Tutorial HTML5 Lainya Disini 01. Pendahuluan HTML5 02. Dasar HTML 03. Atribut dan Pos HTML 04. Paragraf dan Style HTML 05. Format Teks Elemen HTML 06. Kutipan HTML 07. HTML Komputer Elemen 08. HTML Komentar 09. HTML Styles - CSS 10. Link HTML 11. HTML Images 12. Tabel HTML 13. HTML List 14. HTML Block Elemen dan Class 15. HTML Layout 16. HTML Web Responsif dan Iframe 17. Element HEAD HTML 18. Entitas HTML 19. Simbol HTML 20. HTML dan XHTML 21. Form HTML 22. HTML Form Element 23. HTML Jenis Input 24. HTML Input Attributes 25. HTML5 Intro 26. HTML5 Support 27. HTML5 New Elements 28. HTML5 Semantic Elements 29. Migrasi HTML5 30. HTML 5 Canvas 31. HTML5 SVG 32. HTML Multimedia 33. HTML5 Video dan Audio 34. HTML Plug-in dan Youtube

Jenis masukan

Bab ini menjelaskan jenis masukan dari <input> elemen.

Input Type: text

<Input type = "text"> mendefinisikan input lapangan satu-line untuk input teks:

<form>

Nama Depan:

<input type="text" name="namadepan">

<br>

Nama Belakang:

<input type="text" name="NamaBelakang">

</form>

Hasil :

Nama Depan:

Nama Belakang:

Input Type: password

<Input type = "password"> mendefinisikan field kata sandi:

<form>

Username :

<input type="text" name="username">

<br>

Password:

<input type="password" name="pswd">

</form>

Hasil :

Username :

Password:

Input Type: submit

<Input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir masukan ke bentuk-handler.

Bentuk-handler biasanya halaman server dengan script untuk memproses input data.

Bentuk-handler yang ditentukan dalam aksi atribut form:

<form action="action_page.php">

Nama Depan :

<input type="text" name="namadepan" value="Dicky"><br/>

Nama Belakang :

<input type="text" name="namabelakang" value="Andre">

<br/><br/>

<input type="submit" name="Proses" value="Kirim" >

</form>

Hasil:

Nama Depan :

Nama Belakang :

Jika Anda menghilangkan tombol submit yang value atribut, tombol akan mendapatkan teks default:

<input type="submit" >

Hasil:

Input Type: radio

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

Tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan:

<form>

Jenis Kelamin :

<input type="radio" name="jk" value="lakilaki">Laki-laki

<input type="radio" name="jk" value="perempuan">Perempuan

</form>


Hasil:
Jenis Kelamin : Laki-laki Perempuan

Input Type: checkbox

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

Checkbox membiarkan pengguna memilih ZERO atau LEBIH pilihan dari sejumlah pilihan.

<form>

<input type="checkbox" name="checkbox" value="bike">I have a bike

<br>

<input type="checkbox" name="checkbo" value="car">I have a car

</form>

Hasil:

I have a bike

I have a car

nput Type: tombol

<Input type = "button"> mendefinisikan tombol:

<button type="button">Klik disini</button>

Hasil:

 

Jenis input HTML5

HTML5 menambahkan beberapa jenis masukan baru:

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

Input Type: Number

The <input type = "number"> digunakan untuk field input yang harus berisi nilai numerik.

Anda dapat mengatur pembatasan angka.

Tergantung pada dukungan browser, pembatasan dapat diterapkan pada bidang masukan.

<form>

Quantity (between 1 and 5)

<input type="number" name="quantity" min="1" max="5">

</form>

Input Type: date

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

Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

<form>

Birthday

<input type="date" name="date">

</form>

Anda dapat menambahkan pembatasan input:

<form>

  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31"><br>

  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02"><br>

</form>

Input Type: color

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

Tergantung pada dukungan browser, color picker dapat muncul dalam bidang masukan.

<form>

<input type="color" name="warna">

</form>

Input Type: range

The <input type = "range"> digunakan untuk field input yang harus berisi nilai dalam kisaran.

Tergantung pada dukungan browser, field input dapat ditampilkan sebagai kontrol slider.

<form>

<input type="range" name="point" max="10">

</form>

Anda dapat menggunakan atribut berikut untuk menentukan batasan: min, max, step, value.

Input Type: month

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

Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

<form>

<input type="month" name="month">

</form>

Input Type: week

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

Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

<form>

<input type="week" name="minggu">

</form>

Input Type: time

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

Tergantung pada dukungan browser, pemetik waktu dapat muncul dalam bidang masukan.

<form>

<input type="time" name="waktu">

</form>

Input Type: datetime

The <input type = "datetime"> memungkinkan pengguna untuk memilih tanggal dan waktu (dengan zona waktu).

<form>

<input type="datetime" name="datetime">

</form>

Jenis masukan datetime dihapus dari standar HTML. Menggunakan datetime-lokal sebagai gantinya.

Input Type: datetime local

The <input type = "datetime local"> memungkinkan pengguna untuk memilih tanggal dan waktu (tidak ada zona waktu).

Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

<form>

<input type="datetime-local" name="time">

</form>

Input Type: email

The <input type = "email"> digunakan untuk field input yang harus berisi alamat e-mail.

Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika diajukan.

Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan email.

<form>

<input type="email" name="email">

</form>

Input Type: search

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

<form>

<input type="search" name="cari">

</form>

Input Type: tel

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

Jenis tel saat ini didukung hanya di Safari 8.

<form>

<input type="tel" name="tel">

</form>

Input Type: url

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

Tergantung pada dukungan browser, bidang url dapat secara otomatis divalidasi ketika diajukan

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

<form>

<input type="url" name="url">

</form>

Kembali Keatas ⇑

CB Blogger