Okehh, skrang kita akan mempelajari tentang form, kegunaan form adalah dapat menampung inputan dan juga berkaitan erat dengan pemrograman. Tetapi di sini gw cuma akan membahas sampai UI nya saja, jadi hanya tampilanya saja terlebih dahulu, ok..check this out!

9.Form

Pertama-tama saya akan mengajarkan cara membuat sebuah form yang sangat simpel.

Lihat coding di bawah ini:

<html><body> 

<form>

Nama:<input type=”text” name=”nama” size=”15″ maxlength=”15″ value=”Evan” /> <br/>

Password:<input type=”password” name=”pass”  value=”1234″/> <br/>

<input type=”submit” value=”Log in”/>

<input type=”reset” value=”Out”/>

</form>

</body>

</html>

Hasilnya seperti di bawah berikut :

 

Nama: 

Password:

 

Pada atribut type jika kita beri nilai password, maka tampilanya akan seperti gambar di atas. Untuk nilai submit dan reset, kita dapat menambahkan atribut method dan action pada tag form agar dapat berpindah ke halaman lain jika kita ketik log in atau log out. Tampilan form di atas juga terlihat kurang rapih, kita dapat merapihkanya dengan cara menggunakan tabel.

Selanjutnya kita akan membahas tentang checkbox dan kawan-kawan nya.

<html><body> 

<form>

Daftar Hobi  (ini checkbox)<br/>

<input type=”checkbox”/>Belajar<br/>

<input type=”checkbox”/>Ngoding<br/>

<input type=”checkbox”/>Posting<br/>

Jenis kelamin (ini radi0 button)<br/>

<input type=”radio” name=”kelamin”/ checked>Laki <br/>

<input type=”radio” name=”kelamin”/>Perempuan <br/>

Komentar anda: (ini textarea)

<textarea name=”komentar” cols=”20″ row=”5″>

</textarea> <br/>

Ini adalah combo box :

<select name=”Jurusan”>

<option value=”it”> IT

<option value=”ekonomi”> Ekonomi

<option value=”psikologi”> Psikologi

<option value=”bahasa”> Bahasa

</select>

Ini adalah listbox:

<select name=”Jurusan” multiple />

<option value=”it”> IT

<option value=”ekonomi”> Ekonomi

<option value=”psikologi”> Psikologi

<option value=”bahasa”> Bahasa

</select>

</form>

</body>

</html>

Hasilnya adalah sebagai berikut :

Daftar Hobi (ini checkbox) 

BelajarNgoding 

Posting

Jenis kelamin (ini radi0 button)

Laki

Perempuan

Komentar anda: (ini textarea)

Ini adalah combo box :

IT Ekonomi Psikologi Bahasa Ini adalah listbox:

IT Ekonomi Psikologi Bahasa

PENTING!!!

Hasilnya karena berhubung themes yang dipakai membuat hasilnya menjadi selalu berbeda, kalian dapat mencobanya sendiri mengetikan Semua coding di atas dan lihat hasilnya. Next kita bakal belajar CSS, semoga bermanfaat postingan di atas. God Bless You..^^