在ASP net CSS中自定义表单

时间:2013-10-22 15:18:53

标签: asp.net css forms

我有一个表单设置验证和所有。但是我想自定义它并使它看起来更具吸引力。

这是我的表单代码。

<form action="" id="regForm">
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" DisplayMode="SingleParagraph"
        HeaderText="You must enter value in the following fields:" ShowMessageBox="True" />
    <b>Sign up information</b><br />
    <asp:Label ID="email" runat="server" Text="Email Address"></asp:Label>
    <asp:TextBox ID="emailbox" runat="server"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Not a valid e-mail address. Must follow email@host.domain"
        ControlToValidate="emailbox" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="emailbox"
        Display="None" ErrorMessage="Email"></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="pass1" runat="server" Text="Password"></asp:Label><asp:TextBox ID="pass1box"
        runat="server" TextMode="Password"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="Password must include one of these (!@#$%^&*+;:)"
        ControlToValidate="pass1box" ValidationExpression="(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,14})$"></asp:RegularExpressionValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="pass1box"
        Display="None" ErrorMessage="Password" ViewStateMode="Enabled"> </asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="pass2" runat="server" Text="Re-enter Password"></asp:Label><asp:TextBox
        ID="pass2box" runat="server" TextMode="Password"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="Password fields don't match"
        ControlToCompare="pass1box" ControlToValidate="pass2box"></asp:CompareValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="pass2box"
        Display="None" ErrorMessage="Re-enter Password"></asp:RequiredFieldValidator>
    <br />
    <br />
    <b class="customform">Personal Information </b>
    <br />
    <asp:Label ID="Label1" runat="server" Text="First Name"></asp:Label><asp:TextBox
        ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox1"
        Display="None" ErrorMessage="First Name"></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="Label2" runat="server" Text="Last Name"></asp:Label>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3"
        Display="None" ErrorMessage="Last Name"></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="Label3" runat="server" Text="Address"></asp:Label>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <br />
    <asp:Label ID="Label4" runat="server" Text="State"></asp:Label>
    <asp:TextBox ID="TextBox4" runat="server" Width="38px"></asp:TextBox>
    <asp:Label ID="Label5" runat="server" Text="Zip Code"></asp:Label>
    <asp:TextBox ID="TextBox5" runat="server" Width="55px"></asp:TextBox>
    <br />
    <asp:Label ID="Label6" runat="server" Text="Number"></asp:Label>
    <asp:TextBox ID="TextBox6" runat="server" TextMode="Phone"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="TextBox6"
        ErrorMessage="Invalid Number. Must be in Format (XXX) XXX-XXXX" ValidationExpression="^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$"></asp:RegularExpressionValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="TextBox6"
        Display="None" ErrorMessage="Phone Number"></asp:RequiredFieldValidator>
    <br />
    <br />
    <strong>Credit Card Information</strong><br />
    <asp:Label ID="Label7" runat="server" Text="Card Type"></asp:Label>
    <asp:RadioButton ID="RadioButton1" runat="server" Text="MasterCard" />
    <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:RadioButton ID="RadioButton2" runat="server" Text="Visa" />
    <br />
    <asp:Label ID="Label8" runat="server" Text="Card Number"></asp:Label>
    <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="TextBox7"
        ErrorMessage="Not a valid credit card number. Must contain 16 digits." ValidationExpression="^((4\d{3})|(5[1-5]\d{2})|(6011))-?\d{4}-?\d{4}-?\d{4}|3[4,7][\d\s-]{13}$"></asp:RegularExpressionValidator>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="TextBox7"
        Display="None" ErrorMessage="Card Number"></asp:RegularExpressionValidator>
    <br />
    <asp:Label ID="Label9" runat="server" Text="Expiration Date"></asp:Label>
    <asp:DropDownList ID="DropDownList1" runat="server" Style="height: 22px">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>Nov 13</asp:ListItem>
        <asp:ListItem>Dec 13</asp:ListItem>
        <asp:ListItem>Jan 14</asp:ListItem>
        <asp:ListItem>Feb 14</asp:ListItem>
        <asp:ListItem>Mar 14</asp:ListItem>
        <asp:ListItem>Apr 14</asp:ListItem>
        <asp:ListItem>May 14</asp:ListItem>
        <asp:ListItem>Jun 14</asp:ListItem>
        <asp:ListItem>July 14</asp:ListItem>
        <asp:ListItem>Aug 14</asp:ListItem>
        <asp:ListItem>Sep 14</asp:ListItem>
        <asp:ListItem>Oct 14</asp:ListItem>
        <asp:ListItem>Nov 14</asp:ListItem>
        <asp:ListItem>Dec 14</asp:ListItem>
    </asp:DropDownList>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="DropDownList1"
        ErrorMessage="Expiration Date">*</asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Submit" />
    </form>

这是我的css。

#regForm
{
 border:1px solid black;
 background-color:#ccc;
 height:500px;
 width:750px;   
}

但由于某种原因,这不适用。难道我做错了什么? ASP元素的样式化过程是否与常规HTML元素不同?

我已经分配了我的表单和ID并在我的css中引用了它但没有结果......

非常感谢任何帮助。

0 个答案:

没有答案