Membuat Form Responsive dengan HTML CSS

Membuat Template Form Responsive HTML CSS – Hallo semuanya, kalian pasti pernah melihat sebuah form untuk mengisi data, baik itu form login, register, atau form yang lainnya. Pada hari ini saya akan memberikan satu trik lagi untuk membuat layout form menjadi responsive, sehingga layout form ini ketika dibuka pada device mobile seperti tab dan smartphone akan langsung menyesuaikan dengan baik.
Sekarang kita buat sebuah struktur html yang kita perlukan dengan kode seperti berikut

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Indonesia</option>
          <option value="canada">Malaysia</option>
          <option value="usa">Australia</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

</body>
</html>

Selajutnya kita akan berikan css untuk mengatur tampilan form agar lebih nyaman dilihat.

* {
    box-sizing: border-box;
}
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}
input[type=submit]:hover {
    background-color: #45a049;
}
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}
.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}


Dan untuk membuat form menjadi responsive kita menggunakan @media rule yang akan saya terapkan untuk ukuran layer kurang dari atau dibawah  600px dengan css seperti berikut

@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}


Baiklah teman-teman, demikian artikel kali ini yang membahas tentang cara membuat form responsive dengan html dan css, kalian juga bisa baca artikel dumetschool yang berjudul Membuat website responsive menggunakan media queries untuk mengetahui lebih lanjut tentang Media Rule. Semoga bermanfaat

 

14 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat