Bulma form control width inhibited when wrapped in form tag

Question

When following the Bulma documentation, you can wrap an input.input with a p.control in order to style it and have it spread the width of the container. But, when the container is a form (which it is likely to be) the controls shrink down to their default size. What am I doing wrong?

Code sample below:

<div class="panel">
    <div class="panel-heading">
        Login
    </div>
    <div class="panel-block">
        <form>
            <p class="control has-icon">
                <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
                <span class="icon is-small">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <p class="control has-icon">
                <input class="input is-expanded" type="password" placeholder="Password" name="password">
                <span class="icon is-small">
                    <i class="fa fa-lock"></i>
                </span>
            </p>
            <p class="control">
                <button class="button is-success" type="submit">
                    Login
                </button>
            </p>
        </form>
    </div>
</div>

Answer 1

I found the answer, annoyingly staring me in the face: you need to set the class of the form to control.

<div class="panel">
    <div class="panel-heading">
        Login
    </div>
    <div class="panel-block">
        <form class="control">
            <p class="control has-icon">
                <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
                <span class="icon is-small">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <p class="control has-icon">
                <input class="input is-expanded" type="password" placeholder="Password" name="password">
                <span class="icon is-small">
                    <i class="fa fa-lock"></i>
                </span>
            </p>
            <p class="control">
                <button class="button is-success" type="submit">
                    Login
                </button>
            </p>
        </form>
    </div>
</div>