Membuat form HTML

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web. Berikut isi kode yang diperlukan untuk membuat form diatas dan penjelasan beberapa tag yang digunakan

  1. <form> : Tag pembungkus atau kontainer
  2. <label> : memiliki fungsi khusus untuk melabeli sebuah field inputan.
  3. <br> : Membuat baris baru
  4. <input> : Digunakan untuk menunjukkan sebuah inputan (masukkan) dalam bentuk kotak dan sejenisnya yang dapat diedit/diketik untuk diisi data tertentu
  5. <img> : Berfungsi untuk menambahkan gambar pada halaman web

Berikut kode dari contoh form yang akan dibuat

<!DOCTYPE html>
<html lang="en">
<head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Form Registrasi</title>
         <style>
                  #tombol{
                           border: 1 solid;
                           border-radius: 2px;
                           background-color: green;
                           color: white;
                           padding: 5px;
                  }
         </style>
</head>
<body>
         <h2>Form Register</h2>
         <form>
                  <label for="namalengkap">Nama Lengkap</label>
                  <br>
                  <input type="text" id="namalengkap">
                  <br>
                  <label for="username">username</label>
                  <br>
                  <input type="text" id="username">
                  <br>
                  <label for="email">Email</label>
                  <br>
                  <input type="email" id="email">
                  <br>
                  <label for="Password">Password</label>
                  <br>
                  <input type="password" id="password">
                  <br>
                  <label for="jk">Jenis Kelamin</label>
                  <br>
                  <input type="radio" name="jenisKelamin">
                  <label for="laki-laki">Laki-Laki</label>
                  <br>
                  <input type="radio" name="jenisKelamin">
                  <label for="perempuan" >Perempuan</label>
                  <br>
                  <input type="submit" id="tombol">
                  <!-- <button>Submit</button> -->
         </form>
         <h2>ini gambar</h2>
         <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" height="50px">
         
</body>
</html>

Berikut hasilnya dari form yang telah dibuat

Subscribe

Related articles

Membuat Design Form Login & Register Hi-Fi (Hight-Fidelity)

  Langkah - langkah membuat Hight-Fidelity pada UI “Login” seperti...

Mengenal Fitur Pada Figma

Figma memiliki fungsi yang berbeda dengan aplikasi desain grafis...

4 Karateristik Utama Yang Baik Pada UX

Apa yang membuat suatu produk efektif bagi penggunanya? Jawabannya berbeda-beda...

Mengenal UI/UX Dan Perbedaannya

Ap aitu UI/UX? UI (User Interface) dan UX (User Experience)...

Mengenal Display Properti Pada CSS

Display property dalam CSS adalah untuk mengontrol tipe tata...

LEAVE A REPLY

Please enter your comment!
Please enter your name here