Cara merancang formulir responsif dan device-agnostik

Sep 11, 2025
Bagaimana caranya

Apakah itu aliran pendaftaran atau stepper multi-view, formulir adalah salah satu komponen paling penting dari desain produk digital - jadi Anda perlu mendesainnya sehingga mereka bekerja secara efektif pada perangkat seluler.

Inilah cara merancang formulir untuk perangkat seluler, termasuk tampilan cepat Cara Menggunakan Flexbox .

01. Desain untuk gulir vertikal

A single column layout works better

Tata letak kolom tunggal berfungsi lebih baik

Terlepas dari ukuran perangkat, cara termudah untuk menyelesaikan formulir dalam mode linier. Beberapa kolom mengganggu momentum pengguna (pengguna cenderung menafsirkan bidang yang tidak konsisten, yang merupakan faktor negatif dalam hal kegunaan) dan dapat mengakibatkan pengguna harus menggunakan gulir horizontal.

Ketika datang untuk meletakkan formulir, Anda harus merancang entri dalam satu kolom: Jika suatu bentuk berada dalam satu kolom, jalur ke penyelesaian adalah garis lurus ke bawah halaman.

02. Tempatkan label di atas bidang

Place labels above form fields

Label label di atas bidang formulir

Label memberi tahu pengguna apa arti bidang input yang sesuai. Saat memilih tempat untuk menempatkan label Anda, Anda memiliki dua opsi: selaras kiri atau selaras.

Label yang selaras kiri berfungsi dengan baik jika formulir selesai pada desktop atau tablet. Namun, mereka adalah solusi yang mengerikan untuk perangkat seluler di mana ada garis layar terbatas. Sejak label yang selaras kiri perlu duduk di depan lapangan, layar sempit meninggalkan sangat sedikit ruang untuk bidang itu sendiri - terutama jika perangkat dalam mode Portrait. Ini menciptakan dua masalah kegunaan yang serius:

  • Bidang formulir tidak akan cukup lebar untuk menampilkan seluruh input pengguna, membuatnya lebih mungkin untuk mengisyaratkan tanggapan mereka dan menyebabkan bentuk yang lebih keliru diajukan
  • Ketika seorang pengguna diberi tahu bahwa mereka telah memasukkan informasi yang salah, mereka mungkin memiliki waktu yang sulit melihat dan memperbaiki masalah karena mereka tidak akan dapat melihat seluruh input yang tidak valid

Menempatkan label di atas bidang formulir ketika pengguna menjelajah dari perangkat seluler akan memastikan pengguna dapat melihat lebar maksimum untuk memasukkan detail mereka, karena Anda tidak perlu menggunakan label apa pun.

Menulis label Anda di atas bidang input juga membuatnya lebih mudah bagi Anda untuk menulis label bidang yang jelas dan bermakna, karena Anda tidak akan terbatas pada satu atau dua kata.

03. Gunakan target keran

Target target harus mudah digunakan tidak peduli berapa ukuran perangkat yang ditampilkan. Target yang lebih besar (bidang input dan tombol) lebih mudah bagi pengguna dengan ketangkasan bawah, apakah itu adalah kondisi permanen atau yang sementara yang disebabkan oleh lingkungan.

Saat ini, ukuran target terbesar adalah untuk perangkat sentuh, jadi Anda perlu merancang sentuh-first. Ini memastikan pengguna tidak perlu memperbesar untuk memasukkan teks atau memilih opsi. Area yang dapat diklik harus mengikuti aturan jari lemak dan tidak melanggar area sekitar: Pad jari manusia rata-rata adalah 10 x 14mm dan rata-rata ujung jari adalah 8-10mm, membuat 10 x 10mm ukuran target sentuhan minimum yang baik.

Tetapi tidak hanya harus target keran berukuran tepat, Anda juga harus memastikan ada cukup ruang antara beberapa target ketukan. Bahkan, jika Anda mendapatkan kesalahan 'Ketuk Target Ukuran' pada alat SEO seluler, itu sering karena target keran Anda terlalu berdekatan, daripada target ketukan yang sebenarnya terlalu kecil.

Mungkin sulit untuk membaca konten pada perangkat seluler, jadi membuat input 100% dan memastikan teks diatur ke setidaknya 16px (1EM) akan membuat perbedaan besar. Dengan begitu, tidak ada bubitan zoom atau gulir tambahan akan diperlukan untuk membaca informasi yang diperlukan.

04. Gunakan bidang formulir HTML5

