0% found this document useful (0 votes)
16 views4 pages

Program 2

The document outlines the implementation of HTML controls in ASP.NET, highlighting the differences between plain HTML controls and HTML server controls. It provides an example of a web form that collects student details using various input types and demonstrates how to handle form submission in the code-behind. Key points include enabling server interaction with 'runat="server"' and using the .Value property to read input fields.

Uploaded by

gokul20051110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views4 pages

Program 2

The document outlines the implementation of HTML controls in ASP.NET, highlighting the differences between plain HTML controls and HTML server controls. It provides an example of a web form that collects student details using various input types and demonstrates how to handle form submission in the code-behind. Key points include enabling server interaction with 'runat="server"' and using the .Value property to read input fields.

Uploaded by

gokul20051110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Implement HTML controls

Types of HTML Controls in ASP.NET:

Control Type Example Server-enabled? Purpose


Plain HTML <input ❌ (No Treated as static
control type="text" /> runat="server") HTML
HTML Server <input type="text" runat="server" Interacts with C# code-
id="txtName" /> ✅
Control behind

Example: HTML Controls in ASP.NET Web Form

🔹 HTMLControlsDemo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HTMLControlsDemo.aspx.cs"


Inherits="HTMLControlsDemo" %>

<!DOCTYPE html>

<html>

<head runat="server">

<title>HTML Controls in ASP.NET</title>

</head>

<body>

<form id="form1" runat="server">

<h2>Student Details Form (Using HTML Controls)</h2>


<label for="txtName">Name:</label>

<input type="text" id="txtName" runat="server" /><br /><br />

<label for="txtEmail">Email:</label>

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

<label for="gender">Gender:</label><br />

<input type="radio" name="gender" value="Male" runat="server" id="radMale" />


Male<br />

<input type="radio" name="gender" value="Female" runat="server" id="radFemale" />


Female<br /><br />

<label for="hobbies">Hobbies:</label><br />

<input type="checkbox" id="chkReading" runat="server" /> Reading<br />

<input type="checkbox" id="chkSports" runat="server" /> Sports<br /><br />

<input type="submit" value="Submit" onserverclick="SubmitForm" runat="server" />

<br /><br />

<span id="lblMessage" runat="server" style="color: green; font-weight: bold;"></span>

</form>

</body>

</html>
HTMLControlsDemo.aspx.cs

using System;

using System.Web.UI.HtmlControls;

public partial class HTMLControlsDemo : System.Web.UI.Page

protected void SubmitForm(object sender, EventArgs e)

string name = txtName.Value;

string email = txtEmail.Value;

string gender = radMale.Checked ? "Male" : radFemale.Checked ? "Female" : "Not


selected";

string hobbies = "";

if (chkReading.Checked) hobbies += "Reading ";

if (chkSports.Checked) hobbies += "Sports ";

lblMessage.InnerHtml = $"Submitted:<br/>Name: {name}<br/>Email:


{email}<br/>Gender: {gender}<br/>Hobbies: {hobbies}";

Points to Remember:

Task How to Do It
Enable server interaction Use runat="server" and assign an id
Read from input field Use .Value instead of .Text (for HTML inputs)
Task How to Do It
Use HtmlInput* classes e.g., HtmlInputText, HtmlInputCheckBox, HtmlGenericControl

HTML Server Controls vs ASP.NET Controls

ASP.NET Control
Feature HTML Server Control
(<asp:TextBox>)
Syntax Native HTML with Uses asp: tag
runat="server"
Lightweight Yes Slightly heavier due to features
Auto-postback, events Manual Built-in support
Styling Easy with CSS Also possible

You might also like