Kaydırma çubukları ve onay kutularından oluşan bir ayar bileşeninin nasıl oluşturulacağına ilişkin temel bir genel bakış.
Bu gönderide, JavaScript'iniz için bir Ayarlar bileşeni oluşturma birden fazla cihaz girişini destekleyen ve farklı cihazlarda çalışan izin verir. Demoyu deneyin.
Videoyu tercih ediyorsanız veya geliştirdiğimiz şeyin kullanıcı arayüzü/kullanıcı deneyimi önizlemesini istiyorsanız YouTube'da daha kısa adım adım açıklamalı kılavuz:
Genel Bakış
Bu bileşenin özelliklerini aşağıdaki bölümlere ayırdık:
- Yerleşimler
- Renk
- Özel aralık girişi
- Özel onay kutusu girişi
- Erişilebilirlikle ilgili dikkat edilmesi gereken noktalar
- JavaScript
Düzenler
Bu, tamamı CSS ızgarası olan ilk GUI Yarışması demosudur! Izgaralar ızgara için Chrome Geliştirici Araçları ile vurgulanmıştır:
Sadece boşluk
En yaygın düzen:
foo {
display: grid;
gap: var(--something);
}
Ben bu düzeni "yalnızca boşluklar için" çünkü bloklar arasına boşluk eklemek için yalnızca ızgara kullanıyor.
Bu strateji beş düzende kullanılıyor. Bunların tümü aşağıda gösterilmiştir:
Her bir giriş grubunu (.fieldset-item
) içeren fieldset
öğesi, şunları yapmak için gap: 1px
kullanıyor:
öğeler arasında ince çizgili kenarlıklar oluşturun. Karmaşık bir sınır çözümü yok!
.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); } } }
Doğal ızgara sarmalama
En karmaşık düzen makro düzen, mantıksal düzen
<main>
ve <form>
arasında bir sistem.
Sarmalama içeriğini ortalama
Hem Flexbox hem de ızgara, align-items
veya
align-content
ve sarmalama öğeleriyle çalışırken content
düzeni
hizalama, grup olarak çocuklar arasında alan dağıtır.
main {
display: grid;
gap: var(--space-xl);
place-content: center;
}
Ana öğe, place-content: center
hizalamasını kullanıyor
steno yani
alt öğelerin hem bir hem de iki sütunlu düzende dikey ve yatay olarak ortalandığını gösterir.
Yukarıdaki videoyu izleyerek "içeriğin" sarmalasa bile ortada kalır olmuştur.
Minimum otomatik sığdırma ayarını tekrarla
<form>
, her bölüm için uyarlanabilir bir ızgara düzeni kullanır.
Bu düzen, kullanılabilir alana göre bir sütundan iki sütuna geçer.
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;
}
Bu ızgaranın row-gap
(--space-xl) değeri, column-gap
(--space-xxl) değerinden farklı
duyarlı düzene özel bir dokunuş katın. Sütunlar üst üste geldiğinde
büyük boşluk olmasını isteyebiliriz, ancak geniş ekranlardaki kadar büyük değildir.
grid-template-columns
özelliği, 3 CSS işlevi kullanır: repeat()
, minmax()
ve
min()
. Una Kravets'in harika bir düzene sahip blogu var
bir yayın paylaşarak
RAM.
Düzenimizi Una'nınkiyle karşılaştırırsanız 3 özel ekleme var:
- Fazladan bir
min()
işlevi aktarılır. align-items: flex-start
belirtiriz.max-width: 89vw
stili vardır.
Ek min()
işlevi Evan Minto tarafından
post minmax() ve minmax() ile Doğal Olarak Duyarlı CSS Izgarası
min() işlevini kullanın.
Bunu da okumanızı öneririm. flex-start
hizalama düzeltmesi:
önceki esneme efektini kaldırın. Böylece, bu düzenin alt öğeleri
ve doğal, doğuştan gelen yüksekliklere sahip olabilirler. İlgili içeriği oluşturmak için kullanılan
Bu uyum ekleme işleminin kısa bir dökümünü YouTube videosunda bulabilirsiniz.
max-width: 89vw
, bu yayındaki kısa bir özete değiyor.
Stil uygulanmış ve uygulanmayan düzeni size göstereyim:
Neler oluyor? max-width
belirtildiğinde bağlam sağlar,
açıkça boyutlandırma veya denetimsiz
auto-fit
için boyut
düzen algoritmasının
tekrarlamaktan kaçınmanıza yardımcı olur. Basit gibi görünse de
CSS ızgara spesifikasyonuna göre, boşluk "tam genişlik" olduğunda
sağlanmalıdır. Maksimum boyut sağladım.
Peki, neden 89vw
? Çünkü “işe yaradı” benim düzenim için uygun.
Ben ve birkaç Chrome kişi daha makul bir değerin neden daha iyi
gibi bir ifadenin 100vw
yeterli olmadığını ve bu gerçekten bir hataysa,
Boşluk
Bu düzenin uyumunun büyük kısmı, sınırlı bir boşluk paletinden gelir (7) daha iyi olur.
:root {
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-xxl: 6rem;
}
Bu akışların ızgara, CSS @nest ve seviye 5 söz dizimi ile iyi bir şekilde kullanılması
/ @media. Aşağıda, tam <main>
düzen grubu olan bir örnek verilmiştir.
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);
}
}
}
Ortalanmış içeriğe sahip, varsayılan olarak orta düzeyde dolgulu bir ızgara (mobil cihazlarda olduğu gibi). Ama Daha fazla görüntü alanı alanı arttıkça dolgu artar. 2021 CSS'si oldukça iyi görünüyor.
Daha önce bahsettiğimiz "sadece boşluk için" düzeni hatırlıyor musunuz? Arkadaş Bitkiler projesinin nasıl göründüğüne bakalım:
header {
display: grid;
gap: var(--space-xxs);
}
section {
display: grid;
gap: var(--space-md);
}
Renk
Kontrollü renk kullanımı, bu tasarımın hem etkileyici hem de dikkat çekici olmasına yardımcı oldu çok önemlidir. Şöyle yapıyorum:
: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);
}
Yüzey ve metin renklerimi gibi adların yerine sayılarla adlandırıyorum
surface-dark
ve surface-darker
, çünkü medya sorgusunda
açık ve koyu renkler anlam ifade etmez.
Bunları şu şekilde bir tercih edilen medya sorgusuna çeviriyorum:
: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);
}
}
}
Proje başlatmadan önce genel resme ve stratejiye hızlıca göz atmak renk söz dizimi ayrıntılarına gireceğiz. Ama biraz daha ileride olduğum için Son sözü hatırlayalım.
LCH mi?
LCH, renk teorisinin derinliklerine inmeden insan odaklı bir söz dizimidir. rengi ölçme şeklimize değil, rengi nasıl algıladığımıza (örneğin, 255). İnsanlar metinleri daha kolay yazabildiği ve başka şekillerde yazabildiği için bu yöntem ona insanlar da bu değişime uyum sağlayacaktır.
Bugün bu demoda, çevirdiğim söz dizimine ve değerlere karartabiliriz. 1 yüzey ve 1 metin rengine bakalım:
: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)
; 10%
açıklık, 0 renk ve 0 ton anlamına gelir: a
çok koyu renksiz gri. Ardından, açık mod için medya sorgusunda,
--surface1: lch(90 0 0);
ile 90%
haline getirildi. Konuşmanın ana fikri budur.
üzerine konuşacağız. 2 tema arasındaki açıklığı değiştirerek başlayın.
ve erişilebilirliğin korunması için gerekli olan
kontrast oranlarıdır.
lch()
ile birlikte çalışmanın avantajı, hafifliğin insan odaklı olması ve
bir %
değişiklik, algısal ve tutarlı olması
%
farklı. Örneğin hsl()
, şu şekilde değildir:
güvenilir olarak tanımlar.
Yapılacak daha şey var
şunun hakkında bilgi edinin:
renk boşluklarından ve
lch()
adresinden ulaşabilirsiniz. Çok yakında!
CSS şu anda bu renklere hiç erişemiyor. Tekrar belirtmek isterim: Günümüzdeki en modern renkteki renklerin üçte birine erişimimiz yok. izleme Bunlar sadece herhangi bir renk değil, toplantı boyunca gösterilebileceğini belirleyin. Monitör donanımı değiştiği için web sitelerimiz kapatıldı ve tarayıcı uygulamalarından daha hızlı sonuçlar verir.
Lea Verou
Renk şemasıyla uyarlanabilir form kontrolleri
Çoğu tarayıcı, şu anda Safari ve Chromium olmak üzere koyu tema kontrollerini sunmaktadır, ancak tasarımınızın bunları kullandığını CSS veya HTML'de belirtmeniz gerekir.
Yukarıda, mülkün Stiller panelinden özelliğin etkisi gösterilmektedir Geliştirici Araçları'nı tıklayın. Demoda HTML etiketi kullanılıyor. Bence bu etiket genellikle daha iyi bir konum:
<meta name="color-scheme" content="dark light">
Bu konu hakkında daha fazla bilgiyi bu color-scheme
sayfasında bulabilirsiniz.
Thomas tarafından yazılmış makale
Steiner. Yapılacak daha çok şey var
koyu onay kutusu girişlerinden
çok daha fazladır.
CSS accent-color
Geçtiğimiz gün içinde
etkinlik
Form öğelerinde accent-color
, biçimi değiştirebilen tek bir CSS stilidir
tarayıcı giriş öğesinde kullanılan ton rengi. Buradan daha fazla bilgi edinebilirsiniz.
GitHub'ı tıklayın. Bunu da
yeni stiller oluşturabilirsiniz. Tarayıcılar desteklediğinde, onay kutularım
daha fazlasını yapabilirsiniz.
input[type="checkbox"] {
accent-color: var(--brand);
}
Sabit gradyanlara sahip çarpıcı renkler
Renkler ölçülü bir şekilde kullanıldığında en çok öne çıkar. Bunu başarmak için de üzerinden çok daha kolay şekilde erişebiliyor.
Yukarıdaki videoda çok sayıda kullanıcı arayüzü geri bildirimi ve etkileşimi katmanı var. Bunlar, aşağıdakileri yaparak etkileşiminize kişiliği katmaya yardımcı olabilir:
- Bağlam vurgulanıyor.
- "Ne kadar dolu" olduğuna dair kullanıcı arayüzü geri bildirimi sağlama değer aralıktaysa.
- Bir alanın girişi kabul ettiğine dair kullanıcı arayüzü geri bildirimi sağlama.
Bir öğeyle etkileşim kurulduğunda geri bildirim sağlamak için CSS
:focus-within
elemanlarının görünümünü değiştirmek için kullanılan sanal sınıf
.fieldset-item
, çok ilginç:
.fieldset-item {
...
&:focus-within {
background: var(--surface2);
& svg {
fill: white;
}
& picture {
clip-path: circle(50%);
background: var(--brand-bg-gradient) fixed;
}
}
}
Bu öğenin alt öğelerinden birinin odak noktası:
.fieldset-item
arka planına daha yüksek kontrastlı bir yüzey rengi atanır.- Daha yüksek kontrast için iç içe yerleştirilmiş
svg
beyaz renkle doldurulur. - İç içe yerleştirilmiş
<picture>
clip-path
tam daireye genişler ve arka plan parlak sabit renk geçişiyle dolu.
Özel aralık
Aşağıdaki HTML giriş öğesine dayanarak size, Virtual Verde için görünüm:
<input type="range">
Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:
Aralık öğesi stilleri
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 */
}
CSS'nin ilk birkaç satırı stillerin özel bölümleridir ve net bir şekilde etiketlemek işe yarar. Stillerin geri kalanı genellikle sıfırlanmış stillerden oluşur. bileşenin zor parçalarını oluşturmak için tutarlı bir temel sağlar.
Parça stilleri
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;
}
Bu işin sırrı ise "ortaya çıkarmak"tır. parlak dolgu rengi. Bu işlem renk geçişini etkinleştirin. Renk geçişi, dolgu yüzdesine kadar ve bu değerden sonra kullanın. Doldurulmayan yüzeyin arkasında tam genişlikte görünmesi için şeffaflık bekleniyor.
İzleme dolgu stili
Tasarımım, dolgu stilini korumak için JavaScript gerektiriyor. Orada Bunlar yalnızca CSS stratejileridir, ancak küçük resim öğesinin aynı yükseklikte olmasını gerektirirler bu sınırların içinde bir uyum yakalayamadım.
/* 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));
})
})
Bence bu, güzel bir görsel yükseltme için yeterli. Kaydırma çubuğu, arka planda
JavaScript, --track-fill
özelliği gerekli değildir, yalnızca bir
mevcut değilse dolgu stili. JavaScript kullanılabiliyorsa, özel
özelliğini kullanarak, kullanıcı değişikliklerini de gözlemleyerek özel mülkü
değer.
Harika bir
yayın
Ana'dan CSS Püf Noktaları
tek bir CSS çözümü olan Tudor,
parça dolgusunu tıklayın. Bunu da buldum
range
öğesi çok ilham verici.
Küçük resim stilleri
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;
}
Bu stillerin çoğu güzel bir daire oluşturmaktır.
Burada, arka plan gradyanını birleştiren sabit arka plan
baş parmakların, parçaların ve ilişkili SVG öğelerinin dinamik renkleri.
box-shadow
öğesinin izole edilmesine yardımcı olmak amacıyla etkileşim için stilleri ayırdım
fareyle üzerine gelme için kullanılan teknik:
@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;
}
}
Hedef, kullanıcı geri bildirimi vermek için kolayca yönetilebilen bir görselden oluşuyordu ve animasyonlu bir görselden oluşuyordu. Kutu gölgesi kullanarak tetikleme ve düzeni efektiyle birlikte kullanabilirsiniz. Bunu yapıyorum kullanarak, bulanıklaştırılmamış ve resmin dairesel şekline uygun bir gölge oluşturarak öğesine dokunun. Daha sonra, fareyle üzerine gelindiğinde yayılma boyutunu değiştirip geçiriyorum.
Keşke vurgulama efekti onay kutularında bu kadar kolay olsaydı...
Tarayıcılar arası seçiciler
Tarayıcılar arası erişim elde etmek için bu -webkit-
ve -moz-
seçicilere ihtiyacım olduğunu fark ettim
tutarlılık:
input[type="range"] {
&::-webkit-slider-runnable-track {}
&::-moz-range-track {}
&::-webkit-slider-thumb {}
&::-moz-range-thumb {}
}
Özel Onay Kutusu
Aşağıdaki HTML giriş öğesine dayanarak size, Virtual Verde için görünüm:
<input type="checkbox">
Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:
Onay kutusu öğesi
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;
}
transform-style
ve position
stilleri, daha sonra tanıtacağımız sözde öğe için hazırlanır.
seçin. Aksi takdirde genelde
veya düşünceli bir tarzda
ya da küçük yazılar. İmlecin işaretçi olmasını seviyorum.
dış çizgi ofsetleri, varsayılan onay kutuları çok küçük ve accent-color
destekleniyor ise, bu
onay kutusunu işaretleyin.
Onay kutusu etiketleri
Onay kutularına etiket eklemek 2 neden önemlidir. Birincisi, "ne için açık veya kapalı" cevabını vermek üzere onay kutusu değerinin ne için kullanıldığını gösterir. İkincisi kullanıcı deneyimi için: Web kullanıcıları kullanıcı deneyimiyle etkileşime onay kutularını işaretleyebilirsiniz.
<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>
Etiketinize, <label for="text-notifications">
kimliğine göre bir onay kutusuna işaret eden bir for
özelliği ekleyin. Onay kutunuzda hem adı hem de kimliği iki katına çıkarın
URL'nin fare veya ekran okuyucu gibi çeşitli araç ve teknolojilerde bulunduğundan emin olun:
<input type="checkbox" id="text-notifications" name="text-notifications">
:hover
, :active
ve daha fazlası bağlantıyla ücretsiz olarak geliyor.
etkileşime geçmenin yollarını gösterir.
Onay kutusu vurgulama
Arayüzlerimin tutarlı
olmasını istiyorum ve kaydırma çubuğu
onay kutusuyla birlikte kullanmak istediğim küçük resim vurgulamasını seçiyorum. Küçük resim
gölgeyi ölçeklendirmek için box-shadow
özelliğini ve spread
özelliğini kullanabilirsiniz.
aşağı tüketim. Ancak bu etki burada işe yaramaz çünkü onay kutularımız
be, kare.
Aynı görsel efekti yapay bir öğeyle ve bir bir o kadar da zor değil.
@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;
}
Daire sözde öğe oluşturmak basit bir iştir, ancak bunu yerleştirmek arka uçta olması daha zordu. İşte önceki ve ben düzelttikten sonra:
Bu kesinlikle mikro bir etkileşim, ancak görselliği korumak benim için önemli.
sağlayabilir. Animasyon ölçeklendirme tekniği,
başka yer. Özel bir özelliği yeni bir değere ayarladık ve CSS'nin bu özelliği geçirmesine izin verdik
göre yapılır. Buradaki temel özellik translateZ(-1px)
'dir. İlgili içeriği oluşturmak için kullanılan
bir 3D alan oluşturdu ve bu sözde öğe alt öğeyi
z-uzağının içine biraz geri gelecek şekilde yerleştirin.
Erişilebilirlik
YouTube videosunda fare, klavye ve bilgisayar ekran okuyucu etkileşimleri gibi çeşitli faktörlerden yararlanabilirsiniz. Şimdi Arkadaş Bitkiler Projesi’nin buradan inceleyebilirsiniz.
HTML Öğe Seçimleri
<form>
<header>
<fieldset>
<picture>
<label>
<input>
Bunların her biri, kullanıcının göz atma aracı için ipuçları ve ipuçları içerir. Bazı öğeler etkileşim ipuçları sunar, bazıları etkileşimi bağlar ve bazıları da etkileşimin şekillenmesine erişilebilirlik ağacı oluşturabilirsiniz.
HTML Özellikleri
Ekran okuyucuların ihtiyaç duymadığı öğeleri gizleyebiliriz. Bu durumda kaydırma çubuğunun yanındaki simge:
<picture aria-hidden="true">
Yukarıdaki videoda, Mac OS'te ekran okuyucu akışı gösterilmektedir. Girişin odak doğrudan bir kaydırma çubuğundan diğerine geçer. Bunun nedeni, sonraki kaydırıcıya giden yolda durak olabilecek simge. Bu olmadan kullanıcının durup dinlemesi ve resmin ötesine geçip geçmemesi diğer kullanıcılar da göremeyebilir.
SVG, matematikten oluşan bir gruptur. Fareyle üzerine gelindiğinde açılan bir <title>
öğesi ekleyelim
başlık ve matematiğin neden olduğuna dair, okunabilir bir yorum:
<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>
Bunun dışında, formun test edildiğinden emin olunması için oyun kumandalarında ve ekran okuyucularda oldukça iyi performans gösteriyor.
JavaScript
Parça dolgu renginin JavaScript'ten nasıl yönetildiğini ele almıştım.
Şimdi <form>
ile ilgili JavaScript'e bakalım:
const form = document.querySelector('form');
form.addEventListener('input', event => {
const formData = Object.fromEntries(new FormData(form));
console.table(formData);
})
Formla etkileşimde bulunulduğu ve form değiştirildiğinde, konsol bu formu şu şekilde günlüğe kaydeder: sunucuya gönderilmeden önce kolayca incelenebilmesi için bir nesneye ekleyebilirsiniz.
Sonuç
Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Bu, projeyle ilgili bileşenlerine ayıralım. İlk sürümü kim, çerçevenizi seçin. 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup beni tweet'le bağlantıları eklerim Aşağıdaki Topluluk remiksleri bölümüne göz atın!