Codigo GS & HTML Trabajando Din Control

Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 5

CODE GS TRABAJANDO CON CONTROL

*********************************************************************
function showUserForm(){

var template = HtmlService.createTemplateFromFile("userform")

var html = template.evaluate();


html.setTitle("AFILIATE AL PARTIDO").setHeight(400).setWidth(400);
SpreadsheetApp.getUi().showModelessDialog(html, "Introduzca sus Datos");
//.showModalDialog(html, "Introduzca Sus Datos.....");
//.showSidebar(html);

function appendData(data){

var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
ws.appendRow([data.name,data.phone]);

CODE HTML FUNCIONANDO CON CONTROL


*******************************************************************
<!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="username" type="text" class="validate">
<label for="username">Tu Nombre + AP PATERNO+AP MATERNO</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">phone</i>
<input id="tel" type="text" class="validate">
<label for="icon_telephone">Telefono</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Add
<i class="material-icons right">send</i>
</button>
</div>
</div><!--END ROW-->

</div>

<!-- 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("username");
var phoneBox = document.getElementById("tel");

document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var name = nameBox.value;
var phone = phoneBox.value;

if(name.trim().length == 0 || phone.trim().length == 0){


//MOSTRAR ERROR MANUALMENTE
//M.toast({html: 'Nombre y Telefono son Requeridos sin Espacios Vacios y
Mayusculas !!....'});
// 'rounded' is the class I'm applying to the toast
M.toast({html: 'Nombre y Telefono son Requeridos sin Espacios Vacios y
Mayusculas !!....', classes: 'rounded'});
}else{

var data = {
name: nameBox.value,
phone: phoneBox.value
};

google.script.run.appendData(data);
nameBox.value = "";
phoneBox.value ="";
}//close else
}//close addRecord

</script>

</body>
</html>

************************************************************************
https://www.youtube.com/watch?v=PsIuSwSj3CM

ETIQUETAS

<!--...--> Defines a comment </!--...-->


<a> Defines a hyperlink </a>
<abbr> Defines an abbreviation or an acronym </abbr>
<acronym> Not supported in HTML5. Use "abbr" instead.Defines an acronym
</acronym>
<address> Defines contact information for the author owner of a document
</address>
<applet> Not supported in HTML5. Use </applet>
<embed> or </embed>
<object> instead. Defines an embedded applet </object>
<area> Defines an area inside an image-map </area>
<article> Defines an article </article>
<aside> Defines content aside from the page content </aside>
<audio> Defines embedded sound content </audio>
<b> Defines bold text </b>
<base> Specifies the base URL target for all relative URLs in a document
</base>
<basefont> Not supported in HTML5. Use CSS instead. Specifies a default color,
size, and font for all text in a document </basefont>
<bdi> Isolates a part of text that might be formatted in a different direction from
other text outside it </bdi>
<bdo> Overrides the current text direction </bdo>
<big> Not supported in HTML5. Use CSS instead. Defines big text </big>
<blockquote> Defines a section that is quoted from another source
</blockquote>
<br> Defines a single line break </br>
<button> Defines a clickable button </button>
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
</canvas>
<caption> Defines a table caption </caption>
<center> Not supported in HTML5. Use CSS instead. Defines centered text
</center>
<cite> Defines the title of a work </cite>
<code> Defines a piece of computer code </code>
<col> Specifies column properties for each column within a �colgroup� element
</col>
<colgroup> Specifies a group of one or more columns in a table for formatting
</colgroup>
<data> Adds a machine-readable translation of a given content </data>
<datalist> Specifies a list of pre-defined options for input controls </datalist>
<dd> Defines a description, value of a term in a description list </dd>
<del> Defines text that has been deleted from a document </del>
<details> Defines additional details that the user can view or hide </details>
<dfn> Specifies a term that is going to be defined within the content </dfn>
<dialog> Defines a dialog box or window </dialog>
<dir> Not supported in HTML5. Use <ul> instead. Defines a directory list </dir>
<div> Defines a section in a document </div>
<dl> Defines a description list </dl>
<dt> Defines a term/name in a description list </dt>
<em> Defines emphasized text </em>
<embed> Defines a container for an external application </embed>
<fieldset> Groups related elements in a form </fieldset>
<figcaption> Defines a caption for a <figure> element </figcaption>
<figure> Specifies self-contained content </figure>
<font> Not supported in HTML5. Use CSS instead. Defines font, color, and size
for text </font>
<footer> Defines a footer for a document or section </footer>
<form> Defines an HTML form for user input </form>
<frame> Not supported in HTML5. Defines a window (a frame) in a frameset
</frame>
<frameset> Not supported in HTML5. Defines a set of frames </frameset>
<h1> to <h6> Defines HTML headings </h1> to <h6>
<head> Contains metadata/information for the document </head>
<header> Defines a header for a document or section </header>
<hr> Defines a thematic change in the content </hr>
<html> Defines the root of an HTML document </html>
<i> Defines a part of text in an alternate voice or mood </i>
<iframe> Defines an inline frame </iframe>
<img> Defines an image </img>
<input> Defines an input control </input>
<ins> Defines a text that has been inserted into a document</ins>
<kbd> Defines keyboard input </kbd>
<label> Defines a label for an <input> element </label>
<legend> Defines a caption for a <fieldset> element </legend>
<li> Defines a list item </li>
<link> Defines the relationship between a document and an external resource
(most used to link to style sheets) </link>
<main> Specifies the main content of a document </main>
<map> Defines an image-map </map>
<mark> Defines marked/highlighted text </mark>
<meta> Defines metadata about an HTML document </meta>
<meter> Defines a scalar measurement within a known range (a gauge)</meter>
<nav> Defines navigation links </nav>
<noframes> Not supported in HTML5. Defines an alternate content for users that do
not support frames </noframes>
<noscript> Defines an alternate content for users that do not support client-side
scripts </noscript>
<object> Defines a container for an external application </object>
<ol> Defines an ordered list </ol>
<optgroup> Defines a group of related options in a drop-down list </optgroup>
<option> Defines an option in a drop-down list </option>
<output> Defines the result of a calculation </output>
<p> Defines a paragraph </p>
<param> Defines a parameter for an object </param>
<picture> Defines a container for multiple image resources </picture>
<pre> Defines preformatted text </pre>
<progress> Represents the progress of a task </progress>
<q> Defines a short quotation </q>
<rp> Defines what to show in browsers that do not support ruby annotations </rp>
<rt> Defines an explanation/pronunciation of characters (for East Asian
typography) </rt>
<ruby> Defines a ruby annotation (for East Asian typography) </ruby>
<s> Defines text that is no longer correct </s>
<samp> Defines sample output from a computer program </samp>
<script> Defines a client-side script </script>
<section> Defines a section in a document </section>
<select> Defines a drop-down list </select>
<small> Defines smaller text </small>
<source> Defines multiple media resources for media elements (<video> and
<audio>) </source>
<span> Defines a section in a document </span>
<strike> Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough
text </strike>
<strong> Defines important text </strong>
<style> Defines style information for a document </style>
<sub> Defines subscripted text </sub>
<summary> Defines a visible heading for a <details> element </summary>
<sup> Defines superscripted text </sup>
<svg> Defines a container for SVG graphics </svg>
<table> Defines a table </table>
<tbody> Groups the body content in a table </tbody>
<td> Defines a cell in a table </td>
<template> Defines a container for content that should be hidden when the page
loads </template>
<textarea> Defines a multiline input control (text area) </textarea>
<tfoot> Groups the footer content in a table </tfoot>
<th> Defines a header cell in a table </th>
<thead> Groups the header content in a table </thead>
<time> Defines a specific time (or datetime) </time>
<tr> Defines a row in a table </tr>
<track> Defines text tracks for media elements (<video> and <audio>)
</track>
<tt> Not supported in HTML5. Use CSS instead. Defines teletype text </tt>
<u> Defines some text that is unarticulated and styled differently from normal
text </u>
<ul> Defines an unordered list </ul>
<var> Defines a variable </var>
<video> Defines embedded video content </video>
<wbr> Defines a possible line-break </wbr>