Skip to content

Commit

Permalink
content: update form
Browse files Browse the repository at this point in the history
  • Loading branch information
luizchaves committed Oct 23, 2024
1 parent f05604f commit c7cfad4
Show file tree
Hide file tree
Showing 11 changed files with 245 additions and 70 deletions.
2 changes: 0 additions & 2 deletions public/codes/css/form/elements/checkbox.html

This file was deleted.

9 changes: 0 additions & 9 deletions public/codes/css/form/elements/checkboxGroup.html

This file was deleted.

2 changes: 0 additions & 2 deletions public/codes/css/form/elements/label.html

This file was deleted.

2 changes: 0 additions & 2 deletions public/codes/css/form/elements/radioButton.html

This file was deleted.

5 changes: 0 additions & 5 deletions public/codes/css/form/elements/radioButtonGroup.html

This file was deleted.

6 changes: 0 additions & 6 deletions public/codes/css/form/elements/select.html

This file was deleted.

15 changes: 0 additions & 15 deletions public/codes/css/form/hello-js/index.html

This file was deleted.

5 changes: 0 additions & 5 deletions public/codes/css/form/hello-js/js/index.js

This file was deleted.

112 changes: 112 additions & 0 deletions public/codes/css/form/tailwind-form/index.html
Original file line number Diff line number Diff line change
@@ -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:
```
```
-->
2 changes: 1 addition & 1 deletion src/components/HtmlPreview.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
155 changes: 132 additions & 23 deletions src/content/classnotes/css/form/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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)
Expand Down Expand Up @@ -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">

Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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)

0 comments on commit c7cfad4

Please sign in to comment.