javascript forms google-sheets google-apps-script web-applications

How can I add line break in userform?

I'm using "script app" from google sheets and I need to allow line break in the "userform" that I have created, I will use this to feed data to my google sheet and some of the items need multiple lines in the same cell. Is there anyway I can do that?

EXAMPLE

EXAMPLE 2

CODE

function showAdicionarClienteHTML() {
  
  var template = HtmlService.createTemplateFromFile("AdicionarClienteHTML");
  
  var html = template.evaluate();
  html.setTitle("ADICIONAR CLIENTE").setHeight(800).setWidth(800);
  SpreadsheetApp.getUi().showModalDialog(html, "Adicionar novo cliente:");
  //.showModalDialog(html, "Adicionar novo cliente:");
  //.showSidebar(html);
   
}

function appendData(data){

  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Clientes");
  ws.appendRow([data.name,data.login,data.sninv,data.numero,data.sndtl,data.tele,data.regiao]);

}

HTML

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <!-- Compiled and minified CSS -->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
    
    <div class="container">
    
      <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="nome" type="text" class="validate">
            <label for="nome">Nome</label>
          </div>
          <div class="input-field col s12">
          <i class="material-icons prefix">mail_outline</i>
          <input id="login" type="text" class="validate">
            <label for="login">E-Mail ou Login</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">select_all</i>
            <input id="sninv" type="text" class="validate">
            <label for="sninv">S/N do Inversor</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">format_list_numberedl</i>
            <input id="numero" type="text" class="validate">
            <label for="numero">Numero do Inversor</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">select_all</i>
            <input id="sndtl" type="text" class="validate">
            <label for="sndtl">S/N do Datalogger</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">phone_in_talk</i>
            <input id="tele" type="tel" class="validate">
            <label for="tele">Telefone</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">explore</i>
            <input id="regiao" type="text" class="validate">
            <label for="regiao">Região</label>
          </div>
      <button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Adicionar
        <i class="material-icons right">send</i>
      </button>
      </div><!--END ROW -->
    </div><!--END CONTAINER -->
    
     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      
     <script>
     
     var nameBox = document.getElementById("nome");
     var loginBox = document.getElementById("login");
     var sninvBox = document.getElementById("sninv");
     var numeroBox = document.getElementById("numero");
     var sndtlBox = document.getElementById("sndtl");
     var teleBox = document.getElementById("tele");
     var regiaoBox = document.getElementById("regiao");
     
     document.getElementById("btn").addEventListener("click",addRecord); 
     
     function addRecord(){
      
      var name = nameBox.value;
      var login = loginBox.value;
      var sninv = sninvBox.value;
      var numero = numeroBox.value;
      var sndtl = sndtlBox.value;
      var tele = teleBox.value;
      var regiao = regiaoBox.value;
      if(name.trim().length == 0 || login.trim().length == 0 || sninv.trim().length == 0 || numero.trim().length == 0 || sndtl.trim().length == 0 || tele.trim().length == 0 || regiao.trim().length == 0){
         //handle error
             M.toast({html: 'Preencha todos os campos!'})
      } else {
      
      
      var data ={
           name: nameBox.value,
           login: loginBox.value,
           sninv: sninvBox.value,
           numero: numeroBox.value,
           sndtl: sndtlBox.value,
           tele: teleBox.value,
           regiao: regiaoBox.value
     };
     
     google.script.run.appendData(data);
     }//CLOSE ELSE
    }//CLOSE ADD RECORD
     
    </script>
      
   </body>
  </html>

Solution

The <input> tag doesn't support line breaks. If you want to add a multi-line input, you have to use <textarea> instead. So you should change all the elements which could potentially have several lines from <input> to <textarea>.

That is, you should change these lines:

<input id="sninv" type="text" class="validate">

<input id="numero" type="text" class="validate">

<input id="sndtl" type="text" class="validate">

To these ones:

<textarea id="sninv" type="text" class="validate"></textarea>

<textarea id="numero" type="text" class="validate"></textarea>

<textarea id="sndtl" type="text" class="validate"></textarea>

This way, you can add multi-line text, which will still be a multi-line when you send it to the spreadsheet.

Reference:

<textarea>