Saya berasumsi bahwa Anda membuat file HTML tambahan. Saya menyimpan file ini dengan nama kontak.html. kontak.html berada pada tingkat yang sama dengan index.html yang sudah Anda kenal.
Pada bagian pertama ini, pengaturan dasar formulir dilakukan. Hal-hal seperti sudut bulat, gradien warna, dan lain-lain akan dijelaskan di tutorial berikutnya.
Dalam kontak.html, formulir dibuat. Formulir dibuat di dalam area div dengan kelas konten. Kemudian, pertimbangkan jenis kolom yang ingin Anda buat. Saya memutuskan untuk menanyakan informasi berikut:
• Nama
• Alamat email
• Komentar
Tentu saja, Anda sendiri harus memutuskan informasi apa yang ingin Anda minta. Secara prinsip, saya menyarankan untuk hanya mengumpulkan data yang benar-benar diperlukan. Kebanyakan pengunjung situs web enggan menghadapi formulir yang rumit. Jadi, singkat saja.
Struktur dasar formulir saya adalah sebagai berikut:
<div class="content">
<form class="form" action="#" method="post">
<fieldset>
<legend>Kontak kepada kami</legend>
<ol>
<li>
<label for="name">Nama:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Alamat Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comment">Komentar:</label>
<textarea cols="32" rows="7" name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Kirim" />
</li>
</ol>
</fieldset>
</form>
</div>Formulir ini pada awalnya tidak memiliki fitur khusus. Di sekitar bidang formulir, diterapkan definisi fieldset. Cara menambahkan bidang formulir dan penjelasan tentang label telah dijelaskan dengan baik sebelumnya. Jadi, pada titik ini, fokus sepenuhnya pada desain formulir.
Jika hasil dijelajahi di browser, awalnya formulir terlihat kurang menarik.
Tentu saja, perlu diperbaiki.
Pertama, informasi dasar tentang formulir akan diberikan.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Di sini, jarak luar dan dalam ditentukan. Selain itu, lebar formulir diatur menjadi 550 piksel.
Lanjutkan dengan desain fieldset.
fieldset {
padding: 10px 20px 25px;
}
Di sini juga, jarak ditentukan.
Bidang formulir sendiri dibuat di dalam daftar terurut ol.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Agar daftar ini tidak terlihat lagi sebagai daftar, digunakan list-style-type: none;. Selain itu, margin dan padding diatur menjadi 0. Langkah berikutnya adalah menentukan entri daftar. Entry ini mengambang ke kiri dan memiliki padding 10 piksel di dalamnya.
li {
float: left;
padding: 10px;
}
Ada satu fitur khusus terkait dengan tombol yang berada di bawah formulir. Tombol ini harus sejajar ke kanan.
li.button {
float: none;
clear: both;
text-align: right;
}Judul Formulir
Sekarang, mari kita fokus pada elemen legenda. Legenda digunakan untuk menentukan judul formulir.
Definisi untuk judul adalah sebagai berikut:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Penamaan
Elemen label juga telah muncul dalam rangkaian ini sebelumnya. Label memungkinkan Anda membuat keterkaitan logis antara label kolom dan bidang formulir sebenarnya. Ada keistimewaan dalam definisi CSS di sini.
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Saya melengkapi elemen label dengan pengaturan cursor. Dengan demikian, pengunjung akan diberi sinyal bahwa label kolom dapat diklik. Jika mereka benar-benar mengklik deskripsi kolom, kursor akan otomatis diposisikan di kolom yang sesuai.
Desain Bidang Formulir
Langkah berikutnya adalah mendesain bidang formulir sebenarnya. Pertama-tama, informasi umum tentang input dan textarea akan diberikan.
input, textarea {
color: #3399FF
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Ini hanya tentang hal-hal desain. Perhatian khusus harus diberikan pada bingkai. Ketika kursor ditempatkan di dalam suatu bidang, warna bingkai akan berubah. Ini tidak hanya sekadar aspek estetika. Sebenarnya, ini juga membantu pengunjung dalam mengisi formulir. Mereka akan selalu tahu di mana kursor berada.
Sekarang kami akan memberikan beberapa informasi tentang kotak teks multi-baris.
textarea {
width: 430px;
overflow: auto;
}
Lebar bidang ini ditetapkan pada 430 piksel. Mungkin aneh pada pandangan pertama instruksi overflow: auto dalam konteks kotak teks multi-baris. Baris ini disebabkan oleh versi Internet Explorer yang lebih lama. Sebenarnya, browser ini akan menampilkan scrollbar dalam kotak teks multi-baris bahkan ketika itu tidak diperlukan. Dengan overflow: auto, masalah tampilan ini dapat diatasi.
Mendesain tombol Kirim
Saat ini, tombol Kirim terlihat cukup polos. Sekarang ini akan berubah. Hasilnya akan terlihat seperti ini:
Berbagai properti diberikan ke tombol.
• Warna latar belakang
• Tampilan font
• Bingkai
• Jarak
Sintaks CSS yang terkait adalah sebagai berikut:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Mungkin perlu disebutkan di sini input[type="submit"]. Dengan selector ini, elemen input yang memiliki kombinasi atribut-nilai type="submit" diakses.
