-->

Cara membuat form menggunakan html


Contoh Form 
Pada sebuah website terkadang kita menemukan satu atau lebih form, seperti form pencarian, form pendaftaran facebook, Twitter, Gmail atau form Pendaftaran mahasiswa baru pada sebuah perguruan tinggi, form disini digunakan untuk mendata pengunjung pada sebuah website.
Ada beberapa kontrol yang dimiliki form untuk membuat dan menyimpan data, diantaranya Text, Combo Box, Text Area, radio button dan lain –lain.
Pembuatan control ini dibuat dengan menggunakan <tag> dan diikuti oleh atribut,atribut disini berfungsi sebagai pemberi informasi tambahan pada tag, informasi ini bisa berupa perintah untuk ukuran, jenis,  Warna Text, dll. Setiap atribut diikuti oleh nama dan nilai (value) yang ditulis dengan name=”value”. Nilai (value)  diapit oleh tanda kutip, baik tanda kutip satu ( ‘ ) ataupun tanda kutip dua ( “ ). Untuk lebih jelasnya lihat contoh dibawah ini :

<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt berwarna biru sekaligus tebal</b></font>
Keterangan :

<p> adalalah tag
<font face="verdana" size="12" color="blue"> adalah atribut yang memberi nilai pada tag <p>.

Contoh kontrol dalam pembuatan form :

Label

Label digunakan untuk memberikan keterangan pada inputan, contohnya dibawah ini:
<label for =”name”> Nama Siswa </label>

label html
name adalah contoh label


Text

Control ini digunakan untuk menginput sebuah teks yang tidak terlalu panjang, seperti nama pencarian dll, Contoh :

<label for=”nama”> Nama Siswa : </label>
<input type=”text” name=”nama”/>


Text Area

Text Area digunakan untuk menginput text yang lebih panjang seperti alamat, biodata dll, text area memiliki tag tesendiri yaitu < textarea> </ textarea>, berikut contoh penggunaanya.
<label for=”alamat”> Alamat  : </label>
<textarea name=”alamat”> </textarea>

Combo Box

Pada saat mendaftar secara online pada sebuah perguruan tinggi, dan kalian mengisi form pendaftaran pada pilihan agama kalian tinggal klik ada pilihan kebawah, itulah menu Combo Box.
Sebagai contoh :
<label for="agama">Agama</label> 
<select name="agama"> 
<option>Islam</option> 
<option>Kristen</option>
 <option>Hindu</option>
</select>

Submit

Adalah sebuah tombol yang bisa diklik, atribut value pada tombol ini akan merubah text yang telah diisi.
Contoh Skripnya :
<input type="submit" value="Simpan" />

Untuk lebih jelas mari kita praktekkan, buatlah file baru pada web editor kalian dengan nama latihan5.html dan tulislah kode dibawah ini:

<!DOCTYPE HTML>
<HTML>
<head>
<title>Latihan Form</title>
</head>
<body>
    <form>
        <label for="nama">Nama</label>
        <input type="text"name="nama">
        <br>
        <label for="salamat">Alamat</label>
        <textarea name="alamat" ></textarea>
        <br>
        <label for="agama">Agama </label>
        <select name="agama">
            <option>Islam</option>
            <option>Kristen</option>
            <option>Hindu </option>
        </select>
        <br>
        <label for="telp">Telepon</label>
        <input type="text"name="telp">
        <br>
        <input type="button" value= "Simpan">
    </form>
</body>
</HTML>

Pada pembahsan ini tidak membahas pemrosesan data pada form diatas, perlu diingat bahwa html hanya digunakan untuk memformat dokumen, agar kita bisa memroses data diatas diperlukan bahasa pemrograman web seperti PHP dan JavaScript yang bisa menyimpan, Edit dan update  data sehingga menjadi sebuah informasi.
Kalian bisa melihat contohnya pada  postingan saya sebelumnya Membuat CRUD Sederhana menggunakan PHP dan MySQL.

0 Response to "Cara membuat form menggunakan html"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel