Untuk setiap programmer, memberikan pengguna antarmuka gaya terpadu adalah persyaratan yang tidak berubah. Namun, sangat sulit untuk mencapai penyatuan gaya ini pada halaman web, karena ada perbedaan dalam cara berbagai sistem operasi dan browser mengekspresikan konten halaman web, dan perbedaan ini hampir tidak teratur. Masalah ini sangat menonjol dalam proses pemrosesan elemen bentuk. Apa yang membuat banyak orang tidak berdaya adalah masalah standar kinerja yang terpadu dari tombol pengiriman.
Misalnya, tag input dengan type = mengirimkan atribut baik terlihat sangat jelek di browser yang berbeda (di Firefox), atau memiliki satu jenis kelemahan (di Internet Explorer), atau bahkan bertindak sangat kaku (dalam safari). Solusi untuk masalah ini biasanya untuk mengatur properti input ke gambar dan kemudian rancang gambar tombol sendiri. Tetapi kita harus menambahkan banyak pekerjaan ekstra yang menjengkelkan setiap kali kita perlu menggunakan tombol. Oleh karena itu, kita membutuhkan solusi yang lebih baik, pendekatan yang lebih fleksibel dan bermakna bagi desainer. Untungnya, metode ini sudah ada dalam kenyataan, dan yang kita butuhkan adalah melakukan sedikit lebih banyak pekerjaan. Teman -teman, izinkan kami untuk memperkenalkan kepada Anda teman kecil kami yang lucu, teman sekelas <button>!
Tombol input vs
Berikut adalah label tombol pengiriman yang Anda gunakan:
<Input Tipe = Kirim Nilai = Kirim />
Gaya kinerja mereka di browser yang berbeda adalah sebagai berikut:
Dan saat kami menggunakan <button> untuk membuat tombol seperti di atas:
<type type = kirim> Kirim </tombol>
Mereka diekspresikan dengan gaya berikut:
Tombol -tombol ini tidak berbeda dari tombol yang kami buat di atas dalam perilaku berlari dan presentasi mereka. Selain menggunakannya untuk mengirimkan formulir sebagai, Anda juga dapat mengaturnya agar tidak tersedia, menambahkan pintasan atau mengatur tabindex, dll. Untungnya, selain gaya ekspresi yang berbeda, Safari mendukung fungsi -fungsi ini (dibandingkan dengan tombol input, tombol di safari tidak memiliki efek cairan pada permukaan). Fungsi paling keren dari tag <button> adalah bahwa kita dapat menempatkan beberapa elemen HTML yang berguna di dalamnya, seperti menambahkan gambar menggunakan kode berikut:
<type type = kirim> <img src = alt = /> kirimkan </button>
Penampilan mereka di browser adalah sebagai berikut:
Tidak buruk. Bahkan, menurut definisi W3C, elemen <button> muncul untuk menyelesaikan perbedaan kinerja ini.
Tombol yang dibuat dengan fungsi elemen tombol seperti tombol yang dibuat dengan elemen input, tetapi mereka menawarkan kemungkinan rendering yang lebih kaya: elemen tombol mungkin memiliki konten. Misalnya, elemen tombol yang berisi fungsi gambar seperti dan mungkin menyerupai elemen input yang jenisnya diatur ke gambar, tetapi jenis elemen tombol memungkinkan konten.
Elemen tombol - W3C
Oleh karena itu, kita perlu menemukan solusi desain untuk ini, dan untungnya, internet dengan data besar dapat memberi kita beberapa bantuan yang berguna untuk menyelesaikan masalah ini. Ini memang sangat nyaman, tetapi sayangnya, desainer dan pengembang situs web bahkan tidak tahu keberadaan elemen ini. Sebelum saya memutuskan untuk mengganti Wufoo dengan elemen tombol (produk jaringan artikel ini, Dudo Note), saya harus yakin bahwa tag ini dan CSS dapat memenuhi kebutuhan berikut:
Persyaratan:
1. Mereka harus memiliki penampilan tombol
2. Ada gaya ekspresi yang sama di browser yang berbeda
3. Gaya yang diterapkan dalam tombol juga dapat digunakan pada hyperlink (karena interaksi di Wufoo selalu menggunakan metode pengiriman formulir dan tautan kontak untuk mengirim metode AJAX, mereka mungkin sering berdekatan, jadi saya membutuhkan mereka untuk memiliki gaya ekspresi yang sama)
4. Tag ini bisa fleksibel dan mudah dimodifikasi dalam keadaan yang berbeda
5. Untuk peristiwa yang terjadi selama transmisi informasi, Anda dapat secara efektif membedakannya dengan ikon dan warna.
Menghadapi masalah di atas, saya pertama kali menulis beberapa CSS dan kemudian memecahkan masalah silang-browser. Selanjutnya kita akan melihat:
Hasil akhirTidak ada yang membuat keributan tentang ini, ini sangat sederhana, tetapi sangat efektif. Alasan saya suka menggunakan metode ini dan menangani tombol adalah karena saya tidak perlu memulai pembuatan Photoshop satu per satu untuk membuat 10.000 ikon. Jika kita melihat kode dengan hati -hati, Anda akan menemukan bahwa dua tombol di belakang sebenarnya adalah dua tautan.
<Div class = Tombol>
<type type = kirim class = Positif>
<img src =/gambar/ikon/tick.png alt =/>
Menyimpan
</tombol>
<a href =/kata sandi/reset/
<img src =/gambar/ikon/textfield_key.png alt =/>
Ubah Kata Sandi
</a>
<a href =# class = negatif>
<img src =/gambar/ikon/cross.png alt =/>
Membatalkan
</a>
</div>
Tujuannya adalah karena banyak tindakan dalam aplikasi web adalah acara (istirahat) yang didorong, sehingga mengirim permintaan pengguna melalui URL tertentu dapat menginisialisasi tindakan ini. Menggunakan gaya yang dapat diterapkan pada kedua elemen membuat unifikasi gaya kami lebih fleksibel saat mempertahankan interaksi yang disebabkan oleh AJAX dan tombol kirim standar.
Sekarang Anda mungkin bertanya, mengapa saya meninggalkan atribut alt dari elemen gambar kosong? ALT adalah atribut yang diperlukan dari elemen IMG. Ini digunakan untuk menjelaskan konten gambar, tetapi tidak ada deskripsi yang relevan dari gambar di sini, yang memang agak membingungkan. Namun, tidak seperti atribut yang hilang, nilai atribut kosong sepenuhnya sejalan dengan standar. Dia mengatakan kepada browser bahwa gambar -gambar ini mewakili beberapa informasi yang sepenuhnya diabaikan, yang juga mencegah browser tidak dapat menemukan tombol berikutnya karena oklusi informasi prompt. Karena ikon -ikon di sini benar -benar berlebihan, kami lebih suka tidak menyia -nyiakan waktu pengguna yang melihat ikon ini yang digunakan sepenuhnya untuk mencapai gaya antarmuka terpadu.
CSS StylesheetSebagian besar konten CSS yang digunakan untuk mengontrol gaya tombol ini sangat intuitif. Sedikit perbedaan dalam browser yang berbeda akan mengarah pada penerapan nilai padding yang berbeda untuk mereka dalam kode di bawah ini. Untungnya, semua ini sepenuhnya mungkin.
/ * Tombol */
.buttons a, tombol .buttons {
Tampilan: Blok;
float: kiri;
Margin: 0 7px 0 0;
latar belakang-warna:#f5f5f5;
Perbatasan: 1px solid #dedede;
Border-top: 1px solid #eee;
Border-left: 1px solid #eee;
Font-Family: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
Ukuran font: 100%;
Line-Height: 130%;
Dekorasi Teks: Tidak Ada;
font-weight: tebal;
Warna:#565656;
kursor: pointer;
padding: 5px 10px 6px 7px; / * Tautan */
}
Tombol .buttons {
Lebar: otomatis;
meluap: terlihat;
padding: 4px 10px 3px 7px; / * Ie6 */
}
tombol .buttons [type] {
padding: 5px 10px 5px 7px; / * Firefox */
Line-Height: 17px; / * Safari */
}
*: tombol html anak-anak pertama [type] {
padding: 4px 10px 3px 7px; / * Ie7 */
}
.buttons tombol img, .buttons a img {
Margin: 0 3px -3px 0! Penting;
Padding: 0;
Perbatasan: Tidak Ada;
Lebar: 16px;
Tinggi: 16px;
}
Masalah lain adalah bahwa ada beberapa bug di internet explorer saat membuat tombol panjang. Anda dapat menemukan informasi ini di Jehiah.cz, tetapi dalam kode CSS di atas kami akan menghindari masalah sampai batas tertentu dengan menyatakan nilai -nilai lebar dan overflow.
Tambahkan sedikit warna ke tombolDi Wufoo, kami menetapkan nilai hover dari tindakan netral (di sini, penulis memanggil kata sandi perubahan dan tindakan lain sebagai tindakan netral, konfirmasi dan jenis pengiriman sebagai tindakan positif, dan pengabaian dan jenis pembatalan sebagai tindakan negatif) menjadi biru, dan tindakan positif dan tindakan negatif masing -masing diatur ke hijau dan merah. Kode gaya berikut menggunakan warna yang berbeda untuk membedakan antara menambah, menyimpan, dan membatalkan, dan menghapus jenis tindakan negatif. Rasanya cukup enak, tentu saja Anda juga dapat memilih warna yang Anda suka gunakan.
/ * Standar */
Tombol: Hover, .buttons A: Hover {
Latar Belakang-Color:#DFF4FF;
Perbatasan: 1px Solid #C2E1EF;
Warna:#336699;
}
.buttons A: Active {
Latar Belakang-Color:#6299C5;
Perbatasan: 1px Solid #6299C5;
Warna: #FFFF;
}
/ * Positif */
Button.positive, .buttons A.Positive {
Warna:#529214;
}
.buttons a.positive: hover, button.positive: hover {
latar belakang-warna:#e6efc2;
Perbatasan: 1px Solid #C6D880;
Warna:#529214;
}
.buttons a.positive: Active {
latar belakang-warna:#529214;
Perbatasan: 1px Solid #529214;
Warna: #FFFF;
}
/ * Negatif */
.buttons a.negatif, tombol.negative {
Warna:#D12F19;
}
.buttons a.negative: hover, button.negative: hover {
Latar belakang:#fbe3e4;
Perbatasan: 1px solid #fbc2c4;
Warna:#D12F19;
}
.buttons a.negatif: aktif {
Latar Belakang-Color:#D12F19;
Perbatasan: 1px Solid #D12F19;
Warna: #FFFF;
}
MeringkaskanAkhirnya, ini hanyalah solusi yang kami rancang untuk menangani kebutuhan di Wufoo, tetapi berkinerja baik dengan upaya kami. Tapi itu bukan satu -satunya cara, Anda dapat menemukan cara yang lebih menarik untuk mengubah tombol menjadi sudut bulat atau bahkan lebih berwarna. Karena hampir semua elemen lain dapat ditempatkan di antara tag <button>, Anda juga dapat membuat tombol tiga dimensi bulat yang benar-benar bagus dengan memasukkan tag <span> dan mengikuti metode terbaru yang disediakan oleh Alex Griffioen. Sejujurnya, saya harap ini hanyalah awal bagi semua desainer yang berupaya menggunakan kembali antarmuka program. Ngomong -ngomong, saya harap Anda dapat memikirkan lebih banyak tentang hal itu sebelum membuka tombol input Photoshop dan lihat tag <nutton> yang hampir terlupakan ini, mungkin itu akan mengejutkan Anda.
Lampiran:<button> elemen di html4.0/xhmtl1.0
Definisi dan penggunaanTentukan tombol. Di dalam elemen tombol, Anda dapat menempatkan konten, seperti teks atau gambar. Ini adalah perbedaan antara elemen ini dan tombol yang dibuat dengan elemen input.
Kontrol <button> menyediakan fitur yang lebih kuat dan konten yang lebih kaya daripada <input type = tombol>. Semua konten antara tag <button> dan </button> adalah konten tombol, yang mencakup konten tubuh yang dapat diterima, seperti teks atau konten multimedia. Misalnya, kita dapat menyertakan gambar dan teks terkait dalam tombol, dan menggunakannya untuk membuat gambar markup yang menarik di tombol.
Satu-satunya elemen yang dilarang adalah pemetaan gambar, karena tindakan yang sensitif terhadap mouse dan keyboard dapat mengganggu perilaku tombol bentuk.
Properti yang dapat dipilih Nilai Atribut Deskripsi DTDdinonaktifkan dinonaktifkan dinonaktifkan menonaktifkan tombol ini. STF
NAMEBUTTON_NAME Menentukan nama unik tombol ini. STF
ketik* tombol
* Reset menentukan jenis tombol. STF
* kirim
Nilai Some_Value Menentukan nilai awal tombol. Nilai ini dapat dimodifikasi oleh skrip. STF
Atribut Standar:ID, Kelas, Judul, Gaya, Dir, Lang, XML: Lang, AccessKey, Tabindex
Properti Acara:Onfocus, Onblur, Onclick, OndblClick, Onmousedown, Onmouseup, Onmouseover, OnmouseMove, Onmouseout, Onkeypress, Onkeydown, Onkeyup