To create a HTML control you need to make two steps. Firstly, you add HTML elements to a web form page by dragging and dropping (or double-clicking) them from the Tool Palette (when working on a web form in "design" view). Secondly, you need to add the runat="server" attribute manually to the HTML element - making it a HTML server-side control. You can also assign a value to the ID attribute.
Note: the design view editing surface offers two ways to position web elements, flow layout and absolute layout.

Adding HTML controls to a web page
Let's try: have a web form displayed in "design" view, point to Tool Palette, open the "HTML Controls" group, locate the "HTML Anchor" item and drag it on your web form. Next, open the "aspx" view, locate the added <a> element. It should look like:

<a href=" ">Anchor</a>

Add the runat="server" and id attributes, something like:

<a runat="server" id=htmlLink href=" ">Anchor</a>

Unfortunately, this is not enough. The code for the web form must also contain a declaration for a corresponding object variable in the code behind class - and you'll have to do this manually. Activate the "code" view, and locate the "strict-private" section of the TWebForm1 (if this is the name of your form's class). Add a line like:

htmlLink: System.Web.UI.HtmlControls.HtmlAnchor;

Now, you can access anchor's attributes as properties in your code:

Sounds too complicated? Well, yes it is! But before you decide to never again use HTML controls, let me assure (better to say: warn) you that you *will* use them in every asp.net web application not being a kind of "Hello world" :(

Here's just one situation: if you want to enable file upload in a web page from a client to a web-server, you'll need to use the "HTML File Upload" control.

Note 1: just dropping a HTML control to a web form does "nothing" - a dummy client-side HTML element/tag (with attributes) will be added to the page. With this in mind, another way to add a HTML control to a web page, is to add it manually in the aspx view - just add the tag as you would normally add it in "client-side" web dev. environments.

HTML controls and their rendering

Let's take a look at the "HTML Control" group on the Tool Palette. There are more than a dozen controls to choose from. The following list explains their relation with classic HTML elements.

Note: some HTML controls don't correspond to a specific control like a button, hyperlink or a text box. What's more, such controls do not have a visual representation by themselves. Some examples include: <div>, <span>, , <font>, etc.

HTML Control	HTML representation	Declare as / Description
HTML Label	<div>	HtmlGenericControl
HTML Button	<input type="button">	HtmlButton
HTML TextBox	<input>	HtmlInputText
HTML TextArea	<textarea>	HtmlTextArea
HTML Password	<input type="password">	HtmlInputText
HTML Submit Button	<input type="submit">	HtmlInputButton
HTML Reset Button	<input type="reset">	HtmlInputButton
HTML Image Button	<input type="image">	HtmlInputImage
HTML CheckBox	<input type="checkbox">	HtmlInputCheckBox
HTML Radio Button	<input type="radio">	HtmlInputRadioButton
HTML DropDown	<select>	HtmlSelect
HTML ListBox	<select>	HtmlSelect
HTML Hidden Field		HtmlInputHidden
HTML File Upload	<input type="file">	HtmlInputFile
HTML Anchor	<a>	HtmlAnchor
HTML Image		HtmlImage
HTML Table	<table>	HtmlTable
HTML Span	<span>	HtmlGenericControl
HTML Div	<div>	HtmlGenericControl
HTML Flow Panel	<div ms_positioning=FlowLayout>	HtmlGenericControl
HTML Grid Panel		HtmlGenericControl
HTML Horizontal Rule	<hr>	HtmlGenericControl

Note: you cannot drop a "HTML Table Cell" from the Tool Palette if you need to server-side enable a <td> tag, for example. When you drop a HTML Table to a form, a sample HTML table will be created containing 3 rows with 3 cells in each row. Now, if you want to programmatically access a single cell, you need to add the runat=server attribute and an ID attribute to the appropriate td tag. Don't forget that you also need to add a reference to this "object" to your code behind; the class you are looking for is called "HTMLTableCell". The same story goes for tr tags.

If anything can go wrong - it will!

Yep, sad story with HTML controls. Take a look at the common errors that might occur at run-time if you failed to follow the 3 steps of making an HTML element server-side. In the following examples I'll presume that we are working with that HTML Anchor control and everything is set up as needed, but...

System.NullReferenceException: Object reference not set to an instance of an object.
Possible cause 1: you forgot to add a runat=server attribute to your HTML element.
Possible cause 2: you forgot to add a unique ID attribute to your HTML element.

Parser Error Message: The ID 'htmlLink' is already used by another control.
Possible cause: you have more than one HTML element with ID 'htmlLink'.

Parser Error Message: The base class includes the field 'htmlLink', but its type (System.Web.UI.HtmlControls.HtmlButton) is not compatible with the type of control (System.Web.UI.HtmlControls.HtmlAnchor).
Possible cause: you failed to declare your HTML anchor properly in the code behind - class selected was HtmlButton.

Properties, methods and events: HTML Controls

Being just "dummy" objects, HTML controls do not provide a rich set of properties an methods as you will see Web controls do. For example, events are limited to either ServerChange or ServerClick, depending on the type of control. However, there are quite a few great examples when HTML controls can come handy, one such example is "

All HTML controls derive from one base HTMLControl class. The HtmlControl class provides common properties inherited by all HTML server control classes. For example, the TagName property returns the element name of the tag. With HTML controls that map to HTMLGenericControl, like <div>, or <title>, you can use the TagName property to decipher between different controls.
Another property, Visible returns or assigns a boolean value indicating the control's visibility. If this value is false, the control does not get rendered on the client side (even though it exists in your page's design).

Why and when to use HTML controls?

With the above statement in mind, note that if you need to generate specific HTML content to be sent to the client's browser, then using HTML controls should be more predictable than Web Controls - since (as we are yet to discuss) Web Controls can adjust their rendering depending on the type of the browser (desktop web explorer, mobile phone or Pocket PC device, for example).

To the next chapter: A Beginner's Guide to Asp.Net Programming for Delphi developers

If you need any kind of help at this point, please post to the Delphi Programming Forum where all the questions are answered and beginners are treated as experts.