Skapa formulär med materialdesign

En av de mest grundläggande aspekterna i alla applikationer är formulärerna, eftersom dessa tillåter oss att fånga användarens information om affärsmodellen som vår applikation hanterar.

Material Design Genom att kombinera de bästa metoderna för klassisk design och implementering av ursprungliga och innovativa effekter, tillåter de oss att skapa former som inte bara ser bra ut utan också ger vår applikation en extra funktionalitet.

Låt oss sedan se hur man skapar en grundform med principerna för Material Design.

KravInnan du börjar den här självstudien rekommenderar vi att du går igenom introduktionen av materialdesign här. Vi kommer att förlita oss på ramverket Materialize och det är viktigt att vi förstår hur behållaren i vår applikation fungerar.

Materialiseringsbehållaren

Behållaren med Förverkligas det fungerar på samma sätt som det gör BootstrapOm vi ​​redan har berört denna ram kommer vi inte att ha några problem att förstå hur det fungerar, men för dem som inte vet det är det främst en behållare med 12 kolumner, där vi kan berätta för våra element hur många kolumner det kan täcka.

Den har en ganska lik hierarki, den har en behållarklass, följt av en radklass och slutligen de klasser som gäller kolumner, låt oss se hur en struktur för en komplett rad skulle se ut, följt av en rad som skulle innehålla två element.

Detta är en 12-kolums divDetta är en 6-kolums divDetta är en 6-kolums div

Hur vi ser det är ganska enkelt, vi måste bara vara tydliga med att vi har tolv kolumner att arbeta med och på så sätt hålla vårt innehåll organiserat och visuellt bättre presenterat. Redan när vi ser hur behållaren fungerar, låt oss gå vidare till konstruktionen av vår grundform.

Formskapande

Låt oss skapa en HTML med vår standardstruktur och det första vi kommer att göra är att inkludera båda biblioteken CSS tycka om JavaScript av Förverkligas och på så sätt tillämpa den funktionalitet vi vill ha på vår form.

Det är viktigt att vi inkluderar jQuery i den senaste versionen för att ramverket ska fungera korrekt måste vi dessutom inkludera en särskild rad som gör att vi kan använda dess ikoner.

När vi väl har biblioteken inkluderade förblir konstruktionen av vår form, de flesta elementen kommer att ha en struktur som liknar följande, där vi kommer att ha klassen rad, följt av klass kål och antalet kolumner som elementet kommer att uppta.

namnEfternamn

Förverkligas Det tillåter oss också att validera fält, när det gäller e -post genom att ange vilken typ vi kan tilldela meddelanden om informationen är giltig eller inte, låt oss se:

 E-post

Vi kan också inkludera de berömda ikonerna, en funktion hämtad från den platta designen som ger vår applikation en högre användbarhet. För detta kommer vi att använda taggen med den specifika klassen:

 e-post

Slutligen är ingen grundform komplett utan den berömda textområde, textrutor som gör att vi kan samla in mycket mer information, till exempel en användares adress eller beskrivningar av något innehåll.

 Textområde

När vi väl har fyllt i formuläret behöver vi bara testa hur det fungerar Förverkligas Det innehåller många effekter i vår form och gör det mycket visuellt, låt oss se hur det ser ut i följande animerade GIF.webp.

Hur vi ser konstruktionen av en grundform med hjälp av formspråket Material Design och stöds av en ram som Förverkligas Det kan vara en uppgif.webpt som vi kan utföra på några minuter och få ett kvalitetsresultat som inte bara ger en bättre bild utan också funktioner som bara de bästa applikationerna har.

Det bästa är att du laddar ner det och provar det, du kommer säkert att gilla det.

form-material-design.html 2.75K 647 Nedladdningar