Select Git revision
tutorial-form-example.html

Volker Schukai authored
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>