9/18/2009ToolBox HTML Control HTMLText

HTML Text Web Server Control

In ASP.NET environment,This article describes you how to work with HTML Text Control.In HTML environment, Text is an object that represents a Textbox in an HTML form. The Textbox control in a HTML form contains all instance of an <input type="text"> tag. Likewise, There are one more kind of textbox is <input type="password"> and <input type="reset">

There are several functions available to access the HTML Text.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
Text Objects Properties
  • id -Sets or returns the id of a Text
  • form -Returns a reference to the form that contains the Text
  • accessKey -Sets or returns the keyboard key to access a Text
  • alt -Sets or returns an alternate text to display if a browser does not support Texts
  • disabled -Sets or returns whether or not a Text should be disabled
  • tabIndex -Sets or returns the tab order for a Text
  • name -Sets or returns the name of a Text
  • type -Returns the type of form element a Text is
  • maxLength - Sets or returns the maximum number of characters in a text field
  • readOnly -Sets or returns whether or not a text field should be read-only
  • value -Sets or returns the text that is displayed on the Text
  • title -Sets or returns an element's advisory title
  • lang -Sets or returns the language code for an element
  • dir -Sets or returns the direction of text
  • className -Sets or returns the class attribute of an element
Text Objects Methods
  • blur() -Performs focus when leave from the control
  • click() -Simulates a mouse-click on a Text
  • focus() -Performs focus when enter into the control

The following code snippets explains you the HTML Text in the web form.

in .aspx.cs page,

protected void AddButton_Click(Object sender, EventArgs e)
      {
         int Answer;
         Answer = Convert.ToInt32(txt1.Value) + Convert.ToInt32(txt2.Value);
         AnswerMessage.InnerHtml = Answer.ToString();
      }

in .aspx page, 

 <form id="Form2" runat="server">
      <h3>Example </h3>
      <table>         
         <tr align="center">
            <td>
               <input ID="txt1"
                     Type="Text"
                      Size="2"
                      MaxLength="3"
                      Value="1"
                     runat="server"/>
            </td>
            <td>
               + 
            </td>
            <td>
               <input ID="txt2"
                     Type="Text"
                      Size="2"
                      MaxLength="3"
                      Value="1"
                      runat="server"/>
            </td>
            <td>
               =
            </td>
            <td>
              <span ID="AnswerMessage"
                     runat="server"/>
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <asp:RequiredFieldValidator
                    ID="req1"
                    ControlToValidate="txt1"
                    ErrorMessage="Please enter a value.<br>"
                    Display="Dynamic"
                    runat="server"/>

               <asp:CompareValidator
                    ID="comp1"
                    ControlToValidate="txt1"
                    Operator="LessThan"
                    Type="Integer"
                    ValueToCompare="100"
                    ErrorMessage="Please enter an integer less than 100.<br>"
                    Display="Dynamic"
                    runat="server"/>
               <asp:CompareValidator
                    ID="comp2"
                    ControlToValidate="txt1"
                    Operator="GreaterThan"
                    Type="Integer"
                    ValueToCompare="0"
                    ErrorMessage="Please enter an integer greater than 0.<br>"
                    Display="Dynamic"
                   runat="server"/>
            </td>
            <td colspan="2">
               <asp:RequiredFieldValidator
                    ID="req2"
                    ControlToValidate="txt2"
                    ErrorMessage="Please enter a value.<br>"
                    Display="Dynamic"
                    runat="server"/>

               <asp:CompareValidator
                    ID="comp3"
                    ControlToValidate="txt2"
                    Operator="LessThan"
                    Type="Integer"
                    ValueToCompare="100"
                    ErrorMessage="Please enter an integer less than 100.<br>"
                    Display="Dynamic"
                    runat="server"/>

               <asp:CompareValidator
                    ID="comp4"
                    ControlToValidate="txt2"
                    Operator="GreaterThan"
                    Type="Integer"
                    ValueToCompare="0"
                    ErrorMessage="Please enter an integer greater than 0.<br>"
                    Display="Dynamic"
                    runat="server"/>
            </td>
            <td>
                 
            </td>
         </tr>
         <tr align="center">
            <td colspan="4">
               <input id="Submit1" Type="Submit"
                      Name="AddButton"
                      Value="Add"
                      OnServerClick="AddButton_Click"
                      runat="server"/>
                  
               <input id="Reset1" Type="Reset"
                      Name="AddButton"
                      Value="Reset"
                      runat="server"/>
            </td>
            <td>
                
            </td>
         </tr>
      </table>
   </form>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:55 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (49) | Post RSSRSS comment feed

9/18/2009ToolBox HTML Control HTMLTextArea

HTML TextArea Web Server Control

In ASP.NET environment,This article describes you how to work with HTML TextArea Control.In HTML environment, TextArea is an object that represents a TextArea in an HTML form. The TextArea control in a HTML form contains all instance of an <textarea> tag.

The HTML TextArea control is similar to the HTML Textbox except that it allows end user to enter text in multi-line in the textarea control

