dogstats/web/pages/profile/edit_profile.html

<div>
  <h1>Mein Profil bearbeiten</h1>

  <form id="dogeditform" hx-post="/profile/edit" hx-encoding='multipart/form-data' hx-target="#response">
    <div>
        <label for="firstname">Vorname</label>
        <input type="text" value="<?= $user['firstname']; ?>" id="firstname" name="firstname"  class="form-control" placeholder="Max">
    </div>
    <div>
        <label for="lastname">Nachname</label>
        <input type="text" value="<?= $user['lastname']; ?>" id="lastname" name="lastname"  class="form-control" placeholder="Mustermann">
    </div>
    <div>
      <label for="birthday">Geburtstag</label>
      <input type="date" value="<?= $user['birthday']; ?>" id="birthday" name="birthday"  class="form-control" placeholder="">
    </div>
    <div>
        <label for="email">E-Mail</label>
        <input type="text" value="<?= $user['email']; ?>" id="email" name="email"  class="form-control" placeholder="max@max.com" disabled>
    </div>
    <div>
        <label for="club">Verein</label>
        <input type="text" value="<?= $user['club']; ?>" id="club" name="club"  class="form-control" placeholder="Vereinsname">
    </div>
    <div>
      <label for="photo">Photo</label>
      <input type="file" accept="image/png, image/jpeg, image/gif" id="photo" name="photo">
    </div>
    <button type="submit" name="submit" value="true" class="btn btn-primary">Speichern</button>
  </form>
  <progress id='progress' value='0' max='100'></progress>
  <div id="response"></div>
</div>

<script>
  htmx.on('#dogeditform', 'htmx:xhr:progress', function(evt) {
    htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
  });
</script>