MENGENAL TAG INPUT II

Melanjutkan dari posting sebelumnya yaitu Mengenal Tag Input, jika sebelumnya adalah tentang input dan typenya, kali ini akan sedikit membahas serta dengan contoh penggunaan beberapa atribut yang lain dalam tag <input/> terkait dalam membuat sebuah form.
Beberapa atribut yang di maksud, yang juga telah tercantumkan pada postingan sebelumnya antara lain:

• size
• maxlength
• checked
• disabled
• src

size

Jika ditulis:

<form>
Nama:<br/>
<input type="text" size="10"/><br/>
Lahir:<br/>
Tgl:<input type="text"size="2"/> Bln:<input type="text"size="2"/> <br/> Thn:<input type="text"size="4"/> <br/>
<input type="submit" value="Kirim"/> </form>

Hasilnya adalah:

Nama:

Lahir:
Tgl: Bln: Thn:

Pada contoh di atas, bidang input nama berukuran "10", Tgl berukuran "2" , Bln berukuran "2" , dan Thn berukuran "4" .

Maxlength

Jika ditulis:

<form>
Pengguna:<br/>
<input type="text" maxlength="10"/><br/>
Password:<br/>
<input type="password" maxlength="8"/><br/> <input type="Submit" value="Login"/>
</form>

Hasilnya adalah:

Pengguna :

Password :

Contoh di atas menjelaskan, panjang maksimal karakter/maxlength dari bidang input Pengguna adalah "10", dan maxlength pada bidang inputPassword adalah "8".
Atribut ini akan berfungsi dengan baik jika disertakan pada input type text dan input type Password.

Checked

Jika ditulis:

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

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

Atribut checked berfungsi untuk menentukan unsur input terpilih pada saat suatu halaman WEB di buka.
Atribut ini akan berfungsi dengan baik pada input type checkbox dan type radio.

Disabled

Jika ditulis:

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

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

Atribut disabled memungkinkan sebuah/beberapa pilihan dalam unsur input akan menjadi tidak aktif dalam kondisi tertentu.
Atribut ini akan berfungsi dengan baik pada input type checkbox dan type radio

Src

Jika ditulis:

<form>
Nama:<br/>
<input type="text"/><br/>
Umur:<br/>
<input type="text"/><br>
<input type="image" src="http://i676.photobucket.com/albums/vv122/sung_sun6/submit.gif"/>
</form>

Hasilnya adalah:

Nama:

Umur:

Dalam penggunaanya, atribut src harus selalu disertakan pada input type img.
Yaitu berfungsi untuk menentukan lokasi gambar berada.

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

MEMBUAT FORMULIR HTML

Tag <form>

Tag <form> mendefinisikan sebuah formulir yang berfungsi untuk menerima masukan data dari pengguna. Dalam pemrosesan dari sebuah formulir, adalah diperlukan bahasa pemrograman tertentu seperti javascript, php, ataupun asp.
Dan dalam penggunaanya, tag <form> akan disisipi dengat tag <input> yang berfungsi untuk menampilkan bentuk/type input dari formulir tersebut. Beberapa type input yang dimaksud antara lain, chekbox, radio, submit, text, dan password. Silahkan baca Mengenal Elemen Input.
Dan, gabungan antara tag< form> dan <input> juga masih dapat dikombinasikan dengan tag yang lain seperti select/option, textarea, dan fieldset/legend.. Sehingga akan membentuk tampilan form yang berbeda. Step by step, terlebih dahulu kali ini akan sedikit mengulas tentang tag <form>.
Atribut standar untuk tag <form> antara lain:

action

Untuk menentukan lokasi penerimaan input data yang dikirim. Nilai yang digunakan adalah berupa URL.

method

Untuk menentukan cara bagaimana data input dari pengguna akan dikirim. Nilai yang digunakan yakni, "get" dan "post" .

Contoh sederhana dalam penggunaanya adalah sebagai berikut:

Jika di tulis:

<form action="diisi url" method="get">
Nama:<br/>
<input/> <br/>
Umur:
<input/><br/>
<input type="submit" value="Kirim"><br/>
</form>

Hasilnya adalah:

Nama:

Umur:

Karena tag <form> tidak berfungsi untuk mempengaruhi pada tampilan, maka hasil yang ditampilkan pada contoh diatas adalah karena fungsi dari tag <input>.
Dan juga, tidak akan menunjukan hasil apapun (eror) karena tidak dilengkapi dengan bahasa-bahasa terkait dengan pemrosesanya. Untuk melihat beberapa contoh sederhana dalam membuat formulir dengan tampilan yang berbeda dengan menggunakan elemen yang berbeda pula, silahkan klik beberapa link di bawah ini:

1. Select/option
2. Textarea
3. Fieldset/Legend

Sebelumnya | Berikutnya

DAFTAR PILIHAN DROP DOWN

Untuk membuat daftar pilihan drop-down adalah dengan menggunakan tag <select> dan <option>.
Drop-down itu seperti apa?
Daftar pilihan dengan gaya jatuh ke bawah, kurang lebih tampilanya sederhananya adalah seperti ini:

Sony Ericsson Nokia Samsung Motorola Siemens

Pada umumnya, tampilan daftar pilihan drop-down akan dibarengi dengan tampilan prosesornya. Dan untuk menampilkan "pemrosesnya", tag yang diperlukan adalah <form> dan <input>.
Contoh tampilannya kurang lebih akan jadi seperti ini:

Sony Ericsson Nokia Samsung Motorola Siemens

Oleh karena disini sedang membahas tentang bahasa HTML yang terkait dengan tampilan, maka pada contoh diatas tidak akan menghasilkan apapun jika di klik pada "Beli Sekarang". Diperlukan bahasa lain diluar HTML untuk dapat memrosesnya, yaitu PHP ataupun Javascript (saya sendiri masih belum banyak mengetahui).

Tag <select>

Atribut yang digunakan antara lain:

disabled

Untuk menampilkan daftar pilihan dalam kondisi tidak aktif. Nilainya adalah, "disabled"

multiple

Untuk menampilkan jumlah item yang akan ditampilkan dalam daftar , harus di ikuti dengan atribut "size". Nilai untuk multiple adalah "multiple".

name

Tidak mempengaruhi pada tampilan, berfungsi untuk dapat dikenali oleh bahasa pemrosesnya.

size

Untuk menentukan jumlah pilihan yang akan ditampilkan. Nilainya, "angka".

Contoh:

Jika ditulis:

<select disabled="disabled">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

Sesuai dengan pengalaman saya sendiri, atribut ini tidak menampilkan sebagaimana mestinya pada browser ponsel, namun tampak jelas pada browser operamini.

Contoh berikutnya dengan atribut "multiple" dan "size"
Jika ditulis:

<select multiple="multiple" size="2">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

Baik pada browser operamini, kurang maksimal pada browser ponselku .

Tag <option>

Atribut yang di gunakan antara lain:

disabled

Untuk item daftar, dalam kondisi tertentu akan menjadi tidak aktif.

Selected

Untuk menentukan item yang akan muncul pada tampilan standar.

Value

Tidak mempengaruhi apapun dalam tampilan, atribut ini sangat penting terkait dengan pemrosesan daftar yang akan di kirim ke server. Dan tentunya adalah dengan menggunakan bahasa lain diluar HTML.

Contoh:

Jika ditulis:

<select>
<option>Pilihan 1</option>
<option disabled="disabled">Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

"disabled" untuk <option>, hasilnya tidak trelihat pada browser ponsel ataupun operamini.

Contoh dengan "selected" dan "value".
Jika ditulis:

<select>
<option value="pil1">Pilihan 1</option>
<option selected="selected" value="pil2">Pilihan 2</option>
<option value="pil3">Pilihan 3</option>
<option value="pil4">Pilihan 4</option>
<option value="pil5">Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

Atribut "selected" sangat baik pada browser manapun.

Sebelumnya | Berikutnya