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 div
s 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."
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>