Why does decorating HTML elements with 'runat="server"' not make them accessible from the code-behind?

Question

According to this How to access html controls in code behind, I should be able to add 'runat="server"' to my html elements like so:

<input type="email" id="email" runat="server" />

...and then access the html element by its ID from C#, like this:

String usersEmail = email.Value;

However, attempting to do so results in, "The name 'email' does not exist in the current context"

Is trying to access html elements for manipulation from the code-behind really a lost cause?

UPDATE

In answer/response to Steve Brookes' suggestion, here is what I have at the top of my ascx file:

<%@ Control Language="C#" AutoEventWireup="true" 
CodeBehind="PostTravelWizardWebPartUserControl.ascx.cs"
Inherits="PostTravelWizard.PostTravelWizardWebPart.PostTravelWizardWebPartUserControl" %>

...whereas Mr. Brookes recommends something like this:

<%@Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" 
Inherits="_Default"%>

Is this close enough? IOW, instead of "Page" I have "Control" (it derives from UserControl); I have "CodeBehind" instead of "CodeFile" and my inherits differs.

I tried switching AutoEventWireup to false, but it made no difference.

UPDATE 2

Thanks Thorin,

I had no idea of that requirement (to envelop everything in a "form" tag), but even after doing so:

<form id="formPostTravel" runat="server">
   . . .  (all the html elements)
</form>

...it makes no difference; I still get, "The name 'email' does not exist in the current context"

UPDATE 3

Another response to Steve Brookes' suggestions, which were "changing CodeBehind to CodeFile and adding an Inherits attribute which should match the class name of your code behind file. The other suggestion is changing the ID to EmailAddress or something as it might be some sort of naming conflict with a reserved word!":

First, I changed CodeBehind to CodeFile

Then, I verified that the Inherits attribute matched the class name of my code behind file. That file is:

namespace PostTravelWizard.PostTravelWizardWebPart
{
    public partial class PostTravelWizardWebPartUserControl : UserControl

...and the inherits value is "PostTravelWizard.PostTravelWizardWebPart.PostTravelWizardWebPartUserControl"

Finally, I also changed the ID of the HTML element from 'email' to 'emailaddress':

<input type="email" id="emailaddress" runat="server" />

...but now I get, "The name 'emailaddress' does not exist in the current context"

UPDATE 4

For a little context of just what is being attempted here.

Here is where the "email" input is defined, in the *.ascx file, within an html block:

<input type="email" id="emailaddress" runat="server" />

And here is how I'm trying to access its value, from the corresponding *.ascx.cs file:

namespace PostTravelWizard.PostTravelWizardWebPart
{
    public partial class PostTravelWizardWebPartUserControl : UserControl
    {
    . . .
    String usersEmail = emailaddress.Value; 

But I get rewarded with, "The name 'emailaddress' does not exist in the current context"

UPDATE 5

Following this advice from Steven Brookes:

you could right click the ascx file and view designer, then change to view code. This may well regenerate the designer file

I was able to get some of the fields into designer.cs; the others (most) because they begin "hidden"? I don't know...

Answer 1

Is your page an asp.net page? If so make sure your page directive is correctly pointing to your code-behind file. Something like this should should be at the top of your page:

<%@Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default"%>