Het uiterlijk van uw formulieren aanpassen

Laatst bijgewerkt: 5 maart 2025

Gemaakt voor:

  • Beheerder
  • Ontwikkelaar

Forms is van cruciaal belang voor gebruikersinteractie op websites, zodat deze gegevens kunnen invoeren. Met CSS (Cascading Style Sheets) kunt u formuliervelden opmaken, de visuele presentatie van formulieren verbeteren en de gebruikerservaring verbeteren.

Het Adaptive Forms Block produceert een consistente structuur voor alle formuliervelden. Dankzij deze consistente structuur is het eenvoudiger om CSS-kiezers te ontwikkelen voor het selecteren en opmaken van formuliervelden op basis van veldtype en veldnamen.

In dit document wordt de HTML-structuur voor verschillende formuliercomponenten beschreven en krijgt u inzicht in de manier waarop u CSS-kiezers voor verschillende formuliervelden kunt maken om formuliervelden van een adaptief Forms-blok op te maken.

Aan het einde van het artikel zult u:

  • Begrijpen wat de structuur is van het standaard CSS-bestand dat is opgenomen in Adaptive Forms Block
  • Inzicht in de HTML-structuur van formuliercomponenten die worden geleverd door het Adaptief Forms-blok, inclusief algemene componenten en specifieke componenten zoals dropdowns, radiogroepen en selectievakjesgroepen
  • Leer hoe u formuliervelden kunt opmaken op basis van veldtype- en veldnamen met CSS-kiezers, zodat u consistent of uniek kunt opmaken op basis van vereisten

Werken met formulierveldtypen

Alvorens in het stileren te duiken, herzien de gemeenschappelijke vorm gebiedstypesdie door het AanpassingsBlok van Forms worden gesteund:

  • Invoervelden: dit zijn tekstinvoer, e-mailinvoer, wachtwoordinvoer en meer
  • Selectievakjesgroepen: gebruikt voor het selecteren van meerdere opties
  • Keuzerondjes: wordt gebruikt voor het selecteren van slechts één optie in een groep
  • Vervolgkeuzelijsten: ook wel selectiekaders genoemd, die worden gebruikt voor het selecteren van een optie in een lijst
  • Deelvensters/containers: gebruikt om gerelateerde formulierelementen te groeperen

Basisbeginselen voor stijlen

Het begrip van fundamentele CSS conceptenis essentieel alvorens specifieke vormgebieden te stileren:

  • Kiezers: CSS de Kiezers staan u toe om specifieke elementen van HTML voor het stileren te richten. U kunt elementkiezers, klassekiezers of id-kiezers gebruiken
  • Eigenschappen: CSS de eigenschappen bepalen de visuele verschijning van elementen. Veelvoorkomende eigenschappen voor het opmaken van formuliervelden zijn kleur, achtergrondkleur, rand, opvulling, marge en meer
  • Model van de Doos: Het CSS kadermodel beschrijft de structuur van de elementen van HTML als inhoudsgebied dat door het opvullen, grenzen, en marges wordt omringd
  • Flexbox/Net: CSS Flexboxen de lay-outs van het Netzijn krachtige hulpmiddelen om ontvankelijke en flexibele ontwerpen te creëren

Een formulier opmaken voor Adaptief Forms-blok

Het Adaptive Forms Block biedt een gestandaardiseerde HTML-structuur waarmee het selecteren en opmaken van formulieronderdelen wordt vereenvoudigd:

  • Update standaardstijlen: U kunt de standaardstijlen van een vorm wijzigen door het /blocks/form/form.css dossier uit te geven. Dit bestand biedt uitgebreide opmaak voor een formulier, met ondersteuning voor uit meerdere stappen bestaande wizardformulieren. Het benadrukt het gebruiken van douaneCSS variabelen voor gemakkelijke aanpassing, onderhoud, en het eenvormige formatteren over vormen. Voor instructies bij het toevoegen van het AanpassingsBlok van Forms aan uw project, verwijs naar creeer een vorm.

  • Aanpassing: Gebruik het gebrek forms.css als basis en pas het aan om de blik en het gevoel van uw vormcomponenten te wijzigen, die hen visueel aantrekkelijk en gebruikersvriendelijk maken. De bestandsstructuur stimuleert de organisatie en handhaaft stijlen voor formulieren, waardoor consistente ontwerpen op uw website worden bevorderd.

Indeling van de structuur forms.css

  • Globale variabelen: die op het :root niveau wordt bepaald, slaan deze variabelen (--variable-name) waarden op die door het stijlblad voor consistentie en gemak van updates worden gebruikt. Deze variabelen definiëren kleuren, tekengrootten, opvulling en andere eigenschappen. U kunt uw eigen globale variabelen declareren of bestaande variabelen wijzigen om de stijl van het formulier te wijzigen.

  • Universele selecteurstijlen: de * selecteur past elk element in de vorm aan, die ervoor zorgen de stijlen worden toegepast op alle componenten door gebrek, met inbegrip van het plaatsen van het box-sizing bezit aan border-box.

  • Formulier het stileren: Deze sectie concentreert zich bij het stileren van vormcomponenten gebruikend selecteurs om specifieke elementen van HTML te richten. Hiermee worden stijlen gedefinieerd voor invoervelden, tekstgebieden, selectievakjes, keuzerondjes, bestandsinvoer, formulierlabels en beschrijvingen.

  • de stileren van de Tovenaar (als toepasselijk): Deze sectie wordt gewijd aan het stileren van de tovenaar lay-out, een multi-step vorm waar elke stap tegelijkertijd wordt getoond. Hiermee worden stijlen gedefinieerd voor de tovenaarscontainer, veldsets, legenda's, navigatieknoppen en responsieve lay-outs.

  • vragen van Media: Deze verstrekken stijlen voor verschillende het schermgrootte, die lay-out aanpassen en dienovereenkomstig stileren.

  • Diverse het stileren: Deze sectie behandelt stijlen voor succes of foutenmeldingen, dossier uploadt gebieden, en andere elementen u in een vorm zou kunnen ontmoeten.