RegistrationForm With Panel In ASP.NET Using Bootstrap

In this article i explain you how to design registration form using panel in in asp.net
below is the source code
<div class="row" style="margin-left:100px;margin-top:50px">
            <div class="col-sm-6 col-md-6 col-xs-12 col-lg-6">
                <div class="panel  panel-primary">
                    <div class="panel-heading" data-toggle="collapse" data-target="#panelHeader">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-xs-12">
                                <h2>Personal Details</h2>
                            </div>

                        </div>
                    </div>
                    <div class="panel-body" id="panelHeader">
                       <div class="form-horizontal">
                              <div class="form-group">
                            <div class="col-sm-3">
                                <span>First Name</span>
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <span>Last Name</span>
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtLastName" runat="server" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <span>Gender</span>
                            </div>
                            <div class="col-sm-8">
                                <asp:DropDownList ID="ddlGender" runat="server" CssClass="form-control">
                                    <asp:ListItem Text="Select Gender" Value="-1"></asp:ListItem>
                                    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
                                    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <span>Email</span>
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtEmail" runat="server" TextMode="Email" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>                      
                        <div class="form-group">
                            <div class="col-sm-3">
                                <span>Password</span>
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <span>Confirm Password</span>
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtConfpassword" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                       </div>                  
                    </div>
</div>
</div>
Output:-


No comments:

Post a Comment