Membuat Form Pada HTML

Membuat Form Pada HTML

Form pada HTML dapat dibuat dengan tag <form>.

Tag <form> memiliki beberapa atribut yang harus diberikan, seperti:

  • action untuk menentukan aksi yang akan dilakukan saat data dikirim;
  • method metode pengiriman data.

Contoh:

<form action="prosess.php" method="GET">

<!-- form field disini -->

</form>

 

Untuk atribut action, dapat diisi dengan alaman URL dari endpoint yang akan memproses form. Code HTML di atas, tidak akan menghasilkan apa-apa. Karena belum ditambahkan field-nya.

Apa itu Field?

Field adalah ruas yang dapat kalian diisi dengan data. Contoh:

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

Field mempunyai beberapa atribut yang harus diberikan:

  1. type adalah type dari field.
  2. name adalah nama dari field yang akan menjadi kunci dan variabel didalam program.

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. Checkbok untuk remember me
  4. Tombol untuk login.

Contoh kode:

<!DOCTYPE html>

<html>

<head>

    <title>Form Login</title>

</head>

<body>

    <form action="login.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>

Hasilnya:

Pada kode di atas, kita membuat 4 buah filed:

  1. Input username dengan type text;
  2. Input password dengan type password;
  3. Input remember dengan type checkbox;
  4. Input submit dengan type submit;

Lalu ketiga filed dibungkus ke dalam tag <fieldset>. Tag <fieldset> ini akan membuat sebuah garis. Didalam tag <fieldset>, buat tag <legend> untuk memberikan teks pada fieldset.

Setelah itu, perhatikan atirbut yang digunakan pada setiap field.

  • Atribut placeholder untuk menampilkan teks sementara (placeholder);
  • Atribut value untuk memberikan nilai default pada field.

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

2. Membuat Form Register

Formnya berisi field untuk:

  • Input nama lengkap;
  • Input username;
  • Input email;
  • Input password;
  • Input Jenis kelamin;
  • Input Agama;
  • Input Biografi, Dll.

Field di atas merupakan jenis field yang sering digunakan dalam pembuatan form. Masih ada beberapa jenis field seperti metercolorurlnumberdatedatetime, dll.

Contoh Code:

<!DOCTYPE html>

<html>

<head>

    <title>Form HTML</title>

</head>

<body>

    <form action="contact.php" method="POST">

        <fieldset>

        <legend>Form</legend>

        <p>

            <label>Alamat Web:</label>

            <input type="url" name="name" placeholder="Masukan URL Web..." />

        </p>

        <p>

            <label>Tanggal Lahir:</label>

            <input type="date" name="tanggal" />

        </p>

        <p>

            <label>Umur:</label>

            <input type="number" min="10" max="90" name="umur" />

        </p>

        <p>

            <input type="submit" name="submit" value="Send" />

        </p>

        </fieldset>

    </form>

</body>

</html>

Hasilnya:

Download Tutorial