Perangkat seluler menawarkan keyboard perangkat lunak khusus untuk berbagai jenis input, dan bidang formulir HTML5 adalah cara termudah untuk meningkatkan pengalaman pengguna formulir Anda. Jenis input ini memberi petunjuk ke browser tentang jenis tata letak keyboard apa yang akan ditampilkan untuk keyboard di layar.

Termasuk jenis input jumlah , surel , Tel. , URL dan tanggal , dan input keyboard pada perangkat seluler Anda akan memperbarui untuk memudahkan pengguna untuk mengisi formulir. Itu tidak mengharuskan Anda menambah kelas tambahan untuk gaya input formulir, yang perlu Anda lakukan adalah dengan menggunakan tipe input HTML5 yang valid: 

<input type="email" id="input-email">

05. Gunakan FlexBox.

Mari kita hadapi - sulit untuk membuat tata letak responsif dalam HTML. Sebagian besar dari kita telah berjuang dengan ini pada satu titik atau yang lain. Meskipun selalu memungkinkan untuk membuat tata letak seperti yang diharapkan menggunakan teknologi khusus, prosesnya tidak pernah mudah.

Teknologi untuk menangani tata letak terstruktur telah datang dan pergi selama bertahun-tahun: pengembang telah menggunakan bingkai HTML, tabel HTML, tata letak berbasis float, dan, baru-baru ini, berbagai sistem grid yang dipopulerkan oleh kerangka kerja CSS seperti Bootstrap. .

Tetapi dengan munculnya model kotak fleksibel HTML (atau FlexBox ), HTML akhirnya mendapatkan mesin pemformatan kotak yang kaya yang membahas tata letak kompleks, termasuk formulir HTML.

FlexBox memberi kita fleksibilitas besar untuk membangun bentuk yang indah dengan cepat. Hal utama untuk dipahami tentang FlexBox adalah bahwa itu adalah alat manipulasi kontainer: Ini bertujuan untuk memberikan cara yang lebih efisien untuk meletakkan, menyelaraskan, dan mendistribusikan ruang di antara item dalam wadah, bahkan ketika ukurannya tidak diketahui dan / atau dinamis (karenanya Word 'Flex').

Yang menarik adalah bahwa Flexbox memberi kita fleksibilitas besar untuk membangun bentuk kita dengan cepat tanpa menggunakan kueri media apa pun. Plus, semua browser saat ini mendukungnya.

Kami Panduan Desainer Web untuk Flexbox Artikel memberi tahu Anda lebih banyak, tetapi untuk saat ini mari kita lakukan beberapa latihan dan belajar bagaimana memanfaatkan FlexBox untuk menciptakan bentuk responsif. Hal pertama yang pertama, mari kita tentukan struktur HTML untuk bentuk kita: 

 & lt; form & gt;
& lt; ul kelas = "Flex" & gt;
& lt; li & gt; & lt; label untuk = "nama depan" & gt; nama depan & lt; / label & gt; & lt; input type = "text" id = "nama depan" placeholder = "gt; & lt; / li & gt;
& lt; li & gt; & lt; label untuk = "nama belakang" & gt; nama belakang & lt; / label & gt; & lt; input tipe = "teks" id = "nama terakhir" placeholder = "masukkan nama belakang Anda di sini" & gt; & gt; / li & gt;
& lt; li & gt; & lt; label untuk = "email" & gt; email & label & label & gt; & gt; input type = "kirimkan email" id = "email" placeholder = "masukkan email Anda di sini" & gt; & gt; & gt;
& lt; li & gt; & lt; label untuk = "telepon" & gt; telepon & lt; / label & gt; & lt; type input = "Tel" id = "telepon" placeholder = "masukkan telepon Anda di sini" & gt; & li;
& lt; li & gt; & lt; label untuk = "pesan" & gt; pesan & lt; / label & gt; & gt; textarea rows = "6" id = "pesan" placeholder = "masukkan pesan Anda di sini" & gt; & lt; / lt; li & gt;
& lt; li & gt; & lt; tombol type = "kirim" & gt; kirim & lt; / tombol & gt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Perhatikan bahwa masing-masing item daftar dalam formulir kami memiliki kelas melenturkan . Kelas ini mengidentifikasi wadah fleksibel dalam bentuk kami. Salah satu manfaat besar dari Flexbox adalah kemampuannya untuk menggunakan elemen HTML apa pun untuk menentukan wadah dan elemennya.

Anda dapat menerapkan styling FlexBox ke elemen HTML apa pun, yang berarti Anda dapat dengan mudah menggabungkan dan memoles elemen secara independen satu sama lain. Perlu diingat bahwa Flexbox hanyalah mekanisme penataan gaya, yang berarti Anda dapat menambah dan menghapusnya sesuka hati.

Mari kita identifikasi wadah fleksibel di CSS kami. Selain itu, kami ingin secara vertikal memusatkan item flex melintasi sumbu silang. Cukup mudah untuk menentukan bahwa, kita hanya perlu mengatur aturan CSS sederhana: 

 .flex li {
Tampilan: Flex;
Flex-Wrap: Bungkus;
Align-Item: Center;
}

Langkah selanjutnya adalah menentukan lebar untuk item Flex. Persyaratan utama:

  • Label harus setidaknya 100px dan paling banyak 200px
  • Membentuk elemen yang datang setelah label harus minimal 200px

Apa yang diberikan ini kepada kita? Setiap label dan elemen formulir yang terkait akan ditampilkan pada baris horizontal tunggal ketika lebar bentuk total minimal 300px (ingat, kami menggunakan label yang selaras dengan benar di sini). 

 .flex & gt; li & gt; label {
Flex: 1 0 100px;
Lebar Maks: 200px;
}
.flex & gt; li & gt; Label + * {
Flex: 1 0 200px;
}

Terakhir, untuk tombol Kirim, yang juga merupakan item flex, kami mendefinisikan beberapa gaya dasar: 

. Tombol LiFlex Li {
MARGIN: AUTO;
Padding: 22px 46px;
}

Seperti yang Anda lihat, dengan markup minimal dan kekuatan Flexbox, kami telah membangun formulir responsif.

Dengan lebih banyak pengguna yang membawa perangkat seluler, sangat penting untuk memberikan pengalaman yang mudah digunakan pada perangkat apa pun. Poin kuncinya adalah beradaptasi dengan kebutuhan pengguna dan kemampuan perangkat.

Artikel ini awalnya diterbitkan dalam masalah 287 dari Net Magazine. , majalah untuk desainer dan pengembang web profesional - menawarkan tren web baru terbaru, teknologi, dan teknik. Berlangganan bersih di sini.

Artikel terkait:

  • Buat bentuk dan tabel responsif
  • Mulai dengan aksesibilitas web
  • 7 Alat Besar untuk Menguji Desain Web Anda Responsif

Bagaimana caranya - Artikel Terpopuler

Gambar Gambar: Panduan Pemula

Bagaimana caranya Sep 11, 2025

Halaman 1 dari 3: Cara menggambar angka: perempuan Cara menggambar angka:..

Pengaturan Privasi Facebook: Cara Menjaga Profil Pribadi Anda

Bagaimana caranya Sep 11, 2025

(Kredit Gambar: Alex Blake / Facebook) Pengaturan privasi Facebook mungkin tampak seperti sedikit paradoks. Facebook ..

Cara membuat interior dengan Blender's Eevee

Bagaimana caranya Sep 11, 2025

Atypique-Studio: Berisi tekstur dari poliigon.com - tekstur mungkin tidak didistribusikan kembali Ketika saya mulai m..

Cara menggambar angka yang lebih realistis

Bagaimana caranya Sep 11, 2025

Dalam tutorial menggambar gambar ini kita akan fokus pada batang tubuh dan payudara, terutama pada bagaimana payudara berubah ben..

Ciptakan Sinar Tuhan di V-Ray

Bagaimana caranya Sep 11, 2025

Dalam fotografi dunia nyata, sinar cahaya adalah yang paling terlihat ketika mereka memiliki permukaan untuk memantul, seperti de..

Level Atas Karakter Game dengan Majelis Kreatif

Bagaimana caranya Sep 11, 2025

Dengan berbagai macam makhluk dan karakter yang menakutkan untuk membuat, bekerja dengan lokakarya permainan untuk menerjemahkan ..

Cara merancang sampul buku yang sempurna

Bagaimana caranya Sep 11, 2025

Publishing sendiri menyumbang 22 persen dari pasar ebook Inggris dan terus tumbuh, makna penulis semakin berkaitan langsung denga..

Pertajam keterampilan lukisan hidup Anda

Bagaimana caranya Sep 11, 2025

Tidak ada yang saya cintai lebih baik daripada berada di luar ruangan melukis dunia di sekitar saya, tetapi itu jelas merupakan perjuangan untuk saya ketika saya pertama kali mulai menggunaka..

Kategori