<blockquote> - HTML: Linguagem de Marcação de Hipertexto

<blockquote>
============

Sumário
-------

O Elemento HTML <blockquote> (ou Elemento HTML de citação de bloco) indica que o texto incluído é uma longa citação. Normalmente, este é processado visualmente pelo recuo (ver Notas (en-US) sobre como mudá-lo). A URL para a fonte da citação pode ser dada usando o atributo **cite**, enquanto uma representação de texto da fonte pode ser dada usando o `<cite>` elemento.

* *Categorias de conteúdo (en-US)* Fluxo de conteúdo (en-US), raiz selecionamento, conteúdo palpável.
* *Conteúdo permitido* Fluxo de conteúdo (en-US).
* *Tag Omissão* None, both the starting and ending tag are mandatory.
* *Elementos permitidos* Qualquer elemento que aceita o fluxo de conteúdo. (en-US)
* *Papéis ARIA permitidos* Qualquer
* *Interface DOM* `HTMLQuoteElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais (en-US).

`cite`

Uma URL que designa um documento de origem ou mensagem para a informação citada. Este atributo destina-se a apontar para informações explicando o contexto ou a referência para a cotação.

Notas
-----

Para alterar o recuo de `<blockquote>`, use a propriedade CSS `margin`.

Para citações curtas, use o elemento `<q>`.

Exemplo
-------

```html
<blockquote cite="http://developer.mozilla.org">
  <p>Esta é uma citação tirada da Mozilla Developer Center.</p>
</blockquote>
```

O código HTML acima vai resultar em:

>
> Esta é uma citação tirada da Mozilla Developer Center.
>
>
>

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-blockquote-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O elemento `<q>` para citações em linha.
* O elemento `<q>` para citações de origem.


<meta> - HTML: Linguagem de Marcação de Hipertexto

<meta>
======

O elemento \*\*HTML `<meta>` \*\*define qualquer informação de metadados que não podem ser definidos por outros elementos **HTML.** (`<base>`, `<link>`, `<script>`, `<style>` ou `<title>`).

|  |  |
| --- | --- |
| Categoria de
 conteúdo
  |
 Conteúdo de metadado. Se o
 `itemprop` atributo estiver
 presente:
 flow content,
 phrasing content.
  |
| Conteúdo permitido | Nenhum, é um elemento vazio. |
| Omissão de tag |
 Como é um elemento vazio, a marcação inicial deve estar presente e a de
 fechamento não.
  |
| Elementos pai permitidos | `<meta charset>`, `<meta http-equiv>`:
 um elemento `<head>`. Se o
 `http-equiv` não for uma
 declaração de codificação, ele pode estar dentro de um elemento
 `<noscript>`, dentro de um elemento
 `<head>`.
  |
| Papéis ARIA permitid | Nenhum |
| Interface DOM | `HTMLMetaElement` (en-US) |

Atributos
---------

Esse elemento inclui os atributos globais.

**Nota:** o atributo global `name` tem um significado específico para o elemento `<meta>`, e o atributo `itemprop` não deve ser definido no mesmo elemento`<meta>` que tem algum desses atributos existentes: `name`, `http-equiv` ou `charset`.

`charset`

Este atributo define a codificação de caracteres usada na página. Pode ser substituído localmente usando o atributo *lang* em qualquer elemento. Esse atributo é literalmente uma amarra e deve ser um dos *MIME names* preferidos para uma codificação de caracteres como definido pela IANA (defined by the IANA). Embora o padrão não solicite uma codificação específica, ele dá algumas sugestões:

* Autores são encorajados a usar UTF-8.
* Autores não devem usar codificações incompatíveis com ASCII (
 isto é, aqueles que não mapeiam os pontos de código de 8 bits 0x20 a 0x7E para os pontos de código Unicode 0x0020 a 0x007E), pois representam um risco de segurança: navegadores que não os suportam podem interpretar conteúdo maligno como Elementos HTML. Esse é o caso de pelo menos os seguintes caracteres: JIS\_C6226-1983, JIS\_X0212-1990, HZ-GB-2312, JOHAB, a família ISO-2022 e a família EBCDIC.
* Autores não devem usar CESU-8, UTF-7, BOCU-1 e SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented.
* Autores não devem usar UTF-32 pois nem todos algorítimos de codificação HTML5 conseguem distingui-lo do UTF-16.

**Nota:**

* O conjunto de caracteres declarado deve corresponder ao da página. Não há motivo válido para declarar um conjunto de caracteres imprecisos.
* Esse elemento `<meta>` deve estar dentro do elemento `<head>` e dentro dos primeiros 1024 bytes da página, pois alguns navegadores só olham para esses primeiros bytes antes de escolher um caractere definido para a página.
* Esse elemento `<meta>` é apenas uma parte do algoritmo para determinar o conjunto de caracteres de uma página que os navegadores aplicam. O cabeçalho HTTP Content-Type e quaisquer elementos da BOM têm precedência sobre esse elemento.
* É uma boa prática, e altamente recomendável, definir o conjunto de caracteres usando este atributo. Se nenhum conjunto de caracteres estiver definido para uma página, várias técnicas de scripts cruzados poderão prejudicar o usuário da página, como a técnica de cross-scripting de fallback UTF-7. Sempre definindo esta meta irá proteger contra esses riscos.
* Esse elemento `<meta>` é um sinônimo para o pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` onde o atributo `IANAcharset` corresponde ao valor equivalente de `charset`. Essa sintaxe ainda é permitida, embora obsoleta e não mais recomendada.

`content`

Esse atributo fornece o valor associado ao atributo `http-equiv` ou `name`, dependendo do contexto.

`http-equiv`

Este enumerado atributo define a pragma isso pode alterar o comportamento de servers e user-agents. o valor do pragma é definido usando `content` e pode ser um dos seguintes:

`"content-language"`

este pragma define a linguagem default da página

**Nota:** não use este pragma, ele esta obsoleto. use o atributo global `lang` no `<html>` ao invés deste.

`"Content-Security-Policy"`

Este valor permite os administradores do web site definam uma política de conteúdo (en-US) para a página atual. Com algumas exceções, politicas de conteúdo envolvem especificar origens de servidores e endpoints de scripts permitidos, isso ajuda na defesa de cross-server scripting attacks.

`"content-type"`

Esse atributo define o MIME type e o conjunto de caracteres do documento. Isso segue a mesma sintaxe como o HTTP `content-type` entity-header field, mas isto esta dentro de um elemento HTML, a maioria dos valores não é possível. Sendo assim a sintaxe válida para este conteúdo é a literal string '`text/html`' eventualmente seguido por estes caracteres com a seguinte sintaxe: '`; charset=`*`IANAcharset`*' onde `IANAcharset` é o *MIME preferido nome para um conjunto de caracteres como* definido pela IANA.

**Nota:**

* Nao use esta pragma ela esta obsoleta. use `charset` atributo `<meta>` element instead.
* como o `<meta>` pode nao ser usado para mudar o tipo de documento no XHTML, ou em um documento de HTML5 seguindo uma syntax de XHTML, nunca marque MIME type para um XHTML MIME type desta forma. isso sera incoerente.
* somente um documento HTML pode usar o content-type, então a maioria disto é redundante: isso porque esta obsoleto e trocado pelo atributo `charset`.

`"default-style"`

Este pragma preferencia de stylesheet a ser usado na página. o atributo `content` deve conter o **title** de um `<link>` elemento de quem `href` atributo link um CSS stylesheet, ou um **title** de um elemento `<style>` do qual contem um CSS stylesheet.

`"refresh"`

este pragma especifica:

* o numero de segundos até a página ser recarregada, se o atributo `content` contém apenas um número inteiro não negativo;
* o número de segundos até a página ser redirecionada para outro lugar, se o atributo `content` contém um inteiro não negativo seguido de uma string '`;url=`' e uma URL válida.

`"set-cookie"`

este pragma define um cookie para a página. este conteúdo deve seguir a sintaxe definida em IETF HTTP Cookie Specification.

**Nota:** não use este pragma está obsoleto. Use HTTP header set-cookie instead.

`name`

 Este atributo define o nome do document-level metadata. Isso não deve ser marcado se um dos atributos `itemprop`, `http-equiv` ou `charset` já estiver preparado.
 este document-level metadata name é associado a um valor, contido pelo atributo `content`. os possíveis valores para o elemento name são, com seu valor associado, guardado via `content` attribute:

* `application-name`, define o nome da aplicação que esta rodando na página;

**Nota:**

    + Browsers podem usar isso para identificar a aplicação. isso é diferente do elemento `<title>`, que geralmente constituí no nome da aplicação, mas também contém informações específicas como o nome do documento ou status;
    + Webpages simples não deveriam definir application-name meta.
* `author`, definindo, em formato livre, o nome do author do documento;
* `description`, contém uma curta e precisa descrição do conteúdo da página. vários browsers, como o Firefox e o Opera, usam este meta como descrição padrão da página quando é marcada.
* `generator`, contendo, em um formato livre, o identificador do software que gerou a página;
* `keywords`, contendo, como strings separadas por vírgula, palavras relevantes associadas ao conteúdo da página;
* `referrer`
Experimental
 controlando o conteúdo de um HTTP `Referer` HTTP header anexado a qualquer pedido enviado deste documento:

