From 4cc1eff431e8db9782d8754d1079f47c5403ba47 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Thu, 23 Dec 2021 23:53:29 +0700 Subject: [PATCH] Build: forms.html --- docs/forms.html | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/docs/forms.html b/docs/forms.html index a8bd5be2..eb4edf17 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -27,7 +27,7 @@ </form>

Disabled and validation states:

<input type="text" placeholder="Valid" aria-invalid="false">
 <input type="text" placeholder="Invalid" aria-invalid="true">
 <input type="text" placeholder="Disabled" disabled>
-<input type="text" value="Readonly" readonly>

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

Size 
<!-- Select -->
+<input type="text" value="Readonly" readonly>

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

Size 
<!-- Select -->
 <label for="fruit">Fruit</label>
 <select id="fruit" required>
   <option value="" selected>Select a fruit…</option>
@@ -49,22 +49,35 @@
     <input type="radio" id="large" name="size" value="large">
     Large
   </label>
+  </label>
+  <label for="extralarge">
+    <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+    Extra Large
+  </label>
 </fieldset>
 
-<!-- Checkbox -->
+<!-- Checkbox(es) -->
 <fieldset>
   <label for="terms">
     <input type="checkbox" id="terms" name="terms">
     I agree to the Terms and Conditions
   </label>
+  <label for="terms_sharing">
+    <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+    I agree to share my information with partners
+  </label>
 </fieldset>
 
-<!-- Switch -->
+<!-- Switch(es) -->
 <fieldset>
   <label for="switch">
     <input type="checkbox" id="switch" name="switch" role="switch">
     Publish on my profile
   </label>
+  <label for="switch_disabled">
+    <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
+    Publish on my profile my accomplishments
+  </label>
 </fieldset>

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

<script>
   document.getElementById('indeterminate-checkbox').indeterminate = true;
 </script>

Others input types: