Something went wrong on our end
Select Git revision
customelement.mjs
-
Volker Schukai authoredVolker Schukai authored
tutorial-form-example.html 45.44 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/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="2667705" > <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="8311646" > <h3 class="accordion-heading">Classes<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=1160345><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=4982168><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=2647423><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=5297393><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=6311419><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=691223><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=4545389><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=1361399><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=5343702><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=2477086><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=2890564><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=482159><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=5105389><div class="accordion-heading child"><a href="Monster_DOM.CustomControl.html">CustomControl</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.CustomControl.html#attributeChangedCallback">attributeChangedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#checkValidity">checkValidity</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#reportValidity">reportValidity</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#setFormValue">setFormValue</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#setValidity">setValidity</a></li></ul></li><li class="accordion collapsed child" id=8925393><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#adoptedCallback">adoptedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#assembleMethodSymbol">assembleMethodSymbol</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#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#initMethodSymbol">initMethodSymbol</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#setOption">setOption</a></li></ul></li><li class="accordion collapsed child" id=7608688><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=6953892><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=2063685><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=8872333><div class="accordion-heading child"><a href="Monster_I18n.Locale.html">Locale</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.Locale.html#getMap">getMap</a></li><li data-type='method'><a href="Monster_I18n.Locale.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=9800429><div class="accordion-heading child"><a href="Monster_I18n.Provider.html">Provider</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.Provider.html#getTranslations">getTranslations</a></li></ul></li><li class="accordion collapsed child" id=8960387><div class="accordion-heading child"><a href="Monster_I18n.Translations.html">Translations</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.Translations.html#assignTranslations">assignTranslations</a></li><li data-type='method'><a href="Monster_I18n.Translations.html#getPluralRuleText">getPluralRuleText</a></li><li data-type='method'><a href="Monster_I18n.Translations.html#getText">getText</a></li><li data-type='method'><a href="Monster_I18n.Translations.html#setText">setText</a></li></ul></li><li class="accordion collapsed child" id=5639408><div class="accordion-heading child"><a href="Monster_I18n_Providers.Fetch.html">Fetch</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n_Providers.Fetch.html#getTranslations">getTranslations</a></li></ul></li><li class="accordion collapsed child" id=4036188><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=7155208><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=4932491><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=3039868><div class="accordion-heading child"><a href="Monster_Text.Formatter.html">Formatter</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Text.Formatter.html#format">format</a></li><li data-type='method'><a href="Monster_Text.Formatter.html#setMarker">setMarker</a></li></ul></li><li class="accordion collapsed child" id=8463854><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=1019097><div class="accordion-heading child"><a href="Monster_Types.BaseWithOptions.html">BaseWithOptions</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.BaseWithOptions.html#getOption">getOption</a></li></ul></li><li class="accordion collapsed child" id=9625917><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=3476692><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=9642438><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=2543064><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=4948463><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=1909574><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=9429174><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=2067404><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=9261185><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=2621625><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="5230507" > <h3 class="accordion-heading">Namespaces<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=7220795><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=4218196><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><li data-type='method'><a href="Monster_Data.html#.extend">extend</a></li></ul></li><li class="accordion collapsed child" id=3550576><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#.findClosestObjectLink">findClosestObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.findDocumentTemplate">findDocumentTemplate</a></li><li data-type='method'><a href="Monster_DOM.html#.findTargetElementFromEvent">findTargetElementFromEvent</a></li><li data-type='method'><a href="Monster_DOM.html#.fireEvent">fireEvent</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#.getLinkedObjects">getLinkedObjects</a></li><li data-type='method'><a href="Monster_DOM.html#.getLocaleOfDocument">getLocaleOfDocument</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 collapsed child" id=9233753><div class="accordion-heading child"><a href="Monster_I18n.html">Monster/I18n</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.html#.parseLocale">parseLocale</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_I18n_Providers.html">Monster/I18n/Providers</a></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=1376523><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-list" id=""><a href="Monster_Text.html">Monster/Text</a></li><li class="accordion collapsed child" id=1153373><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=5861492><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="2103527" > <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#assembleMethodSymbol">assembleMethodSymbol</a></li><li class="accordion-list" id=""><a href="global.html#buildMap">buildMap</a></li><li class="accordion-list" id=""><a href="global.html#DEFAULT_LANGUAGE">DEFAULT_LANGUAGE</a></li><li class="accordion-list" id=""><a href="global.html#findClosestByAttribute">findClosestByAttribute</a></li><li class="accordion-list" id=""><a href="global.html#getDocumentTheme">getDocumentTheme</a></li><li class="accordion-list" id=""><a href="global.html#initMethodSymbol">initMethodSymbol</a></li><li class="accordion-list" id=""><a href="global.html#localeStringSymbol">localeStringSymbol</a></li><li class="accordion-list" id=""><a href="global.html#propertiesSymbol">propertiesSymbol</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>
<p>
On this page you will find a sample implementation for many HTML5 controls. The binding is set up in both
directions,
so that a change to the control also causes a change to the values, and changes to the values cause a change to the control.
</p>
<p>
you can save the updater as a temporary variable in the console. In our case Chrome assigns the variable temp1 to
the object.
</p>
<p>
Note that instead of temp1 you have to take the variable from your browser.
</p>
<p>
and then access the data array using temp1.getSubject().
</p>
<p>
For example, to enable the checkbox you can set temp1.getSubject().value.checkbox="YES". To deactivate the checkbox
you have to remove the value temp1.getSubject().value.checkbox=undefined
</p>
<p>
Note that you have to take the variable from your browser instead of temp1.
</p>
<p>
At the bottom you will find the JSON with all values
</p>
<h3>Examples</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-coy.css" rel="stylesheet"/>
<template id="example1">
<style>
[readonly] {
background-color: #e9e9e9;
border: 1px solid grey;
}
div {
box-sizing: border-box;
}
.table {
display: grid;
grid-template-columns: 1fr 1fr 4fr;
}
.cell.control {
padding: 5px 20px;
}
.cell.value {
padding: 5px 20px;
}
.json {
margin: 5px 20px;
padding: 20px;
border: 4px solid #424242;
margin-top: 20px
}
</style>
<div id="container"> <div class="table">
<div class="cell control"><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 value"><input readonly data-monster-attributes="value path:value.multiple"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><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 value"><input readonly data-monster-attributes="value path:value.select"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="checkbox" data-monster-bind="path:value.checkbox" value="YES"
data-monster-attributes="checked path:value.checkbox | call:checkstate">
</div>
<div class="cell value"><input id="my" readonly data-monster-attributes="value path:value.checkbox"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="search" name="search" data-monster-bind="path:value.search"
data-monster-attributes="value path:value.search"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.search"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="tel" name="tel" data-monster-bind="path:value.tel"
data-monster-attributes="value path:value.tel"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.tel"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="time" name="time" data-monster-bind="path:value.time"
data-monster-attributes="value path:value.time"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.time"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="url" name="url" data-monster-bind="path:value.url"
data-monster-attributes="value path:value.url"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.url"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="week" name="week" data-monster-bind="path:value.week"
data-monster-attributes="value path:value.week"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.week"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="color" name="color" data-monster-bind="path:value.color"
data-monster-attributes="value path:value.color"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.color"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><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 value"><input readonly data-monster-attributes="value path:value.radio"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="range" name="range" data-monster-bind="path:value.range"
data-monster-attributes="value path:value.range"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.range"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="password" name="password" data-monster-bind="path:value.password"
data-monster-attributes="value path:value.password"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.password"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control">
<input type="number" name="number" data-monster-bind="path:value.number"
data-monster-attributes="value path:value.number"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.number"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control">
<input type="month" name="month" data-monster-bind="path:value.month" data-monster-attributes="value path:value.month"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.month"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><input type="email" name="email" data-monster-bind="path:value.email"
data-monster-attributes="value path:value.email"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.email"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control"><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 value"><input readonly data-monster-attributes="value path:value.datetime-local"></div>
<div class="cell code prettyprint source"></div>
<div class="cell control">
<input type="date" name="date" data-monster-bind="path:value.date"
data-monster-attributes="value path:value.date"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.date"></div>
<div class="cell code prettyprint source"></div>
</div>
<div class="json"
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.14.0/dist/modules/dom/updater.js";
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') {
let included = false;
let example1 = document.getElementById('example1');
let article = document.querySelector('article');
if (article) {
article.appendChild(example1.content);
included = true;
} else {
// for local debug
document.body.appendChild(example1.content);
}
document.querySelectorAll('div[class*=control]').forEach((element) => {
let col = element.nextElementSibling.nextElementSibling;
let source = (element.innerHTML);
let pre = document.createElement('pre');
let code = document.createElement('code');
col.appendChild(pre);
pre.appendChild(code);
source = Prism.highlight(source, Prism.languages.html, 'html');
code.innerHTML = source
})
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>