# \[HTML\] Texto padrão no campo de texto

**URL:** <https://forum.casadocodigo.com.br/t/html-texto-padrao-no-campo-de-texto/43>\
**Category:** Livros\
**Tags:** html5-css3\
**Created:** [Outubro 21, 2015, 5:22pm UTC](https://forum.casadocodigo.com.br/t/html-texto-padrao-no-campo-de-texto/43 "2015-10-21T17:22:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jean.pontes](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@jean.pontes](https://forum.casadocodigo.com.br/u/jean.pontes)\
**Post date:** [Outubro 21, 2015, 5:22pm UTC](https://forum.casadocodigo.com.br/t/html-texto-padrao-no-campo-de-texto/43/1 "2015-10-21T17:22:37Z")

</div>

Oi, eu estou tentando fazer um campo de texto em html, mas queria que já tivesse algum valor nele que sumisse caso o usuário resolve-se preencher o campo. Até agora eu só soube colocar:

```
<input type="text"></input>

```

Alguma luz, por favor?

---

<div class="post-metadata">

**Author:** ![adrianoalmeida7](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.casadocodigo.com.br/adrianoalmeida7/32/12_2.png) [@adrianoalmeida7](https://forum.casadocodigo.com.br/u/adrianoalmeida7)\
**Post date:** [Outubro 21, 2015, 5:24pm UTC](https://forum.casadocodigo.com.br/t/html-texto-padrao-no-campo-de-texto/43/2 "2015-10-21T17:24:26Z")

</div>

Opa @jean.pontes, essa é fácil, está lá no livro de HTML5 e CSS do Lucas Mazza 😉

É só usar o atributo placeholder no seu input. Vai ficar algo como:

```
<input type="text" name="cpf" placeholder="999.999.999-99" />

```

Só isso. Fácil, né?

---

<div class="post-metadata">

**Author:** ![marcosalles](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.casadocodigo.com.br/marcosalles/32/14145_2.png) [@marcosalles](https://forum.casadocodigo.com.br/u/marcosalles)\
**Post date:** [Outubro 30, 2015, 3:28pm UTC](https://forum.casadocodigo.com.br/t/html-texto-padrao-no-campo-de-texto/43/3 "2015-10-30T15:28:55Z")

</div>

@adrianoalmeida7 e @jean.pontes

Depende da sua intenção, tem três soluções diferentes e cada uma adequada ao seu caso:

- Você quer um texto de exemplo que não será enviado no formulário, está lá só pra mostrar pro usuário como ele deve preencher o campo.  
Nesse caso, o ideal é usar o atributo `placeholder`, como dito pelo Adriano. Exemplo:

```auto
<input type="text" name="cidade" placeholder="São Paulo" />

```

- Você quer um valor padrão que será enviado no formulário.  
Aí o ideal é usar o atributo `value`, pois este é efetivamente o valor inserido no campo e poderá ser editado pelo usuário. Exemplo:

```auto
<input type="text" name="cidade" value="São Paulo" />

```

- Se você quer que o campo venha preenchido com um valor padrão mas, ao clique do usuário, este valor suma, você precisa usar a função javascript `onFocus`, mas o código pode ser feito inline e é bem tranquilo. Exemplo:

```auto
<input type="text" name="cidade" value="São Paulo" onFocus="value=null"/>

```

Nesse último caso, porém, é importante notar que SEMPRE que o usuário interagir com esse campo, o conteúdo será apagado.

---

<div class="post-metadata">

**Author:** ![cleisoncarlos](https://avatars.discourse-cdn.com/v4/letter/c/9fc29f/32.png) [@cleisoncarlos](https://forum.casadocodigo.com.br/u/cleisoncarlos)\
**Post date:** [Dezembro 28, 2015, 3:33pm UTC](https://forum.casadocodigo.com.br/t/html-texto-padrao-no-campo-de-texto/43/4 "2015-12-28T15:33:41Z")

</div>

```auto
<input type="text" name="nome" value="escreva seu nome feio aqui">

```
