In Google Script Editor: How to fix document.getElementById("Cell Name") inputting data in incorrect cells?

Question

I've created a User form in spreadsheets & I'm using document.getElementById("Cell Name") to input data under input-field of a given name when the submit button is clicked. However, the document.getElementById("cell name") is not inputting the data in the correct column.

document.getElementById incorrect colmun placement

The rest of the code fucntions but the data isn't going in the correct position. Example: I want Time In data to go in "Time In" colmun. The document.getElementById("name") is putting data startingin Column A, but I want to get enter data starting in Column D-H.:

   <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">access_time</i>
        <input id="Time In" type="text" class="validate">
        <label for="Time In">Time In</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">access_time</i>
        <input id="Time Out" type="text" class="validate">
        <label for="Time Out">Time Out</label>
      </div>
      <div class="input-field col s12">
        <i class="material-icons prefix">assignment</i>
        <input id="PK Number" type="text" class="validate">
        <label for="PK Number">PK Number</label>
      </div>
      <div class="input-field col s12">
        <i class="material-icons prefix">assignment_turned_in</i>
        <input id="Check" type="text" class="validate">
        <label for="Check">Check</label>
      </div>       
      <div class="input-field col s12">
        <i class="material-icons prefix">pages</i>
        <input id="# of Pages" type="text" class="validate">
        <label for="# of Pages"># of Pages</label>
      </div>
      <div class="input-field col s12">
        <button class="btn waves-effect waves-light" id="btn">Submit
          <i class="material-icons right">send</i>
        </button>
      </div>          
    </div><!--END ROW-->

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>

  var Time_In_Field = document.getElementById("Time In");
  var Time_Out_Field = document.getElementById("Time Out");
  var PK_Number_Field = document.getElementById("PK Number");
  var Check_Field = document.getElementById("Check");
  var Number_Of_Pages_Field = document.getElementById("# of Pages");

Answer 1

id attributes cannot contain whitespace. Remove the spaces from your IDs. Refer to the HTML standard for details:

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character. The value must not contain any ASCII whitespace.

Answer 2

Your id attribute cannot have whitespaces in them

You can read more about how to use id tag here.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.