Using HTML divs like form

Question

I'm making a website that allows you to upload a picture, name it and then on submit it gives the data to PHP code. As of now I'm using just plain HTML and PHP, but I want to add Bulma CSS library.

Right now the HTML code looks like this:

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="emote" id="emote">
    <br>
    Emote name:
    <input type ="text" name="emotename" id="emotename">
    <br>
    <input type="submit" value="Upload Emote" name="submit">
</form>

But the library requires that I use divs instead of form. The code would look something like:

<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="field">
        <label class="label">Emote name</label>
        <div class="control">
            <input class="input" type="text" placeholder="Emote name..." id="emotename">
        </div>
    </div>
    <div class="file">
        <label class="file-label">
            <input class="file-input" type="file" name="resume" id="emote">
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                    Choose a file...
                </span>
            </span>
        </label>
    </div>
    <div class="field is-grouped">
        <div class="control">
            <input class="button" type="submit" value="Submit">
        </div>
        <div class="control">
            <button class="button is-link is-light">Cancel</button>
        </div>
    </div>
</form>

When I click Submit PHP errors: "You need to fill all the fields."

Answer 1

Working form looks like this:

<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="field">
        <label class="label">Emote name</label>
        <div class="control">
            <input class="input" type="text" placeholder="Emote name..." name="emotename" id="emotename">
        </div>
    </div>
    <div class="file">
        <label class="file-label">
            <input class="file-input" type="file" name="emote" id="emote">
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                    Choose a file...
                </span>
            </span>
        </label>
    </div>
    <div class="field is-grouped">
        <div class="control">
            <input class="button" type="submit" value="Submit">
        </div>
        <div class="control">
            <button class="button is-link is-light">Cancel</button>
        </div>
    </div>
</form>