CSS HTML Validator Support

Posted: **Tue Mar 10, 2015 10:15 am**

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Walter Metzger" />
<meta name="description" content="Verein für Körperbehinderte Esslingen e.V., VfK" />
<meta name="generator" content="CSE HTML Validator Professional Edition" />
<meta name="keywords" content="Körperbehinderung, körperbehinderte, behindert, Rückenwind, Selbsthilfe" />
<meta name="robots" content="index,follow" />
<title>Verein für Körperbehinderte Esslingen/N. e.V.</title>

<style type="text/css">

.validend {
background-color: #F4D05E;
color: #000000;
font-size: 0.7em;
margin: 0 0 0 230px;
padding: 30px 30px 30px 0;
text-align: right;
}

body {
background-color: #F4D05E;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
margin: 50px 0 0 200px;
}

</style>

</head>

<body>


<form action="http://www.formular-chef.de/fc.cgi" method=post enctype="multipart/form-data">


<input type="hidden" name="pflicht" value="Name,Anschrift,Mitteilung">




<input type=hidden name="empfaenger" value="koerperbehinderte-es@t-online.de">



<p style="color:black; background-color:#F4D05E; font-size:1.5em; font-weight:bold">Verein für Körperbehinderte Esslingen/N. e.V</p><br /><br />
<p style="color:black; background-color:#F4D05E; font-size:1.2em; font-weight:bold">Kontaktformular</p><br />
<p style="color:black; background-color:#F4D05E; font-size:0.8em; font-weight:bold">Name (Vor- und Nachname), Anschrift und Mitteilung sind Pflichtfelder</p><br />

<table>
<tr>
<th scope="rowgroup" rowspan="7"></th>
<th scope="rowgroup" colspan="2"></th>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Vor- und Nachname:</td>
<td><input name="Name" id="name" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Anschrift:</td>
<td><input name="Anschrift" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Telefon:</td>
<td><input name="Telefon" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">E-Mail</td>
<td><input name="E-Mail" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Mitteilung:</td>
<td><textarea name="Mitteilung" rows="10" cols="40"></textarea></td>
<tr>
<td colspan=2 style="text-align: left;">
<p>
<input type=submit value="An Verein senden">
</td>
</table>

<div class="validend">

<p style="text-align: right">(Formular-Service vom <a href='http://www.formular-chef.de/index.cgi' target='_blank'>Formular-Chef ... (öffnet neues Fenster)</a>)<br /><br />


© 2007 by VfK  •  letzte Änderung am Montag, 09. Mrz. 2015 - 21:23:05 Uhr


</p>>
</div>
</form>

</body>
</html>

----------------------------------------------------------
I have no erros, but warnings from Validator 15.0200:

1. all inputs and for textarea

Warning in line 66 at character 7: (Accessibility->WCAG 2.0 (Level A))
The "input" tag does not have an "id" attribute which should be used to explicitly associate this control with a "label" element. ….

2. value of the "name" attribute

Warning in line 63 at character 22: (Grouped->Avoid Potential Conflict) The value of the "name" attribute ("Name") may conflict with properties of the JavaScript Form object when using JavaScript. It is recommended that the value of the "name" attribute be changed to avoid potential conflict when accessing the form object's properties, methods, and event handlers. Values that should not be used include "action", "elements", "encoding", "length", "method", "name", "target", "reset", "submit", and some others. ...

Sorry, I do not find the reason, can someone give tips please?

Greetings from Germany
We enjoy a wonderful spring time

Walter Metzger

Posted: **Wed Mar 11, 2015 8:37 am**

Hello,

1. The full message for this issue is:
The "input" tag has an "id" attribute but it should be used to explicitly associate this control with a "label" element using the "label" element's "for" attribute (for="name"). Make sure that all non-text content that is presented to the user has a text alternative that serves the equivalent purpose [A, 1.1.1; H44] [A, 1.3.1; F68, H44] [A, 3.3.2; H44] [A, 4.1.2; F68, H44]. Information attached to controls via the "label" element may be used to provide large print, braille, speech, symbols, or simpler language and can be very useful to users of talking browsers. Note that "id" and "for" values are case-sensitive. Visit http://www.w3.org/TR/WCAG20-TECHS/F68 and http://www.w3.org/TR/WCAG20-TECHS/H44 for more information. NOTE: Use the "title" attribute when labels cannot be used [A, 1.1.1; H65] [A, 1.3.1; H65] [A, 3.3.2; H65] [A, 4.1.2; H65].

Please check the included links for more information and if you still do not understand then please post back. The links should explain it well. You'll need to add a "label" element and connect it to the "input" element.

