Membuat komponen Setelan

Ringkasan dasar tentang cara membuat komponen setelan penggeser dan kotak centang.

Adam Argyle

Dalam posting ini saya ingin berbagi pemikiran tentang membangun komponen Setelan untuk web yang responsif, mendukung banyak {i>input<i} perangkat, dan berfungsi di berbagai browser. Coba demo.

Jika Anda lebih suka video, atau menginginkan pratinjau UI/UX dari apa yang sedang kami buat, berikut adalah panduan yang lebih singkat di YouTube:

Ringkasan

Saya telah membagi aspek komponen ini ke dalam bagian-bagian berikut:

1. Tata Letak
2. Warna
3. Input rentang kustom
4. Input kotak centang kustom
5. Pertimbangan aksesibilitas
6. JavaScript

Tata letak

Ini adalah demo Tantangan GUI pertama yang menjadi semua Petak CSS! Berikut ini setiap {i>grid<i} ditandai dengan Chrome DevTools untuk petak:

Hanya untuk celah

Tata letak yang paling umum:

foo {
  display: grid;
  gap: var(--something);
}

Saya menyebut tata letak ini "hanya untuk celah" karena hanya menggunakan {i>grid<i} untuk menambahkan celah antar blok.

Lima tata letak menggunakan strategi ini, semuanya ditampilkan berikut ini:

Elemen fieldset, yang berisi setiap grup input (.fieldset-item), menggunakan gap: 1px untuk membuat batas garis rambut di antara elemen. Tidak ada solusi perbatasan yang rumit.

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

Kemasan petak alami

Tata letak yang paling kompleks akhirnya menjadi tata letak makro, tata letak logis sistem antara <main> dan <form>.

Menempatkan konten penggabungan di tengah

Flexbox dan petak keduanya memberikan kemampuan untuk align-items atau align-content, dan saat menangani elemen penggabungan, tata letak content akan mendistribusikan ruang di antara anak-anak sebagai kelompok.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

Elemen utama menggunakan perataan place-content: center singkatan agar turunan berada di tengah secara vertikal dan horizontal dalam tata letak satu dan dua kolom.

Tonton video di atas bagaimana "konten" tetap berada di tengah, meskipun telah yang terjadi.

Ulangi paskan otomatis minmax

<form> menggunakan tata letak petak adaptif untuk setiap bagian. Tata letak ini beralih dari satu ke dua kolom berdasarkan ruang yang tersedia.

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

Petak ini memiliki nilai yang berbeda untuk row-gap (--space-xl) dengan column-gap (--space-xxl) untuk memberikan sentuhan khusus pada tata letak responsif. Ketika kolom menumpuk, kita menginginkan celah yang besar, tetapi tidak sebesar saat kita berada di layar yang lebar.

Properti grid-template-columns menggunakan 3 fungsi CSS: repeat(), minmax(), dan min(). Una Kravets memiliki blog tata letak yang bagus posting tentang hal ini. RAM.

Ada 3 tambahan khusus dalam tata letak kita, jika Anda membandingkannya dengan Una:

• Kita meneruskan fungsi min() tambahan.
• Kami menentukan align-items: flex-start.
• Ada gaya max-width: 89vw.

Fungsi min() tambahan dijelaskan dengan baik oleh Evan Minto di blognya di bagian posting Kisi CSS yang Responsif Secara Intrinsik dengan minmax() dan min(). Sebaiknya baca informasi tersebut. Koreksi perataan flex-start adalah untuk menghapus efek peregangan {i>default<i}, sehingga turunan tata letak ini tidak harus memiliki tinggi yang sama, mereka dapat memiliki tinggi intrinsik yang alami. Tujuan Video YouTube memiliki perincian singkat tentang penambahan penyelarasan ini.

max-width: 89vw layak untuk diuraikan kecil dalam postingan ini. Saya akan menunjukkan tata letak dengan dan tanpa gaya yang diterapkan:

Apa yang terjadi? Saat ditentukan, max-width akan memberikan konteks, ukuran eksplisit atau pasti ukuran untuk auto-fit algoritma tata letak untuk mengetahui caranya banyak pengulangan yang bisa masuk ke dalam ruang. Meskipun tampaknya jelas bahwa spasi adalah "lebar penuh", sesuai dengan spesifikasi kisi CSS, ukuran tertentu atau ukuran maksimum harus disediakan. Saya telah memberikan ukuran maksimum.

Jadi, mengapa 89vw? Karena "berhasil" untuk tata letak saya. Saya dan beberapa orang Chrome lainnya sedang menyelidiki mengapa nilai yang lebih masuk akal, seperti 100vw saja tidaklah cukup, dan jika ini memang bug.

Spasi