| `no-referrer` | não envia um HTTP `Referer` header. |
| --- | --- |
| `origin` | envia a origin de um documento. |
| `no-referrer-when-downgrade` | Envia a origem como referenciador para um destino prioritariamente tão seguro (https-> https), mas não envie um referenciador para um destino menos seguro (https-> http). Este é o comportamento padrão. |
| `origin-when-crossorigin` | Envia uma URL completa (sem parâmetros) ao executar uma solicitação de mesma origem, mas envie apenas a origem do documento para outros casos. |
| `unsafe-URL` | Envia um URL completo (sem parâmetros) ao executar uma solicitação de mesma origem ou origem cruzada. |

**Nota:** alguns browsers suportam keywords `always`, `default`, e `never` para referenciar. estes valores estão descontinuados.

**Nota:** dinamicamente inseridos `<meta name="referrer">` (por document.write ou appendChild) cria um nao-determinismo quando isso vem para enviar referências ou não. Note também quando muitas politicas conflitantes são definidas, o No-referrer politia é aplicada.

o atributo também pode ter um valor retirado de uma extensa lista definida em WHATWG Wiki MetaExtensions page. Embora nenhum tenha sido formalmente aceito ainda, alguns nomes comumente usados estão entre as propostas:

* `creator`, definindo, em um formato livre, o nome do criador do documento. Note que também pode ser o nome de uma instituição. se há mais de uma, vários elementos `<meta>` podem ser usados;
* `googlebot`, é um sinônimo de `robots`, mas só é seguido por Googlebot, o indexador crawler do Google;
* `publisher`, definido, em um formato livre, o nome do editor do documento. Note que também pode ser o nome de uma instituição;
* `robots`, definindo o comportamento que crawlers devem ter com a página. É separado por vírgula a lista de valores seguintes:

| Value | Description | Used by |
| --- | --- | --- |
| `index` | permite o robô indexar uma página | All |
| `noindex` | previne o robô de indexar uma página | All |
| `follow` | permite o robô a seguir os links da página | All |
| `nofollow` | previne o robô a seguir os links da página | All |
| `noodp` | previne o uso de descrição Open Directory Project, caso existam, como descrição da página o resultado na ferramenta de busca. | Google, Yahoo, Bing |
| `noarchive` | previne a ferramenta de busca pecar o conteúdo da página | Google, Yahoo |
| `nosnippet` | Impede a exibição de qualquer descrição da página na página de resultados do mecanismo de pesquisa | Google |
| `noimageindex` | previne esta página de aparecer como referencia de alguma imagem indexada | Google |
| `nocache` | sinônimo de `noarchive` | Bing |

**Nota:**

    + Somente robôs cooperativos seguirão as regras definidas pelo nome do robô. Não espere manter as colheitadeiras de e-mail à distância com isso.
    + O robô ainda precisa acessar a página para ler o valor meta. Se você quiser mantê-los sob controle, por exemplo, para evitar o consumo de largura de banda, use um arquivo robots.txt (ou em complemento).
    + Se você quiser remover a página de um índice, a alteração do meta para `noindex` funcionará, mas somente quando o robô visitar a página novamente. Verifique se o arquivo robots.txt não está impedindo essas visitas. Alguns mecanismos de busca possuem ferramentas para desenvolvedores, permitindo uma remoção rápida de algumas páginas.
    + Alguns valores possíveis são mutuamente exclusivos, como usar `index` e `noindex`, ou `follow` e `nofollow`, ao mesmo tempo. Nestes casos, o comportamento do robô é indefinido e pode variar de um para o outro. Então evite esses casos.
    + Alguns robôs rastreadores de mecanismos de pesquisa, como os do Google, Yahoo Search ou Bing, suportam os mesmos valores em uma diretiva `HTTP, X-Robot-Tags`: isso permite que eles usem esses pragma em documentos não HTML, como imagens
* `slurp`, qual é um sinônimo de `robots`, mas somente seguido por Slurp, o indexador crawler para Yahoo Search;

Finalmente, alguns nomes estão em uso comum, embora não estejam sendo padronizados:

* `viewport`, que dá dicas sobre o tamanho inicial do viewport. Este pragma é usado apenas por vários dispositivos móveis.

| Value | Possible values | Description |
| --- | --- | --- |
| `width` | um numero inteiro positivo ou o literal `device-width` | define a largura em pixel de um viewport |
| `height` | um numero inteiro positivo ou o literal `device-height` | define a altura em pixel de um viewport |
| `initial-scale` | um numero positivo entre `0.0` e `10.0` | define a relação entre a largura do dispositivo (largura do dispositivo no modo retrato ou altura do dispositivo no modo paisagem) e o tamanho da janela de visualização. |
| `maximum-scale` | um numero positivo entre `0.0` e `10.0` | define o valor máximo de zoom; deve ser maior ou igual ao `minimum-scale` ou o comportamento sera indeterminado. |
| `minimum-scale` | um numero positivo entre `0.0` e `10.0` | define o valor mínimo do zoom; deve ser menor ou igual ao `maximum-scale` ou o comportamento sera indeterminado |
| `user-scalable` | um valor booleano (`yes` ou `no`) | se setado `no`, o usuário não poderá usar zoom na página. o valor padrão é `yes`. |

**Nota:**

    + Embora não seja padronizado, esse atributo é usado por diferentes navegadores móveis, como o Safari Mobile, o Firefox para celular ou o Opera Mobile.
    + Os valores padrão podem mudar de um dispositivo e navegador para outro.
    + Para aprender sobre esse pragma no Firefox para celular, veja este artigo.

`scheme`

Este atributo define o esquema no qual os metadados são descritos. Um esquema é um contexto que leva às interpretações corretas dos `content` valores, como um formato.

**Nota:** Não use este atributo pois esta obsoleto.Não há substituto para isso, pois não houve uso real para isso. Omitir completamente.

Notes
-----

Dependendo do conjunto escolhido, o tipo de metadata pode ser uma das seguintes:

* se `name` é definido, isto é *document-level* *metadata*, aplicando para a página inteira.
* se `http-equiv` é definido, isto é um *pragma diretiva*, i.e. normalmente informação dada pelo web server sobre como a página web deve ser entregue.
* se `charset` é definido, isto é uma declaração de *charset*, i.e. o charset usado para o formulário serializado da página da Web
* se `itemprop` é definido, isto é *user-defined metadata*, transparente para o user-agent, pois a semântica dos metadados é específica do usuário.
Experimental
Exemplos
--------

```html
<!-- In HTML5 -->
<meta charset="utf-8" />

<!-- redireciona a página depois de 3 segundos -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-meta-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The other elements containing metadata: `<base>`, `<head>`, `<link>`, `<style>`,`<title>`.


<base> - HTML: Linguagem de Marcação de Hipertexto

<base>
======

Resumo
------

O *elemento HTML Base* (**<base>**) especifica o endereço (URL) utilizada por todos os endereços relativos contidos dentro de um documento. Há um número máximo de 1 (um) elemento *Base* <base> do documento.

>
> **Note:** Se multiplos elementos `<base>` forem especificados, apenas o primeiro valor de **href** e **target** serão utilizados, os demais serão ignorados.
>
>
>

* *Content categories (en-US)* Metadata content.
* *Permitted content* None, it is an empty element (en-US).
* *Tag omission* There must be no closing tag.
* *Permitted parent elements* Any `<head>` that doesn't contain any other `<base>` element
* *DOM interface* `HTMLBaseElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais (en-US).

* `href`
    + : O URL de base para ser usado em todo o documento para endereços URL relativos.Se este atributo for especificado, este elemento deve vir antes de quaisquer outros elementos com atributos cujos valores são URLs.Endereços (URLs) absolutos e relativos são permitidos (mas ver seção nota abaixo).
* `target`
    + : Esse elemento é uma palavra-chave que indica o local padrão para exibir o resultado quando os hiperlinks causarem navegações, por elementos que não têm referência alvo explícita. Em HTML5, é um nome ou palavra-chave para um contexto de navegação. (por exemplo, guia, janela, ou frame incorporada). As seguintes formas têm significados específicos:
* \_self: Coloca i resultado no mesmo quadro HTML4 ou contexto de navegação, caso HTML5, como o atual. Este valor é o padrão se o atributo não for especificado.
* \_blank: Coloca o resultado em uma nova janela HTML4 ou janela no contexto de navegação HTML5.
* \_parent: Coloca o resultado no conjunto de quadros pai do quadro atual no caso de HTML4 ou contexto de navegação pai no atual HTML5. Se não houver nenhum pai, esta opção se comporta como a forma \_self.
* \_top: Em HTML4: Coloca o resultado na janela completa, original, cancelando todos os outros quadros. Em HTML5: Coloca o resultado no contexto de navegação de nível superior (ou seja, o contexto de navegação em que é um antepassado do atual, e não o pai). Se não houver nenhum pai, este opção se comporta da mesma forma que \_self.
Exemplos
--------

