Elemen dan atribut web form HTML

Elemen <input>

Elemen atau tag <input> adalah bagian dari web form yang muncul dalam berbagai macam bentuk tergantung dari atribut type yang digunakan.

Atribut type text

Atribut type text berguna untuk memunculkan kotak text.

Contoh 1:

<form action="index.php">
Nama: <input type="text" /> <br />
<input type="submit"/>
</form>

Hasil contoh 1:

Nama:

Panjang tampilan kotak text adalah 20 character (default).

Atribut size dan maxlength

Atribut size berguna untuk mengubah panjang tampilan kotak text sedangkan atribut maxlength berguna untuk membatasi jumlah character yang bisa di-input oleh user pada kotak text.

Contoh 2:

<form action="index.php">
Nama: <input type="text"  size="20" maxlength="20" /> <br />
Nomor: <input type="text" size="3" maxlength="2" /> <br />
<input type="submit"/>
</form>

Hasil contoh 2:

Nama:

Nomor:

Atribut value

Atribut value pada kotak text berguna untuk menampilkan kotak text yang sudah terisi oleh nilai dari atribut value.

Contoh 3:

<form action="index.php">
Nama: <input type="text" value="Andika" /> <br />
<input type="submit"/>
</form>

Hasil contoh 3:

Nama:

Atribut type submit

Atribut type submit berguna untuk memunculkan tombol submit (submit button). Jika tombol submit di-click oleh user maka semua data yang telah diisi pada web form HTML akan dikirim untuk diproses lebih lanjut.

Contoh 4:

<input type="submit" value="Submit" /> <br />
<input type="submit" value="Send" /> <br />
<input type="submit" value="Submit Form" />

Hasil contoh 4:

Atribut value pada tombol submit berguna untuk mengubah text yang muncul pada tombol submit tersebut.

Atribut type checkbox

Atribut type checkbox berguna untuk memunculkan kotak check (checkbox).

Contoh 5:

<form action="index.php">
<input type="checkbox" value="renang" /> Renang <br />
<input type="checkbox" value="sepakbola" /> Sepakbola <br />
<input type="submit"/>
</form>

Hasil contoh 5:

Renang
Sepakbola

Atribut value pada checkbox berguna sebagai data yang akan dikirimkan untuk diproses jika checkbox tersebut dipilih.

User boleh mengosongkan kotak check atau memilih memberi check pada kotak check yang diinginkan.

Atribut checked

Atribut checked berguna untuk menampilkan kotak check yang sudah dipilih.

Contoh 6:

<form action="index.php">
<input type="checkbox" value="renang" /> Renang <br />
<input type="checkbox" value="sepakbola" checked="yes" /> Sepakbola <br />
<input type="submit"/>
</form>

Hasil contoh 6:

Renang
Sepakbola

Atribut type radio

Atribut type radio hampir sama dengan checkbox. Perbedaanya adalah tampilannya yang berupa lingkaran (tombol radio) dan user hanya boleh memilih salah satu dari semua pilihan tombol radio yang ada.

Contoh 7:

<form action="index.php">
<input type="radio" value="renang" /> Renang <br />
<input type="radio" value="sepakbola" /> Sepakbola <br />
<input type="radio" value="bulutangkis" /> Bulutangkis <br />
<input type="submit"/>
</form>

Hasil contoh 7:

Renang
Sepakbola
Bulutangkis

Atribut type password

Atribut type password berguna untuk memunculkan kotak password.

Contoh 8:

<form action="index.php">
<input type="password" /> <br />
<input type="submit"/>
</form>

Hasil contoh 8:

Text yang dituliskan di dalam kotak password disamarkan menjadi * atau •.

Atribut type reset

Atribut type reset berguna untuk memunculkan tombol reset yang digunakan untuk mengosongkan kembali web form yang telah terisi.

Contoh 9:

<form action="index.php">
Nama: <input type="text" /> <br />
<input type="reset" value="Reset" /> <br />
<input type="submit"/>
</form>

Hasil contoh 9:

Nama:

Atribut type hidden

Atribut type hidden tidak menampilkan apapun dan hanya berguna untuk menyimpan informasi yang telah ditentukan sebelumnya untuk kemudian di-submit.

Contoh 10:

<form action="index.php">
<input type="hidden" value="1" /> <br />
<input type="submit"/>
</form>

Hasil contoh 10:


Atribut type file

Atribut type file berguna sebagai input file yang akan di-upload oleh user.

Contoh 11:

<form action="index.php">
<input type="file" /> <br />
<input type="submit"/>
</form>

Hasil contoh 11:

Tag <textarea>

Tag <textarea> hampir sama dengan atribut type text yaitu sama-sama memunculkan kotak text. Perbedaannya adalah tag <textarea> untuk input text yang banyak seperti comment atau forum sedangkan atribut type text khusus hanya untuk input text yang tidak lebih dari satu baris.

Contoh 12:

<textarea cols="20" rows="10">Jangan lebih dari 100 characters.</textarea><br />
<textarea cols="40" rows="2">Jangan lebih dari 200 characters.</textarea><br />
<textarea cols="45" rows="5">Jangan lebih dari 500 characters.</textarea>

Hasil contoh 12:



Atribute cols dan rows berguna untuk menentukan seberapa besar kotak text yang ingin ditampilkan.

Atribute wrap

Atribute wrap berguna untuk menentukan tampilan text setelah mencapai batas paling kanan.

Atribute wrap memiliki dua pilihan yaitu soft dan hard.

Nilai Penjelasan
hard Text yang melebihi batas kanan kotak text dipindahkan ke baris baru setelah di-submit. Jika pilihan ini digunakan maka atribut cols harus digunakan
soft Text yang melebihi batas kanan kotak text ditampilkan terus menyambung ke kanan setelah di-submit (default)

Berikut ini adalah contoh penggunaan atribut wrap hard:

Contoh 13:

<textarea cols="20" rows="5" wrap="hard">
Seperti yang bisa kamu lihat bahwa text yang berada di dalam kotak text bisa diperindah sehingga visitor bisa melihat text dengan jelas dan supaya text mudah dibaca dengan menyertakan space dan line break.
</textarea>

Hasil contoh 13:

Berikut ini adalah contoh penggunaan atribut wrap soft:

Contoh 14:

<textarea cols="20" rows="5" wrap="soft">
Seperti yang bisa kamu lihat bahwa text yang berada di dalam kotak text bisa diperindah sehingga visitor bisa melihat text dengan jelas dan supaya text mudah dibaca dengan menyertakan space dan line break.
</textarea>

Hasil contoh 14:

Atribute readonly

Atribute readonly berguna untuk membuat text yang ada di kotak text tidak bisa di-edit atau diubah.

Contoh 15:

<textarea cols="20" rows="5" readonly="yes">
Seperti yang bisa kamu lihat bahwa text yang berada di dalam kotak text bisa diperindah sehingga visitor bisa melihat text dengan jelas dan supaya text mudah dibaca dengan menyertakan space dan line break.
</textarea>

Hasil contoh 15:

Atribute disabled

Atribute disabled berguna untuk membuat text yang ada di kotak text tidak bisa di-edit dan di-copy.

Contoh 16:

<textarea cols="20" rows="5" disabled="yes">
Seperti yang bisa kamu lihat bahwa text yang berada di dalam kotak text bisa diperindah sehingga visitor bisa melihat text dengan jelas dan supaya text mudah dibaca dengan menyertakan space dan line break.
</textarea>

Hasil contoh 16:

Tag <select>

Tag <select> berguna untuk memunculkan dropdown list (daftar pilihan yang bisa dibuka dan turun ke bawah)

Contoh 17:

<select>
<option value="JA" >Jakarta -- JA </option>
<option value="BA" >Bandung -- BA</option>
<option value="SU" >Surabaya -- SU</option>
</select>

Hasil contoh 17:

Tag <option> berguna untuk menambahkan pilihan yang ada di dalam dropdown list.

Atribut selected

Secara default, pilihan pertama di dalam dropdown list adalah pilihan yang ditampilkan. Atribut selected berguna untuk menentukan pilihan di dalam dropdown list yang ingin ditampilkan atau dipilih pertama kali.

Contoh 18:

<select>
<option value="JA" >Jakarta -- JA </option>
<option value="BA" selected>Bandung -- BA</option>
<option value="SU" >Surabaya -- SU</option>
</select>

Hasil contoh 18:

Atribut size

Atribut size berguna untuk menentukan jumlah pilihan yang bisa ditampilkan dalam satu waktu.

Contoh 19:

<select size="2">
<option value="JA" >Jakarta -- JA </option>
<option value="BA" >Bandung -- BA</option>
<option value="SU" >Surabaya -- SU</option>
</select>

Hasil contoh 19:

Atribut multiple

Atribut multiple berguna untuk membuat user bisa memilih lebih dari satu pilihan.

Contoh 20:

<select multiple="yes">
<option value="JA" >Jakarta -- JA </option>
<option value="BA" >Bandung -- BA</option>
<option value="SU" >Surabaya -- SU</option>
</select>

Hasil contoh 20:

Atribut disabled

Atribut disabled berguna supaya user tidak bisa mengubah pilihan yang sudah terpilih pada dropdown list.

Contoh 21:

<select disabled="yes">
<option value="JA" >Jakarta -- JA </option>
<option value="BA" >Bandung -- BA</option>
<option value="SU" >Surabaya -- SU</option>
</select>

Hasil contoh 21:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>