Mayoritas harmoni tata letak ini berasal dari palet jarak yang terbatas, 7 tepatnya.

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Penggunaan alur ini sangat lancar dengan petak, CSS @nest, dan sintaksis level 5 @media. Berikut contohnya, kumpulan gaya tata letak yang sepenuhnya <main>.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

Petak dengan konten yang berada di tengah, dengan padding yang cukup secara default (seperti di perangkat seluler). Tapi seiring bertambahnya ruang area pandang yang tersedia, area akan menyebar dengan meningkatkan padding. CSS 2021 terlihat cukup bagus!

Ingat tata letak sebelumnya, "hanya untuk celah"? Berikut ini versi yang lebih lengkap dari tampilannya dalam komponen ini:

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

Warna

Penggunaan warna yang terkontrol membantu desain ini tampil beda dan ekspresif akan sangat minim. Saya melakukannya seperti ini:

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

Saya memberi nama warna permukaan dan teks dengan angka, bukan nama seperti surface-dark dan surface-darker karena dalam kueri media, saya akan membalik sedangkan terang dan gelap tidak akan bermakna.

Saya membaliknya dalam kueri media preferensi seperti ini:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

Penting untuk melihat sekilas gambaran dan strategi keseluruhan sebelum kita akan membahas detail sintaks warna. Tapi, karena saya sudah berjalan terlalu jauh, izinkan saya kembali.

LCH?

Tanpa masuk terlalu dalam ke bidang teori warna, LCH adalah sintaks yang berorientasi pada manusia, yang bergantung pada cara kita mempersepsikan warna, bukan cara kita mengukur warna dengan matematika (seperti 255). Hal ini memberikan keuntungan tersendiri karena manusia dapat menulisnya dengan lebih mudah dan manusia akan selaras dengan penyesuaian ini.

Untuk hari ini, dalam demo ini, mari kita fokus pada sintaksis dan nilai yang saya balikkan untuk membuat terang dan gelap. Mari kita lihat 1 platform dan 1 warna teks:

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) diterjemahkan menjadi kecerahan 10%, 0 kroma, dan 0 hue: a berwarna abu-abu yang sangat gelap. Kemudian, dalam kueri media untuk mode terang, tingkat kecerahan dibalik menjadi 90% dengan --surface1: lch(90 0 0);. Dan itulah inti dari strategi. Mulailah dengan hanya mengubah kecerahan di antara 2 tema, mempertahankan rasio kontras yang dibutuhkan desain atau apa yang dapat mempertahankan aksesibilitas.

Bonusnya dengan lch() di sini adalah bahwa kecerahan berorientasi pada manusia, dan kita dapat merasakan baik tentang perubahan %, bahwa perubahan tersebut akan terlihat dan konsisten % yang berbeda. hsl() misalnya tidak seperti andal.

Ada lagi yang perlu pelajari tentang ruang warna dan lch() jika Anda tertarik. Sebentar lagi!

CSS saat ini tidak dapat mengakses warna ini sama sekali. Izinkan saya ulangi: Kita tidak memiliki akses ke sepertiga dari warna di sebagian besar warna monitor. Dan ini bukan sekadar warna, tetapi warna yang paling cemerlang yang dapat ditampilkan di layar. Situs web kita lenyap karena perkembangan hardware monitor lebih cepat daripada spesifikasi CSS dan implementasi browser.

Lea Verou

Kontrol formulir adaptif dengan skema warna

Banyak browser mengirimkan kontrol tema gelap, saat ini Safari dan Chromium, tetapi Anda harus tentukan dalam CSS atau HTML bahwa desain Anda menggunakannya.

Hal di atas menunjukkan efek properti dari panel Styles DevTools. Demo ini menggunakan tag HTML, yang menurut saya umumnya lokasi yang lebih baik:

<meta name="color-scheme" content="dark light">

Pelajari semuanya dalam color-scheme artikel oleh Thomas Pengarah. Masih banyak lagi yang dapat daripada input kotak centang gelap.

accent-color CSS

Ada terbaru aktivitas di sekitar accent-color pada elemen formulir, menjadi gaya CSS tunggal yang dapat mengubah warna yang digunakan dalam elemen input browser. Baca selengkapnya di sini GitHub. Saya telah memasukkannya ke gaya untuk komponen ini. Karena {i>browser<i} mendukungnya, kotak centang saya akan lebih banyak tentang tema dengan pop warna merah muda dan ungu.

input[type="checkbox"] {
  accent-color: var(--brand);
}

Warna muncul dengan gradien tetap dan fokus dalam

Warna muncul paling sering ketika digunakan dengan hemat, dan salah satu cara yang saya suka mencapai yaitu melalui interaksi UI yang penuh warna.

Ada banyak lapisan umpan balik dan interaksi UI dalam video di atas, yang membantu memberikan kepribadian pada interaksi dengan:

• Menyoroti konteks.
• Memberikan masukan UI tentang "seberapa penuh" nilainya berada dalam rentang.
• Memberikan masukan UI bahwa kolom menerima input.

Untuk memberikan masukan saat elemen sedang berinteraksi, CSS menggunakan :focus-within untuk mengubah tampilan berbagai elemen, mari kita uraikan .fieldset-item, ini sangat menarik:

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

Jika salah satu turunan elemen ini memiliki fokus di dalam:

1. Latar belakang .fieldset-item diberi warna permukaan dengan kontras yang lebih tinggi.
2. svg bertingkat diisi dengan warna putih agar kontrasnya lebih tinggi.
3. <picture> clip-path bertingkat diperluas menjadi lingkaran penuh dan latar belakang diisi dengan gradien tetap yang cerah.

Rentang kustom

Dengan elemen input HTML berikut, saya akan menunjukkan cara menyesuaikan penampilan:

<input type="range">

Ada 3 bagian untuk elemen ini yang perlu kita sesuaikan:

1. Elemen rentang / penampung
2. Lacak
3. Jempol

Gaya elemen rentang

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

Beberapa baris pertama CSS adalah bagian khusus dari gaya, dan saya harap melabelinya dengan jelas. Gaya lainnya sebagian besar adalah gaya {i>reset<i}, untuk memberikan fondasi yang konsisten untuk membangun bagian yang rumit dari komponen.

Gaya pelacakan

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

Trik untuk ini adalah "mengungkapkan" warna isian yang cerah. Hal ini dilakukan dengan gradien "hard stop" di atasnya. Gradien transparan hingga persentase pengisian, dan setelah yang menggunakan warna permukaan jalur yang tidak terisi. Di balik permukaan yang tidak terisi itu, ada warna lebar penuh, menunggu transparansi untuk mengungkapkannya.

Melacak gaya pengisian

Desain saya membutuhkan JavaScript untuk mempertahankan gaya isian. Ada adalah strategi khusus CSS, tetapi mereka memerlukan elemen thumb dengan tinggi yang sama sebagai trek, dan saya tidak bisa menemukan keharmonisan dalam batas itu.

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

Menurut saya, hal ini memberikan peningkatan visual yang bagus. {i>Penggeser<i} berfungsi dengan baik tanpa JavaScript, properti --track-fill tidak diperlukan, properti tersebut tidak akan memiliki gaya isian jika tidak ada. Jika JavaScript tersedia, isi kolom kustom sambil mengamati setiap perubahan yang dilakukan pengguna, menyinkronkan properti khusus dengan nilai.

Berikut adalah posting di Trik CSS oleh Ana Tudor, yang menunjukkan solusi khusus CSS untuk {i>track fill<i}. Saya juga menemukan ini Elemen range sangat menginspirasi.

Gaya thumb

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

Mayoritas gaya ini adalah untuk membuat lingkaran yang bagus. Sekali lagi, Anda melihat gradien latar belakang tetap di sana yang menyatukan warna dinamis thumb, track, dan elemen SVG terkait. Saya memisahkan gaya untuk interaksi untuk membantu mengisolasi box-shadow yang digunakan untuk sorotan kursor:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

Tujuannya adalah untuk memudahkan pengelolaan dan memberikan animasi sorotan visual untuk masukan pengguna. Dengan menggunakan bayangan kotak, saya dapat menghindari pemicu tata letak dengan efek. Saya melakukan ini dengan membuat bayangan yang tidak diburamkan dan sesuai dengan bentuk lingkaran thumb. Kemudian saya mengubah dan mentransisikan ukuran yang tersebar saat kursor diarahkan ke atasnya.

Kalau saja efek sorotan yang begitu mudah di kotak centang...

Pemilih lintas browser

Saya mendapati bahwa saya memerlukan pemilih -webkit- dan -moz- ini untuk mencapai lintas browser {i>consistency <i}(konsistensi):

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

Kotak Centang Kustom

Dengan elemen input HTML berikut, saya akan menunjukkan cara menyesuaikan penampilan:

<input type="checkbox">

Ada 3 bagian untuk elemen ini yang perlu kita sesuaikan:

1. Elemen kotak centang
2. Label terkait
3. Efek sorotan

Elemen kotak centang

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

Gaya transform-style dan position disiapkan untuk elemen pseudo yang akan kami perkenalkan nanti untuk menata gaya sorotan. Jika tidak, kemungkinan besar sedikit opini kecil tentang gaya berpendirian saya dari saya. Saya suka kursornya menjadi {i>pointer<i}, saya suka offset garis batas, kotak centang default terlalu kecil, dan jika accent-color berukuran didukung, kirimkan kotak centang ke dalam skema warna merek.

Label kotak centang

