input: Write a function to generate a basic HTML form that collects the user's city and submits the details to the server using JavaScript. If the form is submitted, prevent the default form submission and instead use the Fetch API to send the form data to the server.
  
  html
  <form id="myForm" onsubmit="submitForm(event)">
    City:<br>
    <input type="text" name="city"><br>
    <input type="submit">
  </form>
  
  <script>
  function submitForm(event) {
    event.preventDefault();
  
    const form = document.getElementById('myForm');
    const city = form.querySelector('input[name="city"]').value;
  
    const data = { city: city };
  
    const options = {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    };
  
    fetch('/my-api/submit-form', options)
      .then(response => response.json())
      .then(data => {
        console.log(data);
      });
  }
  </script>
  
output: 
  def generate_html_form():
      return '''
  <form id="myForm" onsubmit="submitForm(event)">
    City:<br>
    <input type="text" name="city"><br>
    <input type="submit">
  </form>
  
  <script>
  function submitForm(event) {
    event.preventDefault();
  
    const form = document.getElementById('myForm');
    const city = form.querySelector('input[name="city"]').value;
  
    const data = { city: city };
  
    const options = {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    };
  
    fetch('/my-api/submit-form', options)
      .then(response => response.json())
      .then(data => {
        console.log(data);
      });
  }
  </script>
  '''
  