form.html

<!DOCTYPE html>
<head>
   <style>
      select-form::part(field) { margin-top: 5px;  }
   </style>   
</head>

<body>
   <select-form id="idLogon" style="width: 350px;"></select-form>

   <script type="module">
   import { CSelectInputForm } from "./lib/SelectInputForm.js";
   window.CSelectInputForm = CSelectInputForm;
   </script>
   <script>
      function setup() {
         let oSelectInputForm = document.getElementById("idLogon");
         const aFields = ["one", "two", "three"];
         oSelectInputForm.Append( aFields, (name) => { 
            return { alias: name, name: name, type: 0x40000, title: name, value:"xxxxx" }
         });
      }

      document.addEventListener('DOMContentLoaded', function() {
         setup();
      });
   </script>
</body>
</html>


<!-- 
CSS grid: https://www.sitepoint.com/css-grid-web-form-layout/

Design input controls
https://blog.logrocket.com/how-to-style-forms-with-css-a-beginners-guide/

https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms

Floating label
https://codepen.io/ettzzi/pen/ZWgWKw

Styling Form Inputs in CSS With :required, :optional, :valid and :invalid
https://www.digitalocean.com/community/tutorials/css-styling-form-input-validity

rouer
https://jstutorial.medium.com/making-your-own-vanilla-js-router-2e621ffdee88

.quick-card-editor {
	background: rgba(0,0,0,.6);
	bottom: 0;
	color: #fff;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
}



.quick-card-editor-buttons-item {
	background: rgba(0,0,0,.6);
	border-radius: 3px;
	clear: both;
	color: #e6e6e6;
	display: block;
	float: left;
	margin: 0 0 4px 8px;
	padding: 6px 12px 6px 8px;
	text-decoration: none;
	transition: transform 85ms ease-in;
}
-->