Membuat Form Sederhana

Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya akan berbagi sedikit tutorial membuat form sederhana,form ini saya buat dengan menggunakan style css.Langsung saja kita mulai,ada 3 bagian form yang akan saya buat kali ini yaitu :input teks,menu select,dan tombol button.

Seperti biasa kita buat style untuk form yang akan kita buat

• Style untuk input teks dan menu select

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #cc00cc;
    border-radius: 4px;
    box-sizing: border-box;
}

•  Style untuk button submit

input[type=submit] {
    width: 100%;
    background-color: #1a1aff;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

• Style untuk efek hover saat kita mengarahkan mouse ke tombol submit

input[type=submit]:hover {
    background-color: #45a049;}

•  Style untuk div yaitu untuk mengatur tempat form yang kita buat

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

Itu tadi untuk style nya sekarang mari kita buat form nya dengan HTML

<div>
  <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Awal">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Nama Akhir">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="indo">Indonesia</option>
    </select>
 
    <input type="submit" value="Submit">
  </form>
</div>      

Berikut SS coding nya bagi yang kurang jelas

Dan ini di hasilnya

Oke itu tadi sedikit tutorial membuat form sederhana semoga bermanfaat di balik banyaknya kekurangan sampai jumpa di postingan berikutnya,sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb