Facelift 转 Forms：第一部分：TextBox

Jay Thakar

4.53/5 (16投票s)

2009 年 9 月 3 日

CPOL

8分钟阅读

45421

428

制作精美文本框的各种方法。

下载源代码 - 302.2 KB

引言

这是我在“表单改头换面”系列中的第一篇文章，该系列介绍了使 Web 表单美观、易于实现和易于使用的各种选项。在每篇文章中，我将介绍 Web 表单的一个元素以及为 Web 表单进行“改头换面”的各种方法。

背景

我们的一位新客户提到，他们对网站的性能不满意。他们有一个非常好的广告活动，并且有持续的新访客流入，但他们没有进行注册。我想，让我们以“终端用户”的身份看一下注册表单，我访问了他们的网站，然后点击了“注册”链接。如果我以“终端用户”的身份看到那个注册表单，我看到的是一个丑陋的表单，其中包含许多未经深思熟虑地组合在一起的表单元素。

您也同意，Web 表单是收集任何 Web 应用程序信息最广泛使用的途径之一。在许多情况下，它可能是保存信息的唯一途径，但它在许多情况下并未得到正确使用。我看到一些 Web 表单只是多页打印表单的替代品，一遍又一遍地要求相同的信息。对于任何 Web 应用程序开发人员来说，理解 Web 表单中各种元素的用法并了解使“终端用户”生活更轻松的各种选项至关重要。如果实现得当，客户会喜欢您；如果实现不当，客户就会讨厌您。

文本框

任何 Web 表单如果没有文本框都不完整。您可以对文本框进行许多操作，使其对终端用户更有趣和更有帮助。以下是一些实现此目的的方法：

添加一些“香料”（CSS）
焦点时“闪耀”（高亮）
设置一些“水印”（JavaScript/AjaxControl Toolkit）
使用主题和 CSS 来让您的（是的，开发人员的）生活更轻松

在此示例中，我们将使用一个简单的注册表单，包含两个字段：姓名和电子邮件地址。

/*Code: SimpleForm.htm*/
<div style="border: solid thin black; padding: 10px;">
Name: <input id="tdName"> <br /> <br />
Email : <input id="tbSimmple"> <br /> <br /> 
<input id="register" type="submit" value="Register">
</div>

Simple Form

图 1：没有 CSS 的简单表单。

现在让我们开始为这个表单进行改头换面。

1. 添加一些“香料”（CSS）

改变文本框（或任何元素）外观最简单且最有效的方法之一是使用 CSS。通过 CSS 可以做一些技巧来使 TextBox 更漂亮。让我们看一些...

