question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Create a Form Element" Error

See original GitHub issue

Create a Form Element https://www.freecodecamp.com/challenges/create-a-form-element#?solution= <link href%3D"https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster" rel%3D"stylesheet" type%3D"text%2Fcss"> <style> .red-text { color%3A red%3B } h2 { font-family%3A Lobster%2C Monospace%3B } p { font-size%3A 16px%3B font-family%3A Monospace%3B } .thick-green-border { border-color%3A green%3B border-width%3A 10px%3B border-style%3A solid%3B border-radius%3A 50%25%3B } .smaller-image { width%3A 100px%3B } <%2Fstyle> <h2 class%3D"red-text">CatPhotoApp<%2Fh2> <p>Click here for <a href%3D"%23">cat photos<%2Fa>.<%2Fp> <a href%3D"%23"><img class%3D"smaller-image thick-green-border" alt%3D"A cute orange cat lying on its back. " src%3D"https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat"><%2Fa> <p>Things cats love%3A<%2Fp> <ul> <li>cat nip<%2Fli> <li>laser pointers<%2Fli> <li>lasagna<%2Fli> <%2Ful> <p>Top 3 things cats hate%3A<%2Fp> <ol> <li>flea treatment<%2Fli> <li>thunder<%2Fli> <li>other cats<%2Fli> <%2Fol> <form fccfaa%3D""> <input type%3D"text" placeholder%3D"cat photo URL"><%2Fform>

Chrome blocks the code visualiser This was a very simple nesting exercise but for some reason I cannot see the results of my coding because apparently the form tag is seen as malicious? I tried resetting my code but nothing seems to work.

Google Chrome, macOS Sierra, Macbook Pro

  • Browser Name, Version:
  • Operating System:
  • Mobile, Desktop, or Tablet:

My Code

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</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>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>
<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>




Screenshot screen shot 2017-04-08 at 10 23 30 pm

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
badalsaibocommented, Apr 16, 2017

Well just login with your freeCodeCamp account on Mozilla and complete the lesson, after that you can continue on Chrome as usual. I bet it’s just this specific exercise creating problems on Chrome.

0reactions
erictleungcommented, Apr 23, 2017

Closing as duplicate of an even earlier issue https://github.com/freeCodeCamp/freeCodeCamp/issues/13727. Take a look at the thread over there for possible workarounds. I think there are some people working on a solution. A possible workaround is to just use a different browser for this challenge and any others that involve forms. Happy coding!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Create a form element error - The freeCodeCamp Forum
I did as you suggested, but it is telling me that the existing input element should be nestled within a form element. How...
Read more >
Client-side form validation - Learn web development | MDN
The simplest HTML validation feature is the required attribute. To make an input mandatory, add this attribute to the element. When this ...
Read more >
formElementErrors - laminas-form - Laminas Docs
The FormElementErrors view helper is used to render the validation error messages of an element. Basic usage. use Laminas\Form\Form; use Laminas\ ...
Read more >
Form-Field Validation: The Errors-Only Approach
Error pages for form-field validation are dreadful. You've just filled out 20 form fields, yet you get the same bloated page thrown back...
Read more >
how to display error msg using create element in form ...
The solution will look something like this: Identify where the "Error Message" span will appear. It needs to be inside another element, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found