```html
<base href="http://www.example.com/" />
<base target="\_blank" href="http://www.example.com/" />
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-base-element |

Navegadores Compatíveis
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Notas
-----

* A URL base de um documento pode ser consultada utilizando o seguinte script `document.baseURI` (en-US).
* Support of relative URIs for `href` was added in Gecko 2.0 (Firefox 4.0)
* HTML 2.0 and 3.2 define only the `href` attribute
* XHTML requires a trailing slash: `<base />`


<style> - HTML: Linguagem de Marcação de Hipertexto

<style>
=======

Resumo
------

O **elemento HTML <style>** contém informações de estilo para um documento ou uma parte do documento. As informações de estilo específico estão contidas dentro deste elemento, geralmente no CSS.

* *Content categories (en-US)*Metadata content, e se o atributo `scoped` é apresentado: flow content.
* *Conteúdo Permitido* Style information matching the language of the `type` attribute.
* *Omissão de Tag* None, both the starting and ending tag are mandatory.
* *Permitted parent elements* Qualquer elemento que aceite Metadata content.
* *Interface DOM* `HTMLStyleElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais.

type

Este atributo define a linguagem de estilo como um tipo MIME (charset não deve ser especificado). ' text/css' presume se este atributo estiver ausente.

media

Qual mídia deve aplicar-se a este estilo. Deve ser uma consulta de mídia, consulte http://dev.w3.org/csswg/css3-mediaqueries.

scoped

Se este atributo está presente, então o estilo aplica-se apenas ao seu elemento pai. Se está ausente, o estilo aplica-se ao documento inteiro.

title

Especifica os conjuntos de folhas de estilo alternativa.

disabled

Se definido, desativa (não se aplica) às regras de estilo para a `Document` que são especificadas no elemento.

Exemplos
--------

### Uma folha de estilo simples

```html
<style type="text/css">
 body {
 color: red;
 }
</style>
```

### Uma folha de estilos com escopo

```html
<article>
  <div>
    The scoped attribute allows for you to include style elements mid-document.
    Inside rules only apply to the parent element.
  </div>
  <p>
    This text should be black. If it is red your browser does not support the
    scoped attribute.
  </p>
  <section>
    <style scoped>
 p {
 color: red;
 }
 </style>
    <p>This should be red.</p>
  </section>
</article>
```

#### Amostra

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-style-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O elemento `<link>` que permite usar folhas de estilo externas.


<strong> - HTML: Linguagem de Marcação de Hipertexto

========
```

O elemento HTML <strong> dá ao texto uma forte importância, e é tipicamente mostrado em negrito.
```

|  |  |
| --- | --- |
| Categorias do conteúdo | Flux content (en-US),Phrasing content (en-US), conteúdo palpável. |
| Conteúdo permitido | Phrasing content (en-US). |
| Omissão de tag | Nenhuma, deve ter uma tag de início e uma tag de encerramento. |
| Permitted parents |
 Qualquer elemento que aceite
 phrasing content (en-US), ou qualquer elemento que aceite
 flow content (en-US).
  |
| Permitted ARIA roles | Qualquer um |
| DOM interface | `HTMLElement` (en-US) Até Gecko 1.9.2 (Firefox 4)
 inclusive, Firefox implementa a interface
 `HTMLSpanElement` para
 este elemento.
  |

Atributos
---------

Este elemento inclui apenas os atributos globais.

Notas de uso
------------

O elemento `<strong>` é utilizado em conteúdos que são de "grande importância", incluindo coisas de urgentes (como alertas). Podem ser sentenças que são de grande importância para toda a página, ou, você pode meramente tentar pontuar que algumas palavras são de grande importância, comparado ao conteúdo próximo.

Tipicamente, estes elementos são renderizados por padrão, usando fontes em negrito. Contudo, ele não deve ser usado para simplesmente aplicar o estilo negrito; use o CSS `font-weight` para este propósito. Use o elemento `<b>` para chamar a atenção para certos textos sem a indicação de grande nível de importância. Use o elemento `<em>` para marcar textos que tem necessitam de ênfase.

Outro uso aceitavel para `<strong>` é denotado com o rótulo (label) de parágrafos, que representa notas ou avisos, dentro do texto da página.

### Bold vs. Strong

Muitas vezes é confuso para novos desenvolvedores porque há tantas maneiras de expressar a mesma coisa em um website renderizado. Bold e Strong são talvez um dos casos mais comuns. Porque usar  vs ? Você precisa digitar muito mais ao usar strong e ela produz o mesmo resultado, certo?

Talvez não; strong é um estado lógico, e bold é um estado físico. Estados lógicos separam apresentação do conteúdo, e ao fazer isso permitem que ele seja expresso de várias maneiras diferentes. Possivelmente em vez de renderizar um texto como negrito você queira renderizá-lo vermelho, ou num tamanho diferente, ou sublinhado, ou seja lá o que for. Faz mais sentido mudar as propriedades de apresentação de strong do que bold. Isto porque bold é um estado físico; não há separação entre a apresentação e o conteúdo, e fazer com que bold faça qualquer outra coisa diferente de deixar o texto em negrito seria confuso e ilógico.

É importante notar que  tem outros usos, quando se quer chamar atenção sem aumentar a importância.

### Emphasis vs. Strong

Enquanto no HTML4, Strong simplesmente indicava uma ênfase mais forte, em HTML5, o elemento é descrito como representando "uma forte importância para o seu conteúdo." Esta é uma importante distinção a se fazer. Enquanto Emphasis é usado para alterar o significado de uma sentença ("Eu *amo* cenouras" vs. "Eu amo *cenouras*"), Strong é usado para dar mais importância a porções de uma sentença (e.g., "**Cuidado!** Isso é **muito perigoso.**"). Ambos Strong e Emphasis podem ser aninhados para aumentar o grau relativo de importância ou reforçar ênfase, respectivamente.

Exemplo
-------

### Exemplo básico

```html
<p>
  Ao fazer x é <strong>imperativo</strong> que se faça y antes de prosseguir.
</p>
```

### Resultado

Ao fazer x é **imperativo** que se faça y antes de prosseguir.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-strong-element |

Navegadores Compatíveis
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* HTML bold element (en-US)


<picture> - HTML: Linguagem de Marcação de Hipertexto

<picture>
=========

O **elemento HTML `<picture>`** é um container usado para especificar múltiplos elementos `<source>` para um elemento específico `<img>` contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, caracteristicas do dispositivo em que será exibido (p.e. um dispositivo normal ou um hiDPI), e a habilidade do navegador de renderizar um certo tipo de imagem (p.e., envie uma imagem WebP para os navegadores baseados no Chromium ou PNG para navegadores não-Chromium); se não houver correspondência entre os elementos `<source>`, o arquivo especificado pelo elemento `<img>` será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento `<img>`.

|  |  |
| --- | --- |
| Categorias de conteúdo | Conteúdo de fluxo,
 conteúdo fraseado,
 conteúdo embutido |
| Conteúdo permitido |
 Zero ou mais elementos `<source>`, seguidos de um
 elemento `<img>`, opcionalmente mesclado com
 elementos de suporte para scripts (por exemplo,
 `<script>` e
 `<template>`).
  |
| Omissão de tag | Nenhuma, as tags de abertura e fechamento são mandatórias |
| Parentes permitidos | Qualquer elemento que permita conteúdo embutido (embedded). |
| Papéis ARIA permitidos | Nenhum |
| Interface do DOM | `HTMLPictureElement` (en-US) |

Atributos
---------

Esse elemento só inclui elementos globais.

Exemplo 1: Uso com atributo `media`
-----------------------------------

O atributo `media` permite você especificar uma media query que o navegador irá avaliar para selecionar um elemento `<source>` . Se a media query retornar `falso`, o elemento `<source>` é ignorado.

