0

I have a simple question. I need to build a simple form with only HTML 5 . I have build something but all of the input fields don't show beneath each other. They are standing next to each other. I've tried multiple things but they won't go beneath each other.

Can you guys help me maybe? This is my code:

<head>
    <meta charset="utf-8">
    <meta name="author" content="-" />
    <title>Frontend Development</title>
</head>

<body>
    <section>
        <h1>Aanmelden</h1>
        Bent u geïnteresseerd in samenwerken met CMD Amsterdam? Dat kan!
        Tijdens de opleiding werken studenten aan projecten voor echte opdrachtgevers. Ook lopen de studenten stage, in het tweede en afstudeerjaar. 
        CMD Amsterdam zoekt altijd naar positieve verbindingen met de creatieve stad Amsterdam.Voor het aanmelden van stageplekken of projecten kunt u onderstaand formulier invullen Wij nemen zo nodig contact met u op nadat het formulier is verstuurd. Voor vragen of opmerkingen kunt u contact met ons op.
    </section>

    <form>
        <fieldset>
            <legend>Contactgegevens</legend>
            <label for="Naam">Naam</label>
            <input id="Naam" type="text"/>

            <label for="Bedrijf">Bedrijf</label>
            <input id="Bedrijf" type="text"/>

            <label for="Adres">Adres</label>
            <input id="Adres" type="text"/>

            <label for="Postcode">Postcode</label>
            <input id="Postcode" type="text" placeholder="Bijvoorbeeld: 1701JB"/>

            <label for="Plaats">Plaats</label>
            <input id="Plaats" type="text"/>

            <label for="Telefoon">Telefoon</label>
            <input id="Telefoon" type="text"/>

            <label for="Email">Email</label>
            <input id="Email" type="text"/>

            <h4>Ik wil mijn aanmelden:</h4>
            <label for="Project">Voor een project</label>
            <input for="Project" type="checkbox"/>

            <label for="Stage">Als stagebedrijf</label>
            <input for="Stage" type="checkbox"/>
        </fieldset>

</body>

Shan
  • 11
  • 1

2 Answers2

0

This is because without modification all inputs are displaying inline. There are 2 ways to get them underneath one another:

Set the CSS display value to block, this way all the inputs will act like divs and automatically go below each other:

input
{
    display: block;
}

Or you could enter a <br /> tag after each input tag, this forces the browser to show them on a new line, the first approach is the 'cleaner' approach.

Erik Terwan
  • 2,710
  • 19
  • 28
0

add in your css the following rule:

form label { display: block; }

and see in console if that works

bboy
  • 1,357
  • 2
  • 15
  • 31