I am working on a site where I need to be able to accommodate frequent flyers but I am not so good at user interface design when I am given such a long leash.  I am using ASP.NET (I am restricted by not being able to use MVC), I like the idea of using BootStrap but I am not familiar with it, and it's been a while since I have had to do much with GUI design, I am very rusty.Is there new techniques that I could utilize to make this page a little cleaner or make it more extendable?    <div>        <h1>User Registration        </h1>        <form name=RegistrationForm runat=server role=form class=form-inline>            <asp:ScriptManager ID=ScriptManager1 runat=server></asp:ScriptManager>            <div class=form-group-sm>                <label for=<%=FirstName.ClientID %> class=col-sm-2>First Name:</label>                <asp:TextBox runat=server ID=FirstName CssClass=textbox TabIndex=1></asp:TextBox>            </div>            <div class=form-group-sm>                <label class=col-sm-2 for=<%=LastName.ClientID %>>Last Name:</label>                <asp:TextBox runat=server ID=LastName CssClass=textbox TabIndex=3></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtAddress1.ClientID %> class=col-sm-2>Address Line 1:</label>                <asp:TextBox runat=server ID=txtAddress1 CssClass=textbox TabIndex=4></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtAddress2.ClientID %> class=col-sm-2>Address Line 2:</label>                <asp:TextBox runat=server ID=txtAddress2 CssClass=textbox TabIndex=5></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtCity.ClientID %> class=col-sm-2>City:</label>                <asp:TextBox runat=server ID=txtCity CssClass=textbox Enabled=False BackColor=#CCCCCC></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtState.ClientID %> class=col-sm-2>State:</label>                <asp:TextBox runat=server ID=txtState CssClass=textbox Enabled=False BackColor=#CCCCCC MaxLength=5 Width=50></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtZip.ClientID %> class=col-sm-2>Zip:</label>                <asp:TextBox runat=server ID=txtZip CssClass=textbox TabIndex=6></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtPhone.ClientID %> class=col-sm-2>Phone: </label>                <asp:TextBox runat=server ID=txtPhone CssClass=textbox TabIndex=7 TextMode=Phone></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtEmail.ClientID %> class=col-sm-2>Email Address: </label>                <asp:TextBox runat=server ID=txtEmail CssClass=textbox TabIndex=8 TextMode=Email></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtEmail2.ClientID %> class=col-sm-2>Confirm Email: </label>                <asp:TextBox runat=server ID=txtEmail2 CssClass=textbox TabIndex=9></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtUsername.ClientID %> class=col-sm-2>Username: </label>                <asp:TextBox runat=server ID=txtUsername CssClass=textbox TabIndex=10></asp:TextBox>            </div>            <div class=form-group-sm >                <label for=<%=txtPassword1.ClientID %> class=col-sm-2>Password: </label>                <asp:TextBox runat=server ID=txtPassword1 CssClass=textbox TabIndex=11 AutoCompleteType=Disabled TextMode=Password></asp:TextBox>            </div>            <div class=form-group-sm>                <label for=<%=txtPassword2.ClientID %> class=col-sm-2>Confirm Password: </label>                <asp:TextBox runat=server ID=txtPassword2 CssClass=textbox TabIndex=12 AutoCompleteType=Disabled TextMode=Password></asp:TextBox>            </div>            <br />            <h2>Payment Information</h2>            <h3>                Drawdown            </h3>            <div class=form-group >                <label for=<%=txtDrawdown.ClientID %> class=col-sm-3>Drawdown Account: </label>                <asp:TextBox runat=server ID=txtDrawdown CssClass=textbox TabIndex=13 AutoCompleteType=Disabled></asp:TextBox>            </div>            <h3>                Credit Card            </h3>            <div class=form-group>                <label for=<%=txtNameOnCard.ClientID %> class=col-sm-5>Name on card: </label>                <asp:TextBox runat=server ID=txtNameOnCard CssClass=textbox TabIndex=14 AutoCompleteType=Disabled></asp:TextBox>            </div>            <div class=form-group>                <label for=<%=txtCardNumber.ClientID %> class=col-sm-5>Card Number: </label>                <asp:TextBox runat=server ID=txtCardNumber CssClass=textbox TabIndex=15 AutoCompleteType=Disabled></asp:TextBox>            </div>            <div class=form-group>                <label for=<%=txtExpirationDate.ClientID %>  class=col-sm-5>Expiration Date: </label>                <asp:TextBox runat=server ID=txtExpirationDate CssClass=textbox TabIndex=16 AutoCompleteType=Disabled></asp:TextBox>            </div>            <div class=form-group>                <label for=<%=ddlCardType.ClientID %> class=col-sm-5>Credit Card Type</label>                    <asp:DropDownList runat=server ID=ddlCardType>                            <asp:ListItem>Visa</asp:ListItem>                            <asp:ListItem>Mastercard</asp:ListItem>                            <asp:ListItem>American Express</asp:ListItem>                        </asp:DropDownList>            </div>        </form>    </div>I have some JavaScript at play here as well.  validation is on its way also.        $(document).ready(function () {            $('#<%=txtZip.ClientID%>').blur(function (e) {                getAddressInfoByZip($(this).val());            })            function response(obj) {                console.log(obj);            }            function getAddressInfoByZip(zip) {                var addr = {};                if (zip.length >= 5) {                    $.getJSON(https://maps.google.com/maps/api/geocode/json, { address: zip }, function success(results, status) {                        var resultObject = results.results[0];                        for (var ii = 0; ii < resultObject.address_components.length; ii++) {                            var city;                            var state;                            var types = resultObject.address_components[ii].types.join(,);                            if (types == sublocality,political                                || types == locality,political                                || types == neighborhood,political                                || types == administrative_area_level_3,political) {                                addr.city = (city == '' || types == locality,political) ? resultObject.address_components[ii].long_name : city;                            }                            if (types == administrative_area_level_1,political) {                                addr.state = resultObject.address_components[ii].short_name;                            }                        };                        $('#<%=txtCity.ClientID%>')[0].value = addr.city;                        $('#<%=txtState.ClientID%>')[0].value = addr.state;                        addr.success = true;                        for (name in addr) {                            console.log('### google maps api ### ' + name + ': ' + addr[name]);                        }                        response(addr);                    });                } else {                    response({ success: false });                }            }        })*Note: I eventually want to make this site mobile ready, so please feel free to suggest anything that would help make this more mobile ready or anything that I am doing that is not mobile friendly, apart from not using MVC.
User Registration Form Layout
javascript;jquery;asp.net;twitter bootstrap
I'm not familiar with ASP and Bootstrap/HTML, but I'll see what I can offer.You form code looks pretty standard, there isn't much to say. However, here's a few comments on design:Go check out How much information should you ask for when users register? for more information on how you can help make this more user friendly. Here's a good snippet:Consider the lazy registration design pattern. Basically, it defers  registration until it's absolutely needed and can even fill in some of  the information for the user based on their previous interactions with  the site.Keep your code consistent. I see:<tag>Words</tag>and <tag>Words</tag>and<tag>    Words</tag>Which is it?Instead of handling credit card information on your own (especially storage), consider using a service already available. Like PayPal!Your Bootstrap looks good, although I'm not sure you want to have most of the form labels as col-sm-2 and then the Payment area a different indent size. I'm not sure how this looks, perhaps it makes no difference. If you split up the form though, we wouldn't have this ambiguity.In terms of your JavaScript:All of the jQuery you currently is superfluous. I'd suggest just using plain JavaScript. Check out http://youmightnotneedjquery.com/ and this SO question.You're using for...in, which isn't a great idea.I'm not a JS expert, so I'll leave the JS details for someone more experienced!