Skip to content
Snippets Groups Projects
Select Git revision
  • 4791190b7aae085e2f56c928aa2c4c6247f3483b
  • master default protected
  • 1.31
  • 4.38.2
  • 4.38.1
  • 4.38.0
  • 4.37.2
  • 4.37.1
  • 4.37.0
  • 4.36.0
  • 4.35.0
  • 4.34.1
  • 4.34.0
  • 4.33.1
  • 4.33.0
  • 4.32.2
  • 4.32.1
  • 4.32.0
  • 4.31.0
  • 4.30.1
  • 4.30.0
  • 4.29.1
  • 4.29.0
23 results

tutorial-form-example.html

Blame
  • Volker Schukai's avatar
    Volker Schukai authored
    71703e61
    History
    tutorial-form-example.html 38.38 KiB
    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <!-- Adding meta -->
        
        
        <meta name="author" content="schukai GmbH" />
        
        <meta name="description" content="javascript library for optimal use on fast and flexible pages." />
        
        
    
        <!-- Adding external script-->
        
        
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" ></script>
        
        
    
        <!-- Adding external style-->
        
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha256-djO3wMl9GeaC/u6K+ic4Uj/LKhRUSlUFcsruzS7v5ms=" crossorigin="anonymous" />
        
        
    
        <!-- Adding scripts-->
        
    
        <!-- Adding style-->
        
    
        <!-- Adding overlay script-->
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.0/js/OverlayScrollbars.min.js"
          integrity="sha512-5R3ngaUdvyhXkQkIqTf/k+Noq3phjmrqlUQyQYbgfI34Mzcx7vLIIYTy/K1VMHkL33T709kfh5y6R9Xy/Cbt7Q=="
          crossorigin="anonymous"></script>
        
    
        <!-- Adding overlay style-->
        
    
    
        <title>
          Tutorial: Form examples
        </title>
    
        <!--[if lt IE 9]>
          <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link type="text/css" rel="stylesheet" href="styles/third-party/ionicons.min.css">
        <link type="text/css" rel="stylesheet" href="styles/third-party/prettify-tomorrow.css">
        <link type="text/css" rel="stylesheet" href="styles/reset.css">
        <link type="text/css" rel="stylesheet" href="styles/heading.css">
        <link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-base.css">
        <link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-light.css">
        
        <svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        style="display:none">
        <defs>
            <symbol id="copy-icon" viewbox="0 0 488.3 488.3">
                <g>
                    <path
                        d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" />
                    <path
                        d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z" />
                </g>
            </symbol>
            <symbol id='search-icon' viewBox="0 0 512 512">
                <g>
                    <g>
                        <path
                            d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z" />
                    </g>
                </g>
                <g>
                    <g>
                        <path
                            d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z" />
                    </g>
                </g>
            </symbol>
            <symbol id="down-icon" viewBox="0 0 16 16">
                <path 
                    fill-rule="evenodd" 
                    clip-rule="evenodd" 
                    d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
                >
                </path>
            </symbol>
        </defs>
    </svg>
      </head>
    
      <body>
    
        <nav class="navbar" id="navbar">
          <div class="navbar-heading" id="navbar-heading"><a href="index.html"><h2 class="navbar-heading-text">Monster</h2></a></div><div class="sidebar-main-content" id="sidebar-main-content"><ul><li class="menu-li"><a href='https://www.schukai.com/' class=' menu-link' id='' target='_blank'>schukai GmbH</a></li><li class="menu-li"><a href='https://www.npmjs.com/package/@schukai/monster' class=' menu-link' id='' target='_blank'>NPM</a></li></ul><div class="accordion collapsed" id="2506434" > <h3 class="accordion-heading">Tutorials<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="tutorial-tutorial.html">Monster - Build fantastic websites!</a></li></ul> </div><div class="accordion collapsed" id="4299156" > <h3 class="accordion-heading">Classes<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=8103773><div class="accordion-heading child"><a href="Monster.Namespace.html">Namespace</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Namespace.html#getNamespace">getNamespace</a></li><li data-type='method'><a href="Monster.Namespace.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=5416175><div class="accordion-heading child"><a href="Monster_Constraints.AbstractConstraint.html">AbstractConstraint</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.AbstractConstraint.html#isValid">isValid</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Constraints.AbstractOperator.html">AbstractOperator</a></li><li class="accordion collapsed child" id=1478691><div class="accordion-heading child"><a href="Monster_Constraints.AndOperator.html">AndOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.AndOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=9180057><div class="accordion-heading child"><a href="Monster_Constraints.Invalid.html">Invalid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.Invalid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=5555951><div class="accordion-heading child"><a href="Monster_Constraints.IsArray.html">IsArray</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.IsArray.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=283717><div class="accordion-heading child"><a href="Monster_Constraints.IsObject.html">IsObject</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.IsObject.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=9607997><div class="accordion-heading child"><a href="Monster_Constraints.OrOperator.html">OrOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.OrOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=6520417><div class="accordion-heading child"><a href="Monster_Constraints.Valid.html">Valid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.Valid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=7119662><div class="accordion-heading child"><a href="Monster_Data.Pathfinder.html">Pathfinder</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Pathfinder.html#deleteVia">deleteVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#exists">exists</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#getVia">getVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#setVia">setVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#setWildCard">setWildCard</a></li></ul></li><li class="accordion collapsed child" id=7573867><div class="accordion-heading child"><a href="Monster_Data.Pipe.html">Pipe</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Pipe.html#run">run</a></li><li data-type='method'><a href="Monster_Data.Pipe.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=850663><div class="accordion-heading child"><a href="Monster_Data.Transformer.html">Transformer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Transformer.html#run">run</a></li><li data-type='method'><a href="Monster_Data.Transformer.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=3385460><div class="accordion-heading child"><a href="Monster_DOM.Assembler.html">Assembler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Assembler.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster_DOM.Assembler.html#getAttributePrefix">getAttributePrefix</a></li><li data-type='method'><a href="Monster_DOM.Assembler.html#setAttributePrefix">setAttributePrefix</a></li></ul></li><li class="accordion collapsed child" id=9484551><div class="accordion-heading child"><a href="Monster_DOM.CustomElement.html">CustomElement</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getCSSStyleSheet">getCSSStyleSheet</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getTag">getTag</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getTemplate">getTemplate</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#adoptedCallback">adoptedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#assemble">assemble</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#attributeChangedCallback">attributeChangedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#connectedCallback">connectedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#disassemble">disassemble</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#disconnectedCallback">disconnectedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#getOption">getOption</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#init">init</a></li></ul></li><li class="accordion collapsed child" id=3319369><div class="accordion-heading child"><a href="Monster_DOM.Handle.html">Handle</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Handle.html#append">append</a></li><li data-type='method'><a href="Monster_DOM.Handle.html#remove">remove</a></li><li data-type='method'><a href="Monster_DOM.Handle.html#update">update</a></li></ul></li><li class="accordion collapsed child" id=5833533><div class="accordion-heading child"><a href="Monster_DOM.Template.html">Template</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Template.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster_DOM.Template.html#getTemplateElement">getTemplateElement</a></li></ul></li><li class="accordion collapsed child" id=6572807><div class="accordion-heading child"><a href="Monster_DOM.Theme.html">Theme</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Theme.html#getName">getName</a></li></ul></li><li class="accordion collapsed child" id=4323201><div class="accordion-heading child"><a href="Monster_DOM.Updater.html">Updater</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Updater.html#disableEventProcessing">disableEventProcessing</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#enableEventProcessing">enableEventProcessing</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#run">run</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#setCallback">setCallback</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#setEventTypes">setEventTypes</a></li></ul></li><li class="accordion collapsed child" id=3615774><div class="accordion-heading child"><a href="Monster_Logging.Handler.html">Handler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.Handler.html#getLogLevel">getLogLevel</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#log">log</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setAll">setAll</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setDebug">setDebug</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setError">setError</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setFatal">setFatal</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setInfo">setInfo</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setLogLevel">setLogLevel</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setOff">setOff</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setTrace">setTrace</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setWarn">setWarn</a></li></ul></li><li class="accordion collapsed child" id=1017286><div class="accordion-heading child"><a href="Monster_Logging.LogEntry.html">LogEntry</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.LogEntry.html#getArguments">getArguments</a></li><li data-type='method'><a href="Monster_Logging.LogEntry.html#getLogLevel">getLogLevel</a></li></ul></li><li class="accordion collapsed child" id=5481580><div class="accordion-heading child"><a href="Monster_Logging.Logger.html">Logger</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.Logger.html#addHandler">addHandler</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#getLabel">getLabel</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#getLevel">getLevel</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logDebug">logDebug</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logError">logError</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logFatal">logFatal</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logInfo">logInfo</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logTrace">logTrace</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logWarn">logWarn</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#removeHandler">removeHandler</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Logging_Handler.ConsoleHandler.html">ConsoleHandler</a></li><li class="accordion collapsed child" id=1437977><div class="accordion-heading child"><a href="Monster_Types.Base.html">Base</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Base.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=6427487><div class="accordion-heading child"><a href="Monster_Types.ID.html">ID</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ID.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=5883473><div class="accordion-heading child"><a href="Monster_Types.Observer.html">Observer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Observer.html#addTag">addTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#getTags">getTags</a></li><li data-type='method'><a href="Monster_Types.Observer.html#hasTag">hasTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#removeTag">removeTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#update">update</a></li></ul></li><li class="accordion collapsed child" id=8034714><div class="accordion-heading child"><a href="Monster_Types.ObserverList.html">ObserverList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ObserverList.html#attach">attach</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#contains">contains</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#detach">detach</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#notify">notify</a></li></ul></li><li class="accordion collapsed child" id=5392439><div class="accordion-heading child"><a href="Monster_Types.ProxyObserver.html">ProxyObserver</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ProxyObserver.html#attachObserver">attachObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#containsObserver">containsObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#detachObserver">detachObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#getRealSubject">getRealSubject</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#notifyObservers">notifyObservers</a></li></ul></li><li class="accordion collapsed child" id=4863338><div class="accordion-heading child"><a href="Monster_Types.Queue.html">Queue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Queue.html#add">add</a></li><li data-type='method'><a href="Monster_Types.Queue.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.Queue.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster_Types.Queue.html#peek">peek</a></li><li data-type='method'><a href="Monster_Types.Queue.html#poll">poll</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Types.RandomID.html">RandomID</a></li><li class="accordion collapsed child" id=4175085><div class="accordion-heading child"><a href="Monster_Types.Stack.html">Stack</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Stack.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.Stack.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster_Types.Stack.html#peek">peek</a></li><li data-type='method'><a href="Monster_Types.Stack.html#pop">pop</a></li><li data-type='method'><a href="Monster_Types.Stack.html#push">push</a></li></ul></li><li class="accordion collapsed child" id=9930246><div class="accordion-heading child"><a href="Monster_Types.TokenList.html">TokenList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.TokenList.html#add">add</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#contains">contains</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#entries">entries</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#forEach">forEach</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#getIterator">getIterator</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#remove">remove</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#replace">replace</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#Symbol.iterator">Symbol.iterator</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#toggle">toggle</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=6101795><div class="accordion-heading child"><a href="Monster_Types.UniqueQueue.html">UniqueQueue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.UniqueQueue.html#add">add</a></li><li data-type='method'><a href="Monster_Types.UniqueQueue.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.UniqueQueue.html#poll">poll</a></li></ul></li><li class="accordion collapsed child" id=8346120><div class="accordion-heading child"><a href="Monster_Types.Version.html">Version</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Version.html#compareTo">compareTo</a></li><li data-type='method'><a href="Monster_Types.Version.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=5451082><div class="accordion-heading child"><a href="Monster_Util.Comparator.html">Comparator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Util.Comparator.html#equal">equal</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#greaterThan">greaterThan</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#greaterThanOrEqual">greaterThanOrEqual</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#lessThan">lessThan</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#lessThanOrEqual">lessThanOrEqual</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#reverse">reverse</a></li></ul></li></ul> </div><div class="accordion collapsed" id="5878326" > <h3 class="accordion-heading">Namespaces<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=2032493><div class="accordion-heading child"><a href="global.html#Monster">Monster</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="global.html#Monster#.assignToNamespace">assignToNamespace</a></li><li data-type='method'><a href="global.html#Monster#.getVersion">getVersion</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Constraints.html">Monster/Constraints</a></li><li class="accordion collapsed child" id=3203249><div class="accordion-heading child"><a href="Monster_Data.html">Monster/Data</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.html#.Diff">Diff</a></li></ul></li><li class="accordion collapsed child" id=4138724><div class="accordion-heading child"><a href="Monster_DOM.html">Monster/DOM</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.html#.addAttributeToken">addAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.addToObjectLink">addToObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.clearAttributeTokens">clearAttributeTokens</a></li><li data-type='method'><a href="Monster_DOM.html#.containsAttributeToken">containsAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.findDocumentTemplate">findDocumentTemplate</a></li><li data-type='method'><a href="Monster_DOM.html#.getDocument">getDocument</a></li><li data-type='method'><a href="Monster_DOM.html#.getDocumentFragmentFromString">getDocumentFragmentFromString</a></li><li data-type='method'><a href="Monster_DOM.html#.getHandleFromNode">getHandleFromNode</a></li><li data-type='method'><a href="Monster_DOM.html#.getLinkedObjects">getLinkedObjects</a></li><li data-type='method'><a href="Monster_DOM.html#.getWindow">getWindow</a></li><li data-type='method'><a href="Monster_DOM.html#.hasObjectLink">hasObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.registerCustomElement">registerCustomElement</a></li><li data-type='method'><a href="Monster_DOM.html#.removeAttributeToken">removeAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.removeObjectLink">removeObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.replaceAttributeToken">replaceAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.toggleAttributeToken">toggleAttributeToken</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Logging.html">Monster/Logging</a></li><li class="accordion-list" id=""><a href="Monster_Logging_Handler.html">Monster/Logging/Handler</a></li><li class="accordion collapsed child" id=7201450><div class="accordion-heading child"><a href="Monster_Math.html">Monster/Math</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Math.html#.random">random</a></li></ul></li><li class="accordion collapsed child" id=5215794><div class="accordion-heading child"><a href="Monster_Types.html">Monster/Types</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.html#.getGlobal">getGlobal</a></li><li data-type='method'><a href="Monster_Types.html#.getGlobalFunction">getGlobalFunction</a></li><li data-type='method'><a href="Monster_Types.html#.getGlobalObject">getGlobalObject</a></li><li data-type='method'><a href="Monster_Types.html#.isArray">isArray</a></li><li data-type='method'><a href="Monster_Types.html#.isBoolean">isBoolean</a></li><li data-type='method'><a href="Monster_Types.html#.isFunction">isFunction</a></li><li data-type='method'><a href="Monster_Types.html#.isInstance">isInstance</a></li><li data-type='method'><a href="Monster_Types.html#.isInteger">isInteger</a></li><li data-type='method'><a href="Monster_Types.html#.isIterable">isIterable</a></li><li data-type='method'><a href="Monster_Types.html#.isObject">isObject</a></li><li data-type='method'><a href="Monster_Types.html#.isPrimitive">isPrimitive</a></li><li data-type='method'><a href="Monster_Types.html#.isString">isString</a></li><li data-type='method'><a href="Monster_Types.html#.isSymbol">isSymbol</a></li><li data-type='method'><a href="Monster_Types.html#.typeOf">typeOf</a></li><li data-type='method'><a href="Monster_Types.html#.validateArray">validateArray</a></li><li data-type='method'><a href="Monster_Types.html#.validateBoolean">validateBoolean</a></li><li data-type='method'><a href="Monster_Types.html#.validateFunction">validateFunction</a></li><li data-type='method'><a href="Monster_Types.html#.validateInstance">validateInstance</a></li><li data-type='method'><a href="Monster_Types.html#.validateInteger">validateInteger</a></li><li data-type='method'><a href="Monster_Types.html#.validateIterable">validateIterable</a></li><li data-type='method'><a href="Monster_Types.html#.validateObject">validateObject</a></li><li data-type='method'><a href="Monster_Types.html#.validatePrimitive">validatePrimitive</a></li><li data-type='method'><a href="Monster_Types.html#.validateString">validateString</a></li><li data-type='method'><a href="Monster_Types.html#.validateSymbol">validateSymbol</a></li></ul></li><li class="accordion collapsed child" id=9329076><div class="accordion-heading child"><a href="Monster_Util.html">Monster/Util</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Util.html#.clone">clone</a></li><li data-type='method'><a href="Monster_Util.html#.deepFreeze">deepFreeze</a></li></ul></li></ul> </div><div class="accordion collapsed" id="2950018" > <h3 class="accordion-heading">Global<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="global.html#buildMap">buildMap</a></li><li class="accordion-list" id=""><a href="global.html#getDocumentTheme">getDocumentTheme</a></li></ul> </div></div>
          
            <div class="navbar-resize" id="navbar-resize">
              <div class="resize-dots-container">
                <div class="dots"></div>
                <div class="dots"></div>
                <div class="dots"></div>
              </div> 
            </div>
          
    
        </nav>
        <div class="navbar-ham" id="navbar-ham">
          <div>
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
          </div>
        </div>
    
        <div id="main" class="main-content">
          
          <h1 id='page-title' class="page-title">
            Tutorial: Form examples
          </h1>
          
    
          <section>
    
    <header>
        
    
        <h2>Form examples</h2>
    </header>
    
    <article>
        <template id="example1">
    
        <style>
    
            [readonly] {
                background-color: #e9e9e9;
                border: 1px solid grey;
            }
    
            .tbl {
                display: flex;
                flex-direction: column;
            }
    
            .row {
                display: flex;
                min-height: 50px;
            }
    
            .cell {
                flex: 1;
                border-bottom: 1px solid #b0b0b0;
                padding: 1em;
            }
        </style>
    
        <div id="container" class="tbl">
    
            <div class="row">
                <div class="cell"><select type="input" data-monster-bind="path:value.multiple" multiple>
                    <option value="a" data-monster-attributes="selected path:value.multiple | call:checkstate">A</option>
                    <option value="b" data-monster-attributes="selected path:value.multiple | call:checkstate">B</option>
                    <option value="c" data-monster-attributes="selected path:value.multiple | call:checkstate">C</option>
                </select></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.multiple"></div>
            </div>
            <div class="row">
                <div class="cell"><select type="input" data-monster-bind="path:value.select"
                                          data-monster-attributes="value path:value.select">
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                </select></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.select"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="checkbox" data-monster-bind="path:value.checkbox" value="YES"
                                         data-monster-attributes="checked path:value.checkbox | call:checkstate"></div>
                <div class="cell"><input id="my" readonly data-monster-attributes="value path:value.checkbox"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="search" name="search" data-monster-bind="path:value.search"
                                         data-monster-attributes="value path:value.search"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.search"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="tel" name="tel" data-monster-bind="path:value.tel"
                                         data-monster-attributes="value path:value.tel"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.tel"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="time" name="time" data-monster-bind="path:value.time"
                                         data-monster-attributes="value path:value.time"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.time"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="url" name="url" data-monster-bind="path:value.url"
                                         data-monster-attributes="value path:value.url"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.url"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="week" name="week" data-monster-bind="path:value.week"
                                         data-monster-attributes="value path:value.week"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.week"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="color" name="color" data-monster-bind="path:value.color"
                                         data-monster-attributes="value path:value.color"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.color"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="radio" name="doit" data-monster-bind="path:value.radio" value="2"
                                         data-monster-attributes="checked path:value.radio | call:checkstate"><br>
                    <input type="radio" name="doit" data-monster-bind="path:value.radio" value="1"
                           data-monster-attributes="checked path:value.radio | call:checkstate"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.radio"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="range" name="range" data-monster-bind="path:value.range"
                                         data-monster-attributes="value path:value.range"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.range"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="password" name="password" data-monster-bind="path:value.password"
                                         data-monster-attributes="value path:value.password"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.password"></div>
            </div>
            <div class="row">
                <div class="cell">
                    <input type="number" name="number" data-monster-bind="path:value.number"
                           data-monster-attributes="value path:value.number"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.number"></div>
            </div>
            <div class="row">
                <div class="cell">
                    <input type="month" name="month" data-monster-bind="path:value.month"
                           data-monster-attributes="value path:value.month"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.month"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="email" name="email" data-monster-bind="path:value.email"
                                         data-monster-attributes="value path:value.email"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.email"></div>
            </div>
            <div class="row">
                <div class="cell"><input type="datetime-local" name="datetime-local"
                                         data-monster-bind="path:value.datetime-local"
                                         data-monster-attributes="value path:value.datetime-local"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.datetime-local"></div>
            </div>
            <div class="row">
                <div class="cell">
                    <input type="date" name="date" data-monster-bind="path:value.date"
                           data-monster-attributes="value path:value.date"></div>
                <div class="cell"><input readonly data-monster-attributes="value path:value.date"></div>
            </div>
    
            <div style="padding:20px; border:2px solid red; margin-top:20px"
                 data-monster-replace="path:value | tojson"></div>
    
        </div>
    
    </template>
    
    <script type="module">
    
        'use strict';
        import {Updater} from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.9.0/dist/modules/dom/updater.js";
    
        let example1 = document.getElementById('example1');
        document.querySelector('article').appendChild(example1.content);
    
        const container = document.getElementById('container');
    
        const updater = new Updater(container, {
            value: {
                input: "Init Value - input",
                textarea: "Init Value - textarea",
                file: "Init Value - file",
                checkbox: "Init Value - checkbox",
                radio: "Init Value - radio",
                multiple: ['a', 'c']
            }
        });
    
        updater.run();
        updater.enableEventProcessing();
        console.log(updater);
    
    
    </script>
    </article>
    
    </section>
    
        </div>
    
        <footer class="footer" id="footer">
          <a href='https://about.schukai.com/de/impressum/'>Imprint</a>
        </footer>
    
        <script src="scripts/third-party/prettify.js"></script>
        <script src="scripts/third-party/lang-css.js"></script>
        <script type="text/javascript" src="scripts/misc.js"></script>
    
        <script>prettyPrint();</script>
        <script src="scripts/linenumber.js"></script>
        <script src="scripts/fix-code-block.js"></script>
        <script src="scripts/fix-navbar.js"></script>
        
    
        
    
        
          <script src="scripts/resize.js"></script>
          <script type="text/javascript">
            var option = {"min":"300","max":"600"}
            setupResizeOptions(option)
          </script>
        
    
        
    
        
        <script type="text/javascript">
        var option = JSON.parse('{"options":{}}')
          console.log(option)
          document.addEventListener("DOMContentLoaded", function () {
            OverlayScrollbars(document.querySelectorAll('body'), option.option || {});
          });
        </script>
        
    
    
      </body>
    
    </html>