ASP.NET Controls to HTML Elements Equivalents

By | August 11, 2013
0 Comment

If you are developing web application using ASP.NET, you must be concerned that what will be the equivalent HTML element for ASP.NET controls used on your web pages.Undoubtedly, ASP.NET controls are great that makes our life easy during web application development. Also these controls puts a level of abstraction to what is going to render in browser. ASP.NET developers must understand what is going to render against each control in browser that helps in identifying the issues encountered. Also, it will help in managing the overall layout of our page.

Following is the mapping between ASP.NET controls and HTML Elements

ASP.NET Control
HTML Element
Rendered HTML
Label
Label
<label  for=”male”>Male</label>
Button
Input
<input type=”Button”>
TextBox
Input
<input type=”text” name=”Username”>
TextBox, Mode Password
Input
<input Type=”password” name=”pass”>
TextBox, Mode Multiline
TextArea
<textarea rows=”5″ cols=”20″ ></textarea>
Link Button
HREF with JS Postback Script
<a href=”javascript:__doPostBack(”,”)”>Click Me</a>
Hyperlink
Standard HREF
<a href=””> Click Me </a>
DropDownList
Select
<select name=”subjects”><option value=”1″>English</option><option value=”2″>Arabic</option></select>
ListBox
Select
<select name=”subjects”><option value=”1″>English</option><option value=”2″>Arabic</option></select>
Image Button
Input
<input type=”Image” src=”submit.gif” alt=”Submit Form”>
RadioButton
Input radio
<input Type=”radio” >
CheckBox
Input Checkbox
<input Type=”checkbox” >
File
Input
<input type=”file” name=”Certificate” accept=”image/*” >
Panel/Update Panel
Div
<div ></div>
GridView
Table
<table></table>
Table
Table
<table></table>

Top 10 Interview Questions and Answers Series: