Los geht es dengan tombol Kirim. Stand CSS saat ini seharusnya terlihat seperti 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;
}
Ini menyebabkan hasil berikut:
Ini adalah tombol biasa. Sekarang tombolnya tidak terlalu menarik, tetapi tentu saja memenuhi tujuannya. Namun, itu harus sedikit dipoles. Hasil akhirnya akan terlihat seperti ini:
Tambahan, ada efek Hover. Jadi tombol akan mengubah warnanya ketika digerakkan dengan kursornya.
Jika Anda melihat tombol dengan lebih saksama, Anda akan melihat sudut yang bulat. Ini tentu saja salah satu inovasi CSS yang telah lama dinantikan oleh desainer web. Karena "sebelumnya" tidak ada kemungkinan tersebut. (Pengecualian tentu saja pada elemen tombol , di mana Anda bisa bekerja dengan gambar.)
Sekarang sudut bulat dapat diterapkan tidak hanya pada elemen halaman normal, tetapi juga pada tombol.
Dalam draf kerja CSS3, ada properti tersebut border-radius . Browser Mozilla dan WebKit menawarkan bentuk alternatif untuk mendukung eksperimental properti ini.
• -moz-border-radius
• -webkit-border-radius
Saat ini, semua browser modern mendukung sudut bulat.
Berdasarkan pengetahuan ini, definisi border-radius bisa terlihat seperti ini:
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
Tetapi sesuatu terlihat ketika diperhatikan dengan seksama. Sebenarnya, gradien warna juga ditugaskan ke tombol.
Ini akhirnya dapat diimplementasikan dengan menggunakan peralatan CSS bawaan. Properti gradien yang berbeda digunakan untuk ini. Anda mengaitkan ini dengan properti latar belakang sebagai nilai. Saat ini ada banyak alat yang dapat digunakan untuk menghasilkan gradien warna.
Salah satunya dapat ditemukan di halaman http://www.css3factory.com/linear-gradients/ . Dalam sintaks berikut telah didefinisikan gradien warna dan sudut bulat yang dikenal.
Dalam contoh saat ini, sintaks untuk tombol akan terlihat seperti berikut:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, kiri atas, kiri bawah, dari (#3e779d), ke (#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Saya telah mengindikasikan bahwa tombol harus merespons saat dihover dengan kursor. Digunakan untuk itu adalah :hover yang dikenal.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
Tombol akan merespons ke satu peristiwa lainnya. Digunakan adalah pseudo-kelas :active. Dengan ini Anda bisa merespons saat tombol diklik.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
Dalam contoh ini, warna tegasan atas dan warna latar belakang tombol berubah saat tombol diklik.
Sudut bulat untuk input
Sudut bulat yang disebut dapat digunakan tidak hanya untuk tombol, tetapi juga untuk input. Hasilnya bisa terlihat seperti ini:
Dan berikut adalah sintaks yang sesuai:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Properti yang diperlukan untuk menentukan sudut bulat ini, Anda sudah tahu.
Validasi formulir menggunakan CSS3
Saat ini pengunjung dapat memasukkan apa pun yang mereka inginkan ke dalam bidang input. Tidak ada pemeriksaan nilai yang dimasukkan. Ini akan berubah sekarang. Bidang akan diperiksa untuk kriteria berikut:
• Bidang Name harus diisi.
• Bidang E-Mail harus berisi alamat email yang benar secara sintaksis.
• Bidang input multi-baris juga harus diisi.
Hanya jika kriteria ini terpenuhi, formulir dapat dikirimkan.
Untuk menandai suatu bidang sebagai wajib diisi, diberikan atribut yang dibutuhkan. Bidang yang ditandai dengan ini harus diisi, tidak boleh kosong.
Penerapan yang sesuai akan terlihat seperti ini:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Di sini browser akan memeriksa apakah bidang tersebut telah diisi. Jika bidang tersebut kosong dan masih mencoba mengirim formulir, browser seharusnya menampilkan pesan kesalahan.
Sejauh ini, hal ini berlaku juga untuk bidang alamat email. Anda bisa menetapkan type="email" dan atribut required ke bidang tersebut. Sekarang, bukan hanya nilai yang harus dimasukkan ke dalam bidang, namun harus benar-benar alamat email yang valid, jika tidak juga akan muncul pesan kesalahan ketika formulir dikirim.
Secara keseluruhan formulir dapat terlihat seperti berikut:
<ol>
<li>
<label for="name">Nama:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">Alamat Email:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Komentar:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Kirim" />
</li>
</ol>
Khususnya dalam formulir yang lebih luas, mungkin ada bidang yang wajib diisi, tetapi juga bidang yang sebaiknya tidak diisi. Dalam kasus-kasus seperti itu, Anda bisa menandai bidang yang wajib diisi secara khusus. Untuk mengakses bidang yang wajib diisi dalam CSS dapat menggunakan :required.
:required {
background-color: #ff0000;
}Dengan sintaks ini, bidang yang wajib diisi akan diberi latar belakang warna merah.
Cara lain untuk menarik perhatian pada bidang yang wajib diisi adalah dengan menggunakan sintaks berikut:
input:required:focus {
border: 1px solid red;
outline: none;
}
Saat mencoba mengirimkan formulir, bidang pertama akan mendapatkan bingkai merah dan fokus, yang tidak diisi atau tidak memenuhi persyaratan validasi.
Jika seorang pengguna kemudian mengisi bidang ini dengan benar, tapi ada satu bidang lain yang tidak diisi, bidang tersebut juga akan difokuskan setelah kunjungan pengiriman berikutnya dan diberi bingkai merah.
