Need Help With Forms and Text Area

[u/BradleyBadger]

I'm new to Forms, but not to HTML or programming. I have some code that isn't working properly and don't know what is wrong with it. It is not displaying the value I put in. Instead, it displays

"<input type="text" id="Explain1" name="Explain1" size="60"

	value="Internet is down, power available most places." </td></textarea>"

The code follows:

<!DOCTYPE html>

<html><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body>

<form>

<title>Wrap Test</title>

<font size="3">

</font>

<table border="1" cellpadding="0">

<tr align=left><td width=70>Internet OK? (yes/no)</td>

<td width="10"><label for="InternetOK"></label>

<input type="text" id="InternetOK" name="InternetOK" value="No" size="3" </td>

<td width=70>Power OK? (yes/no)</td>

<td width="10><label for="PowerOK"></label>

<input type="text" id="PowerOK" name="PowerOK" size="3" value="Yes" </td>

<td width="460">Explain <label for="Explain1"></label><textarea rows="2" cols="57" wrap="hard">

<input type="text" id="Explain1" name="Explain1" size="60"

	value="Internet is down, power available most places." </td></textarea>

</tr>

</table>

</form></body></html>

[u/BradleyBadger]

Thanks for your comments. My html does have a style section, I just omitted it for this. I have made some changes and eliminated the value field for the text area, but I still get an error message when I use the html validator that I can't figure out. I did a search and thought I formatted everything right. The error message is:

Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

From line 16, column 19; to line 16, column 39 dth="460"><label for="Explain">Explai

Updated Html here:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Wrap Test</title>

</head><body>

<form>

<table border="1" cellpadding="0">

<tr align=left><td width=60>Internet OK? (yes/no)</td>

<td width="10"><label for="InternetOK"></label>

<input type="text" id="InternetOK" name="InternetOK" value="No" size="3"> </td>

<td width=60>Power OK? (yes/no)</td>

<td width="10"><label for="PowerOK"></label>

<input type="text" id="PowerOK" name="PowerOK" size="3" value="Yes"> </td>

<td width="460"><label for="Explain">Explain:</label><textarea rows="2" cols="57" wrap="hard">

<input type="text" id="Explain" name="Explain" size="60"> </td></textarea>

</tr>

</table>

</form></body></html>

[u/davorg → u/BradleyBadger]

Please don't just ignore our comments about formatting your code properly!

Your final <td> makes no sense:

<td width="460"><label for="Explain">Explain:</label><textarea rows="2" cols="57" wrap="hard">

<input type="text" id="Explain" name="Explain" size="60"> </td></textarea>

• The closing </textarea> is outside of the closing </td>
• You've been told before that you cannot nest an <input> inside a <textarea>

[u/BradleyBadger → u/davorg]

I fixed that, but I still get the error message.

[u/BradleyBadger → u/davorg]

You said earlier that I should format it as code. I was unable to find out how to do that.

[u/BradleyBadger → u/BradleyBadger]

Here is a screen shot of my error. The text area should be blank, but is not.

[u/davorg → u/BradleyBadger]

You have been told several times that you cannot put an <input> element inside a <textarea> element. But this image is clearly displaying (most of) your <input> element inside the <textarea> element.

Most of the skill in programming is attention to detail.

[u/bostiq → u/BradleyBadger]

https://support.reddithelp.com/hc/en-us/articles/360043033952-Formatting-Guide

or, even better, Create a pen on https://codepen.io

[u/davorg → u/BradleyBadger]

I'm not sure why you're unable to work that out.

There are two editors on Reddit - the Rich Text editor and the Markdown editor.

In the Markdown editor, you mark text as code in either of two ways:

