Display Local Time in Browser Input, FormData Submit with ISO Format

I would like to build a form that displays the current local time by default, and submits a timezone aware time to the server on form submit. I can intercept the form data (as shown in my example) and convert the local time to an ISO time, but I would prefer to leave the Javascript out of the form submission (to keep complexity low) and just have the HTML form submit the ISO time.

Is there any standard HTML component that displays a local time, but has a timezone aware value without additional Javascript? To me, it feels like this should be the standard/ expected behavior of <input type="datetime-local"> but it is not.

I understand I am only passing in HH:MM as the value to the <input>, perhaps I can pass in the entire ISO string, and then choose to display only the HH:MM with CSS? I haven't found a method to do so yet.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var now = new Date(Date.now()),
  nowHHMM = now.toTimeString().slice(0, 5),
  inputTime = document.querySelector('#time'),
  submitButton = document.querySelector('#submit'),
  form = document.querySelector('form');

inputTime.value = nowHHMM;
submitButton.addEventListener('click', e => {
  e.preventDefault(); // To keep form from actually submitting ...
  var formData = new FormData(form);
  for (const [key, value] of formData) {
    console.log(`${key}: ${value}`);
  }
})

<!-- language: lang-css -->

form {
  max-width: 250px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

form>* {
  margin: 10px;
}

<!-- language: lang-html -->

<form action="/save/" id="timeForm" method="post">
  <label for="time">Local Time: </label>
  <input id="time" type="time" name="time">

  <label for="submit">Save Time</label>
  <input id="submit" type="submit">
</form>

<!-- end snippet -->

Based on @MatthewHerbst comment on my question, I came up with the code below. There is still JS, but it happens not at form submit time, it happens at page load. This feels hacky, so I'm going to wait to accept the answer to see if anyone has any better ideas, but for now it will work with some server side logic to do what I want. It seems like there should be a better way to handle timezone aware datetime inputs in 2023, but perhaps this is the zeitgeist.

Also note, for anyone who is looking to use this code, if the user changes timezones without refreshing the page (unlikely, and not applicable to my use case. Maybe would happen if using an app while flying?) then the timezone will be stuck what it was when the page loaded. It's an edge case, but good to think about.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var now = new Date(),
  nowHHMM = now.toTimeString().slice(0, 5),
  inputTime = document.querySelector('#time'),
  submitButton = document.querySelector('#submit'),
  timezoneInput = document.querySelector('#timezone'),
  form = document.querySelector('form');

timezoneInput.value = now.getTimezoneOffset()/60;
inputTime.value = nowHHMM;

submitButton.addEventListener('click', e => {
  e.preventDefault(); // To keep form from actually submitting ...
  var formData = new FormData(form);
  for (const [key, value] of formData) {
    console.log(`${key}: ${value}`);
  }
})

<!-- language: lang-css -->

form {
  max-width: 250px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

form>* {
  margin: 10px;
}

#timezone {
  display: none;
}

<!-- language: lang-html -->

<form action="/save/" id="timeForm" method="post">
  <label for="time">Local Time: </label>
  <input id="time" type="time" name="time">

  <input id="timezone" name="hoursBehindGMT">

  <label for="submit">Save Time</label>
  <input id="submit" type="submit">
</form>

<!-- end snippet -->