For example, something like this (I've added a "lebel" element and connected it to the "input" control using the "id" value):

Code: Select all

<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Telefon">Telefon:</label></td>
<td><input id="Telefon" name="Telefon" size="20" type="text"></td>

2. This is just a warning about a potential conflict if you're using JavaScript. If you're not using JavaScript then you can ignore or disable the message. If you are using JavaScript then you may want to consider using something other than "Name" to avoid potential conflicts and confusion between the control name "Name" and JavaScript object properties.

I hope this helps!

Posted: **Wed Mar 11, 2015 3:43 pm**

Albert, many thanks,

but I am not in a position to find a solution,

when I take Your proposal:
<td> <input id = "Telefon "name =" Telefon "size =" 20 "type =" text "> </ td>
I get (Errors 1) and Warnings (7)

But my construction, a contact form works !

With JAVA I do have null knowledge. I know, that I cannot change
input name="Name" in any other way, because the form
- <form action="http://www.formular-chef.de/fc.cgi" method=post enctype="multipart/form-data"> -
necessarily requires input name="Name".

My last version is, with (Errors 0) and Warnings (8):
------------------------------------------------------------
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Walter Metzger" />
<meta name="description" content="Verein für Körperbehinderte Esslingen e.V., VfK" />
<meta name="generator" content="CSE HTML Validator Professional Edition" />
<meta name="keywords" content="Körperbehinderung, körperbehinderte, behindert, Rückenwind, Selbsthilfe" />
<meta name="robots" content="index,follow" />
<title>Verein für Körperbehinderte Esslingen/N. e.V.</title>

<style type="text/css">

.validend {
background-color: #F4D05E;
color: #000000;
font-size: 0.7em;
margin: 0 0 0 230px;
padding: 30px 30px 30px 0;
text-align: right;
}

body {
background-color: #F4D05E;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
margin: 50px 0 0 200px;
}

</style>

</head>

<body>


<form action="http://www.formular-chef.de/fc.cgi" method=post enctype="multipart/form-data">


<input type="hidden" name="pflicht" value="Name,Anschrift,Mitteilung">




<input type=hidden name="empfaenger" value="koerperbehinderte-es@t-online.de">



<p style="color:black; background-color:#F4D05E; font-size:1.5em; font-weight:bold">Verein für Körperbehinderte Esslingen/N. e.V</p><br /><br />
<p style="color:black; background-color:#F4D05E; font-size:1.2em; font-weight:bold">Kontaktformular</p><br />
<p style="color:black; background-color:#F4D05E; font-size:0.8em; font-weight:bold">Name (Vor- und Nachname), Anschrift und Mitteilung sind Pflichtfelder</p><br />

<table>
<tr>
<th scope="rowgroup" rowspan="7"></th>
<th scope="rowgroup" colspan="2"></th>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Vor- und Nachname:</td>
<td><input name="Name" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Anschrift:</td>
<td><input name="Anschrift" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Telefon:</td>
<td><input name="Telefon" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">E-Mail</td>
<td><input name="E-Mail" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7">Mitteilung:</td>
<td><textarea name="Mitteilung" rows="10" cols="40"></textarea></td>
<tr>
<td colspan=2 style="text-align: left;">
<p>
<input type=submit value="An Verein senden">
</td>
</table>

<div class="validend">

<p style="text-align: right">(Formular-Service vom <a href='http://www.formular-chef.de/index.cgi' target='_blank'>Formular-Chef ... (öffnet neues Fenster)</a>)<br /><br />


© 2007 by VfK  •  letzte Änderung am Mittwoch, 11. Mrz. 2015 - 21:22:45 Uhr


</p>
</div>
</form>

</body>
</html>
------------------------------------------------------------

JAVA seems not to be the problem, but the warnings for input
make a little worried.

Greetings from Germany
Walter Metzger

Posted: **Wed Mar 11, 2015 10:23 pm**

Walter Metzger wrote:Albert, many thanks,

but I am not in a position to find a solution,

when I take Your proposal:
<td> <input id = "Telefon "name =" Telefon "size =" 20 "type =" text "> </ td>
I get (Errors 1) and Warnings (7)

Hi Walter,

Did you also add the "label" element and add labels for the other form controls?

Walter Metzger wrote:With JAVA I do have null knowledge. I know, that I cannot change
input name="Name" in any other way, because the form
- <form action="http://www.formular-chef.de/fc.cgi" method=post enctype="multipart/form-data"> -
necessarily requires input name="Name".

If it's not a problem then you can just ignore or disable that JavaScript message (right-click on the message in CSE HTML Validator's Results Window and choose the relevant option from the context menu to disable the message or change its type depending on what you want).

Posted: **Thu Mar 12, 2015 4:08 am**

Albert Thank You,

I made to every input entry in addition
id="Name", id="Telefon" etc.
and I got for each input row a error message.

Can I refrain from the id´s and
forgot the warnings for input?

Greetings from Germany

Walter Metzger

Posted: **Thu Mar 12, 2015 8:04 am**

