Cannot Find the Problem with this Form Statement

HTML-CSS
1

I have been linting a file for hours and cannot find what’s wrong. I found and fixed a number of problems, but I cannot see this one.

Here’s the opening tag defining a form for entering data:
<form action="/action_page.php" method="post">
It is preceded by the line:
<div class="entry-box">
that selects the CSS style to be applied.
It is followed by a few hundred lines of code - much of it lists of states for a <select> element.
The div for the styling is closed with this line:
</div><!-- END of .entry-page -->
And, the form is closed with this line:
</form><!-- END of marriage information entry form -->
The 2 lines shown above follow each other. I would have shown them that way but a 2 line lit is apparently not allowed.

Here is a ss of the linting results:

Linter results
Linter results702×461 21.5 KB

I have used Edit > Find in VS Code to show all instances of the word ‘form’. Other than finding instances embedded in the work ‘information’ in a couple of lines, it only appears in the opening and closing tags <form></form>

Here’s a screenshot of my Live Server view of the form showing that a Chrome browser will format it correctly:

marriage form
marriage form1899×889 98.1 KB

I’ve looked at this so long that I cannot find fresh eyes to see it. I’ve walked away and even done other non-coding tasks but that didn’t clear my tunnel vision.

If anyone can point out my error, I’d be greatful.

2

Hi @ahraitch

Looks like columns 11 to 56 refer to the attributes.

  1. Try adding a period before the forward slash.
  2. As a last resort change the method to get

What happens when you submit the form?
Also, does the error disappear you remove the attributes?

Happy coding

1 Like
3

Thanks for the response, Teller.

I have not yet coded any frontend data validation; so I can’t submit the form and get any meaningful result. I’m still stuck in the frontend page design and linting process. I don’t even have any scripts in my HTML index file yet.

I’m flummoxed by the linter saying that the element has not been closed when all evidence that I find says it has. I WILL try your suggestions.

1 Like
4

when it is like that you have illegal nesting, an element that is parent of form is closed before form. You could share your code if you want a second eye on it

a situation like

<div>
   <form>
      ...
</div>
   </form>
1 Like
5

Again, thank you for being patient with my ignorance.

I will look for misplaced tags, again.

You mention sharing my code. How is this best done? It seems to me it would create a lot of clutter here. Is Github an alternative? If so, I’d appreciate some guidance on doing so. I know how to put the code on Github. How would I reference the Github repo from an fcc post?

6

You could share a link to your github repo or just paste it into the box here and format it like this:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

share the link to the repo, or to the single file, depending on what you want to share/what your question is about

you can also share a link to a single line, or to multiple lines in a file (you can research how to do this)

8

Thank you for the suggestions. I put the HTML (marriages.html. and CSS (entry.css) files on GitHub. Here is the link (I think):https://github.com/RHH42/marriages.html

Would someone please see if they can access the files? I’d like to know if I did it correctly.

9

I can access the files.

1 Like
10

Thank you! That confirms for me that I can do it correctly.

1 Like
11

is that the code that is giving you validation errors?
you have a lot of issues with the ids in there

1 Like
12

Yes. That is the culprit. I apparently do not understand how the id= attribute works . . . what its qualified (the part in quotes after the equals mark) affects. I have a similar problem with the for= qualifier.

I have a number of other documents coded in the same way. I’m trying to learn from the issues in this file so I can correct them in the others.

13

Every element’s id needs to be unique. You cannot use the same id for more than one element.

There Can Be Only One, Highlander.

Imagine you are communicating with your team on walkie-talkies using codenames. Now imagine 5 people are using the same codename “Eagle1”. You want to talk to “Eagle1” at the base, but the 4 other people in other parts of the mission all respond when you ask for “Eagle1”. Chaos.

1 Like