```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

Exemplo 2: Uso com atributo type
--------------------------------

O atributo `type` lhe permite especificar um tipo MIME para o(s) recurso(s) fornecido(s) no atributo srcset do elemento `<source>`. Se o navegador não suporta o tipo especificado, o elemento `<source>` é ignorado.

```html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-picture-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<img>` element
* `<source>` element


<br> - HTML: Linguagem de Marcação de Hipertexto

====

Sumário
-------

O elemento HTML *quebra-de-linha*
 produz uma quebra de linha em um texto (carriage-return).É útil para escrever poemas ou um endereço, onde a divisão de linha é significante.

Não use
 para aumentar o espaço entre as linhas de texto; para isso use a propiedade CSS `margin` ou o elemento `<p>`.

|  |  |
| --- | --- |
| Categorias de Conteúdo (en-US) | Conteúdo de Fluxo (en-US),
 conteúdo fraseado (en-US).
  |
| Conteúdo permitido | Nenhum, é um empty element (en-US). |
| Omissão de tag |
 Deve ter uma tag de abertura, e não deve ter uma tag de fechamento. Em
 documentos XHTML , escreve esse elemento como `<br />`.
  |
| Elementos pai permitidos |
 Qualquer elemento que aceita
 conteúdo fraseado (en-US).
  |
| Interface DOM | `HTMLBRElement` (en-US) |

Atributos
---------

Este elemento inclue os Atributos globais (en-US).

`clear`
Deprecated

Indica onde começar a próxima linha depois da quebra.

**Nota:** Este atributo está obsoleto em HTML 5 e **Não deve ser usado por autores**. Use a propriedade CSS `clear` em vez disso.

Exemplo
-------

```html
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
```

Saída do HTML acima:

Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-br-element |

Compatibilidade com o browser
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O elemento `<address>`
* O elemento `<p>`


video - HTML: Linguagem de Marcação de Hipertexto

video
=====

Sumário
-------

O elemento HTML `<video>` é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.

Para uma lista de formatos suportados veja Media formats supported by the audio and video elements.

Contexto de uso
---------------

| Conteúdo permitido | Transparent content, contendo ou um atributo **src** ou um ou mais elementos `<source>`, seguido por flow content ou phrasing content , sem `<video>` ou elementos `<audio>`. |
| --- | --- |
| Omissão de tag | Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes. |
| Permissão de elementos pais | Qualquer elemento que aceite flow content, ou qualquer outro elemento que aceite phrasing content. |
| Documento normativo | HTML 5, section 4.8.6 |

Atributos
---------

Como qualquer elemento HTML, este elemento suporta os global attributes.

`autoplay`

Um atributo Booleano; se especificado, o video vai ser executado assim que possível sem precisar de carregar todo o arquivo.

**Nota:** Algumas versões do Chrome aceitam somente o `autostart` e não o autoplay

`autobuffer`
Non-standard

Um atributo Booleano; se especificado, o video vai começar a carregar automaticamente mesmo que não especificado para tocar automaticamente. Isso deve ser usado em casos que é esperado que o vídeo seja reproduzido (por exemplo, se o usuário acessa a página para assistir o vídeo, mas não se o vídeo estiver incorporado à pagina junto a outro conteúdo). O vídeo é carregado até que o cache de mídia.

>
> **Note:** **Nota de implementação:** embora parte dos primeiros rascunhos das especificações do HTML5, o atributo `autobuffer` foi removido das últimas versões. Ele foi removido do Gecko 2.0 e outros navegadores, e nunca implementado em outros. A especificação define um novo atributo enumerado, `preload`, para substituir o atributo `autobuffer`, com sintaxe diferente. Firefox bug 548523
>
>
>

`buffered`

Um atributo que pode ser lido para determinar os intervalos do vídeo que já foram carregados. Este atributo contém um objeto `TimeRanges` (en-US).

`controls`

Se esse atributo estiver presente, o Gecko oferecerá controles para permitir o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução.

`height`

A altura da área de exibição do vídeo, em pixels de CSS.

`loop`

Um atributo Booleano; se especificado, ao chegar no fim do vídeo, ele voltará automaticamente para o começo.

`muted`

Um atributo Booleano que indica a configuração padrão do áudio contido no vídeo. Se definido, o áudio vai começar mudo. Seu valor padrão é falso, significando que o áudio será reproduzido juntamente com o vídeo.

`played`

Um objeto `TimeRanges` (en-US) indicando que todo o vídeo foi reproduzido.

`preload`

Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores:

* none: indica que o usuário não necessitará consultar o vídeo ou que o servidor quer minimizar seu tráfego; em outros termos indica que o vídeo não deve ser pré-carregado.
* metadata: indica que embora o usuário não necessitará consultar o vídeo, pegar os meta-dados (ex: comprimento) é interessante.
* auto: indica que o usuário necessita ter prioridade; em outros termos isso indicou que, se necessário, o vídeo inteiro pode ser baixado, mesmo que não seja esperado a execução.
* a *string vazia*: é um sinônimo do valor auto.

Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o metadata.

>
> **Note:** **Notas de uso:**- O atributo `autoplay` tem precedência sobre o `preload`, pois se é necessário executar o vídeo automaticamente, o navegador obviamente o baixará. Definindo ambos `autoplay` e `preload` é permitido pela especificação.
>
>
> * O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.
>
>
>

`poster`

Uma URL indicando uma imagem de prévia do vídeo até o usuário reproduzir ou navegar por ele. Se este atributo não estiver especificado, nada será mostrado até que o primeiro quadro esteja disponível; então o primeiro quadro será exibido como imagem de prévia.

`src`

A URL do vídeo a ser incorporado. Isto é opcional; ao invés disso você pode usar o elemento `<source>` dentro do bloco do vídeo para especificar o vídeo a ser incorporado .

`width`

A largura da área de exibição do vídeo, em pixels de CSS.

O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.

**Nota:** A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.

Exemplos
--------

```html
<!-- Exemplo simples de vídeo -->
<video src="arquivovideo.ogg" autoplay poster="imagemprevia.jpg">
  Desculpa, o seu navegador não suporta vídeos incorporados, mas você pode
  <a href="videofile.ogg">baixá-lo</a>
  e assistir pelo seu reprodutor de mídia favorito!
</video>

<!-- Vídeo com legendas -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</video>
```

O primeiro exemplo reproduz um vídeo, começando a reprodução assim que o vídeo for recebido para permitir a execução sem parar a execução para baixar mais. Até que o vídeo comece a reproduzir, a imagem "imagemprevia.jpg" será mostrada em seu lugar.

O segundo exemplo permite o usuário escolher entre diferentes legendas.

Suporte ao Servidor
-------------------

Se o tipo MIME do vídeo não estiver definido corretamente no servidor, o vídeo poderá não ser mostrado ou uma caixa cinza contendo um X (se o JavaScript estiver habilitado) será exibida em seu lugar.

Se você disponibiliza seu vídeos como Ogg Theora, você pode corrigir esse problema para o servidor web Apache adicionando a extensão utilizada por seu arquivos de vídeo (".ogm", ".ogv", e ".ogg" são as mais comuns) para o tipo MIME "video/ogg" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.
```

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
```

Se você disponibilizar seu vídeos como WebM, você pode corrigir esse problema para o servidor web Apache adicionando a extensão usada por seu arquivos de vídeo (".webm" é a mais comum) para o tipo MIME "video/webm" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.
```

AddType video/webm .webm
```

Seu serviço de hospedagem talvez forneça uma interface simples para mudar a configuração dos tipos MIME para as novas tecnologias até que uma atualização global ocorra naturalmente.

Interface do DOM
----------------

Esse elemento implementa a interface `HTMLVideoElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Media formats supported by the audio and video elements
* `audio`
* Using HTML5 audio and video
* Manipulating video using canvas
* `nsIDOMHTMLMediaElement`
* TinyVid - exemplos utilizando arquivos ogg em HTML5.
* The `video` element (Especificação HTML 5)
* Configuring servers for Ogg media


<abbr> - HTML: Linguagem de Marcação de Hipertexto

<abbr>
======

Sumário
-------

O *Elemento* \_HTML `<abbr>` \_(ou Elemento de Abreviação HTML) representa uma abreviação e opcionalmente fornece uma descrição completa para ela. Se presente, o atributo **`title`** deve conter a descrição completa e apenas ela.

>
> **Note:** Quando presente, o número gramatical (singular/plural) do texto no atributo **`title`** deve ser correspondente ao do conteúdo do elemento `<abbr>`. Isso também deve ocorrer no caso das linguagens com mais de dois números gramaticais (por exemplo, em árabe não há somente palavras no singular e plural, mas tem também uma categoria dual).
>
>
>

* *Categorias de conteúdo (en-US)* Conteúdo de fluxo (en-US), conteúdo de fraseamento (en-US), conteúdo palpável
* *Conteúdo permitido*Conteúdo de fraseamento (en-US).
* *Omissão de tag* None, both the starting and ending tag are mandatory.
* *Elementos-pai permitidos* Qualquer elemento que aceite como filho conteúdo de fraseamento (en-US).
* *Interface DOM* `HTMLElement` (en-US) Após o Gecko 1.9.2 (Firefox 3.6) (e incluindo ele), o Firefox implementou a interface `HTMLSpanElement` para este elemento.
Atributos
---------

Este elemento inclui apenas os atributos globais (en-US).

Use o atributo **title** para definir a descrição completa da abreviação. Muitos navegadores exibem a descrição quando passa-se o mouse por cima da abreviação.

Estilo padrão
-------------

O propósito deste elemento é meramente a conveniência de autores e todos os navegadores mostram ele como um elemento dentro de uma linha (`display``: inline`) por padrão, embora o estilo aplicado sobre ele seja diferente entre diferentes navegadores:

* Alguns navegadores, como o Internet Explorer, não aplicam nenhum estilo à mais do que é aplicado ao elemento `<span>`.
* Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado ao conteúdo do elemento.
* Alguns poucos navegadores não apenas adicionam um sublinhado pontilhado, mas também colocam o texto em versalete (small caps); para evitar este tipo de estilo, adicione algo como `font-variant` (en-US)`: none` no CSS que administra este caso.

É fortemente recomendado que autores web não confiem no estilo padrão. Note que este elemento não é suportado pelo Internet Explorer anterior ao IE7. Como tais versões do IE também não permitem que se aplique estilo para elementos desconhecidos, o seguinte script é necessário para permitir isso:

```html
<!--[if lte IE 6]>
 <script>
 document.createElement("abbr");
 </script>
<![endif]-->
```

Exemplo
-------

```html
<p>Obama é presidente dos <abbr title="Estados Unidos da América">EUA</abbr></p>
```

### Resultado

Obama é presidente dos EUA

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-abbr-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos que possuem semântica à nível de texto: `<a>`, `<em>`, `<strong>`, `<small>` (en-US), `<cite>`, `<q>`, `<dfn>`, `<time>`, `<code>`, `<var>`, `<samp>` (en-US), `<kbd>` (en-US), `<sub>` (en-US), `<sup>` (en-US), `<b>`, `<i>`, `<mark>`, `<ruby>`, `<rp>` (en-US), `<rt>` (en-US), `<bdo>`, `<span>`, `<br>`, `<wbr>`.


<input type="checkbox"> - HTML: Linguagem de Marcação de Hipertexto

<input type="checkbox">
=======================

`<input>` elementos do tipo **`checkbox`** são renderizados por padrão como caixas quadradas que são marcadas (com uma marca de verificação) quando ativadas, como as que você veria em um formulário do governo. A aparência exata depende de da configuração de sistema operacional sobre o qual o navegador está sendo executado. Caixas de seleção permitem que você selecione valores únicos para envio em um formulário (ou não).

Experimente
-----------

>
> **Note:** **Nota** : Os botões de opção (en-US) são semelhantes às caixas de seleção, mas com uma distinção importante: os botões de opção são agrupados em um conjunto no qual apenas um botão pode ser selecionado por vez, enquanto as caixas de seleção permitem ativar e desativar valores únicos. Quando existem vários controles, os botões de opção permitem que um seja selecionado de todos, enquanto as caixas de seleção permitem que vários valores sejam selecionados.
>
>
>

|  |  |
| --- | --- |
| **Valor** |
 Um `DOMString` representando o valor da caixa de
 seleção.
  |
| **Eventos** | `change (en-US)` e `input (en-US)` |
| **Atributos comuns suportados** | `checked` |
| **Atributos IDL** | `checked` e `value` |
| **Métodos** | `select ()` |

Valor
-----

Um `DOMString` representando o valor da caixa de seleção. Isso nunca é visto no lado do cliente, mas no servidor esse é o `value` atribuído aos dados enviados com o `name` da caixa de seleção. Tome o seguinte exemplo:

```html
<form>
  <div>
    <input
 type="checkbox"
 id="subscribeNews"
 name="subscribe"
 value="newsletter" />
    <label for="subscribeNews"> Subscreva a newsletter? </label>
  </div>
  <div>
    <button type="submit">Subscrever</button>
  </div>
</form>
```

Neste exemplo, temos um nome `subscribe`e um valor de `newsletter`. Quando o formulário é enviado, o par de nome / valor de dados será `subscribe=newsletter`.

Se o atributo `value` for omitido, o valor padrão da caixa de seleção é `on` , portanto, os dados enviados nesse caso seriam `subscribe=on`.

>
> **Note:** **Nota** : Se uma caixa de seleção estiver desmarcada quando seu formulário for enviado, não haverá nenhum valor enviado ao servidor para representar seu estado desmarcado (por exemplo `value=unchecked`); o valor não é submetido ao servidor.
>
>
>

Usando entradas da caixa de seleção
-----------------------------------

Já cobrimos o uso mais básico de caixas de seleção acima. Vamos agora olhar para os outros recursos e técnicas relacionados à caixa de seleção que você precisa.

### Lidando com várias caixas de seleção

O exemplo que vimos acima continha apenas uma caixa de seleção; em situações do mundo real, você provavelmente encontrará várias caixas de seleção. Se eles não estiverem relacionados, você pode lidar com todos eles separadamente, como mostrado acima. No entanto, se todos estiverem relacionados, as coisas não são tão simples.

Por exemplo, na demonstração a seguir, incluímos várias caixas de seleção para permitir que o usuário selecione seus interesses (veja a versão completa na seção Examples).

```html
<fieldset>
  <legend>Escolha seus interesses</legend>
  <div>
    <input
 type="checkbox"
 id="codificação"
 name="interesse"
 value="codificação" />
    <label for="coding"> Codificação </label>
  </div>
  <div>
    <input type="checkbox" id="música" name="interesse" value="música" />
    <label for="music"> Música </label>
  </div>
</fieldset>
```

Neste exemplo, você verá que atribuímos a cada caixa de seleção o mesmo `name`. Se ambas as opções são verificados e, em seguida, o formulário é enviado, você terá uma série de pares nome / valor apresentado assim: `interest=coding&interest=music`. Quando esses dados atingirem o lado do servidor, você poderá capturá-los como uma matriz de valores relacionados e tratá-los adequadamente - consulte Lidar com várias caixas de seleção com uma única variável de servidor , por exemplo.

### Caixas de verificação por padrão

Para fazer uma caixa de seleção marcada por padrão, você simplesmente atribui o atributo `checked`. Veja o exemplo abaixo:

```html
<fieldset>
  <legend>Escolha seus interesses</legend>
  <div>
    <input
 type="checkbox"
 id="codificação"
 name="interesse"
 value="codificação"
 checked />
    <label for="coding"> Codificação </label>
  </div>
  <div>
    <input type="checkbox" id="música" name="interesse" value="música" />
    <label for="music"> Música </label>
  </div>
</fieldset>
```

### Fornecendo uma área de acertos maior para suas caixas de seleção

Nos exemplos acima, você deve ter notado que pode alternar uma caixa de seleção clicando no elemento `<label>` associado e na própria caixa de seleção. Esse é um recurso realmente útil de rótulos de formulários HTML que facilitam o clique na opção desejada, especialmente em dispositivos de tela pequena, como smartphones.

Além da acessibilidade, esse é outro bom motivo para configurar corretamente os `<label>`elementos em seus formulários.

### Caixas de seleção de estado indeterminado

Além dos estados marcado e não marcado, há um terceiro estado em que uma caixa de seleção pode estar: **indeterminada**. Este é um estado em que é impossível dizer se o item está ativado ou desativado. Isso é definido usando a propriedade `indeterminate` do objeto `HTMLInputElement` via JavaScript (não pode ser definido usando um atributo HTML):

```js
inputInstance.indeterminate = true;
```

Uma caixa de seleção no estado indeterminado tem uma linha horizontal na caixa (parece um hífen ou sinal de menos) em vez de uma marca de verificação na maioria dos navegadores.

Não há muitos casos de uso para essa propriedade. O mais comum é quando uma caixa de seleção está disponível e "possui" um número de subopções (que também são caixas de seleção). Se todas as subopções estiverem marcadas, a caixa de seleção proprietária também será marcada e, se todas elas estiverem desmarcadas, a caixa de seleção proprietária será desmarcada. Se uma ou mais das subopções tiverem um estado diferente das outras, a caixa de seleção proprietária está no estado indeterminado.

Isso pode ser visto no exemplo abaixo (graças aos CSS Tricks para a inspiração). Neste exemplo, acompanhamos os ingredientes que estamos coletando para uma receita. Quando você marca ou desmarca a caixa de seleção de um ingrediente, uma função JavaScript verifica o número total de ingredientes verificados:

* Se nenhum deles estiver marcado, a caixa de seleção do nome da receita está definida como desmarcada.
* Se um ou dois estiverem marcados, a caixa de seleção do nome da receita está definida como `indeterminate`.
* Se todos os três forem marcados, a caixa de seleção do nome da receita estará definida como `checked`.

Portanto, neste caso, o `indeterminate`estado é usado para afirmar que a coleta dos ingredientes foi iniciada, mas a receita ainda não está completa.

```js
  var overall = document.querySelector ('input[id = "EnchTbl"]');
  var ingredients = document.querySelectorAll ('ul input');

  overall.addEventListener ('clique', function (e) {
    e.preventDefault ();
  });

  for(var i = 0; i <ingredientes.length; i ++) {
    ingredientes [i] .addEventListener ('click', updateDisplay);
  }

  função updateDisplay () {
    var checkedCount = 1;
    for(var i = 0; i <ingredientes.length; i ++) {
      if (ingredientes [i] .checked) {
        checkedCount ++;
      }
    }

    if (checkedCount === ingredientes.length + 1) {
      overall.checked = true;
      overall.indeterminate = false;
    } else if (checkedCount <= ingredients.length + 1 && checkedCount> 1) {
      overall.checked = false;
      overall.indeterminate = true;
    } else {
      overall.checked = false;
      overall.indeterminate = false;
    }
  }
```

>
> **Note:** **Nota** : Se você enviar um formulário com uma caixa de seleção indeterminada, a mesma coisa acontece como se o formulário estivesse desmarcado - nenhum dado é enviado para representar a caixa de seleção.
>
>
>

Validação
---------

As caixas de seleção suportam validação (en-US) (oferecidas para todos os `<input>`s). No entanto, a maioria dos `ValidityState` s sempre será `false`. Se a caixa de seleção tiver o `required` atributo, mas não estiver marcada, ela `ValidityState.valueMissing` (en-US) será `true`.

Exemplos
--------

O exemplo a seguir é uma versão estendida do exemplo "multiple checkboxes" que vimos acima - tem mais opções padrão, além de uma caixa de seleção "other" que quando marcada faz com que um campo de texto apareça para inserir um valor para a opção "other". Isto é conseguido com um simples bloco de JavaScript. O exemplo também inclui alguns CSS para melhorar o estilo.

### HTML

```html
<form>
  <fieldset>
    <legend>Escolha seus interesses</legend>
    <div>
      <input
 type="checkbox"
 id="codificação"
 name="interesse"
 value="codificação" />
      <label for="coding"> Codificação </label>
    </div>
    <div>
      <input type="checkbox" id="música" name="interesse" value="música" />
      <label for="music"> Música </label>
    </div>
    <div>
      <input type="checkbox" id="arte" name="interesse" value="arte" />
      <label for="art"> Art </label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interesse" value="esportes" />
      <label for="sports"> Esportes </label>
    </div>
    <div>
      <input type="checkbox" id="cozinhar" name="interesse" value="cozinhar" />
      <label for="cooking"> Cozinhando </label>
    </div>
    <div>
      <input type="checkbox" id="outro" name="interesse" value="outro" />
      <label for="other"> Outro </label>
      <input type="text" id="otherValue" name="outro" />
    </div>
    <div>
      <button type="submit">Enviar formulário</button>
    </div>
  </fieldset>
</form>
```

### CSS

```css
html {
  font-family: sem serifa;
}

form {
  largura: 600px;
  margem: 0 auto;
}

div {
  margem inferior: 10px;
}

fieldset {
  fundo: ciano;
  borda: 5px azul sólido;
}

legend {
  preenchimento: 10px;
  fundo: azul;
  cor: ciano;
}
```

### JavaScript

```js
var otherCheckbox = document.querySelector ('entrada [valor = "outro"]');
var otherText = document.querySelector ('input [id = "otherValue"]');
otherText.style.visibility = 'oculto';

otherCheckbox.onchange = function () {
  if (otherCheckbox.checked) {
    otherText.style.visibility = 'visible';
    otherText.value = '';
  } outro {
    otherText.style.visibility = 'hidden';
  }
};
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # checkbox-state-(type=checkbox) |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<input>` e a interface `HTMLInputElement` que o implementa.
* Os seletores CSS `: checked` e `: indeterminate` permitem que você marque as caixas de seleção com base em seu estado atual


<input type="date"> - HTML: Linguagem de Marcação de Hipertexto

<input type="date">
===================

Os elementos `<input>` do tipo **`date`** cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o `horário`. Os tipos de entrada time e `datetime-local` (en-US) permitem informar horário e data/hora.

A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja Browser compatibility para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um `<input type="text">` (en-US) simples.

```html
<input id="date" type="date" />
```

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

![](/pt-BR/docs/Web/HTML/Element/input/date/date-picker-chrome.png)

O controle de data do Edge se parece assim:

![](/pt-BR/docs/Web/HTML/Element/input/date/date-picker-edge.png)

O controle de data do Firefox se parece assim:

![Datepicker UI in firefox](/pt-BR/docs/Web/HTML/Element/input/date/firefox_datepicker.png)

|  |  |
| --- | --- |
| **Value** |
 Um `DOMString` que representa uma data no formato
 AAAA-MM-DD ou vazio
  |
| **Eventos** | `change (en-US)` e `input (en-US)` |
| **Atributos Comuns Suportados** | `autocomplete`,
 `list`,
 `readonly` e
 `step` |
| **Atributos IDL** | `list`, `value`, `valueAsDate`,
 `valueAsNumber`.
  |
| **Métodos** | `select()`,
 `stepDown()` (en-US),
 `stepUp()` (en-US) |

Valores
-------

Um `DOMString` representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo `value`, como:

```html
<input id="date" type="date" value="2017-06-01" />
```

Uma coisa para perceber é que o formato da data mostrada difere do `value` atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em `value` sempre será formatado como `yyyy-mm-dd`.

Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade `value` do elemento de entrada, por exemplo:

```js
var dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
```

Este código localiza o primeiro elemento `<input>` que o `type` é `date` e define seu valor para a data 2017-06-01 (1 de junho de 2017).

Atributos adicionais
--------------------

Além dos atributos disponíveis para todos os elementos `<input>`, as caixas de texto de data oferecem os seguintes atributos:

| Atributo | Descrição |
| --- | --- |
| `max` | A maior data aceitável |
| `min` | A menor data aceitável |
| `readonly` | Se o conteúdo da caixa de texto é somente leitura |
| `step` | O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação |

Usando caixas de texto de data
------------------------------

Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o `<input type="date">` por causa do suporte limitado do navegador.

Iremos dar uma olhada em usos básicos e mais complexos de `<input type="date">`, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja Handling browser support). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.

### Uso básico da data

O uso mais simples de `<input type="date">` envolve a combinação de um `<input>` básico e o elemento `<label>`, como pode ser visto abaixo:

```html
<form>
  <div>
    <label for="diaa">Informe a data do seu aniversário:</label>
    <input type="date" id="diaa" name="diaa" />
  </div>
</form>
```

### Definindo data mínima e máxima

Você pode usar os atributos `min` e `max` para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como `2017-04-01` e data máxima como `2017-04-30`:

```html
<form>
  <div>
    <label for="festa">Escolha a sua data preferida da festa:</label>
    <input
 type="date"
 id="festa"
 name="festa"
 min="2017-04-01"
 max="2017-04-30" />
  </div>
</form>
```

O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.

>
> **Note:** **Observação**: Você deve conhecer o uso do atributo `step` para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.
>
>
>

### Controlando o tamanho da entrada

`<input type="date">` não suporta atributos de tamanho de formulário como `size`. Você poderá recorrer ao CSS para modificar o tamanho.

Validação
---------

Por padrão `<input type="date">` não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo `text`) informar uma data inválida (ex.: o 32 de Abril).

Se você usa `min` e `max` para restringir datas disponíveis (ver Definindo data mínima e máxima), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.

Adicionalmente, você pode usar o atributo `required` para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

```html
<form>
  <div>
    <label for="festa"
 >Escolha sua data preferida da festa (obrigatório, de 1º a 20 de
      abril):</label
 >
    <input
 type="date"
 id="festa"
 name="festa"
 min="2017-04-01"
 max="2017-04-20"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

![](/pt-BR/docs/Web/HTML/Element/input/date/date-picker-chrome-error-message.png)

Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS `:valid` e `:invalid` para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num `<span>` próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.

```css
div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span:after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  content: "✓";
  padding-left: 5px;
}
```

>
> **Warning:** **Importante**: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado. É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente. Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).
>
>
>

Manipulação do suporte do navegador
-----------------------------------

Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o suporte do navegador. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:

![](/pt-BR/docs/Web/HTML/Element/input/date/date-picker-fxa.png)

Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.

O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato `yyyy-mm-dd`. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:

* `ddmmyyyy`
* `dd/mm/yyyy`
* `mm/dd/yyyy`
* `dd-mm-yyyy`
* `mm-dd-yyyy`
* `Month dd yyyy`

Um jeito de contornar isso é colocar um atributo `pattern` na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:

```html
<form>
  <div>
    <label for="diaa">Informe a data do seu aniversário:</label>
    <input
 type="date"
 id="bday"
 name="diaa"
 required
 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão `nnnn-nn-nn`, onde `n` é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como `yyyy-dd-mm` (onde nós precisamos de `yyyy-mm-dd`). Então continua sendo um problema.
```

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span:after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span:after {
  content: "✓";
  position: absolute;
  right: -18px;
}
```

A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos `<select>` são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o selecionador de data do jQuery.

Atributos
---------

Beside the attributes listed below, this element can have any of the global attributes (en-US).

`mozactionhint`
Non-standard

Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are `go`, `done`, `next`, `search`, and `send`; these automatically get mapped to the appropriate string (and are case-insensitive).

`autofocus`

This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the **autofocus** attribute, which is a Boolean. It cannot be applied if the **type** attribute is set to `hidden` (that is, you cannot automatically set focus to a hidden control).

`disabled`

This Boolean attribute indicates that the form control is not available for interaction. In particular, the `click` event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

`form`

The form element that the input element is associated with (its *form owner*). The value of the attribute must be an **id** of a `<form>` (en-US) element in the same document. If this attribute is not specified, this `<input>` element must be a descendant of a `<form>` (en-US) element. This attribute enables you to place `<input>` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.

`formaction`

The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the `action` (en-US) attribute of the element's form owner.

`formenctype`

If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:

* `application/x-www-form-urlencoded`: The default value if the attribute is not specified.
* `multipart/form-data`: Use this value if you are using an `<input>` element with the `type` attribute set to `file`.
* `text/plain`

If this attribute is specified, it overrides the `enctype` (en-US) attribute of the element's form owner.

`formmethod`

If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:

* `post`: The data from the form is included in the body of the form and is sent to the server.
* `get`: The data from the form are appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

If specified, this attribute overrides the `method` (en-US) attribute of the element's form owner.

`formnovalidate`

If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the `novalidate` (en-US) attribute of the element's form owner.

`formtarget`

If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a *browsing context* (for example, tab, window, or inline frame). If this attribute is specified, it overrides the `target` (en-US) attribute of the elements's form owner. The following keywords have special meanings:

* `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
* `_blank`: Load the response into a new unnamed browsing context.
* `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
* `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.

`inputmode`

A hint to the browser for which keyboard to display. This attribute applies when the value of the **type** attribute is text, password, email, or url. Possible values are:

* `verbatim`: Alphanumeric, non-prose content such as usernames and passwords.
* `latin`: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
* `latin-name`: As *latin*, but for human names.
* `latin-prose`: As *latin*, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
* `full-width-latin`: As *latin-prose*, but for the user's secondary languages.
* `kana`: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
* `katakana`: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
* `numeric`: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number">
* `tel`: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
* `email`: Email input. Use <input type="email"> if possible instead.
* `url`: URL input. Use <input type="url"> if possible instead.

`list`

Identifies a list of pre-defined options to suggest to the user. The value must be the **id** of a `<datalist>` element in the same document. The browser displays only options that are valid values for this input element.

`max`

The maximum value for this item, which must not be less than its minimum (**min** attribute) value.

`min`

The minimum value for this item, which must not be greater than its maximum (**max** attribute) value.

`name`

The name of the control, which is submitted with the form data.

`readonly`

This Boolean attribute indicates that the user cannot modify the value of the control.

`required`

This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the **type** attribute is `hidden`, `image`, or a button type (`submit`, `reset`, or `button`). The `:optional` and `:required` CSS pseudo-classes will be applied to the field as appropriate.

`selectionDirection`

The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.

`spellcheck`

Setting the value of this attribute to `true` indicates that the element needs to have its spelling and grammar checked. The value `default` indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value. The value `false` indicates that the element should not be checked.

`step`

Works with the **min** and **max** attributes to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this attribute is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum.

`value`

 The initial value of the control. This attribute is optional.
 Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.

`x-moz-errormessage`
Non-standard

This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

Examples
--------

To create a widget to display a date, use:

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

Navegadores compatíveis
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* The generic `<input>` element and the interface used to manipulate it, `HTMLInputElement`
* Date and Time picker tutorial (en-US)
* Bug 1283381 - Firefox bug to implement


<input type="button"> - HTML: Linguagem de Marcação de Hipertexto

<input type="button">
=====================

Elementos `<input>` do tipo **`button`** são renderizados como um simples botão, que podem ser programados para controlar funcionalidades customizadas em qualquer lugar de uma página web quando for atribuído um evento (tipicamente para um evento `click (en-US)`).

Experimente
-----------

**Nota:** Enquanto elementos `<input>` do tipo `button` ainda são perfeitamente válidos, os novos elementos `<button>` são agora os favoráveis meios para criar botões. Uma etiqueta de texto (label) para um `<button>` pode ser inserida entre uma tag de abertura e outra de fechamento, podendo ser incluídas até imagens.

|  |  |
| --- | --- |
| **Value** | Um `DOMString` usado como uma etiqueta de botão. |
| **Eventos** | `click (en-US)` |
| **Atributos comuns suportados** | `type`, e
 `value` |
| **atributos IDL** | `value` |
| **Métodos** | Nenhum |

Value
-----

Seu atributo `value` de um elemento `<input type="button">` contém uma `DOMString` que é usado como uma etiqueta (label) de um botão

```html
<input type="button" value="Click Me" />
```

Se você não especificar um `value`, você obtém um botão vazio:

```html
<input type="button" />
```

Usando buttons
--------------

Elementos `<input type="button">` não possuem comportamento padrão (seu primos, `<input type="submit">` e `<input type="reset">` (en-US) são usados para submeter e resetar formulários). Para que botões possam fazer algo, você tem de escrever um código em JavaScript para fazê-lo trabalhar.

### Um simples botão

Nós iremos começar criando um simples botão com um evento `click (en-US)` que inicia nossa máquina (bem, ele altera o `value` do botão e o contéudo texto do seguinte parágrafo):

```html
<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
```

```js
const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Start machine") {
    button.value = "Stop machine";
    paragraph.textContent = "The machine has started!";
  } else {
    button.value = "Start machine";
    paragraph.textContent = "The machine is stopped.";
  }
}
```

O script recebe uma referência para o objeto `HTMLInputElement` representando o `<input>` no DOM, salvando esta referência na variável `button`. `addEventListener()` é então usado para criar uma função que será chamada quando o evento `click (en-US)` for executado no botão.

### Adicionando atalhos de teclados aos botões

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any `<input>` for which it makes sense — you use the `accesskey` global attribute.

In this example, `s` is specified as the access key (you'll need to press `s` plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

```html
<form>
  <input type="button" value="Start machine" accesskey="s" />
</form>
<p>The machine is stopped.</p>
```

```
const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Start machine") {
    button.value = "Stop machine";
    paragraph.textContent = "The machine has started!";
  } else {
    button.value = "Start machine";
    paragraph.textContent = "The machine is stopped.";
  }
}
```

>
> **Note:** The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).
>
>
>

### Desativando e ativando um botão

To disable a button, simply specify the `disabled` global attribute on it, like so:

```html
<input type="button" value="Disable me" disabled />
```

You can enable and disable buttons at run time by simply setting `disabled` to `true` or `false`. In this example our button starts off enabled, but if you press it, it is disabled using `button.disabled = true`. A `setTimeout()` (en-US) function is then used to reset the button back to its enabled state after two seconds.
```

<input type="button" value="Enabled" />
```

```
const button = document.querySelector("input");

button.addEventListener("click", disableButton);

function disableButton() {
  button.disabled = true;
  button.value = "Disabled";
  window.setTimeout(function () {
    button.disabled = false;
    button.value = "Enabled";
  }, 2000);
}
```

If the `disabled` attribute isn't specified, the button inherits its `disabled` state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a `<fieldset>` element, and then setting `disabled` on the container.

The example below shows this in action. This is very similar to the previous example, except that the `disabled` attribute is set on the `<fieldset>` when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.
```

<fieldset>
  <legend>Button group</legend>
  <input type="button" value="Button 1" />
  <input type="button" value="Button 2" />
  <input type="button" value="Button 3" />
</fieldset>
```

```
const button = document.querySelector("input");
const fieldset = document.querySelector("fieldset");

button.addEventListener("click", disableButton);

function disableButton() {
  fieldset.disabled = true;
  window.setTimeout(function () {
    fieldset.disabled = false;
  }, 2000);
}
```

>
> **Note:** Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a `<button>` across page loads. Use the `autocomplete` attribute to control this feature.
>
>
>

Validação
---------

Buttons não participam na validação; eles não tem um valor real para ser restringido.

Exemplos
--------

The below example shows a very simple drawing app created using a `<canvas>` element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.

```html
<div class="toolbar">
  <input type="color" aria-label="select pen color" />
  <input
 type="range"
 min="2"
 max="50"
 value="30"
 aria-label="select pen size" /><span class="output">30</span>
  <input type="button" value="Clear canvas" />
</div>

<canvas class="myCanvas">
  <p>Add suitable fallback here.</p>
</canvas>
```

```
body {
  background: #ccc;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  background: #ccc;
  width: 150px;
  height: 75px;
  padding: 5px;
}

input[type="color"],
input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
  position: relative;
  bottom: 5px;
}
```

```js
var canvas = document.querySelector(".myCanvas");
var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight - 85);
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, width, height);

var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector(".output");
var clearBtn = document.querySelector('input[type="button"]');

// covert degrees to radians
function degToRad(degrees) {
  return (degrees \* Math.PI) / 180;
}

// update sizepicker output value

sizePicker.oninput = function () {
  output.textContent = sizePicker.value;
};

// store mouse pointer coordinates, and whether the button is pressed
var curX;
var curY;
var pressed = false;

// update mouse pointer coordinates
document.onmousemove = function (e) {
  curX = window.Event
    ? e.pageX
    : e.clientX +
      (document.documentElement.scrollLeft
        ? document.documentElement.scrollLeft
        : document.body.scrollLeft);
  curY = window.Event
    ? e.pageY
    : e.clientY +
      (document.documentElement.scrollTop
        ? document.documentElement.scrollTop
        : document.body.scrollTop);
};

canvas.onmousedown = function () {
  pressed = true;
};

canvas.onmouseup = function () {
  pressed = false;
};

clearBtn.onclick = function () {
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, width, height);
};

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(
      curX,
      curY - 85,
      sizePicker.value,
      degToRad(0),
      degToRad(360),
      false,
    );
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # button-state-(type=button) |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<input>` and the `HTMLInputElement` interface which implements it.
* The more modern `<button>` element.
* Compatibility of CSS properties (en-US)


