content: update form

ifpb · Oct 23, 2024 · c7cfad4 · c7cfad4
1 parent f05604f
commit c7cfad4
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 70 deletions.
diff --git a/public/codes/css/form/elements/checkbox.html b/public/codes/css/form/elements/checkbox.html
diff --git a/public/codes/css/form/elements/checkboxGroup.html b/public/codes/css/form/elements/checkboxGroup.html
diff --git a/public/codes/css/form/elements/label.html b/public/codes/css/form/elements/label.html
diff --git a/public/codes/css/form/elements/radioButton.html b/public/codes/css/form/elements/radioButton.html
diff --git a/public/codes/css/form/elements/radioButtonGroup.html b/public/codes/css/form/elements/radioButtonGroup.html
diff --git a/public/codes/css/form/elements/select.html b/public/codes/css/form/elements/select.html
diff --git a/public/codes/css/form/hello-js/index.html b/public/codes/css/form/hello-js/index.html
diff --git a/public/codes/css/form/hello-js/js/index.js b/public/codes/css/form/hello-js/js/index.js
diff --git a/public/codes/css/form/tailwind-form/index.html b/public/codes/css/form/tailwind-form/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html class="h-full bg-white">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="h-full">
+    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+      <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+        <img
+          class="mx-auto h-10 w-auto"
+          src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
+          alt="Your Company"
+        />
+        <h2
+          class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
+        >
+          Sign in to your account
+        </h2>
+      </div>
+
+      <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <form class="space-y-6" action="#" method="POST">
+          <div>
+            <label
+              for="email"
+              class="block text-sm font-medium leading-6 text-gray-900"
+              >Email address</label
+            >
+            <div class="mt-2">
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autocomplete="email"
+                required
+                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <div class="flex items-center justify-between">
+              <label
+                for="password"
+                class="block text-sm font-medium leading-6 text-gray-900"
+                >Password</label
+              >
+              <div class="text-sm">
+                <a
+                  href="#"
+                  class="font-semibold text-indigo-600 hover:text-indigo-500"
+                  >Forgot password?</a
+                >
+              </div>
+            </div>
+            <div class="mt-2">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autocomplete="current-password"
+                required
+                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
+
+        <p class="mt-10 text-center text-sm text-gray-500">
+          Not a member?
+          <a
+            href="#"
+            class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+            >Start a 14 day free trial</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
+<!--
+  This example requires some changes to your config:
+
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+    ],
+  }
+  ```
+-->
+<!--
+  This example requires updating your template:
+
+  ```
+
+  ```
+-->
diff --git a/src/components/HtmlPreview.astro b/src/components/HtmlPreview.astro
@@ -39,7 +39,7 @@ const codeName = src?.split('/')?.at(-2);
     }
   </div>
 
-  <div class="code-preview overflow-hidden m-0">
+  <div class="code-preview overflow-hidden !m-0">
     {
       src && isShowIframe ? (
         <Iframe

diff --git a/src/content/classnotes/css/form/index.mdx b/src/content/classnotes/css/form/index.mdx
@@ -74,10 +74,22 @@ value:
 ### label field
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/label.html" />
-<CodePreview src="/codes/css/form/elements/label.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div class="space-x-1">
+  <label for="cpf">CPF:</label>
+  <input type="text" name="cpf" id="cpf" />
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <label for="cpf">CPF:</label>
+  <input type="text" name="cpf" id="cpf" />
 </div>
+```
 
+</div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
 
@@ -99,29 +111,104 @@ value:
 
 ### radio button field
 
-<div class="flex flex-col space-y-0.5 mb-6">
-<HtmlPreview src="/codes/css/form/elements/radioButton.html" />
-<CodePreview src="/codes/css/form/elements/radioButton.html" lang="html" hideTitle={true} />
+<div class="flex flex-col space-y-0.5">
+
+<HtmlPreview>
+<div class="space-x-1">
+  <input type="radio" name="sex" value="male" id="male" />
+  <label for="male">masculino</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <input type="radio" name="sex" value="male" id="male" />
+  <label for="male">masculino</label>
 </div>
