Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN MODUL V HTML Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN

HTML FROM Form sesuai artinya dalam bahasa indonesia adalah untuk membuat formulir inputan pada HTML. Dengan form kita dapat memasukan elemen-elemen seperti kertas formulir pada umumnya. Elemen tersebut meliputi text, textarea, drop-down menu, radio button, checkbox, button, dll.

HTML FROM Sebuah form di tuliskan dalam html dengan tag <form> Contoh: <form> . input elements </form>

HTML Forms - The Input Element Bagian form yang paling penting adalah fungsi inputan Tag input sendiri ditulis dengan <input> Fungsi inputan dapat dibagi beberapa jenis, di antaranya text field, checkbox, password, radio button, submit button, text area, dan banyak lagi

Atribut atribut yang digunakan ialah • type Disini kita menggunakan nilai "text", terdapat beberapa nilai lagi yang boleh diberikan kepada sifat type ini dan akan diterangkan kemudian. • name Nama perlu diberikan kepada elemen ini supaya pelayan web boleh mengenalpasti elemen-elemen yang hendak diproses.

• value Nilai yang diberikan kepada sifat ini akan dipaparkan. • size Lebar Input Box ini, nilai yang diberikan ialah jumlah huruf yang akan dipaparkan pada satu masa. • maxlength Maksimum huruf yang dibenarkan untuk input.

Text Fields Text field digunakan ketika kita menginginkan user menginputkan data dengan tipe huruf, angka, dll dalam form. <input type=“text" />

<form> Nama : <input type="text" name="nama" /> <br /> Email : <input type="text" name="email" /> </form>

TEXT AREA Digunakan untuk inputan yang memiliki informasi lebih panjang, misal untuk inputan komentar <textarea name= " textarea" />

Contoh <form> masukkan kometar anda<br> <textarea name="textarea" cols="20" rows="5"></textarea> </form>

Password Field Digunakan ketika kita memasukaan password (angka atau huruf yang kita inputkan/ ketikan tidak keliatan diganti dengan lingkaran hitam ) <input type="password" />

Contoh <form> Password: <input type="password“ name="pwd" /> </form>

Radio Button Radio buton digunakan jika kita mempunyai beberap pilihan dan hanya bisa memilih satu pilihan saja. Seperti menetukan jenis kelamin. <input type=“radio" />

Contoh <form> <input type="radio" name="kelamin“ value="pria" /> Laki - laki<br /> <input type="radio" name="kelamin" value="wanita" /> Perempuan </form>

Check Box Berbeda dengan radio button, checkbox memungkinkan user untuk memilih pilihan lebih dari satu pilihan. <input type="checkbox" />

Contoh: <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <input type="checkbox" name="vehicle" value=“motor" /> I have a motor </form>

Combo Box Combo box digunakan untuk menentukan pilihan, yang sudah di tetapkan sebelumnya. Contoh penggunaan combo box adalah memilih negara, agama, dll Menggunakan tag <select> . </select>

Atribut yang dipakai: • value Nilai untuk elemen select apabila pengunjung memilih pilihan tersebut • selected penggunaan atribut ini akan membuat pilihan ini yang akan dipakai pada awal pilihan • multiple size digunakan jika kita ingin memapilkan lebih satu baris pilihan.

Contoh: <select name="agama" mulitiple size="2"> <option value="Islam"> Islam </option> <option value="Kristen" selected> Kristen </option> <option value="Katolik"> Katolik </option> <option value="Hindu"> Hindu </option> <option value="Budha"> Budha </option> </select>

File Field File field biasanya digunakan untuk upload data atau file dari komputer anda menuju internet atau server. <input type="file“ />

Contoh <form> File Upload <input type="file” name="nama" /> </form>

Button Merupakan element yang sangat penting Terdapat dua jenis button Submit Reset Button submit digunakan untuk mengirimkan informasi yang sudah kira masukan sebelumnya. Button reset digunakan untuk mengulang atau menghapus informasi yang kita masukan

Contoh <form > jenis tombol<br> <input type="submit" name="proses“ value="PROSES" /> <input type="reset" name="ulang“ value="ULANG" /> </form>

SOAL PRAKTIKUM

http://www.w3schools.com/html/html_forms.asp http://www.htmlcodetutorial.com/forms/index_famsupp_6.html http://replace.web.id/tutorial/html/membuat-form-pada-html-tutorial-html-4