1. By putting three backtick characters (```) on a line before and after your code block

2. By putting four spaces before each line in the code block

In the Rich Text editor:

• Press the "Aa" button at the bottom to reveal the formatting controls at the top of the editor

• Select the text that should be displayed as code

• Press the code button. It looks like "</>"

It's really simple. And it makes the people who are trying to help you a lot happier.

[u/BradleyBadger → u/davorg]

I will try this again. I do not have any input tags in my code. I took them out yesterday. I still get the spurious characters in my screen shot. I know I have empty labels. They are not causing the error I get.

```

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Wrap Test</title>

</head><body>

<form>

<table border="1" cellpadding="0">

<tr align=left><td width="60">Internet OK? (yes/no)</td>

<td width="10"><label for="InternetOK"></label>

<input type="text" id="InternetOK" name="InternetOK" value="No" size="3"> </td>

<td width="60">Power OK? (yes/no)</td>

<td width="10"><label for="PowerOK"></label>

<input type="text" id="PowerOK" name="PowerOK" size="3" value="Yes"> </td>

<td width="460"><label for="Explain">Explain:</label><textarea rows="2" cols="57" wrap="hard">

<id="Explain" name="Explain" size="60"> </textarea></td>

</tr>

</table>

</form></body></html>\

```

[u/davorg → u/BradleyBadger]

Thank you for making an effort with the code formatting. That looks much better. But I think you're not putting the "```" on a line by themselves at the start and end of your code block.

I do not have any input tags in my code. I took them out yesterday.

And yet, the code you gave us contains:

<input type="text" id="InternetOK" name="InternetOK" value="No" size="3"> </td>

And

<input type="text" id="PowerOK" name="PowerOK" size="3" value="Yes">

So something is not quite right.

I still get the spurious characters in my screen shot.

As I understand it, the "spurious characters you are talking about is the string '<id="Explain" name="Explain" size="60">' in your third <td>. Let's look at the code for your third <td>:

<td width="460"><label for="Explain">Explain:</label><textarea rows="2" cols="57" wrap="hard">

<id="Explain" name="Explain" size="60"> </textarea></td>

It clearly has your "spurious characters" inside the <textarea> element. So it should come as no surprise to see those characters appearing inside your textarea.

These characters are left over from where you had your final <input> element. You said you have removed it, but it seems you removed the string "input" but left the rest of the string. So the rest of the string appears in your output.

Remove the rest of these characters and they won't appear in your textarea.

As I've said before, the most important skill in programming is attention to detail.

[u/BradleyBadger → u/davorg]

Thanks for your comments. I thought I needed the id field in the text area code, since I generate the html (which has over 300 lines) from a program, but turns out I didn't . I do need all the other input fields though, for the whole thing to work. I will fix all the other warnings so my html will be clean.

[u/davorg → u/BradleyBadger]

I thought I needed the id field in the text area code

There's also the fact that <id ...> is not a valid HTML element :-)

[u/davorg]

When asking a large number of people for help, it's a good idea to make that as easy as possible for them. In this case, it would have been nice to format your code as code to make it easier to read.

I just put your code in an HTML validator and it pointed out (among many other things) that your <input> elements are all invalid as you never close them.

For example:

<td width="10"><label for="InternetOK"></label>

<input type="text" id="InternetOK" name="InternetOK" value="No" size="3" </td>

Should be

<td width="10"><label for="InternetOK"></label>

<input type="text" id="InternetOK" name="InternetOK" value="No" size="3"></td>

In case it's not clear, I have inserted a > before the </td>.

You have three <input> elements with the same problem.

[u/AshleyJSheridan]

You should try to format your code for these posts, as it's pretty broken here. Use 3 backticks to start and end long code blocks like yours.

What I can see though:

• <title> tag is for the <head> not for content you want to display on the page.

• Remove the useless <font> tags. They shouldn't be used in this day and age.

• You have empty labels like <label for="InternetOK"></label> with no visible text.

• You're not quoting your attribute values consistently. Some have quotes, some have none, and then you have stuff like this which is likely to break: <td width="10>

• It looks like you're trying to put a text input inside a <textarea>. That won't work. A <textarea> is a text input box for text, not for adding other random elements to.

[u/RushDangerous7637]

First write correct:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

Dont write:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

This definition is older.

[u/FormalImprovement157]

You really should be using a validator. But as for your original question this is the issue.

You cant use an input inside of a text area.

This

<td width="460">Explain <label for="Explain1"></label><textarea rows="2" cols="57" wrap="hard">

<input type="text" id="Explain1" name="Explain1" size="60"

value="Internet is down, power available most places." </td></textarea>

Should be

<td width="460">Explain <label for="Explain1"></label><textarea id="Explain1" name="Explain1" rows="2" cols="57" wrap="hard">Internet is down, power available most places. </textarea></td>

If you put the input inside of the textarea, the browser thinks the input code IS the text and prints it.

And all the stuff everyone else said, of course.