+```
+
+</div>
+
+radio group:
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/radioButtonGroup.html" />
-<CodePreview src="/codes/css/form/elements/radioButtonGroup.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div class="space-x-1">
+  Sexo:
+  <input type="radio" name="sexo" value="masculino" id="masculino" checked />
+  <label for="masculino">masculino</label>
+  <input type="radio" name="sexo" value="feminino" id="feminino" />
+  <label for="feminino">feminino</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  Sexo:
+  <input type="radio" name="sexo" value="masculino" id="masculino" checked />
+  <label for="masculino">masculino</label>
+  <input type="radio" name="sexo" value="feminino" id="feminino" />
+  <label for="feminino">feminino</label>
+</div>
+```
+
 </div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
 
 ### checkbox field
 
-<div class="flex flex-col space-y-0.5 mb-6">
-<HtmlPreview src="/codes/css/form/elements/checkbox.html" />
-<CodePreview src="/codes/css/form/elements/checkbox.html" lang="html" hideTitle={true} />
+<div class="flex flex-col space-y-0.5">
+
+<HtmlPreview>
+<div class="space-x-1">
+  <input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes" />
+  <label for="condicoes">Você concorda com os termos...</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes" />
+  <label for="condicoes">Você concorda com os termos...</label>
+</div>
+```
+
 </div>
 
+radio group:
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/checkboxGroup.html" />
-<CodePreview src="/codes/css/form/elements/checkboxGroup.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div class="space-x-1">
+  Linguagens:
+  <input type="checkbox" name="linguagens" value="javascript" id="javascript" />
+  <label for="javascript">Javascript</label>
+  <input type="checkbox" name="linguagens" value="c" id="c" />
+  <label for="c">C</label>
+  <input type="checkbox" name="linguagens" value="java" id="java" />
+  <label for="java">Java</label>
+  <input type="checkbox" name="linguagens" value="python" id="python" />
+  <label for="python">Python</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  Linguagens:
+  <input type="checkbox" name="linguagens" value="javascript" id="javascript" />
+  <label for="javascript">Javascript</label>
+  <input type="checkbox" name="linguagens" value="c" id="c" />
+  <label for="c">C</label>
+  <input type="checkbox" name="linguagens" value="java" id="java" />
+  <label for="java">Java</label>
+  <input type="checkbox" name="linguagens" value="python" id="python" />
+  <label for="python">Python</label>
+</div>
+```
+
 </div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
@@ -160,7 +247,7 @@ value:
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
 
-### [range field](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
+### range field
 
 <div class="flex flex-col space-y-0.5">
 
@@ -176,6 +263,8 @@ value:
 
 </div>
 
+[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
+
 ### number field
 
 <div class="flex flex-col space-y-0.5">
@@ -242,8 +331,8 @@ value:
 ```html
 <label for="message">Mensagem:</label><br />
 <textarea name="message" id="message" rows="3" cols="60">
-digite uma mensagem</textarea
->
+  digite uma mensagem
+</textarea>
 ```
 
 </div>
@@ -253,25 +342,45 @@ digite uma mensagem</textarea
 ### combobox field
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/select.html" />
-<CodePreview src="/codes/css/form/elements/select.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div>
+  <label for="place">Estado:</label>
+  <select name="place" id="place">
+    <option value="PB">Paraíba</option>
+    <option value="PE">Pernambuco</option>
+  </select>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <label for="place">Estado:</label>
+  <select name="place" id="place">
+    <option value="PB">Paraíba</option>
+    <option value="PE">Pernambuco</option>
+  </select>
+</div>
+```
+
 </div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
 
 ## Formulário
 
-### Estrutura do Formulário
-
+### Formulário sem estilo
 
 <CodeHtmlPreview src="/codes/css/form/simple-form" />
 
 ### Formulário com Boostrap
 
-<div class="flex flex-col space-y-6">
-
 <CodeHtmlPreview src="/codes/css/form/bootstrap-form" />
 
-<CodeHtmlPreview src="/codes/css/form/bootstrap-grid-form" />
+[Bootstrap | Sign-in](https://getbootstrap.com/docs/5.3/examples/sign-in/)
 
-</div>
+### Formulário com Tailwind
+
+<CodeHtmlPreview src="/codes/css/form/tailwind-form" />
+
+[Tailwind UI | Sign-in and Registration](https://tailwindui.com/components/application-ui/forms/sign-in-forms)