title: How can I add line break in userform?
body: <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/xHdRy.jpg" rel="nofollow noreferrer">EXAMPLE</a></p>
  
  <p><a href="https://i.stack.imgur.com/gGAsF.jpg" rel="nofollow noreferrer">EXAMPLE 2</a></p>
  
  <p>CODE</p>
  
  <pre><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]);
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;!--Import Google Icon Font--&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
         &lt;!-- Compiled and minified CSS --&gt;
         &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
  
        &lt;!--Let browser know website is optimized for mobile--&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div class="container"&gt;
  
        &lt;div class="row"&gt;
            &lt;div class="input-field col s12"&gt;
              &lt;i class="material-icons prefix"&gt;account_circle&lt;/i&gt;
              &lt;input id="nome" type="text" class="validate"&gt;
              &lt;label for="nome"&gt;Nome&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="input-field col s12"&gt;
            &lt;i class="material-icons prefix"&gt;mail_outline&lt;/i&gt;
            &lt;input id="login" type="text" class="validate"&gt;
              &lt;label for="login"&gt;E-Mail ou Login&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="input-field col s12"&gt;
              &lt;i class="material-icons prefix"&gt;select_all&lt;/i&gt;
              &lt;input id="sninv" type="text" class="validate"&gt;
              &lt;label for="sninv"&gt;S/N do Inversor&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="input-field col s12"&gt;
              &lt;i class="material-icons prefix"&gt;format_list_numberedl&lt;/i&gt;
              &lt;input id="numero" type="text" class="validate"&gt;
              &lt;label for="numero"&gt;Numero do Inversor&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="input-field col s12"&gt;
              &lt;i class="material-icons prefix"&gt;select_all&lt;/i&gt;
              &lt;input id="sndtl" type="text" class="validate"&gt;
              &lt;label for="sndtl"&gt;S/N do Datalogger&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="input-field col s12"&gt;
              &lt;i class="material-icons prefix"&gt;phone_in_talk&lt;/i&gt;
              &lt;input id="tele" type="tel" class="validate"&gt;
              &lt;label for="tele"&gt;Telefone&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="input-field col s12"&gt;
              &lt;i class="material-icons prefix"&gt;explore&lt;/i&gt;
              &lt;input id="regiao" type="text" class="validate"&gt;
              &lt;label for="regiao"&gt;Região&lt;/label&gt;
            &lt;/div&gt;
        &lt;button class="btn waves-effect waves-light" type="submit" name="action" id="btn"&gt;Adicionar
          &lt;i class="material-icons right"&gt;send&lt;/i&gt;
        &lt;/button&gt;
        &lt;/div&gt;&lt;!--END ROW --&gt;
      &lt;/div&gt;&lt;!--END CONTAINER --&gt;
  
       &lt;!-- Compiled and minified JavaScript --&gt;
       &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
  
       &lt;script&gt;
  
       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
  
      &lt;/script&gt;
  
     &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>