Hi Walter,

It sounds like you're not using the "label" element. Here is my example again but I removed the table tags for clarity:

Code: Select all

<label for="Telefon">Telefon:</label><input id="Telefon" name="Telefon" size="20" type="text">

Notice how the "label" element is attached to the "input" control using the label's for="Telefon" attribute and the input control's id="Telefon" attribute.

The above helps with accessibility so you must have turned on accessibility checking. Of course you do not need to use labels if you don't want to but CSE HTML Validator is suggesting that you do because you have accessibility checking enabled.

You can forget the JavaScript warnings too if you want. Again, they are just there to try to help you and you can choose how to resolve the issue or to not do anything about it if you don't think it's important in your case.

Posted: **Thu Mar 12, 2015 2:07 pm**

Albert, Thank You

I tried
<label for="Telefon">Telefon:</label><input id="Telefon" name="Telefon" size="20" type="text">
and
<td><label for="Telefon">Telefon:</label><input id="Telefon" name="Telefon" size="20" type="text"></td>

in both cases, the representation
in http://www.koerperbehinderte-es.de/kontaktformular.html
was wrong and in CSE HTML Validator were more errors/warnings as before.

Albert, maybe it's better to live with the warnings,
but Thank You very much for your effort!

Greetings from Germany
Walter Metzger

Posted: **Thu Mar 12, 2015 2:30 pm**

Hi Walter,

Did you try what I originally suggested?

Try replacing this:

Code: Select all

<td style="text-align:right; color:black; background-color:#CDD7F7">Telefon:</td>
<td><input name="Telefon" size="20" type="text"></td>

With this:

Code: Select all

<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Telefon">Telefon:</label></td>
<td><input id="Telefon" name="Telefon" size="20" type="text"></td>

Posted: **Fri Mar 13, 2015 3:33 pm**

Albert, Thank You, You work very much for me,

but here the anwser, Trying:
-----------------------------------
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Walter Metzger" />
<meta name="description" content="Verein für Körperbehinderte Esslingen e.V., VfK" />
<meta name="generator" content="CSE HTML Validator Professional Edition" />
<meta name="keywords" content="Körperbehinderung, körperbehinderte, behindert, Rückenwind, Selbsthilfe" />
<meta name="robots" content="index,follow" />
<title>Verein für Körperbehinderte Esslingen/N. e.V.</title>

<style type="text/css">

.validend {
background-color: #F4D05E;
color: #000000;
font-size: 0.7em;
margin: 0 0 0 230px;
padding: 30px 30px 30px 0;
text-align: right;
}

body {
background-color: #F4D05E;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
margin: 50px 0 0 200px;
}

</style>

</head>

<body>


<form action="http://www.formular-chef.de/fc.cgi" method=post enctype="multipart/form-data">


<input type="hidden" name="pflicht" value="Name,Anschrift,Mitteilung">




<input type=hidden name="empfaenger" value="koerperbehinderte-es@t-online.de">



<p style="color:black; background-color:#F4D05E; font-size:1.5em; font-weight:bold">Verein für Körperbehinderte Esslingen/N. e.V</p><br /><br />
<p style="color:black; background-color:#F4D05E; font-size:1.2em; font-weight:bold">Kontaktformular</p><br />
<p style="color:black; background-color:#F4D05E; font-size:0.8em; font-weight:bold">Name (Vor- und Nachname), Anschrift und Mitteilung sind Pflichtfelder</p><br />

<table>
<tr>
<th scope="rowgroup" rowspan="7"></th>
<th scope="rowgroup" colspan="2"></th>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Vor- und Nachname">Vor- und Nachname:</label></td>



<td><input id="Name" name="Name" size="20" type="text"></td>



<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Anschrift">Anschrift:</label></td>
<td><input id="Anschrift" name="Anschrift" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Telefon">Telefon:</label></td>
<td><input id="Telefon" name="Telefon" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="E-Mail">E-Mail:</label></td>
<td><input id="E-Mail" name="E-Mail" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Mitteilung">Mitteilung:</label></td>
<td><textarea id="Mitteilung" name="Mitteilung" rows="10" cols="40"></textarea></td>
<tr>
<td colspan=2 style="text-align: left;">
<p>
<input type=submit value="An Verein senden">
</td>
</table>

<div class="validend">

<p style="text-align: right">(Formular-Service vom <a href='http://www.formular-chef.de/index.cgi' target='_blank'>Formular-Chef ... (öffnet neues Fenster)</a>)<br /><br />


© 2007 by VfK  •  letzte Änderung am Freitag, 13. Mrz. 2015 - 21:22:50 Uhr


</p>
</div>
</form>

</body>
</html>
-------------------------------
Please look in file: <!-- Error1, 2, 3 and 4
Warnings for each -input- and for -textarea

