{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-31-use-html5-to-require-a-field/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"0dd368ff-3de0-576e-a6d8-e71d74bd53d5","excerpt":"In Free Code Camp Challenge 31 we can make a field required before submission using HTML5. You can require specific form fields so that your user will not be…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/use-html5-to-require-a-field\">Free Code Camp Challenge 31</a> we can make a field required before submission using HTML5.</p>\n<blockquote>\n<p>You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.</p>\n<p>For example, if you wanted to make a text input field required, you can just add the word required within your input element, you would use:</p>\n</blockquote>\n<blockquote>\n<p>[html]</p>\n</blockquote>\n<blockquote>\n<input type=\"text\" required>\n</blockquote>\n<blockquote>\n<p>[/html]</p>\n</blockquote>\n<blockquote>\n<p>Make your text input a required field, so that your user can’t submit the form without completing this field.</p>\n<p>Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?</p>\n<p>Note: This field does not work in Safari.</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<form action=\"/submit-cat-photo\">\n    \n<input type=\"text\" placeholder=\"cat photo URL\">\n    \n<button type=\"submit\">Submit</button>\n  \n</form>\n  \n[/html]\n<p>The updated code with required field is below:</p>\n<p>[html highlight=”47″]</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<form action=\"/submit-cat-photo\">\n    \n<input type=\"text\" placeholder=\"cat photo URL\" required>\n    \n<button type=\"submit\">Submit</button>\n  \n</form>\n  \n[/html]","frontmatter":{"title":"FCC Challenge 31: Use HTML5 to Require a Field","date":"March 13, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-31-use-html5-to-require-a-field/","previous":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-30-add-a-submit-button-to-a-form/"},"frontmatter":{"title":"FCC Challenge 30: Add a Submit Button to a Form"}},"next":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-32-create-a-set-of-radio-buttons/"},"frontmatter":{"title":"FCC Challenge 32: Create a Set of Radio Buttons"}}}}}