- Text
Type text digunakan untuk membentuk kotak isian.
- Submit
Type submit digunakan untuk membuat tombol submit pada form (tombol ekesekusi) yang ditargetkan pada action.
-Button
Type button digunakan untuk membuat tombol tetapi defaultnya tidak ada aksi, kecuali jika memang diberikan seperti melalui javascript dengan parameter id. Berbede dengan submit yang khusus untuk eksekusi.
- Checkbox
Type checkbox digunakan untuk memilih pilihan dengan memberi tanda centang. Pilihan boleh lebih dari satu. Jika ingin membuat pilihan terpilih secara default, beri nilai checked.
-Radio
Type radio mirip dengan checkbox dar segi fungsi, tetapi berbeda dalam tampilan, dan hanya satu pilihan yang dapat dipilih dalam satu waktu.
- Password
Type password digunakan untuk membuat teks isian dalam bentuk password (bulat-bulat hitam), ketika teks dimasukkan ke dalamnya.
- File
Type file digunakan untuk upload file dokumen (gambar, file, video).
- Reset
Type reset digunakan untuk membatalkan (mereset) form, mengembalikan keadaan form seperti semula.
-Hidden
Type hidden digunakan untuk membuat suatu elemen yang tidak tampak tetapi ada, nilainya akan dikirimkan ke server (via php).
Elemen penting lain form adalah <textarea>, meskipun bukan tergolong ke dalam input type - tetapi berdiri sendiri. Textarea digunakan untuk membuat teks isian, tempat menulis isi artikel jika dijelaskan lebih sederhana, sedangkan text isian biasa - untuk judul artikel. Lebih gamblangnya seperti itu.
Elemen kedua adalah <select> untuk membuat daftar pilihan secara vertikal. Hanya satu pilihan yang dapat dipilih dalam satu waktu.
Dari penjabaran di atas, berikut penulisannya dalam kode html. input.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Input type html</title>
<!-- Css ini hanya tambahan, hanya untuk mempercantik tampilan
elemen form, tidak menjadi syarat.
-->
<style type="text/css">
body{background-color:#F5F5F5;}
input{border:1px solid #BFBFBF;padding:6px;margin-bottom:5px;}
input.sz{width:300px;}
input:focus{border:1px solid #000;}
.bt{padding:6px;font-weight:bold;-moz-border-radius:2px;
-webkit-border-radius:2px;border-radius:2px;border:1px solid #2D6066;
width:100px;background-color:#03B9D0;color:#fff;
}
.bt:hover{
background-color :#02AABF;-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
border:1px solid #2E3131;
}
textarea{width:500px;height:300px;font-family:Tahoma, Verdana; font-size:12px;}
</style>
</head>
<body>
<form>
<!-- text-->
<input type="text" maxlength="40" name="nama" class="sz" />
<br />
<!-- submit-->
<input type="submit" value="Simpan" class="bt"/>
<br />
<!-- button-->
<input type="button" value="Go" class="bt"/>
<br />
<!-- checkbox-->
<input type="checkbox" name="pisang" value="Pisang" checked> Pisang
<input type="checkbox" name="apel" value="Apel"> Apel
<input type="checkbox" name="melon" value="Melon"> Melon
<input type="checkbox" name="Pir" value="Melon" checked> Pir
<br />
<!-- radio-->
<input type="radio" name="radio1" value="Pisang" checked> Pisang
<input type="radio" name="radio1" value="Apel"> Apel
<input type="radio" name="radio1" value="Melon"> Melon
<input type="radio" name="radio1" value="Melon"> Pir
<br />
<!-- password-->
<input type="password" maxlength="20" class="sz" name="mypass" />
<br />
<!-- file-->
<input type="file" name="fileU" class="sz" />
<br />
<!-- file-->
<input type="reset" value="Batalkan" class="bt"/>
<br />
<!-- hidden-->
<input type="hidden" value="123dh3298ag3" name="idunik"/>
<br />
<!-- texarea-->
<textarea name="txtarea"></textarea>
<br />
<!-- select-->
<select name="pilih">
<option value="arsenal">Arsenal</option>
<option value="chelsea">Chelsea</option>
<option value="mu">Manchester United</option>
<option value="lvpool">Liverpool</option>
<br />
<br />
</select>
</form>
</body>
</html>
Keterangan: Penambahan atribut class digunakan untuk memanggil css, bukan bagian dari input type.
Tampilan input type.
^Baca juga: Membuat form dengan tag <form>.
Referensi tulisan:
- <input>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 11 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
No comments:
Post a Comment