Tutorial HTML Part 12 : Cara Membuat Form pada HTML

Web tidak hanya untuk menampilkan informasi, tetapi juga mengambil informasi dengan cara mengisi form. Seperti di dunia nyata kalau kita ingin mendaftar sesuatu mesti pakai formulir untuk pendaftaran. Pada web juga terdapat fasilitas untuk membuat form. Pada tutorial kali ini kita akan belajar bagaimana Cara Membuat Form pada HTML.

Cara Membuat Form pada HTML

Pada HTML kita membuat tag di awali dengan tag <form>. Tag <form> ini mempunyai beberapa atribut yaitu action dan method, penjelasannya adalah :

1. Action adalah untuk mengirim data pada form
2. method adalah metode pengiriman data.

Contoh :

<form action="proses.php" method="POST">
<!-- disini adalah letak isi form nya -->
</form>

Pada form tersebut data yang sudah kita isi akan dikirimkan ke proses.php melalui metode POST. Jika hanya sekedar membuat form pada HTML tidak menghasilkan apa-apa atau tidak dapat menyimpan suatu informasi, karena HTML merupakan Website yang statis. Untuk dapat menyimpan suatu informasi anda dapat belajar salah satu opsi pemrograman web yaitu PHP.

Mengenal tag <input>

Tag input merupakan tag paling sering digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian teks biasa, password, email, checkbox, radio sampai dengan tombol submit, semuanya dalam bentuk tag <input>.

Contoh tag input :

<input type="text" name="info">

1. Type merupakan tipe dari field. attribut dan element type="text" menggambarkan bahwa form tersebut dapat diisi dengan karakter huruf atau angka
2. name merupakan key atau kunci dan variabel dalam program, guna untuk mendapatkan informasi dari field tersebut.

Macam-macam bentuk tag input berdasarkan type :

<input type="text">

adalah textbox inputan biasa yang menerima input berupa text.

<input type="password">

adalah teks inputan berbentuk password namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan.

<input type="email">

adalah teks inputan yang hanya email dapat diisi

<input type="number">

adalah teks inputan yang hanya angka dapat diisi

<input type="checkbox">

adalah inputan berupa checkbox yang dapat diceklist atau di centang.

<input type="radio">

mirip dengan checkbox, namun hanya bisa memilih satu diantara pilihan group radio.

<input type="submit">

akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

Mengenal tag <textarea>

Tag textarea merupakan tag yang digunakan di dalam form Kontak atau Komentar, merepresentasikan input control yang memiliki area teks lebih dari satu baris. Untuk mengatur tinggi dan lebar dari area teks tersebut dapat digunakan  attibut row ( baris) dan cols (kolom), atau bisa pakai css width dan height.

Dalam textarea kita dapat menulis tanpa batas kata, seperti kita menulis pesan, saran, atau komentar pada blog, atau pun web mail. Cara penggunaan dengan menggunakan tag <textarea></textarea>.

contoh kode :

<textarea name="isi_pesan" placeholder="isi pesan anda" rows="10" cols="40"></textarea>

Hasil :

Mengenal Attribut pada Form :

autofocus

Menentukkan bahwa area teks secara otomatis harus fokus (berada padanya) ketika halaman dimuat.

Value: autofocus

cols

Menunjukkan kolom. Menentukkan lebar dari textarea.

Value: nomor

rows

Menunjukkan jumlah baris pada textarea. semakin besar jumlahnya maka tinggi element textarea akan bertambah.

Value : nomor

disabled

Menentukkan bahwa textarea atau form input nonaktif (tidak dapat diedit).

Value : disabled

maxlegth

Menentukkan maksimal jumlah karakter yang dapat diinput pada area teks tersebut.

Value : nomor

minlegth

Menentukkan minimum jumlah karakter yang dapat diinput pada area teks tersebut.

Value: nomor

name

Menentukkan nama untuk textarea atau form input.

Value : teks

placeholder

Menentukkan teks yang dijadikan bayangan sebagai kunci atau keterangan yang akan hilang dengan sendirinya ketika area teks diedit.

Value : teks

readonly

Menunjukkan bahwa textarea hanya dapat dibaca (tidak dapat dihapus atau diubah).

Value : readonly

required

Menunjukkan bahwa textarea wajib diisi, jika tidak diisi maka tindakan selanjutnya tidak akan diproses dan akan muncul pesan error.

Value : required

warp

Menentukkan bagaimana area teks dilipat (wrap) ketika dikirimkan pada sebuah form.

Value : hard atau soft

Contoh 1 Membuat Form Login :

Pada form login, terdapat beberapa field dan elemen:

1. Field untuk input username atau email;
2. Field untuk input password;
3. Checkbox untuk remember me;
4. Tombol untuk login.

kode :

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login-proses.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil :

Keterangan :

1. tag <fieldset> ini akan membuat sebuah garis.
2. pada input username berisi type text
3. pada input password berisi type password
4. pada input remember me berisi type checkbox
5. pada tombol login berisi type submit

Lalu, perhatikan juga atirbut yang digunakan pada setiap field.

1. Atribut placeholder untuk menampilkan teks sementara,
2. Atribut value untuk memberikan nilai default pada field.

Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks pada fieldset.

Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah label dengan tag <label>.


Untuk Tutorial Selanjutnya adalah : Tutorial HTML Part 13 : Cara Menampilkan Gambar pada HTML