<input type="password"> - HTML: Linguagem de Marcação de Hipertexto

<input type="password">
=======================

Elementos `<input>` do tipo **`"password"`** são uma maneira do usuário digitar senhas com segurança. O elemento é mostrado como um controle de edição de texto de uma linha, no qual o texto é omitido para que não possa ser lido, geralmente substituindo cada caractere por um símbolo como o astesrisco ("\*") ou um ponto ("•"). Esse caracter varia dependendo do agente de usuário e do OS.

Experimente
-----------

Os detalhes de como o processo de inserção do texto funciona podem variar dependendo do navegador. Dispositivos móveis, por exemplo, frequentemente mostram o caractere digitado por um breve momento antes de ser ocultado, de forma que o usuário possa verificar se realmente digitou o caractere pretendido. Isso é útil devido ao tamanho reduzido das teclas e a facilidade de se pressionar a tecla errada, principalmente em teclados virtuais.

>
> **Note:** Todo formulário que envolve informações sensíveis tais como senhas (ex.: formulários de login) deve ser servido usando HTTPS. Vários navegadores implementam mecanismos que avisam sobre formulários não protegidos - veja Senhas não Protegidas.
>
>
>

|  |  |
| --- | --- |
| **Value** | Uma `DOMString` representando uma senha, ou vazia |
| **Eventos** | `change (en-US)` e `input (en-US)` |
| **Atributos comuns suportados** | `autocomplete`,
 `inputmode`,
 `maxlength`,
 `minlength`,
 `pattern`,
 `placeholder`,
 `readonly`,
 `required`, e
 `size` |
| **Atributos IDL** | `selectionStart`, `selectionEnd`,
 `selectionDirection`, e `value` |
| **Métodos** | `select()`,
 `setRangeText()` (en-US),
 e
 `setSelectionRange()` |

Valor
-----

O atributo `value` contém uma `DOMString` cujo valor é o conteúdo atual do controle de edição de texto usado para a inserção da senha. Se o usuário ainda não digitou nada, esse valor é uma string vazia (`""`). Se a propriedade `required` for especificada, então a caixa de edição de senha precisa conter um valor que não seja uma string vazia para ser válida.

Se o atributo `pattern` for especificado, o conteúdo de um controle `"password"` só é considerado válido se o valor passar na validação; veja Validação para mais informações.

>
> **Note:** Os caracteres de quebra de linha *line feed* (U+000A) e *carriage return* (U+000D) não são permitidos em valores de `"password"`. Quando o valor de um campo de senha é definido, os caracteres acima são removidos do valor.
>
>
>

Usando campos de senha
----------------------

Caixas de inserção de senha funcionam assim como outras caixas de inserção de texto; a principal diferença é que o conteúdo é ocultado para impedir que pessoas que estejam próximas ao usuário leiam a senha.

### Um campo de senha simples

Aqui vemos o mais básico dos campos de senha, juntamente com um rótulo para ele usando o elemento `<label>`.

```html
<label for="senhaUsuario">Senha: </label>
<input id="senhaUsuario" type="password" />
```

### Permitindo preenchimento automático

Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo `autocomplete`. Para senhas, o valor dele deve ser geralmente um dos seguintes:

`"on"`

Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto `"current-password"` ou `"new-password"`.

`"off"`

Não permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Vale observar que alguns softwares ignoram esse valor, já que ele costuma ser prejudicial para a capacidade dos usuários de manter senhas seguras.

`"current-password"`

Permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Esse valor fornece mais informações do que `"on"`, já que ele permite que o navegador ou gerenciador de senhas digite automaticamente a senha atualmente conhecida do site no campo, mas não que sugira uma nova.

`"new-password"`

Permite que o navegador ou gerenciador de senhas digite automaticamente uma nova senha para o site. Esse valor é usado em formulários de "mudar senha" e de "novo usuário", no campo que pede por uma nova senha. A nova senha pode ser gerada de várias maneiras, dependendo do gerenciador de senhas usado. Ele pode simplificar o preenchimento de uma sugestão de nova senha, ou mesmo pode mostrar ao usuário uma interface para criar uma.

```html
<label for="senhaUsuario">Senha:</label>
<input id="senhaUsuario" type="password" autocomplete="current-password" />
```

### Tornando a senha obrigatória

Para dizer ao navegador do usuário que o campo de senha precisa ter um valor válido antes do formulário ser enviado, basta adicionar o atributo booleano `required`.

```html
<label for="senhaUsuario">Senha: </label>
<input id="senhaUsuario" type="password" required />
<input type="submit" value="Enviar" />
```

### Especificando um modo de inserção

Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderiam obter vantagem de uma interface de digitação diferente da de um teclado padrão, você pode usar o atributo `inputmode` para pedir por uma interface específica. O caso de uso mais óbvio para isso é o de a senha precisar ser numérica (como um PIN). Dispositivos móveis com teclados virtuais, por exemplo, podem optar por mostrar um teclado numérico ao invés de um teclado completo, facilitando a digitação da senha.

```html
<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />
```

### Definindo restrições de tamanho

Como de praxe, você pode usar os atributos `minlength` e `maxlength` para estabelecer os tamanhos mínimo e máximo aceitáveis para a senha. Este exemplo continua o anterior, agora especificando que o PIN do usuário deva ter pelo menos quatro dígitos e não passe de oito dígitos. O atributo `size` é usado para garantir que o campo de senha aceite no máximo oito caracteres.

```html
<label for="pin">PIN:</label>
<input
 id="pin"
 type="password"
 inputmode="numeric"
 minlength="4"
 maxlength="8"
 size="8" />
```

### Selecionando o texto

Assim como em outros tipos de campos de texto, você pode usar o método `select()` para selecionar todo o texto no campo de senha.

#### HTML

```html
<label for="senhaUsuario">Senha: </label>
<input id="senhaUsuario" type="password" size="12" />
<button id="selecionarTudo">Selecionar tudo</button>
```

#### JavaScript

```js
document.getElementById("selecionarTudo").onclick = function () {
  document.getElementById("senhaUsuario").select();
};
```

#### Resultado

Você também pode usar `selectionStart` e `selectionEnd` para obter (ou definir) o intervalo dos caracteres no campo que estão selecionados no momento, e `selectionDirection` para saber em qual direção a seleção ocorreu (ou será estendida, dependendo da sua plataforma; veja a documentação dela para saber mais). Porém, como o texto está oculto, a utilidade desses métodos fica reduzida.

Validação
---------

Se seu aplicativo tiver restrições de conjuntos de caracteres ou qualquer outro requisito para o conteúdo da senha digitada, você pode usar o atributo `pattern` para estabelecer que uma expressão regular seja usada para garantir automaticamente que as senhas cumpram com esses requisitos.

Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e no máximo oito dígitos hexadecimais.

```html
<label for="hexId">Hex ID: </label>
<input
 id="hexId"
 type="password"
 pattern="[0-9a-fA-F]{4,8}"
 title="Digite um ID consistindo de 4-8 dígitos hexadecimais" />
```

`disabled`

Esse atributo booleano indica que o campo de senha não está disponível para interação. Além disso, os valores dos campos marcados com ele não são enviados com o formulário.

Exemplos
--------

### Pedindo por um CPF

Este exemplo aceita apenas valores que correspondam ao formato de um Cadastro de Pessoa Física. Este número, usado para fins de cobrança e identificação, segue o formato "123.456.789-09".

#### HTML

```html
<label for="cpf">CPF:</label>
<input
 type="password"
 id="cpf"
 inputmode="number"
 minlength="11"
 maxlength="11"
 pattern="^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}"
 required
 autocomplete="off" />
<br />
<label for="cpf">Valor:</label>
<span id="atual"></span>
```

Ele usa um padrão `pattern` que limita o valor digitado a strings que representem números de CPF no formato válido. O padrão aceita tanto valores separados por pontos (".") e hífen ("-") como apenas os números.

O modo de inserção em `inputmode` está definido como `"number"` para indicar a dispositivos com teclados virtuais que eles devem mostrar um teclado numérico para uma digitação mais fácil. Os atributos `minlength` e `maxlength` foram definidos como 11 e 14, respectivamente, de forma a aceitar valores com no mínimo 11 e no máximo 14 caracteres (o primeiro para valores sem os caracteres separadores e o último para valores com esses caracteres). O atributo `required` é usado para indicar que este campo precisa ter um valor válido. Por fim, `autocomplete` foi definido como `"off"` para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha.

Obviamente, apenas essa expressão regular não garante um CPF realmente válido, já que a validação deste tipo de número exige cálculos adicionais. Confira este artigo para ver exatamente como garantir um número de CPF válido.

#### JavaScript

A seguir temos um código simples para mostrar o CPF digitado na tela para que você possa vê-lo. É claro que isso vai contra o propósito de um campo de senha, mas ajuda na hora de experimentar o padrão `pattern`.

```js
var cpf = document.getElementById("cpf");
var atual = document.getElementById("atual");

cpf.oninput = function (event) {
  atual.innerHTML = cpf.value;
};
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| HTML Standard # password-state-(type=password) |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.