Table of contents
1.
Introduction
2.
Advantages of using HTML Server Controls
3.
HTML Components
4.
HTML Server Controls
5.
Working Example
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024

HTML Server Controls

Author Abhay Trivedi
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The HTML server controls are the standard HTML controls enhanced to enable server-side processing. The HTML Server Controls does not process header tags, anchor tags, and input elements and sends them to the browser for display. They are converted explicitly to a server control by adding the attribute runat=" server" with attribute id to make them available for server-side processing.

For example:

<input type="text" size="20">

Convert it to a server control by adding the runat and id attribute:

<input id="idName" type="text" size="20" runat="server">

Advantages of using HTML Server Controls

The ASP.NET server controls can perform every job the HTML server controls accomplish. The given rules are helpful in the following cases:

  • Utilizing static tables for layout purposes.
  • Recasting an HTML page to run under ASP.NET
  • The HTML server controls grow out of the HTML-centric object model, similar to HTML.
  • The controls can interact with the Client-side scripting.
  • The code migration can be accessible by adding the runat="server" attribute.
  • The controls do not have any mechanism for identifying the capabilities of the client browser.

HTML Components

The table contains some commonly used HTML components.

Control Name

Description

Button

We use it to create an HTML button.

Reset Button

We use it to reset all HTML form elements.

Submit Button

We use it to submit form data to the server.

Text Field

We use it to create text input.

Text Area

We use it to create a text area in the HTML form.

File

We use it to create an input type = "file" component to upload files to the server.

Password

We use it to get a password from the user.

CheckBox

It creates a check box that the user can select or clear.

Radio Button

We use a radio field to get user choice.

Table

It allows presenting information in a tabular format.

Image

It displays an image on an HTML form

ListBox

It displays a list of items to the user. You can set the size from two or more to specify how many things you wish to show.

Dropdown

It displays a list of items to the user in a dropdown list.

Horizontal Rule

It displays a horizontal line across the HTML page.

 

HTML Server Controls

The table describes the HTML server controls:

Control Name

HTML tag

HtmlHead <head>
HtmlInputButton <input type=button|submit|reset>
HtmlInputCheckbox <input type=checkbox>
HtmlInputFile <input type = file>
HtmlInputHidden <input type = hidden>
HtmlInputImage <input type = image>
HtmlInputPassword <input type = password>
HtmlInputRadioButton <input type = radio>
HtmlInputReset <input type = reset>
HtmlText <input type = text|password>
HtmlImage <img>
HtmlLink <link>
HtmlAnchor <a>
HtmlButton <button>
HtmlButton <button>
HtmlForm <form>
HtmlTable <table>
HtmlTableCell <td> & <th>
HtmlTableRow <tr>
HtmlTitle <title>
HtmlSelect <select&t;
HtmlGenericControl All HTML controls not in list

 

Working Example

Here is an example of HTML server control in the form, showing it's working.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="serverControlsExample.aspx.cs"
    Inherits="asp.codingNinjas.serverControlsExample" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

        <head runat="server">
            <title></title>
        </head>

        <body>
            <form id="formExample" runat="server">
                <div>
                    <input id="inputText" type="text" runat="server" />
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="onSubmit" />
                </div>
            </form>
        </body>
    </html>

 

Backend code file:

using System;
namespace codingNinjas
{
public partial class serverControlsExample : System.Web.UI.Page
    {
protected void Page_Load(object sender, EventArgs e)
        {
        }
protected void onSubmit(object sender, EventArgs e)
        {
string a = Request.Form["inputText"];
            Response.Write(a);
        }
    }
}

Output:

On load:

On submitting the response:

FAQs

  1. What is HTML?
    HyperText Markup Language(HTML) is a language of the World Wide Web(WWW). It is the standard text formatting language used to create and display pages on the Web. It makes the text more dynamic and interactive. HTML can turn text into images, tables & links.
     
  2. What is ASP.NET?
    ASP.NET is an open-source, server-side web development framework designed to produce dynamic web pages. Microsoft developed it to allow programmers to build active websites, applications, and services.
     
  3. What is ASP.NET in C#?
    ASP.NET is a web-based application framework developed and marketed by Microsoft to let programmers build dynamic websites. It will enable you to use a full-featured programming language such as C# or VB.NET to build web applications quickly.
     
  4. What are the server controls?
    Server Controls are the tags that the server understands. There are three types of server controls. ASP.NET provides a way to work with HTML Server controls on the server-side; collectively, programming with a set of controls is HTML Controls.
     
  5. What are the HTML server controls?
    The HTML server controls are the HTML elements that include a runat="server" attribute. HTML server controls have the same output and properties as their related HTML tags. Furthermore, HTML server controls provide automatic state management and server-side events.

Key Takeaways

This article teaches about HTML Server Controls and how we use them. We saw why HTML Server Controls could be beneficial for a developer to learn. 

Click here to read about the Top 10 web development frameworks. Click here to see other related blogs on ASP.NET. Check out our Web development course and blogs on Backend Web Technologies.

If you are preparing for your DSA interviews then, Coding Ninjas Studio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Happy Learning!

Live masterclass