/*Code:CSS_Font.htm*/
<style>
/* Apply default fonts*/
<style>
.loginBox
{
    width: 80%;
    color: #B24F04;
    font-family: "Verdana" ,sans-serif;
}
.loginText
{
    color:#FF8326;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px;background-color:#FDEDD9">
<span class="loginText">Name:</span>
<input id="login" class="loginBox" /><br />
<br />
<span class="loginText">Email :</span>
<input id="email" class="loginBox" /><br />
<br />
<input id="Submit1" type="submit" value="Register" />
</div>

Added some fonts

图 2：带字体的表单。

仅通过应用字体并为两个文本框设置一致的宽度，就能让这个表单看起来好一点。

/*Web_Font.htm*/
<style type="text/css">
@font-face 
{
    font-family: Gentium;src: 
                 url(http://www.princexml.com/fonts/larabie/berylibi.ttf) format("truetype"); 
}

.loginURL 
{
    width: 80%; 
    color: Gray; 
    font-family:"Gentium" , serif; 
} 
</style>
<div style="border: solid thin black; padding: 10px;">
Name: <input id="Text1" class="loginURL" /><br /> <br />
Email: <input id="Text2" class="loginURL" /><br /> <br />
<input id="Submit2" type="submit" value="Register" />
</div>

正如您在此处看到的，我们正在使用托管在服务器上的字体，因此客户端计算机不需要安装指定的字体。如果浏览器不支持“Web 字体”，则会使用备用字体（在本例中为 sans-serif）。这是一种“酷”的做法，尤其是当您想使用一些花哨的字体，并且确切知道客户端计算机上将无法使用给定字体时。这是上述代码在不同浏览器中的渲染结果。

Web 字体在 Mozilla Firefox 中渲染

IE 中的 Web 字体

注意：请非常小心使用此技术，因为它仍处于该技术的早期阶段，很少有浏览器支持此技术。我能够使用 Internet Explorer 8 和 Firefox 3.5 进行检查。

现在让我们为此 TextBox 添加一些边框。

/*Border.htm*/
  <style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBorders
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
    }
    </style>
    <div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
        <span class="loginText">Name:</span>
        <input id="Text3" class="loginBorders" /><br />
        <br />
        <span class="loginText">Email:</span>
        <input id="Text4" class="loginBorders" /><br />
        <br />
        <input id="Submit3" type="submit" value="Register" />
    </div>

Simple Borders

带边框的文本框。

上面的代码生成以下表单。在这里，我们将文本框的外观更改为具有实线的扁平样式。您可以在此处尝试各种边框类型和各种边框侧面来获得各种效果。这是使用边框的另一个示例：

<style type="text/css">
.loginText
{
    color: #FF8326;
}
.loginBorders
{
    width: 80%;
    color: #B24F04;
    font-family: serif;
    border: solid 1px #F58F1A;
    border-left: 7px solid #F58F1A;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text3" class="loginBorders" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text4" class="loginBorders" /><br />
    <br />
    <input id="Submit3" type="submit" value="Register" />
</div>

Border with thick left border

三侧普通边框，左侧粗边框。

在上面的两个示例中，我们添加了边框。在第二个示例中，我们在 textbox 的所有边框上应用了细边框（1px），并在 textbox 的左侧添加了一个粗边框（7px）。这提供了一个很好的视觉效果，与常规 textbox 略有不同。现在在下一个示例中，让我们为边框添加阴影。

/*Border_Shadow.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBordersShadow
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: outset thin #F58F1A;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBordersShadow" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBordersShadow" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Drop Shadow to TextBox

带阴影的文本框边框。

在大多数情况下，我们希望禁用的 TextBox 显示不同。通常有两种方法：要么使用不同的视觉样式来表示禁用的 textbox，要么让 TextBox 显示为 Label。

/*Disabled_Different.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBorders
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
    }
    input[disabled]
    {
        width: 80%;
        color: #333333;
        background-color:#eeeeee;
        font-family: serif;
        border: solid 1px #F58F1A;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" disabled="disabled" value="Jay" style="width:80%" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBorders" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Disabled textbox

不同的禁用格式。

/*Disabled_Label.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBorders
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
    }
    input[disabled]
    {
        width: 80%;
        color: #333333;
        background-color:Transparent;
        font-family: serif;
        border: hidden 1px #F58F1A;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" disabled="disabled" value="Jay" style="width:80%" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBorders" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Disabled textbox as label

禁用文本框显示为标签。

现在让我们添加一些背景。以下是我们可以使用背景的几种方法：

/*Background_Solid.htm*/
<style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBg
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
        background-color: #FFFFB8;
    }
</style>
    <div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBg" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBg" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Solid color as background

带实心背景的文本框。

您也可以使用图片作为背景。有两种最受欢迎的视觉效果：

渐变效果和
圆角

让我们看一个例子。

/*Background_Image.htm*/
  <style type="text/css">
    .loginText
    {
        color: #FF8326;
    }
    .loginBg
    {
        width: 80%;
        color: #B24F04;
        font-family: serif;
        border: solid thin #F58F1A;
        background-image:url("gr.jpg");
    }
</style>
    <div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBg" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBg" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Gradient Background

<style type="text/css">
.loginText
{
    color: #FF8326;
}
.loginBg
{
    width: 300px;
    color: #B24F04;
    font-family: serif;
    background-color:Transparent;
    background-image:url("rounded.png");
    background-repeat:no-repeat;
    border-style:hidden;
    padding-left:5px;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input id="Text5" class="loginBg" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text6" class="loginBg" /><br />
    <br />
    <input id="Submit4" type="submit" value="Register" />
</div>

Textbox with Rounded Corner

带圆角的文本框。

注意：您可能已经看到，我们使用了 width: 300px;，因为我们的图片是 300 像素宽。我们在这里使用的文本框具有透明背景，因此您将图片用作背景时，文本框将显示该图片。这种样式只能用于固定宽度的文本框。（有几种方法可以使用动态宽度实现此效果，但这涉及到几个 Div，不是仅使用一个 Textbox。）

2. 焦点时“闪耀”（高亮）

作为“终端用户”，我很容易分心。填写表单时，我可能会失去注意力（接电话、休息一下等）。当我回来时，我可能需要“思考”我之前在哪里。作为（开发人员）的我们可以用来吸引用户注意力的技术之一是更改具有焦点的元素的视觉外观，并在其失去焦点时恢复到原始状态。微软从 Windows 的早期就开始使用这种技术。有许多不同的方法可以在 TextBox 获得焦点时进行高亮显示（应用不同的 CSS）。

/*Focus_Highlight.htm*/
<style type="text/css">
    input[type=text]:focus
    {
        border: 1px solid black;
        background-image: url(  "gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    input[type=text]
    {
        border: 2px solid #FF8326;
        background-image: url(  "gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input type="text" id="Text15" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text16" type="text" /><br />
    <br />
    <input id="Submit9" type="submit" value="Register">
</div>

Highlight on Focus

现在这非常简洁，并且实现起来似乎也很容易。这里的一件事是，上面的 CSS 只会应用于 type=text 的元素，而所有其他元素将保持不变；而且我们不使用 JavaScript 或任何编程。:) 这可能并非所有浏览器都支持（尤其是旧浏览器），在这种情况下，JavaScript 可以派上用场……

/*FocusJS_Highlight.htm*/
<style type="text/css">
    .loginHighlight 
    {
        border: 1px solid black;
        background-image: url(  "gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    .loginNormal
    {
        border: 2px solid #FF8326;
        background-image: url(  "gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input type="text" id="Text15" onblur="this.className='loginNormal';"
       class="loginNormal" onfocus="this.className='loginHighlight'"  /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text16" type="text" onblur="this.className='loginNormal';"
       class="loginNormal" onfocus="this.className='loginHighlight'"  /><br />
    <br />
    <input id="Submit9" type="submit" value="Register" />
</div>

Highlight on Focus with JavaScript

3. 设置一些“水印”

现在让我们进入下一个自定义级别。我们可以在这里添加水印效果。这是一个非常有用的功能，可以在用户填写表单时提供帮助。您可以在文本框中放入一些消息，当文本框为空时显示，当用户输入某些内容时帮助消息消失。有几种方法可以实现此目的……

/*Watermark_JS.htm*/
<style type="text/css">
    .loginHighlight
    {
        border: 1px solid black;
        background-image: url("gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    .loginNormal
    {
        border: 2px solid #FF8326;
        background-image: url("gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
<script language="javascript" type="text/javascript">
  function textOnFocus(textBox)
  {
    textBox.className='loginHighlight';
    if(textBox.value==textBox.defaultValue)
    {textBox.value='';}
  }
  function textOnBlur(textBox)
  {
    textBox.className='loginNormal';
    if(textBox.value=='')
    {textBox.value=textBox.defaultValue;}
  }  
</script>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
    <span class="loginText">Name:</span>
    <input type="text" id="Text15" onblur="textOnBlur(this)"
        value="Click here to enter Login Name"
        class="loginNormal" 
        onfocus="textOnFocus(this);" /><br />
    <br />
    <span class="loginText">Email:</span>
    <input id="Text16" type="text" onblur="textOnBlur(this)" 
        value="Click here to enter Email" 
        class="loginNormal" 
        onfocus="textOnFocus(this);" /><br />
    <br />
    <input id="Submit9" type="submit" value="Register" />
</div>

键入信息之前的文本框。

键入信息之前的文本框。

在这里，我们利用了默认值（Default Value）通过 JavaScript。当您将值定义为元素规范的一部分时，它就成为“默认值”，并且使用基于值的多个 CSS 类。当用户尚未输入任何内容时，我们希望应用 60% 的透明度，但一旦用户输入了某些内容，我们就希望移除透明度，因此我们根据文本框中的值应用不同的 CSS。如果用户在文本框中未输入任何内容，则 value 和“DefaultValue”将相同。在这种情况下，我们应用不同的 CSS 类 textBox.className='loginNormal';；如果用户输入了任何值，则应用不同的 CSS。

另一种应用水印效果的方法是使用 AjaxControlToolkit 中的 WaterMark 扩展器。

/*Default.aspx*/
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajxTK" %>
...
...
...
    <style type="text/css">
    .loginHighlight
    {
        border: 1px solid black;
        background-image: url("gr.jpg" );
        color: #B24F04;
        font-family: serif;
        width: 80%;
    }
    .loginNormal
    {
        border: 2px solid #FF8326;
        background-image: url("gr.jpg" );
        width: 80%;
        color: #B24F04;
        font-family: serif;
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    .loginText
    {
        color: #FF8326;
    }
</style>
    <div style="border: solid thin black; padding: 10px;">
        <span class="frmLbl">Name:</span>
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <ajxTK:TextBoxWatermarkExtender ID="tbWMEX_ProcName" runat="server" 
        TargetControlID="tbLoginName"
            WatermarkCssClass="loginNormal" WatermarkText="Click here to enter Name.">
        </ajxTK:TextBoxWatermarkExtender>
        <asp:TextBox id="tbLoginName" cssclass="loginHighlight" runat="server" /><br />
        <br />
        <span class="frmLbl">Email:</span>
        <ajxTK:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 
        TargetControlID="tbEmail"
            WatermarkCssClass="loginNormal" WatermarkText="Click here to enter Email.">
        </ajxTK:TextBoxWatermarkExtender>
        
        <asp:TextBox id="tbEmail" runat="server" class="loginHighlight" /><br />
        <br />
        <input id="Submit10" type="submit" value="Register">
    </div>

键入信息之前的文本框。

键入信息之后的文本框。

如您所见，使用 AjaxControlToolkit 中的 TextBoxWaterMark 扩展器可以很容易地添加水印效果。这里需要定义的主要属性是：

TargetControlID：这表示需要显示水印效果的控件的 ID。
WatermarkCssClass：这表示用作水印显示的 CSS 名称。
WatermarkText：这表示要显示为水印的文本。

4. 使用主题和 CSS 来让您的（是的，开发人员的）生活更轻松

您看到的这些技术实现起来相对容易；是的，当只有几个文本框时是这样，但想象一下您必须为 Web 应用程序中的每个文本框执行此操作（通常 Web 应用程序包含数百个文本框）。我们可以结合使用主题和 CSS 来应用大多数视觉外观和行为。这里，我假设您已经了解了主题，因为本文无意描述如何使用主题。

/*Default.Skin*/
        <asp:TextBox onblur="textOnBlur(this);" CSSclass="loginNormal" 
          onfocus="textOnFocus(this);" runat="server"></asp:TextBox>

/*JavaScript*/
<script language="javascript" type="text/javascript">
  function textOnFocus(textBox)
  {
    textBox.className='loginHighlight';
    if(textBox.value==textBox.defaultValue)
    {textBox.value='';}
  }
  function textOnBlur(textBox)
  {
    if(textBox.value=='')
    {textBox.value=textBox.defaultValue;
    textBox.className='loginNormal opac';
    }
    else
    {
    textBox.className='loginNormal';
    }
  }  
  </script>

您可以将此脚本附加到一个单独的文件中，或者使用一个附加了 JavaScript 文件的母版页。这样做之后，使用此母版页的每个页面都将自动获取脚本，而您（是的，开发人员）则无需编写冗余代码。

/*Aspx page*/
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="easyTheme.aspx.vb" 
      Inherits="FaceliftToForms_TextBox.easyTheme" Theme="Default" %>
    ...
    ...
    <style type="text/css">
    .loginHighlight
    {
        border: 2px solid grey;
        background: #FFFFFF url( "gr.gif" ) repeat-x 0 1px; 
        color: #666666;
        width: 80%;
    }
    .loginNormal
    {
        border: 1px solid #cdcdcd;
        background: #FFFFFF url( "gr.gif" ) repeat-x 0 1px;
        color: #666666;
        width: 80%;
        opacity:0.6;
    filter:alpha(opacity=60);
    }
    .frmLbl
    {
        font-family: serif;
    }
</style>
<div style="border: solid thin black; padding: 10px;">
    <span class="frmLbl">Name:</span>
    <asp:ScriptManager ID="sm" runat="server">
    </asp:ScriptManager>
    <asp:TextBox id="tbLoginName" cssclass="loginNormal" runat="server" 
      Text="Click here to enter Login Name."/><br />
    <br />
    <span class="frmLbl">Email:</span>
    <asp:TextBox id="tbEmail" runat="server" class="loginNormal" 
      Text="Click here to enter Email." /><br />
    <br />
    <input id="Submit10" type="submit" value="Register">
</div>

现在在 aspx 页面上，您只需要在页面定义标签中添加 Theme="Default"。您也可以使用 web.config 将此主题定义为默认主题。页面渲染后，ASP.NET 将自动将 JavaScript 事件附加到 TextBox，因为我们在 textbox 元素的皮肤文件中定义了这些事件。

奖励部分

如果您不使用 .NET 相关技术，也可以获得此样式的大部分好处。您可以编写一个脚本，在页面加载时附加事件。或者，如果您喜欢复制/粘贴，这里是代码。

<script language="javascript" type="text/javascript">
addEvent(window, 'load', init, false);

function init() 
{
    var textBoxes = document.getElementsByTagName('input');
    for (var i = 0; i < textBoxes.length; i++) 
    {
        var theInput = textBoxes[i];
        
        if (theInput.type == 'text') 
        {  
            /* Add event handlers */          
            addEvent(theInput, 'focus', textOnFocus(theInput), false);
            addEvent(theInput, 'blur', textOnBlur(theInput), false);
        }
    }
}
</script>

摘要

作为开发人员，如果您开始思考这个问题：“我如何才能让终端用户的生活更轻松？”并实施更改，您就会让自己的生活更轻松。最终，决定您的应用程序有多好的不是您；而是应用程序的用户。编码愉快！:)

本文最初发布在 Jay 的博客 a Day as {Developer}.