Multiple Selector


Employee Application Form

Name:
Gender/Sex:
Age:
Department:
Location:
Date of Birth:
About/Note:


Sourcode

 
<html>
<head>


<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>

<h2>Multiple Selector</h2>
<hr />

<table>
    <tr>
        <td colspan="2"><h3>Employee Application Form</h3></td>
    </tr>
    <tr>
        <td><asp:Label ID="lblName" runat="server" Text="Name:" Font-Bold="true"></asp:Label></td>
        <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="lblGender" runat="server" Text="Gender/Sex:" Font-Bold="true"></asp:Label></td>
        <td><asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Text="Male" Value="0"></asp:ListItem><asp:ListItem Text="Female" Value="0"></asp:ListItem>
            </asp:RadioButtonList></td>
    </tr>
    <tr>
        <td><asp:Label ID="lblAge" runat="server" Text="Age:" Font-Bold="true"></asp:Label></td>
        <td><asp:DropDownList ID="ddlAge" runat="server">
            </asp:DropDownList></td>
    </tr>
    <tr>
        <td><asp:Label ID="lblDepartment" runat="server" Text="Department:" Font-Bold="true"></asp:Label></td>
        <td><asp:CheckBoxList ID="cblDepartment" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Text="Technical Support" Value="0"></asp:ListItem>
                <asp:ListItem Text="Accounts" Value="0"></asp:ListItem>
                <asp:ListItem Text="Human Resource" Value="0"></asp:ListItem>
                <asp:ListItem Text="Sales" Value="0"></asp:ListItem>                
            </asp:CheckBoxList>            
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblLocation" runat="server" Text="Location:" Font-Bold="true"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblDOB" runat="server" Text="Date of Birth:" Font-Bold="true"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblAbout" runat="server" Text="About/Note:" Font-Bold="true"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtAbout" runat="server" TextMode="MultiLine" Rows="5" Columns="20"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </td>        
        <td>
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        </td>
    </tr>
</table>

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("span").css("background-color", "Yellow");
        $("textarea, input:text").css("border-color", "blue");        
    });
</script>

</body>
</html>
Share with your friends!!