There are several functions available to access the HTML TextArea.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
Text Objects Properties
  • id -Sets or returns the id of a TextArea
  • form -Returns a reference to the form that contains the TextArea
  • accessKey -Sets or returns the keyboard key to access a TextArea
  • disabled -Sets or returns whether or not a TextArea should be disabled
  • tabIndex -Sets or returns the tab order for a TextArea
  • name -Sets or returns the name of a TextArea
  • type -Returns the type of form element a TextArea is
  • cols - Sets or returns the width of a TextArea
  • rows - Sets or returns the Height of a textarea
  • readOnly -Sets or returns whether or not a TextArea field should be read-only
  • value -Sets or returns the text that is displayed on the TextArea
  • title -Sets or returns an element's advisory title
  • lang -Sets or returns the language code for an element
  • dir -Sets or returns the direction of TextArea
  • className -Sets or returns the class attribute of an element
TextArea Objects Methods
  • blur() -Performs focus when leave from the control
  • click() -Simulates a mouse-click on a TextArea
  • focus() -Performs focus when enter into the control

The following code snippets explains you the HTML TextArea in the web form.

in .aspx.cs page,

 void SubmitBtn_Click(Object sender, EventArgs e)
  {
    Span1.InnerHtml = txt1.Value;
  }

in .aspx page, 

<form id="Form2" runat=server>
      <h3>Example</h3>
      <textarea id="txt1" 
               runat="server"/>
      <br>
      <input id="btn1" type="submit"  
             value="Submit" 
             onserverclick="SubmitBtn_Click" 
             runat="server"/>
      <p>
      <span id="Span1" 
            runat="server" />
   </form>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:55 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (112) | Post RSSRSS comment feed

9/18/2009ToolBox HTML Control HTMLTable

HTML Table Web Server Control

In ASP.NET environment,This article describes you how to work with HTML Table Control.In HTML environment, Table is an object that represents a Table in an HTML form. The Table control in a HTML form contains all instance of an <Table> tag.

The HTML Table contains 3 rows and 3 columns by default when a table control includes in a page. But we can customize the rows and columns count.

There are several functions available to access the HTML Table.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
HTML Table Objects
  • cells[] -Returns an array containing each cell in a table
  • rows[] -Returns an array containing each row in a table
  • tBodies[] -Returns an array containing each tbody in a table
Table Objects Properties
  • id -Sets or returns the id of a Table
  • border -Sets or returns the width of the table border
  • caption -Sets or returns the caption of a table
  • cellPadding -Sets or returns the amount of space between the cell border and cell content
  • cellSpacing -Sets or returns the amount of space between the cells in a table
  • frame -Sets or returns the outer-borders of a table
  • rules -Sets or returns the inner-borders of a table
  • summary - Sets or returns a description of a table
  • tFoot - Returns the TFoot object of a table
  • tHead -Returns the THead object of a table
  • width -Sets or returns the width of a table
  • title -Sets or returns an element's advisory title
  • lang -Sets or returns the language code for an element
  • dir -Sets or returns the direction of text
  • className -Sets or returns the class attribute of an element
Table Objects Methods
  • createCaption() -Creates a caption element for a table
  • createTFoot() -Creates an empty tFoot element in a table
  • createTHead() -Creates an empty tHead element in a table
  • deleteCaption() -Deletes the caption element and its content from a table
  • deleteRow() -Deletes a row from a table
  • deleteTFoot() -Deletes the tFoot element and its content from a table
  • deleteTHead() -Deletes the tHead element and its content from a table
  • insertRow() -Inserts a new row in a table

The following code snippets explains you the HTML Table in the web form.

in .aspx.cs page,

void Button_Click(Object sender, EventArgs e)
  {
   
    tbl1.BgColor = BgColorSelect.Value;
  }

in .aspx page, 

 
<form id="Form2" runat="server">
      <h3>HtmlTable Example</h3>
      <table id="tbl1" 
             Border="1" 
             BorderColor="black" 
             runat="server">
         <tr>
            <th>
               Column 1
            </th>
            <th>
               Column 2
            </th>
            <th>
               Column 3
            </th>
         </tr>
         <tr>
            <td>
               Cell 1
            </td>
            <td>
               Cell 2
            </td>
            <td>
               Cell 3
            </td>
         </tr>
      </table>
      <hr>
      Select the Bgcolor: <br><br>
      <select id="BgColorSelect" 
              runat="server">
         <option Value="Red">Yellow</option>
         <option Value="Blue">Black</option>
      </select>
      <input id="Button1" type="button" 
             value="Generate Table"
             OnServerClick ="Button_Click" 
             runat="server"/>

   </form>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:54 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (32) | Post RSSRSS comment feed

9/18/2009ToolBox HTML Control HTMLSelect

HTML Select Web Server Control

In ASP.NET environment,This Article represents you how to work with HTML Select Control.In HTML environment, Select is an object that represents an DropDownList in an HTML form. The Select control in a HTML form contains all instance of an <select> tag.

We can Adding the items in the control by placing HTML <option>elements between the opening and closing <select> tags. You can control the appearance and behavior of the HtmlSelect control by setting the Size and Multiple properties. The Size property specifies the height (in rows) of the control. The Multiple property specifies whether more than one item can be concurrently selected in the HtmlSelect control.

