Ein grundlegender Überblick über das Erstellen einer Einstellungskomponente mit Schiebereglern und Kästchen.
In diesem Beitrag möchte ich Ihnen zeigen, wie Sie eine Komponente für die Einstellungen für die responsiv, unterstützt die Eingabe mehrerer Geräte und funktioniert Browser. Demo ansehen
<ph type="x-smartling-placeholder">Wenn Sie Videos bevorzugen oder eine UI-/UX-Vorschau der Entwicklung wünschen, finden Sie hier kürzere Schritt-für-Schritt-Anleitung auf YouTube:
Übersicht
Ich habe die Aspekte dieser Komponente in die folgenden Abschnitte unterteilt:
- Layouts
- Farbe
- Benutzerdefinierter Bereich
- Eingabe eines benutzerdefinierten Kästchens
- Überlegungen zur Barrierefreiheit
- JavaScript
Layouts
Dies ist die erste GUI Challenge-Demo, bei der das gesamte CSS-Raster genutzt wird. Hier ist jedes Raster mit den Chrome-Entwicklertools für Grid hervorgehoben:
Nur für Lücken
Das gängigste Layout:
foo {
display: grid;
gap: var(--something);
}
Ich nenne dieses Layout nur für Lücken. da hier ein Raster verwendet wird, um Lücken zwischen den Blöcken zu schließen.
Diese Strategie wird bei fünf Layouts angewendet. Hier werden alle angezeigt:
Das fieldset
-Element, das alle Eingabegruppen (.fieldset-item
) enthält, verwendet gap: 1px
, um
die Rahmenlinien zwischen
den Elementen erstellen. Keine knifflige Grenzlösung!
.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); } } }
Natürliche Gitternetzverpackung
Das komplexeste Layout war das Makro-Layout, das logische Layout
zwischen <main>
und <form>
.
Verpacken von Inhalten zentrieren
Mit der Flexbox und dem Raster können Sie align-items
oder
align-content
und beim Umgang mit Wrapping-Elementen das content
-Layout
Ausrichtungen verteilen den Abstand unter den untergeordneten Elementen als Gruppe.
main {
display: grid;
gap: var(--space-xl);
place-content: center;
}
Das Hauptelement ist die Ausrichtung von place-content: center
Abkürzung, damit
dass die untergeordneten Elemente in ein- und zweispaltigen Layouts vertikal und horizontal zentriert sind.
Sehen Sie sich im Video oben an, bleibt zentriert, obwohl die aufgetreten ist.
Automatische Anpassung für Minimalwert wiederholen
<form>
verwendet für jeden Abschnitt ein adaptives Rasterlayout.
Dieses Layout wechselt je nach verfügbarem Platz von einer zu zwei Spalten.
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;
}
Dieses Raster hat einen anderen Wert für row-gap
(--space-xl) als column-gap
(--space-xxl)
um dem responsiven Layout eine individuelle Note zu geben. Wenn die Spalten gestapelt sind,
eine große Lücke, aber nicht so groß wie bei einem Breitbildbildschirm.
Die Eigenschaft grid-template-columns
verwendet drei CSS-Funktionen: repeat()
, minmax()
und
min()
. Una Kravets hat einen großartigen Blog mit Layout
einen Beitrag dazu posten,
RAM:
Es gibt drei besondere Ergänzungen in unserem Layout, wenn Sie es mit Unas vergleichen:
- Wir übergeben eine zusätzliche
min()
-Funktion. - Wir geben
align-items: flex-start
an. - Es gibt einen
max-width: 89vw
-Stil.
Die zusätzliche min()
-Funktion wird von Evan Minto im Blog in der
Post Intrinsically Responsive CSS Grid with minmax() and
min()
Ich empfehle Ihnen, sich das zu lesen. Die Ausrichtungskorrektur flex-start
besteht darin,
Standard-Dehnungseffekt entfernen, damit die untergeordneten Elemente dieses Layouts
gleich hoch sein müssen, können eine natürliche, unveränderliche Höhe haben. Die
Im YouTube-Video wird diese Anpassungserweiterung kurz erläutert.
In diesem Beitrag gibt es einen kleinen Überblick über max-width: 89vw
.
Ich zeige Ihnen das Layout mit und ohne angewendeten Stil:
Was ist passiert? Wenn max-width
angegeben ist, wird Kontext bereitgestellt.
explizite Größe oder bestimmte Größen
sizing für die auto-fit
Layout-Algorithmus, um zu wissen,
viele Wiederholungen,
die in den Raum passen. Auch wenn es offensichtlich zu sein scheint,
Abstand ist "volle Breite". Laut CSS-Rasterspezifikation muss eine bestimmte Größe oder maximale Größe angegeben werden.
bereitgestellt werden. Ich habe eine maximale Größe angegeben.
Warum also 89vw
? Weil es funktioniert hat für mein Layout.
Ich und ein paar andere Chrome-Nutzer untersuchen derzeit,
100vw
nicht ausreicht oder es sich tatsächlich um einen Fehler handelt.
Abstand
Ein Großteil der Harmonie dieses Layouts beruht auf einer begrenzten Palette von Abständen, 7 um genau zu sein.
:root {
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-xxl: 6rem;
}
Einfache Nutzung dieser Abläufe mit Grid-, CSS-@nest- und Level-5-Syntax
von @media. Hier ist ein Beispiel, der vollständige <main>
-Layoutsatz mit Stilen.
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);
}
}
}
Ein Raster mit zentriertem Inhalt, der standardmäßig (etwa auf Mobilgeräten) mäßig aufgefüllt ist. Aber Sobald mehr Platz im Darstellungsbereich verfügbar ist, wird er durch eine größere Abstände verteilt. Das Preisvergleichsportal 2021 sieht ziemlich gut aus!
Erinnern Sie sich noch an das frühere Layout „nur für Lücken“? Hier ist eine vollständige Version von wie sie in dieser Komponente aussehen:
header {
display: grid;
gap: var(--space-xxs);
}
section {
display: grid;
gap: var(--space-md);
}
Farbe
Durch den kontrollierten Einsatz von Farben konnte dieses Design als ausdrucksstark herausstechen. minimal. Ich mache das so:
: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);
}
Ich nenne meine Oberflächen- und Textfarben mit Zahlen und nicht mit Namen wie
surface-dark
und surface-darker
, weil ich in einer Medienabfrage
und hell und dunkel haben keine Bedeutung.
Ich drehe sie in einer bevorzugten Medienabfrage um:
: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);
}
}
}
Es ist wichtig, dass Sie sich vor dem Projektstart schauen wir uns die Syntax für Farben genauer an. Aber da ich mir ein wenig voraus bin, möchte ich noch ein bisschen weitermachen.
LCH?
LCH ist eine menschenorientierte Syntax, ohne in die Farbtheorie vorzudringen. die darauf ausgerichtet ist, wie wir Farbe wahrnehmen, und nicht, wie wir Farbe mit Mathematik messen (z. B. 255). Dies verleiht ihr einen entscheidenden Vorteil, da sie von Menschen einfacher geschrieben werden kann. dass die Menschen auf diese Anpassungen abgestimmt sind.
<ph type="x-smartling-placeholder">Konzentrieren wir uns heute in dieser Demo auf die Syntax und die Werte, um hell und dunkel zu werden. Betrachten wir eine Oberfläche und eine Textfarbe:
: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)
bedeutet 10%
Helligkeit, 0 Farbton und 0 Farbton: a
sehr dunkles, farbloses Grau. In der Medienabfrage für den hellen Modus
wird mit --surface1: lch(90 0 0);
in 90%
umgewandelt. Und das war der Kern des
. Ändern Sie zunächst die Helligkeit zwischen den beiden Themen,
Kontrastverhältnisse, die das Design erfordert, oder was die Barrierefreiheit aufrechterhalten kann.
Der Vorteil von lch()
ist, dass Leichtigkeit auf den Menschen ausgerichtet ist.
ist gut, dass die %
-Änderung wahrnehmbar und konsistent erfolgt.
die sich von %
unterscheiden. hsl()
ist beispielsweise nicht so
zuverlässig.
Es gibt noch mehr
mehr über
und lch()
, wenn Sie interessiert sind. Bald ist es so weit!
CSS kann derzeit überhaupt nicht auf diese Farben zugreifen. Ich möchte noch einmal wiederholen: Wir haben keinen Zugang zu einem Drittel der Farben in den meisten modernen Monitore. Das sind nicht einfach nur Farben, sondern auch angezeigt werden kann. Unsere Websites sind verwaschen, da die Monitor-Hardware weiterentwickelt wurde. als CSS-Spezifikationen und Browser-Implementierungen.
Lea Verou
Adaptive Formularsteuerelemente mit Farbschema
Viele Browser bieten Steuerelemente für das dunkle Design an, derzeit Safari und Chromium. Sie können müssen in CSS oder HTML angeben, dass sie im Design verwendet werden.
Im obigen Beispiel wird die Auswirkung der Eigenschaft im Bedienelement „Styles“ (Stile) von Entwicklertools. In der Demo wird das HTML-Tag verwendet, das meiner Meinung nach im Allgemeinen einen besseren Ort zu finden:
<meta name="color-scheme" content="dark light">
Weitere Informationen findest du in diesem color-scheme
Artikel von Thomas
Steiner. Es gibt noch viel mehr zu lernen
als Eingaben für dunkle Kästchen.
Preisvergleichsportal accent-color
In letzter Zeit gab es
Aktivitäten rund um
accent-color
für Formularelemente, da es sich um einen einzelnen CSS-Stil handelt, der den
im Eingabeelement des Browsers verwendete Farbtonfarbe. Weitere Informationen dazu finden Sie hier auf
GitHub Ich habe es in meinen
Stile für diese Komponente. Da dies von den Browsern unterstützt wird,
mit den rosa und lila Farbknöpfen mehr zum Thema.
input[type="checkbox"] {
accent-color: var(--brand);
}
Color Pop-Effekt mit festen Farbverläufen und Fokus auf
Farbe kommt am meisten zur Geltung, wenn sie sparsam eingesetzt wird. durch farbenfrohe UI-Interaktionen.
Im obigen Video gibt es viele Ebenen des UI-Feedbacks und der Interaktion, die der Interaktion durch Folgendes eine persönliche Note verleihen:
- Kontext wird hervorgehoben.
- UI-Feedback in Bezug auf die Auslastung geben der Wert im Bereich liegt.
- UI-Feedback geben, dass ein Feld Eingaben akzeptiert
Um Feedback zu geben, wenn mit einem Element interagiert wird, verwendet das Preisvergleichsportal die
:focus-within
Pseudoklasse verwenden, um das Aussehen verschiedener Elemente zu ändern, lassen Sie uns die
.fieldset-item
, das ist sehr interessant:
.fieldset-item {
...
&:focus-within {
background: var(--surface2);
& svg {
fill: white;
}
& picture {
clip-path: circle(50%);
background: var(--brand-bg-gradient) fixed;
}
}
}
Wenn eines der untergeordneten Elemente dieses Elements im Fokus liegt:
- Dem Hintergrund „
.fieldset-item
“ wird eine Oberflächenfarbe mit höherem Kontrast zugewiesen. - Das verschachtelte
svg
-Element ist für einen höheren Kontrast weiß gefüllt. - Das verschachtelte
clip-path
-Element von<picture>
wird zu einem Vollkreis erweitert und der wird der Hintergrund mit dem hellen, festen Farbverlauf gefüllt.
Benutzerdefinierter Zeitraum
Mit dem folgenden HTML-Eingabeelement zeige ich Ihnen, wie ich Aussehen:
<input type="range">
Dieses Element besteht aus drei Teilen, die angepasst werden müssen:
Bereichselementstile
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 */
}
Bei den ersten CSS-Zeilen handelt es sich um die benutzerdefinierten Teile der Stile. deutlich zu kennzeichnen, hilft. Bei den übrigen Stilen handelt es sich meistens um zurückgesetzte Stile, bieten eine einheitliche Grundlage für den Aufbau der schwierigen Teile der Komponente.
Track-Stile
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;
}
Der Trick dabei ist: „Aufdecken“, leuchtenden Füllfarbe. Dies geschieht mithilfe der Farbverlauf des harten Stopps oben. Der Farbverlauf ist bis zum Füllprozentsatz transparent. für die die Oberflächenfarbe der nicht gefüllten Spur verwendet wird. Hinter dieser nicht gefüllten Oberfläche befindet sich und warten, bis die Transparenz sichtbar wird.
Füllung erfassen
Mein Design erfordert JavaScript, um den Füllstil beizubehalten. Es sind reine CSS-Strategien. Das „thumb“-Element muss jedoch die gleiche Höhe haben. und ich konnte keine Harmonie innerhalb dieser Grenzen finden.
/* 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));
})
})
Ich denke, das ist ein schönes visuelles Upgrade. Der Schieberegler funktioniert gut, wenn
JavaScript ist das Attribut --track-fill
nicht erforderlich, es hat einfach keinen Wert
falls nicht vorhanden. Wenn JavaScript verfügbar ist, füllen Sie das Feld
und gleichzeitig alle Nutzeränderungen zu beobachten. Die benutzerdefinierte Eigenschaft wird
den Wert.
Hier finden Sie
Beitrag zu
CSS-Tricks von Ana
Tudor, die eine reine Preisvergleichsportal-Lösung für
und verfolgen Sie die Füllung. Das habe ich auch gefunden
range
-Element sehr inspirierend.
Thumbnail-Stile
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;
}
Die meisten dieser Stile bestehen darin, einen schönen Kreis zu erstellen.
Auch hier ist wieder der feste Farbverlauf zu sehen, der die
dynamische Farben der Thumbnails, Tracks und zugehörigen SVG-Elemente.
Ich habe die Stile für die Interaktion getrennt, um die box-shadow
zu isolieren
die für die Hervorhebung beim Bewegen des Mauszeigers verwendet wird:
@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;
}
}
Das Ziel war ein einfach zu verwaltendes und animiertes visuelles Highlight für das Feedback der Nutzenden. Durch die Verwendung eines Rahmenschattens vermeide ich, dass Layout mit dem Effekt. Ich mache das indem Sie einen Schatten erzeugen, der nicht verschwommen ist und der runden Form des „Mag ich“-Element. Dann ändere ich die Streugröße, wenn ich den Mauszeiger darauf bewege.
Wenn nur der Hervorhebungseffekt auf Kästchen so einfach wäre...
Browserübergreifende Auswahl
Ich benötige diese -webkit-
- und -moz-
-Selektoren, um eine browserübergreifende Messung zu erreichen
Einheitlichkeit:
input[type="range"] {
&::-webkit-slider-runnable-track {}
&::-moz-range-track {}
&::-webkit-slider-thumb {}
&::-moz-range-thumb {}
}
Benutzerdefiniertes Kästchen
Mit dem folgenden HTML-Eingabeelement zeige ich Ihnen, wie ich Aussehen:
<input type="checkbox">
Dieses Element besteht aus drei Teilen, die angepasst werden müssen:
Kästchenelement
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;
}
Die Stile transform-style
und position
bereiten sich auf das Pseudoelement vor, das wir später vorstellen werden.
um die Hervorhebung zu gestalten. Andernfalls ist es meistens
ein wenig verurteilter Stil von mir. Ich mag den Cursor als Zeiger,
sind die Standardkästchen zu klein. Wenn accent-color
unterstützt, bringen Sie diese
in das Farbschema der Marke ein.
Labels für Kästchen
Die Angabe von Labels für Kästchen ist aus zwei Gründen wichtig. Die erste besteht darin, Stellen Sie dar, wofür der Kästchenwert verwendet wird, um die Frage „an oder off für was?“ Zweitens haben sich Web-Nutzende an die Interaktion mit Kontrollkästchen über die zugehörigen Labels.
<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>
Fügen Sie auf Ihrem Label ein for
-Attribut hinzu, das auf ein Kästchen mit der ID <label for="text-notifications">
verweist. Verdoppeln Sie im Kästchen sowohl den Namen als auch die ID, um
damit sie mit verschiedenen Tools und Technologien gefunden werden kann, z. B. mit einer Maus oder einem Screenreader:
<input type="checkbox" id="text-notifications" name="text-notifications">
:hover
, :active
und andere sind mit der Verbindung kostenlos, wodurch die Anzahl der
wie Sie mit Ihrem Formular interagieren können.
Kästchen hervorheben
Ich möchte meine Oberflächen einheitlich gestalten. Das Schiebereglerelement hat eine schöne
die ich mit dem Kästchen verwenden möchte. Das Thumbnail war
box-shadow
und der spread
-Eigenschaft kann einen Schatten nach oben
Dieser Effekt funktioniert hier jedoch nicht, da unsere Kontrollkästchen und sollten
be.
Ich konnte den gleichen visuellen Effekt mit einem Pseudoelement erzielen gibt es einiges an komplizierten CSS:
@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;
}
Es ist ganz einfach, ein Kreis-Pseudoelement zu erstellen, hinter dem Element, an dem es befestigt ist, schwieriger war. Hier ist das Vorher- und nachdem ich es behoben habe:
Es ist auf jeden Fall eine Mikrointeraktion, aber für mich ist es wichtig,
Einheitlichkeit. Die Skalierungstechnik für Animationen ist dasselbe wie
anderen Orten. Wir legen eine benutzerdefinierte Eigenschaft auf einen neuen Wert fest und lassen sie von CSS umstellen.
basierend auf den Bewegungseinstellungen. Die Hauptfunktion hier ist translateZ(-1px)
. Die
das übergeordnete Element einen 3D-Raum erstellt, und dieses untergeordnete Pseudoelement tippt darauf
und platziert sich etwas nach hinten im z-Bereich.
Bedienungshilfen
Das YouTube-Video zeigt eine großartige Demonstration von Maus, Tastatur und Screenreader-Interaktionen für diese Einstellungskomponente. Ich werde einige der wichtigsten finden Sie hier.
HTML-Elementauswahl
<form>
<header>
<fieldset>
<picture>
<label>
<input>
Jedes davon enthält Hinweise und Tipps für das Browser-Tool des Nutzers. Einige Elemente bieten Interaktionshinweise, einige Verbindungsinteraktivitäten und einige helfen bei der Gestaltung Baum für Barrierefreiheit, den ein Screenreader navigiert.
HTML-Attribute
Wir können Elemente ausblenden, die von Screenreadern nicht benötigt werden, in diesem Fall das Symbol neben dem Schieberegler:
<picture aria-hidden="true">
Das obige Video zeigt den Screenreader-Ablauf unter Mac OS. Beachten Sie, wie die Eingabe von einem Schieberegler zum nächsten. Das liegt daran, dass wir das Symbol, das eine Haltestelle auf dem Weg zum nächsten Schieberegler war. Ohne müssen die Nutzenden das Bild anhalten, anhören und über das die sie möglicherweise nicht sehen.
Die SVG-Datei umfasst eine Reihe von mathematischen Methoden. Wir fügen ein <title>
-Element hinzu, damit der Mauszeiger kostenlos bewegt werden kann.
Titel und einem menschenlesbaren Kommentar zu dem Ergebnis der Mathematik:
<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>
Davon abgesehen haben wir ausreichend eindeutig gekennzeichneten HTML-Code verwendet, sodass das Formular testet, mit Maus, Tastatur, Controllern und Screenreadern.
JavaScript
Wie die Track-Füllfarbe in JavaScript verwaltet wird, erfahren Sie hier.
Sehen wir uns nun den <form>
-bezogenen JavaScript an:
const form = document.querySelector('form');
form.addEventListener('input', event => {
const formData = Object.fromEntries(new FormData(form));
console.table(formData);
})
Jedes Mal, wenn mit dem Formular interagiert und es geändert wird, protokolliert die Konsole das Formular als Objekt in einer Tabelle zur einfachen Überprüfung an, bevor Sie es an einen Server senden.
Fazit
Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! Das macht Spaß Komponentenarchitektur. Wer erstellt die erste Version mit Plätzen bevorzugten Framework? 🙂
Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstelle eine Demo, twittere mir Links und ich füge sie hinzu findest du unten im Abschnitt Community-Remixe.