Skip to content

Commit

Permalink
style: change code preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@luizchaves
luizchaves committed Sep 2, 2024
1 parent 5094179 commit 7f36eed
Showing 1 changed file with 88 additions and 21 deletions.
109 changes: 88 additions & 21 deletions src/content/classnotes/css/form/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,194 +5,257 @@ title: Formulários
import CodePreview from '../../../../components/CodePreview.astro';
import HtmlPreview from '../../../../components/HtmlPreview.astro';
import CodeHtmlCssPreview from '../../../../components/CodeHtmlCssPreview.astro';
import CodeHtmlPreview from '../../../../components/CodeHtmlPreview.astro';

# {frontmatter.title}

## Elementos do Formulário

### single-line text field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<input type="text" name="cpf" />
</HtmlPreview>

```html title="html"
```html
<input type="text" name="cpf" />
```

</div>

required:

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<form>
<input type="text" name="cpf" required />{'*'}
</form>
</HtmlPreview>

```html title="html"
```html
<input type="text" name="cpf" required />*
```

</div>

placeholder:

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<input type="text" name="cpf" placeholder="000.000.000-00" />
</HtmlPreview>

```html title="html"
```html
<input type="text" name="cpf" placeholder="000.000.000-00" />
```

</div>

value:

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<input type="text" name="cpf" value="000.000.000-00" />
</HtmlPreview>

```html title="html"
```html
<input type="text" name="cpf" value="000.000.000-00" />
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)

### 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" />
<CodePreview src="/codes/css/form/elements/label.html" lang="html" hideTitle={true} />
</div>


[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)

### password field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<input type="password" name="password" />
</HtmlPreview>

```html title="html"
```html
<input type="password" name="password" />
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)

### 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" />
<CodePreview src="/codes/css/form/elements/radioButton.html" lang="html" hideTitle={true} />
</div>

<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" />
<CodePreview src="/codes/css/form/elements/radioButtonGroup.html" lang="html" hideTitle={true} />
</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" />
<CodePreview src="/codes/css/form/elements/checkbox.html" lang="html" hideTitle={true} />
</div>


<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" />
<CodePreview src="/codes/css/form/elements/checkboxGroup.html" lang="html" hideTitle={true} />
</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)

### button field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<button class="border border-slate-400 bg-gray-100 rounded px-2">Create</button>
</HtmlPreview>

```html title="html"
```html
<input type="button" name="submit" value="Create" />
<input type="submit" name="submit" value="Create" />
<button>Create</button>
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button)

### file field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<input type="file" name="file" />
</HtmlPreview>

```html title="html"
```html
<input type="file" name="file" />
```

</div>

[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)

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<input type="range" name="number" min="1" max="99" step="1" onInput={(event) => document.querySelector('input[name=number-value]').value = event.target.value} />
<input type="text" name="number-value" value="20" size="3" />
</HtmlPreview>

```html title="html"
```html
<input type="range" name="number" min="1" max="100" step="1" />
<input type="text" name="number-value" value="20" size="3" />
```

</div>

### number field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<form>
<input type="number" name="number" />
</form>
</HtmlPreview>

```html title="html"
```html
<input type="number" name="number" />
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)

### date field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<form>
<input type="date" name="date" />
</form>
</HtmlPreview>

```html title="html"
```html
<input type="date" name="date" />
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

### email field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<form>
<input type="email" name="email" />
</form>
</HtmlPreview>

```html title="html"
```html
<input type="email" name="email" />
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email)

### multi-line text field

<div class="flex flex-col space-y-0.5">

<HtmlPreview>
<label for="message">Mensagem:</label><br />
<textarea name="message" id="message" rows="3" cols="60">digite uma mensagem</textarea>
</HtmlPreview>

```html title="html"
```html
<label for="message">Mensagem:</label><br />
<textarea name="message" id="message" rows="3" cols="60">
digite uma mensagem</textarea
>
```

</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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" />
<CodePreview src="/codes/css/form/elements/select.html" lang="html" hideTitle={true} />
</div>

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)

Expand All @@ -201,10 +264,14 @@ digite uma mensagem</textarea
### Estrutura do Formulário


<CodeHtmlCssPreview src="/codes/css/form/simple-form" />
<CodeHtmlPreview src="/codes/css/form/simple-form" />

### Formulário com Boostrap

<CodeHtmlCssPreview src="/codes/css/form/bootstrap-form" />
<div class="flex flex-col space-y-6">

<CodeHtmlPreview src="/codes/css/form/bootstrap-form" />

<CodeHtmlPreview src="/codes/css/form/bootstrap-grid-form" />

<CodeHtmlCssPreview src="/codes/css/form/bootstrap-grid-form" />
</div>

0 comments on commit 7f36eed

Please sign in to comment.