Penting untuk memberikan label untuk kotak centang karena 2 alasan. Yang pertama adalah menunjukkan fungsi nilai kotak centang, untuk menjawab "aktif atau nonaktif untuk apa?" Kedua adalah untuk UX, pengguna web sudah terbiasa berinteraksi dengan melalui label yang terkait.

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

Pada label, masukkan atribut for yang mengarah ke kotak centang berdasarkan ID: <label for="text-notifications">. Pada kotak centang Anda, gandakan nama dan id untuk pastikan ditemukan dengan berbagai alat dan teknologi, seperti {i>mouse<i} atau {i>screen reader<i}: <input type="checkbox" id="text-notifications" name="text-notifications">. :hover, :active, dan lainnya tersedia gratis dengan koneksi, sehingga meningkatkan cara berinteraksi dengan formulir Anda.

Sorotan kotak centang

Saya ingin menjaga antarmuka saya tetap konsisten, dan elemen {i>slider<i} memiliki yang ingin saya gunakan dengan kotak centang tersebut. Thumbnail-nya digunakan dapat menggunakan box-shadow dan propertinya adalah spread untuk menskalakan bayangan ke atas dan ke bawah. Akan tetapi, efek itu tidak berfungsi di sini karena kotak centang kita adalah, dan seharusnya menjadi, persegi.

saya bisa mendapatkan efek visual yang sama dengan elemen semu, dan sebuah jumlah CSS yang rumit:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

Membuat elemen semu lingkaran sangat mudah, tetapi menempatkannya di balik elemen yang melampirkannya lebih sulit. Berikut informasi sebelum dan setelah saya memperbaikinya:

Ini jelas merupakan interaksi mikro, tetapi penting bagi saya untuk menjaga konsistensi. Teknik penskalaan animasi sama seperti yang telah kita gunakan pada tempat lain. Kita menetapkan properti khusus ke nilai baru dan membiarkan CSS mentransisikannya berdasarkan preferensi gerakan. Fitur utamanya adalah translateZ(-1px). Tujuan induk membuat ruang 3D dan turunan elemen semu ini memanfaatkannya dengan menempatkan dirinya sedikit kembali ke spasi z.

Aksesibilitas

Video YouTube melakukan demonstrasi {i>mouse<i}, {i>keyboard<i}, dan interaksi pembaca layar untuk komponen setelan ini. Saya akan menyebutkan beberapa detailnya di sini.

Pilihan Elemen HTML

<form>
<header>
<fieldset>
<picture>
<label>
<input>

Masing-masing berisi petunjuk dan tips untuk alat penjelajahan pengguna. Beberapa elemen menyediakan petunjuk interaksi, beberapa interaktivitas yang terhubung, dan beberapa membantu membentuk pohon aksesibilitas yang dinavigasi pembaca layar.

Atribut HTML

Kita dapat menyembunyikan elemen yang tidak dibutuhkan oleh {i>screen reader<i}, dalam hal ini ikon di sebelah {i>slider<i}:

<picture aria-hidden="true">

Video di atas menunjukkan alur pembaca layar di Mac OS. Perhatikan bagaimana input fokus bergerak langsung dari satu {i>slider<i} ke {i>slider <i}berikutnya. Ini karena kita telah menyembunyikan ikon yang mungkin menjadi perhentian di perjalanan ke {i>slider<i} berikutnya. Tanpa ini pengguna, pengguna harus berhenti, mendengarkan, dan bergerak melewati gambar yang mereka mungkin tidak akan dapat melihat.

SVG merupakan sekumpulan alat matematika. Mari tambahkan elemen <title> agar dapat mengarahkan mouse secara bebas judul dan komentar yang dapat dibaca manusia tentang apa yang dibuat oleh matematika:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

Selain itu, kita telah menggunakan cukup banyak tanda HTML yang jelas, sehingga formulir penggunaan {i>mouse<i}, {i>keyboard<i}, {i> video game controller, <i}dan pembaca layar.

JavaScript

Saya sudah membahas bagaimana warna isian trek dikelola dari JavaScript, jadi sekarang mari kita lihat JavaScript terkait <form>:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

Setiap kali formulir berinteraksi dan diubah, konsol mencatat formulir tersebut sebagai sebuah objek ke dalam tabel untuk peninjauan yang mudah sebelum mengirimkannya ke server.

Kesimpulan

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda akan melakukannya?! Hal ini membuat suasana menjadi menyenangkan arsitektur komponen! Siapa yang akan membuat versi pertama dengan slot di framework favorit Anda? 🙂

Mari kita diversifikasi pendekatan kami dan mempelajari semua cara untuk membangun di web. Buat demo, link tweet saya, dan saya akan menambahkannya ke bagian Remix Komunitas di bawah.

Remix komunitas

• @tomayac dengan gayanya terkait arahkan kursor ke label kotak centang! Versi ini tidak memiliki selisih kursor antara elemen: demo dan sumber.