3번째 예제

function doGet(e) {
  Logger.log(e);
  return HtmlService.createHtmlOutputFromFile('page');
}

function userClicked(name){
	//스프레드 시트의 url 그대로 사용
  var url = '<https://docs.google.com/spreadsheets/d/1kxYWuU7DKuCACpklifgq_t53EGx2dY9nByXSREoo61c/edit#gid=0>'
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("data");

  ws.appendRow([name]);

  Logger.log(name + 'hello world!');
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>hello</h1>

    <label for="username">name : </label>
    <input type="text" id="username">
    <button id="btn">Run</button>

    <script>
      document.getElementById('btn').addEventListener('click', doStuff);

      function doStuff(){
        var uname = document.getElementById('username').value;
        google.script.run.userClicked(uname);
        document.getElementById('username').value = '';
      }
    </script>

  </body>
</html>


css와 js 파일 분리