MENGENAL TAG INPUT

Tag <input>

Tag <input> menentukan bentuk field bidang input yang akan ditampilkan dalam sebuah formulir. Dan dalam penggunaanya, tag <input> ini tidak mengharuskan tag pembuka dan penutupnya secara terpisah, <input> dan </input>. Cukup dengan satu elemen yang merupakan pembuka sekaligus penutupnya, yaitu dengan memberi tanda slash (/) di akhir sebelum tanda (>), sehingga menjadi <input/>.

Beberapa atribut untuk tag input antara lain:

type

Untuk menentukan tampilan bidang input. Nilai yang dapat digunakan antara lain adalah:

• "text" (standar) =>
  
• "checkbox" =>contoh
  
• "radio" => contoh.
  
• "password" =>
  
• "submit" =>
  
• "file" =>
  
• "image".

name

Berfungsi untuk mengidentifikasi formulir pada saat setelah dikirim ke server. Atribut ini tidak mempengaruhi pada tampilan, nilai yang digunakan adalah bisa di isi apapun.

value

Untuk memberikan nilai pada type input terkait. Nilainya adalah bisa diisi apapun.

size

Untuk menentukan lebar bidang. Nilai yang diperlukan adalah, "di isi angka"

maxlength

Untuk menentukan jumlah maksimal karakater yang dapat dimaksukan. Atribut ini hanya untuk disertakan pada type "text" atau "password"

disabled

Berfungsi untuk menon-aktifkan bidang input dalam kondisi tertentu. Nilai yang digunakan adalah "disabled"

checked

Untuk menentukan pilihan standar yang tampilkan pada saat browser dibuka. Atribut ini untuk disertakan pada input type "checkbox" dan "radio".
Nilai yang digunakan adalah "checked".

src

Untuk menentukan lokasi gambar yang digunakan sebagai tombol submit. Dan tentunya, atribut ini untuk disertakan pada input type "image".
Nilai yang digunakan adalah, "Diisi URL".

Berikut ini adalah beberapa contoh, bagaimana cara kerja tag <input/> dengan menggunakan atribut type dalam membuat sebuah formulir.

TEXT&PASSWORD
Jika ditulis:

<form>
Pengguna:<br/>
<input type="text"/><br/>
Sandi:<br/>
<input type="password"/><br/>
<input type="submit" value="Masuk"/>

Hasilnya adalah:

Pengguna:

Sandi:

Pada contoh diatas, lihat dan perhatikan juga bagaimana cara kerja <input type="submit" value="Kirim"/>.

CHECKBOX
Memungkinkan pengguna untuk menentukan pilihan dengan tanda centang.
Jika ditulis:

<form>
<input type="checkbox" name="Senin"/>Senin
<input type="checkbox" name="Selasa"/>Selasa
<input type="checkbox" name="Rabu"/>Rabu
<input type="checkbox" name="Kamis"/>Kamis
<input type="checkbox" name="Jumat"/>Jumat
<input type="checkbox" name="Sabtu"/>Sabtu
<input type="checkbox" name="Minggu"/>Minggu
<input type="submit" value="Kirim"/></form>

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

RADIO
Jika ditulis:

<form>
<input type="radio" name="Senin"/>Senin
<input type="radio" name="Selasa"/>Selasa
<input type="radio" name="Rabu"/>Rabu
<input type="radio" name="Kamis"/>Kamis
<input type="radio" name="Jumat"/>Jumat
<input type="radio" name="Sabtu"/>Sabtu
<input type="radio" name="Minggu"/>Minggu

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

FILE&SUBMIT
Jika ditulis:

<form>
<input type="file"/>
<input type="submit" value="upload"/>
</form>

Hasilnya adalah:

IMAGE
Jika ditulis:

<form>
Pengguna:<br/>
<input type="text"/><br/>
Sandi:<br/>
<input type="password"/><br/>
<input type="image" src="http://i676.photobucket.com/albums/vv122/sung_sun6/submit.jpg"/>

Hasilnya adalah:

Pengguna:

Sandi:

Sebelumnya | Berikutnya

Silahkan baca juga yang ini:

---