Video

De HTML

De HTML voor het enquêteformulier hebben we al gemaakt: Oefening HTML bevragingsformulier.

Kleurenpalet kiezen

We gebruiken een kleurenpalet uit gemakzucht. Op die manier hebben we snel kleurwaarden en moeten we geen tijd verspillen om gepaste kleuren te zoeken.

A Gazillion Shades Of Rose Color Palette

Het eindresultaat

Je vindt die kleuren mooi of niet mooi. Dat doet er nu niet toe. We leren werken met CSS. Wil je een ander kleurenpalet gebruiken, ga je gang!

CSS

In de map labo6 maak je een nieuwe map met de naam css en daarin maak je het enquete.css bestand met daarin:

* {
    box-sizing: border-box;
}

h1 {
    color: rgb(255,92,92);
    text-align: center;
}

form {
    background-color: rgb(255,191,191);
    width: 40rem;
    padding: 1rem 2rem;
    font-family: Arial, Helvetica, sans-serif;
}

p {
     margin-left: 1rem;
}

fieldset {
    background-color:rgb(255,133,133);
    border: solid 0.2em white;
    margin-top: 1rem;
}

fieldset legend {
    font-size: 1.1em;
}

fieldset div {
    font-size: 0.9em;
    margin: 0 0.7em 0.6em;
}

.command-bar {
    width: 100%;
}

.command-bar button {
    background-color:rgb(255,60,60);
    border: solid 0.2em rgb(255,191,191);
    color: white;
    padding: 5px;
    margin: 2rem  35%;
    font-size: 1em;
    width: 30%;
    height: 3rem;
  }

.command-bar button:hover {
    background-color: rgb(255,191,191);
    border: solid 0.2em rgb(255,92,92);
    cursor: pointer; 
 }

fieldset input {
    display: inline;
    height: 1.5rem;
    border: none;
    padding-left: 10px;
}

fieldset div span {
     color: white;
    margin: 0;
}

fieldset label {
    display: inline-block;
    padding: 0;
    min-width: 6em;
 }

fieldset select {
    width: 70%;
    display: block;
    min-height: 1.5rem;
    margin: 5px 0;
    padding: 5px 0;
    border: none;
    padding-left: 10px;
}

fieldset input[type=radio] {
    height: 1em;
}

fieldset input[type=text] {
     width: 70%;
}

/* By making the position of checkbox relative, set the vertical-align to the middle 
   can align the checkboxes and their labels. Here, we have made the position of 
   the checkbox relative to the label. 
   So the checkboxes are aligned according to the label.
   https://www.geeksforgeeks.org/how-to-align-checkboxes-and-their-labels-on-cross-browsers-using-css/
*/

input[type=checkbox] { 
    position: relative; 
    vertical-align: middle; 
    bottom: 1.5px; 
    height: 1em;
}