2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aedf08830
title: Add Placeholder Text to a Text Field
challengeType: 0
2018-10-08 15:00:20 +00:00
guideUrl: 'https://www.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field'
2018-09-30 22:01:58 +00:00
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
---
## Description
< section id = 'description' >
Placeholder text is what is displayed in your < code > input< / code > element before your user has inputted anything.
You can create placeholder text like so:
< code > < input type="text" placeholder="this is placeholder text"> < / code >
< / section >
## Instructions
< section id = 'instructions' >
Set the < code > placeholder< / code > value of your text < code > input< / code > to "cat photo URL".
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: Add a < code > placeholder</ code > attribute to the existing text < code > input</ code > element.
2018-10-20 18:02:47 +00:00
testString: assert($("input[placeholder]").length > 0, 'Add a < code > placeholder< / code > attribute to the existing text < code > input< / code > element.');
2018-10-04 13:37:37 +00:00
- text: Set the value of your placeholder attribute to "cat photo URL".
2018-10-20 18:02:47 +00:00
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), 'Set the value of your placeholder attribute to "cat photo URL".');
2018-10-04 13:37:37 +00:00
- text: The finished < code > input</ code > element should have valid syntax.
2018-10-20 18:02:47 +00:00
testString: assert($("input[type=text]").length > 0 && code.match(/< input (( \s+ \w+( \s*= \s*(? : ".*?"|'.*?'|[ \^'" > \s]+))?)+\s*|\s*)\/?>/gi), 'The finished < code > input</ code > element should have valid syntax.');
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< input type = "text" >
< / main >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
// solution required
```
< / section >