When you include <select> tag into the web form, then it looks like the Dropdownlist. suppose you set the Multiple property is to true, then it looks like a listbox.To determine the selected item in a single-selection HtmlSelect control, use the SelectedIndex property to get the index of the selected item. You can then use this value to retrieve the item from the Items collection.

There are several functions available to access the HTML Select.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
Select Objects collections
  • options[] -Returns an array of all the options in a dropdown list
Select Objects Properties
  • id -Sets or returns the id of a Select
  • form -Returns a reference to the form that contains the dropdown list
  • length -Returns the number of options in a dropdown list
  • multiple - Sets or returns whether or not multiple items can be selected
  • name - Sets or returns the name of a dropdown list
  • type - Returns the type of form element a dropdown list is
  • tabIndex -Sets or returns the tab order for a dropdown list
  • selectedIndex -Sets or returns the index of the selected option in a dropdown list
  • isMap -Returns whether or not an Select is a server-side Select map
  • tabIndex -Sets or returns the tab order for a dropdown list
  • dir -Sets or returns the direction of text
  • lang -Sets or returns the language code for an element
  • title -Sets or returns an element's advisory title
  • className -Sets or returns the class attribute of an element
Methods
  • add() -Adds an option to a dropdown list
  • blur() -Removes focus from a dropdown list
  • focus() -Sets focus on a dropdown list
  • remove() -Removes an option from a dropdown list

The following code snippets explains you the HTML Select in the web form.

in .aspx.cs page,

    
    void Button_Click (Object sender, EventArgs e)
      {
        
         Label1.Text = "You selected:";

         for (int i=0; i<=Select1.Items.Count - 1; i++)
         {
            if (Select1.Items[i].Selected)
               Label1.Text += "-" + Select1.Items[i].Text;
         }

      }

in .aspx page, 

 
<form id="Form2" runat="server">
      <h3>Example </h3>
      <select id="Select1" 
              Multiple="True"
              runat="server">
         <option value="1" Selected="True"> apple</option>
         <option value="2"> orange</option>
         <option value="3"> guava </option>
      </select>
      <br><br>
      <button id="Button1"
              OnServerClick="Button_Click"
              runat="server">
         Submit
      </button>
      <br><br>
      <asp:Label id="Label1"
           runat="server"/>

   </form>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:53 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (34) | Post RSSRSS comment feed

9/18/2009ToolBox HTML Control HTMLRadio

HTML Radio Web Server Control

In ASP.NET environment,This article describes you how to work with HTML Radio Control.In HTML environment, Radio is an object that represents a Radio in an HTML form. The Radio control in a HTML form contains all instance of an <input type="radio"> tag.

The primary mechanism of the Radio control is to selecting the optional item. For instance, there are two items called male and female that any one can be choosen by radio button.

There are several functions available to access the HTML Radio.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
Radio Objects Properties
  • id -Sets or returns the id of a Radio
  • form -Returns a reference to the form that contains the Radio
  • accessKey -Sets or returns the keyboard key to access a Radio
  • alt -Sets or returns an alternate text to display if a browser does not support Radio
  • disabled -Sets or returns whether or not a Radio should be disabled
  • tabIndex -Sets or returns the tab order for a Radio
  • name -Sets or returns the name of a Radio
  • type -Returns the type of form element a Radio is
  • checked -Sets or returns whether or not a Radio should be checked
  • defaultchecked - Returns the default value of the checked attribute
  • value -Sets or returns the text that is displayed on the Radio
  • title -Sets or returns an element's advisory title
  • lang -Sets or returns the language code for an element
  • dir -Sets or returns the direction of text
  • className -Sets or returns the class attribute of an element
Radio Objects Methods
  • blur() -Performs focus when leave from the control
  • click() -Simulates a mouse-click on a Radio
  • focus() -Performs focus when enter into the control

The following code snippets explains you the HTML Radio in the web form.

in .aspx.cs page,

void Button1_Click(object sender, EventArgs e) 
      {

         if (rb1.Checked == true)
            Span1.InnerHtml = "Option 1 is selected";
         else if (rb2.Checked == true)
            Span1.InnerHtml = "Option 2 is selected";
         else if (rb3.Checked == true)
            Span1.InnerHtml = "Option 3 is selected";
      }

in .aspx page, 

<form id="Form2" runat=server>
      <h3>HtmlInputRadioButton Sample</h3>
      <input type="radio" 
             id="rb1" 
             name="Mode" 
            runat="server"/>
      Option 1<br>
      <input type="radio" 
             id="rb2" 
             name="Mode" 
            runat="server"/>
      Option 2<br>
      <input type="radio" 
             id="rb3" 
             name="Mode" 
             runat="server"/>
      Option 3
      <p>
      <span id="Span1" runat="server" />
      <p>
      <input type="button" 
             id="Button1" 
             value="Enter" 
             OnServerClick="Button1_Click" 
             runat="server">
   </form>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:53 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (31) | Post RSSRSS comment feed