form imp

Author: Nikos Katsikanis

css/form.css

@@ -1,25 +1,28 @@
-/* Stored in /css/form.css */
-
 /*
-Good default for form with the form inputs with width: 100%
- */
-form.centered {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+File: css/form.css
+Version: 0.1: Made base form easier to work with devs with labels and form-controls
+*/
+form {
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
 
-  @media screen and (min-width: 600px) {
-    width: 400px;
-    margin: 0 auto;
-  }
+form.grid {
+  display: grid;
+/*todo*/
 }
 
 input,
 textarea {
   padding: 0.5rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--default-text);
+  border-radius: var(--form-control-border-radius);
+  border: 1px solid var(--form-control-border-color);
   color: var(--default-text);
-  background-color: var(--form-control-bg);
+  background-color: var(--form-control-bg-color);
   width: 100%;
 }
+
+:root {
+  --form-control-border-radius: 4px;
+}

css/reset.css

@@ -1,8 +1,7 @@
 /*
+File: css/reset.css
 things that annoy me
- */
-/*stored in /css/reset.css*/
-
+*/
 a {
   text-decoration: none;
 }

js/routes/form.js

@@ -7,32 +7,30 @@ export default (hostComponent) => {
   //language=HTML
   const indexHTML = `
 
-  <h1>Form</h1>
+  <h1>Form examples</h1>
 <form class="centered">
- <h2>Centered class form</h2>
-<span data-component="toggle-switch"></span>
+ <p>Linear form (repeating divs with label + form control pairs)</p>
   <div>
-    <label for="name">Name</label>
-    <input type="text" id="name" name="name">
+    <label for="name" >Name</label>
+    <input type="text" id="name" name="name" autocomplete="name" required>
     </div>
     <div>
     <label for="password">Password</label>
-    <input type="password" id="password" name="password">
+    <input type="password" id="password" name="password"  autocomplete="password" required>
   </div>
-
-<!--  <div>
-    <label for="iagree">I agree</label>
-    <input type="checkbox" name="iagree" id="iagree">
-  </div>-->
   <div>
     <label for="date">Date</label>
-    <input type="date" name="date" id="date">
+    <input type="date" name="date" id="date" required>
   </div>
   <div>
     <label for="range">Range</label>
-    <input type="range" name="range" id="range">
+    <input type="range" name="range" id="range" >
+  </div>
+  <div>
+    <label for="message">message</label>
+  <textarea  name="message" rows="4" required></textarea>
   </div>
-  <textarea id="message" name="message" rows="4" required></textarea>
+  <span data-component="toggle-switch"></span>
 
   <button type="submit">Submit</button>
 </form>