OPGAVE TIL HTML & CSS – BEGYNDER – INPUT TYPER
Opgave 8
Opgave 8 – Del 1
- Åben Codepen og start en ny Pen
- Gå nu op i din HTML boks og start med at skriv din første div boks ind
- Tilføj klassen o-skrift
- Lav et break under
- Således her:
< br/ >
Opgave 8 – Del 2
Gå ned i din CSS og lav klassen for .o-skrift:
Opgave 8 – Del 3
Nu går vi op i HTML boksen igen og skaber div bokse til vores side som bagefter styler i CSS:
Opgave 8 – Del 4
Nu går vi ned i CSS’en igen, for nu skal vi lige beskrive hvordan disse bokse ser ud og er sat op:
Vores 2 site1 div bokse fungere her som lange rækker der fyldet næsten hele siden. Vi har brugt procent på vidden for at den bevæger sig i størrelse med vinduets størrelse, hvor px er et fast ikke justerbar størrelse. Vi sætter det op med grid og kolonner som er auto justeret alt efter vinduets størrelse – der står auto 4 gange for de 4 kolonner vi skal bruge.
Nu kigger vi på kolonne opsætningen med .columns1. Her sætter vi vidden til fast at være 180px altså vil der kommer luft omkring kolonnerne når vinduet er stort/fuld vidde. Dette gælder for alle 4 div bokse i hver site1 div da de alle har denne klasse.
Opgave 8 – Del 5
Nu går nu op i HTML‘en igen, for nu skal vi sætte vores første input tags ind. De første input tags har typen checkbox. En checkbox makeres af og på med et hak, flere bokse kan checkes af samtidig – hvor man med radio bokse kun kan markere 1 af gangen.
Gå op i din første div med columns klasse og i mellem de 2 div tags tryk enter og skriv dette ind:
Du kan vælge så mange/få input checkboxe du vil. For at se funktionen af dem vælg dog mindst at indsætte 3.
Læg mærke til at vi her har id’er med – en id er specifik for kun den ene boks og må deres ikke hedde det samme på andre som man kan med klasser.
Span har også id på, for vi skal faktisk bruge enkelte bokse til at lokalisere og reagere når vi hakker et felt af, men det sætter vi op i CSS’en.
Opgave 8 – Del 6
Nu går nu tilbage til CSS‘en igen, for nu skal vi designe vores checkbox klasse og sørge for at vores id’er reagere med hinanden.
Husk at når vi kalder på id’erne i CSS så starter de med # og ikke punktum som klasserne.
Når en id/bestemt checkbox checkes af, så skal en bestemt id reagere. I dette tilfælde ønsker vi at teksten ved siden af checkboxen bliver fed.
Opgave 8 – Del 7
Nu går nu tilbage til HTML‘en igen, for nu skal vi sætte nogle forskellige tekst typer og nummer input ind. Gå hen i den øverst TOMME columns1 og begynd at skrive dette ind:
Jeg har valgt her at medtage en textarea boks, for at vise forskellen på den og en tekst input felt.
Den sidste input her er tilegnet kun for tal og kan ikke bruges til at indtaste bogstaver, hvor en tekst input boks kan rumme begge.
Opgave 8 – Del 8
Vi hopper ned i CSS’en igen, for vi skal lige designe tekst boksene:
Opgave 8 – Del 9
Vi hopper op i HTML’en igen, og videre til næst TOMME columns1 og skriver ind for vores slider:
Opgave 8 – Del 10
Nu hopper vi faktisk ned i JS’en delen for slideren kræver JS for at opdatere tallet forenden med værdien/value på slideren når den bruges:
Kort fortalt har vi lavet to variabler(var) med navn, der fortæller ville id’er i HTML’en vi har fat på.
Vi fortæller at output er det samme som sliderens værdi/value.
Vi fortæller også at dette tal skal opdateres flydende når man bevæger slideren.
Opgave 8 – Del 11
Vi hopper tilbage til HTML’en i næst TOMME columns1 og skriver nu ind for 3 radio knapper:
Radio knapper virker kun efter hensigten, såfremt man husker at sætte name=”gruppenavn” på dem. Det er vigtigt at gruppenavnet er ens på alle de radio buttons, hvor kun et valg kan ske imellem. Har man flere forskellige navne eller undlader man at bruge name=” “, så vil de virke som checkboxe – altså hvor flere kan vælges samtidig, dog kan man ikke tage valgene af igen som ved en checkbox.
Opgave 8 – Del 12
Vi hopper ned i CSS’en igen, for vi skal lige designe klassen for radio knapperne:
s
Sørg for at have samme vidde og højde på dem, da de kun kan virke som kvadrater der har border-radius på. Hvis høje eller vidden er forskellig går den efter lavest nævner og sætter det som størrelse. Hvor de højeste tal så vil give mere mellemrum til andre objekter.
Opgave 8 – Del 13
Vi går nu op i HTML’en igen. Vi er nu nået til at kigge på næste site1 boks med 4 columns1. Tag den første columns1 række og skriv dette ind:
Du kan selv vælge hvilken farve kode der skal vises i value som defalut visning/når man lander på siden.
Opgave 8 – Del 14
Vi går nu ned i CSS’en for næst sidste gang, og skriver nu ind for color boksen. Skriv dette ind:
.color {
width: 50px;
}
Opgave 8 – Del 15
Vi går nu op i HTML’en igen. Tag den næste columns1 række og skriv dette ind:
Det er oftere set at der bruges button tags til knapper eller alm div tags med designede klasser end input med type button for knapper. Ikke desto mindre er den med og værd at kende.
Opgave 8 – Del 16
Vi går nu ned i CSS’en for sidste gang, og skriver nu ind for knap boksen. Skriv dette ind:
.knap {
width: 100px;
}
Opgave 8 – Del 17
Vi går nu op i HTML’en igen. Tag den næste sidste columns1 række og skriv dette ind:
Dette ses ofte mest ved formularer og bookinger.
Opgave 8 – Del 18
Vi går nu op i HTML’en igen. Tag den sidste columns1 række og skriv dette ind:
Kan fx bruges hvis man vil designe et ur, dog skal der så flere elementer med i tagget.
Her under vises/eksekveres koden