{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-28-add-placeholder-text-to-a-text-field/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"36885cde-44b1-5aea-88f1-deee8d7bc146","excerpt":"In Free Code Camp Challenge 28 we can add a placeholder text to the text input field. Your placeholder text is what appears in your text input before your user…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/add-placeholder-text-to-a-text-field\">Free Code Camp Challenge 28</a> we can add a placeholder text to the text input field.</p>\n<blockquote>\n<p>Your placeholder text is what appears in your text input before your user has input anything.</p>\n<p>You can create placeholder text like so:</p>\n</blockquote>\n<blockquote>\n<p>[html]</p>\n</blockquote>\n<blockquote>\n<input type=\"text\" placeholder=\"this is placeholder text\">\n</blockquote>\n<blockquote>\n<p>[/html]</p>\n</blockquote>\n<blockquote>\n<p>Set the placeholder value of your text input to “cat photo URL”.</p>\n</blockquote>\n<p>The original code is below:</p>\n<p>[html]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>Click here for <a href=\"#\">cat photos</a>.</p>\n<p><a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a></p>\n<p>Things cats love:</p>\n  \n<ul>\n    \n<li>cat nip</li>\n    \n<li>laser pointers</li>\n    \n<li>lasagna</li>\n  \n</ul>\n  \n<p>Top 3 things cats hate:</p>\n  \n<ol>\n    \n<li>flea treatment</li>\n    \n<li>thunder</li>\n    \n<li>other cats</li>\n  \n</ol>\n  \n<input type=\"text\">\n  \n[/html]\n<p>The updated code with placeholder text for the text input field is below:</p>\n<p>[html highlight=”46″]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>Click here for <a href=\"#\">cat photos</a>.</p>\n<p><a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a></p>\n<p>Things cats love:</p>\n  \n<ul>\n    \n<li>cat nip</li>\n    \n<li>laser pointers</li>\n    \n<li>lasagna</li>\n  \n</ul>\n  \n<p>Top 3 things cats hate:</p>\n  \n<ol>\n    \n<li>flea treatment</li>\n    \n<li>thunder</li>\n    \n<li>other cats</li>\n  \n</ol>\n  \n<input type=\"text\" placeholder=\"cat photo URL\">\n  \n[/html]","frontmatter":{"title":"FCC Challenge 28: Add Placeholder Text to a Text Field","date":"March 11, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-28-add-placeholder-text-to-a-text-field/","previous":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-27-create-a-text-field/"},"frontmatter":{"title":"FCC Challenge 27: Create a Text Field"}},"next":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-29-create-a-form-element/"},"frontmatter":{"title":"FCC Challenge 29: Create a Form Element"}}}}}