I'm not sure if it's worth your effort, I can not pay it only high recognize
with greetings from Germany
Walter Metzger

Posted: **Fri Mar 13, 2015 5:45 pm**

Hello Walter,

You can't have spaces in ID values. For example, instead of:

Code: Select all

for="Vor- und Nachname"

Try this (I just removed the space characters):

Code: Select all

for="Vor-undNachname"

And then you will need to add the id="Vor-undNachname" attribute to the input control that you want to attach the label to. Doing this should "connect" the label with its corresponding input control.

Posted: **Sun Mar 15, 2015 12:32 pm**

Albert, Thank You,

her is my last version
------------------------
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Walter Metzger" />
<meta name="description" content="Verein für Körperbehinderte Esslingen e.V., VfK" />
<meta name="generator" content="CSE HTML Validator Professional Edition" />
<meta name="keywords" content="Körperbehinderung, körperbehinderte, behindert, Rückenwind, Selbsthilfe" />
<meta name="robots" content="index,follow" />
<title>Verein für Körperbehinderte Esslingen/N. e.V.</title>

<style type="text/css">

.validend {
background-color: #F4D05E;
color: #000000;
font-size: 0.7em;
margin: 0 0 0 230px;
padding: 30px 30px 30px 0;
text-align: right;
}

body {
background-color: #F4D05E;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
margin: 50px 0 0 200px;
}

</style>

</head>

<body>


<form action="http://www.formular-chef.de/fc.cgi" method=post enctype="multipart/form-data">


<input type="hidden" name="pflicht" value="Name,Anschrift,Mitteilung">




<input type=hidden name="empfaenger" value="koerperbehinderte-es@t-online.de">

<p style="color:black; background-color:#F4D05E; font-size:1.5em; font-weight:bold">Verein für Körperbehinderte Esslingen/N. e.V</p><br /><br />
<p style="color:black; background-color:#F4D05E; font-size:1.2em; font-weight:bold">Kontaktformular</p><br />
<p style="color:black; background-color:#F4D05E; font-size:0.8em; font-weight:bold">Name (Vor- und Nachname), Anschrift und Mitteilung sind Pflichtfelder</p><br />

<table>
<tr>
<th scope="rowgroup" rowspan="7"></th>
<th scope="rowgroup" colspan="2"></th>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Name">Vor- und Nachname:</label></td>
<td><input id="Name" name="Name" title="Name" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Anschrift">Anschrift:</label></td>
<td><input id="Anschrift" name="Anschrift" title="Anschrift" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Telefon">Telefon:</label></td>
<td><input id="Telefon" name="Telefon" title="Telefon" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="E-Mail">E-Mail:</label></td>
<td><input id="E-Mail" name="E-Mail" title="E-Mail" size="20" type="text"></td>
<tr>
<td style="text-align:right; color:black; background-color:#CDD7F7"><label for="Mitteilung">Mitteilung:</label></td>
<td><textarea id="Mitteilung" name="Mitteilung" title="Mitteilung" rows="10" cols="40"></textarea></td>
<tr>
<td colspan=2 style="text-align: left;">
<p>
<input type=submit value="An Verein senden">
</td>
</table>

<div class="validend">

<p style="text-align: right">(Formular-Service vom <a href='http://www.formular-chef.de/index.cgi' target='_blank'>Formular-Chef ... (öffnet neues Fenster)</a>)<br /><br />


© 2007 by VfK  •  letzte Änderung am Sonntag, 15. Mrz. 2015 - 18:19:06 Uhr


</p>
</div>
</form>

</body>
</html>
------------------------
I have insertet "title" und changed "Vor- und Nachname"

Now:
Errors (0)
Warnungs (3)
1. No heading elements (like "h1" ......)
2. Possibly mispelled words .......
3. The value of the "name" attribute ("Name") may conflict with properties of the JavaScript Form object

This 3 warnings are for me "negligible trifles", so we can terminate.
Albert, many thanks for Your great help and many

Greetings from Germany
Walter Metzger

Posted: **Sun Mar 15, 2015 3:39 pm**

Walter Metzger wrote:Now:
Errors (0)
Warnungs (3)
1. No heading elements (like "h1" ......)
2. Possibly mispelled words .......
3. The value of the "name" attribute ("Name") may conflict with properties of the JavaScript Form object

This 3 warnings are for me "negligible trifles", so we can terminate.
Albert, many thanks for Your great help and many

Greetings from Germany
Walter Metzger

Great!

Remember you can disable the messages you don't care about plus you can change the spelling message to a non-warning message if you want or disable spell-checking altogether (but I wouldn't generally recommend that). Then, with no errors or warnings you can get that "Congratulations!" message and sound (if you have sound enabled).

CSS HTML Validator Support

Input tag and name attribut

Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut

Re: Input tag and name attribut