JSFiddle - React, Tailwind, and code Playground

HTML

<form name="forms" id="forms">
  <label>Whats your username?
    <input name="username" type="text" />
  </label>
  <label>How many years have you been a developer?
    <input name="age" type="number" />
  </label>

  <label>Upload images
    <input name="images" type="file" accept="image/png, image/jpeg" multiple />
  </label>

  <label>Do you know javascript?
    <input name="languages" type="checkbox" value="javascript" />
  </label>
  <label>Do you know python?
    <input name="languages" type="checkbox" value="python" />
  </label>

  <label>Enjoyed this blog?
    <input name="isHappyReader" type="checkbox" />
  </label>

  <button type="submit">Submit</button>
</form>

CSS

body {
  background: #D2E4FC
}

label {
  display: flex;
  flex-direction: column;
  text-align: left;
}

input {
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  background: #FFFFFF;
  padding: 10px;
}

input::placeholder {
  color: #DDDDDD;
}

JavaScript

// get the form element from dom
const formElement = document.querySelector('form#forms')

// convert the form to JSON
const getFormJSON = (form) => {
  const data = new FormData(form);
  return Array.from(data.keys()).reduce((result, key) => {
    if (result[key]) {
      result[key] = data.getAll(key)
      return result
    }
    result[key] = data.get(key);
    return result;
  }, {});
};

// handle the form submission event, prevent default form behaviour, check validity, convert form to JSON
const handler = (event) => {
  event.preventDefault();
  const valid = formElement.reportValidity();
  if (valid) {
    const result = getFormJSON(formElement);
    // handle one, multiple or no files uploaded
    const images = [result.images].flat().filter((file) => !!file.name)
    // handle one, multiple or no languages selected
    const languages = [result.languages || []].flat();
    // convert the checkbox to a boolean
    const isHappyReader = !!(result.isHappyReader && result.isHappyReader === 'on')

    // use spread function, but override the keys we've made changes to
    const output = {
      ...result,
      images,
      languages,
      isHappyReader
    }
    console.log(output)
  }
}

formElement.addEventListener("submit", handler)