Macam-macam input type pada html

Setelah sebelumnya kita belajar bagaimana caranya membuat form inputan dengan HTML, selanjutnya kita akan mencoba mengenal berbagai macam type yang ada pada tag inputan. Sebelumnya jika yang masih ingin mengulang kembali atau yang belum sempat baca postingan sebelumnya tentang bagaimana cara membuat form inputan dengan HTML bisa dilihat disini . Oke langsung saja dibawah ini akan saya paparkan beberapa type tag input dimulai dari Text, Multiple, Radio Button dan lain sebagainya.

a.      Text

Type text menampilkan input data berupa kotak yang dapat diisi sebaris tulisan

Nama Barang<input type=”text” name=”nama” size=”30″ maxlength=”30″></td>

Hasilnya :

Macam-macam input type pada html

Size digunakan untuk menentukan ukuran kotak isian

Maxlenght digunakan untuk menentukan jumlah maksimal karakter yang dapat dimasukkan

b.      Multiple

Multiple digunakan untuk menampilkan lebih dari satu pilihan dari daftar tampilan.

Jenis Barang<select name=”jenis”><option value=0 selected> -Pilih Jenis- </option><option value=”elektronik”> elektronik </option><option value=”alattulis”> Alat Tulis </option><option value=”perabot”> Perabot </option>

</select>

Hasilnya :

Macam-macam input type pada html

c.       Radio button

Jenis ini menghasilkan pilihan lebih dari satu , tapi hanya dapat memilih 1 saja.

Kondisi<input type=”radio” name=”kondisi” value=”bagus”> Bagus<input type=”radio” name=”kondisi” value=”agak_rusak”> Agak Rusak<input type=”radio” name=”kondisi” value=”rusak”> Rusak

Hasilnya :

Macam-macam input type pada html

Name pada radio harus diberi nama yang sama, hal ini bertujuan agar form isisan hanya dapat dicentang 1 saja.

d.      Textarea

Jenis ini sama seperti jenis text tetapi dapat diisi tulisan yang cukup banyak

Tempat<textarea name=”tempat” cols=”50″ rows=”5″></textarea>

Hasilnya :

Macam-macam input type pada html

e.      File

Jenis ini digunakan untuk mengupload file dari kamputer

Foto Barang<input type=’file’ name=’foto’/>

Hasilnya :

Macam-macam input type pada html

f.        Submit

Jenis submit digunakan untuk mengirim data yang sudah diinputkan user ke proses selanjutnya secara bersamaan.

            <input type=”submit” name=”Submit” value=”Kirim”>

Hasilnya :

Macam-macam input type pada html

 

 

g.      Reset

Reset digunakan untuk mengosongkan kembalidata yang telah dituliskan oleh user

            <input type=”reset” name=”reset” value=”Reset”>

Macam-macam input type pada html

Itulah beberapa macam type tag input, semoga bisa menambah pengetahuan kita mengenai pembuatan tampilan pada sebuah halaman web dengan html. Terima kasih

Pada kesempatan kali ini saya akan memberikan pengetahuan tentang Mengenal macam-macam type pada tag input, dimana masing-masing type pada input ini menentukan hasil pada browser nya. Baik berikut ini saya akan memberikan nama-nama type yang akan nanti kita implementasikan diantaranya adalah input type

  • text
  • number
  • email
  • button
  • url
  • radio
  • checkbox
  • submit

Beberapa macam type input diatas akan kita coba menuliskan script nya dan melihat masing-masing hasilnya, sangat penting untuk membuat sebuah form daftar seperti facebook, email, twitter dll. Nah langsung saja kita coba ketikkan script nya pada text editornya, lalu teman-teman ketikkan script seperti gambar di bawah ini

Macam-macam input type pada html
Macam-macam input type pada html

Kemudian save dan jalankan pada browser nya lalu isikan, maka hasilnya seperti gambar di bawah ini

Macam-macam input type pada html
Macam-macam input type pada html

Berikutnya saya akan menjelaskan Mengenal macam-macam type pada tag input dan masing-masing type yang sudah kita implementasikan

  • type=”text” : untuk input angka ataupun huruf jika di input text atau huruf tidak akan merah input nya.
  • type=”number” : input ini hanya khusus untuk input angka, jika di isikan huruf maka akan berwarna merah pertanda harus diisikan hanya angka saja.
  • type=”email” : input ini hanya boleh di isikan khusus email saja, jika di inputkan selain email maka akan berwarna merah pertanda harus diisikan hanya email saja.
  • type=”button” : input ini adalah button klik input, biasanya di pakai untuk kirim data.
  • type=”url” : input ini khusus hanya inputan url saja atau halaman website dll, selain url maka akan berwarna merah pertanda harus diisikan hanya url saja.
  • type=”radio” : input ini berbentuk bulat, biasanya di pakai untuk menentukan satu pilihan dari beberapa pilihan yang ada.
  • type=”checkbox” : input ini sama seperti type=”radio” namun input ini bisa memilih banyak pilihan dari beberapa pilihan.
  • type=”submit” : input ini sama dengan type=”button” untuk mengirim data.

Berikutnya kita akan isikan masing-masing input yang sudah kita buat, saya akan input secara asal terlebih dahulu supaya kita tahu input akan berwarna merah pertanda harus di isikan sesuai type nya.

Macam-macam input type pada html
Macam-macam input type pada html

Nah seperti kalian lihat pada gambar di atas ini, input akan berwarna merah jika tidak sesuai dengan input nya. Selanjutnya saya akan mengisi nya sesuai type nya

Macam-macam input type pada html
Macam-macam input type pada html

Bisa teman-teman lihat pada gambar di atas ini, ketika saya isikan sesuai type nya maka tidak akan berwarna merah, dan datanya pasti akan bisa langsung di proses beda halnya jika input berwarna merah data tidak di proses dan mengharuskan kita mengisikan sesuai yang di perintahkan.

Teman-teman juga bisa lihat demo nya disini

Sekian dulu pada tutorial Dumet School kali ini tentang Mengenal macam-macam type pada tag input, kita berjumpa lagi pada artikel berikutnya. Semoga bermanfaat, terimakasih dan sampai jumpa.

Apa saja elemen input?

Terdapat berbagai macam jenis elemen input di dalam form:.
password..
textarea..
select..
select multiple..
checkbox..
radio..

Jelaskan apa yang dimaksud dengan input type?

<input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa teks pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text.

Apa fungsi type pada HTML?

Fungsi Tag Input Type Text dan Type Password dalam pembuatan Form HTML. Secara umum, kedua type tag input ini berfungsi sebagai kolom isian dari user. Dengan perbedaan untuk type=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus.

Apa fungsi form action pada HTML?

Atribut action berfungsi untuk menentukan URL tujuan di mana data dari suatu <form> akan dikirimkan lalu diolah ketika ia disubmit. Jadi ketika suatu form disubmit, browser akan mengirimkan seluruh data yang ada pada form tersebut menuju URL yang didefinisikan dalam atribut action .