Membuat Template Form dengan HTML5 dan CSS3

Form merupakan sebuah element yang sering kita temukan pada tampilan website, biasa nya tampilan form pada website berbeda satu sama lain. Salah satu contoh form yang bisa kita lihat pada tampilan login facebook ataupun kaskus, disana kita bisa melihat tampilan form yang bisa kita isi jika kita butuh sebuah akun. Berbicara mengenai tampilan pada sebuah form berikut ini akan saya bagikan tutorial mengenai bagaimana Membuat Template Form dengan HTML5 dan CSS3. simak langkah-langkah nya berikut ini.

Untuk membuat tampilan form pertama kita akan membuat struktur form terlebih dahulu dengan sintak HTML5 berikut ini.

<body>
	<div class="container">  
	  <form id="contact" action="" method="post">
	    <h3>Contact Form</h3>
	    <h4>Please fill in contact below...</h4>
	    <fieldset>
	      <input placeholder="Your name" type="text" tabindex="1" required autofocus>
	    </fieldset>
	    <fieldset>
	      <input placeholder="Your Email Address" type="email" tabindex="2" required>
	    </fieldset>
	    <fieldset>
	      <input placeholder="Your Phone Number" type="tel" tabindex="3" required>
	    </fieldset>
	    <fieldset>
	      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
	    </fieldset>
	    <fieldset>
	      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
	    </fieldset>
	  </form>
	</div>
</body>

Setelah membuat struktur form seperti diatas, langkah selanjutnya adalah membuat desain pada form agar form terlihat menarik dan bagus untuk dilihat, berikut sintak CSS3 untuk desain form.

@import url('https://fonts.googleapis.com/css?family=Droid+Sans');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: font-family: 'Droid Sans', sans-serif;;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #0C1127;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px 'Droid Sans', sans-serif;;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #C05E03;
  text-align: center;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #E88F3F;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #C05E03;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

Setelah semua sintak HTML5 dan CSS3 diketikan, langkah terakhir simpan file kemudian jalankan pada browser masing-masing dan lihat hasilnya. Selesai

Bagaimana, cukup mudah bukan untuk membuat template form nya ? Baiklah cukup sekian tutorial mengenai bagaimana Membuat Template Form dengan HTML5 dan CSS3. semoga bermanfaat :)]

DEMO

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *