Anda di halaman 1dari 21

HTML5 FORM

AMIROH, S.Kom
SMKN 3 JOMBANG
TIPE INPUT
HTML5
Input Type: Color
 Merupakan atribut elemen <input> yang digunakan untuk
menampilkan form berupa pilihan warna
 Cara penulisan:
<input type="color">
Hasilnya..
Input Type: date
 Digunakan untuk menampilkan form berupa
pilihan data tanggal/bulan/tahun
 Cara penulisan:
<input type=“date">
Hasilnya..
Input Type: range

 Digunakan untuk menampilkan form berupa


rentang data tertentu
 Cara penulisan:
<input type=“range">
Hasilnya
Input Type: email

 Digunakan untuk menampilkan form data email user


 Dengan menggunakan tipe ini, alamat email yang
dimasukkan user akan secara otomatis divalidasi oleh
browser
 Cara penulisan:
<input type=“email">
Input Type: search
 Digunakan untuk menampilkan form berupa pencarian
data tertentu
 Cara penulisan:
<input type=“search">
Input Type: search
 Digunakan untuk menampilkan form berupa pencarian
data tertentu
 Cara penulisan:
<input type=“search">
Input Type: search
 Digunakan untuk menampilkan form berupa pencarian
data tertentu
 Cara penulisan:
<input type=“search">
Input Type: image  
 Digunakan untuk mengganti tombol submit
dengan gambar tertentu
 Contoh:
INPUT Attributes
Attribute: VALUE
 Digunakan untuk memberi nilai awal pada sebuah
inputan form
 Contoh:
Attribute: readonly
 Digunakan untuk menentukan inputan berupa
data yang tidak bisa diubah (read only)
 Contoh:
Attribute: disabled 
 Digunakan untuk menentukan sebuah inputan
adalah disabled
 Contoh:
Attribute: size 
 Digunakan untuk menentukan ukuran (lebar)
sebuah field dalam ukuran character
 Contoh:
Attribute: maxlength  
 Digunakan untuk menentukan banyaknya inputan
karakter yang diperbolehkan
 Contoh:
Attribute: height and width
 Digunakan untuk menentukan tinggi dan lebar
image (gambar)
 Atribut ini khusus digunakan pada INPUT dengan
type=“”image”
 Contoh:
Referensi
 http://
www.w3schools.com/html/html_form_elements
.asp
 http://
www.w3schools.com/html/html_form_attribute
s.asp
 http://
www.w3schools.com/html/html_form_input_ty
pes.asp

Anda mungkin juga menyukai