Bagaimana membuat: berita elektronik

Bagaimana membuat surat kabar berita

Langkah pertama - tambahkan HTML:

Gunakan elemen <form> untuk menangani input. Anda dapat menemukan informasi lebih lanjut di tutorial PHP kami.

kemudian tambahkan pengendali input untuk setiap field serta tombol 'kirim':

<form action="action_page.php">
  <div class="container">
    <h2>Berlangganan ke Berita Harian kami</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Nama" name="name" required>
    <input type="text" placeholder="Alamat email" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Berlangganan Harian
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Berlangganan">
  </div>
</form>

Langkah kedua - Tambahkan CSS:

/* Tetapkan gaya elemen formulir, supaya di sekelilingnya ada sekat */
form {
  sekat: 4px solid #f1f1f1;
}
/* Tambahkan jarak dalam dan warna latar belakang abu-abu untuk kontainer */
.container {
  jarak: 20px;
  warna latar belakang: #f1f1f1;
}
/* Tetapkan gaya elemen input dan tombol sumbit */
input[type=text], input[type=submit] {
  lebar: 100%;
  jarak: 12px;
  jarak: 8px 0;
  display: inline-block;
  sekat: 1px solid #ccc;
  box-sizing: border-box;
}
/* Tambahkan jarak luar untuk kotak centang */
input[type=checkbox] {
  jarak atas: 16px;
}
/* Tetapkan gaya tombol sumbit */
input[type=submit] {
  warna latar belakang: #04AA6D;
  warna: putih;
  sekat: tak ada;
}
input[type=submit]:hover {
  keputusan: 0.8;
}

Try It Yourself

Related Pages

Tutorial:Form HTML

Tutorial:Form CSS