Using Cascading Style Sheets (CSS) Features with ASP Forms

ID: Q222443

The information in this article applies to:

Microsoft Internet Explorer versions 4.0, 5 for Windows NT 4.0
Microsoft Internet Information Server versions 3.0, 4.0
Microsoft Internet Information Services version 5.0

SUMMARY

Internet Explorer versions 4.0 and later provide a rich set of text-layout features to Web authors through Cascading Style Sheets (CSS). One of the more useful abilities is to change the display attributes of form fields. This article describes how to use this functionality to create forms with better visual layout using Style Sheet tags.

MORE INFORMATION

The following ASP code examples make use of the style="" attribute that can be applied to any HTML tag. For example, the following HTML code will create a paragraph with red text:


<p style="color: red">This is red text.</p>

Certain CSS properties can be extremely useful to Web page authors when constructing Web pages with forms. The <input>, <textarea>, and <select> HTML tags have simple and dissimilar parameters for modifying their respective display properties. By using the style="" attribute, authors have greater flexibility over the display of these form fields using common syntax for all fields.

For example, the following code creates a simple form where each field has an identical width:


<form method="POST">
  <input type="text" name="txtBox1" style="width: 200"><br>
  <textarea name="txtBox2" style="width: 200"></textarea><br>
  <select name="txtBox3" style="width: 200">
    <option value="1">Choice 1</option>
    <option value="2">Choice 2</option>
    <option value="3">Choice 3</option>
  </select><br>
  <input type="submit" style="width: 200">
</form>

The ASP page displayed below is a more advanced example, which uses the user-defined function MakeCSS that takes the following arguments and returns a properly formatted style="" attribute:

Font-family: the font style to use

Width: width in pixels of the item to modify

Height: height in pixels of the item

Background: background color for the item

Color: background color for the item

To use this sample page, copy the code and save it as "Cssform.asp" in a Web folder with Script access enabled, and then browse it using Microsoft Internet Explorer version 4.0 or later:


<%@Language="VBSCRIPT"%>
<html>
<head><title>Stylesheet Form Examples</title></head>
<%
  Function MakeCSS(fnt,wdt,hgt,bck,clr)
    MakeCSS = "style=" & Chr(34)
    If (fnt<>"") Then MakeCSS = MakeCSS & "font-family: " & fnt
    If (wdt<>"") Then MakeCSS = MakeCSS & "; width: " & wdt
    If (hgt<>"") Then MakeCSS = MakeCSS & "; height: " & hgt
    If (bck<>"") Then MakeCSS = MakeCSS & "; background: " & bck
    If (clr<>"") Then MakeCSS = MakeCSS & "; color: " & clr
    MakeCSS = MakeCSS & Chr(34)
  End Function
%>
<body <%=MakeCSS("verdana","","","#ffffff","#000000")%>>

<h3>Stylesheet Form Examples</h3>

<% If LCase(Request.ServerVariables("REQUEST_METHOD")) = "get" Then %>

<form action="<%=Request.ServerVariables("URL")%>" method="POST">

<table border="1" <%=MakeCSS("verdana","","","black","white")%>>
  <tr>
    <td>Name</td>
    <td><input type="text" value="Enter Your Name" name="txtName" <%=MakeCSS("arial","300","","#ccccff","#000000")%>></td>
  </tr>
  <tr>
    <td>Address</td>
    <td><textarea name="txtAddress" <%=MakeCSS("arial","300","100","#ffcccc","#000000")%>>Enter Your Address</textarea></td>
  </tr>
  <tr>
    <td>Airport</td>
    <td>
      <select name="txtAirport" <%=MakeCSS("arial","300","","#ccffcc","#000000")%>>
        <option value="ORD">Chicago O'Hare, IL</option>
        <option value="LAX">Los Angeles International, CA</option>
        <option value="JFK">New York JFK, NY</option>
        <option value="SEA">Seattle/Tacoma, WA</option>
      </select>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <input type="submit" value="Send Data" <%=MakeCSS("courier","150","30","darkred","white")%>>
      <input type="reset" value="Reset Form" <%=MakeCSS("courier","150","30","darkgreen","white")%>>
    </td>
  </tr>
</table>

</form>

<% Else %>

<table border="1" <%=MakeCSS("verdana","","","black","white")%>>
  <tr <%=MakeCSS("verdana","","30","black","white")%>>
    <td>Name</td>
    <td><%=Request.Form("txtName")%></td>
  </tr>
  <tr <%=MakeCSS("verdana","","100","black","white")%>>
    <td>Address</td>
    <td><%=Request.Form("txtAddress")%></td>
  </tr>
  <tr <%=MakeCSS("verdana","","30","black","white")%>>
    <td>Airport Code</td>
    <td style="width:300"><%=Request.Form("txtAirport")%></td>
  </tr>
</table>

<% End If %>

</body>
</html>

For more information on scripting, see the Microsoft Scripting Technologies Web site.

For more information on Cascading Style Sheets (CSS), see the Microsoft DHTML, HTML and CSS Web site.

Additional query words:

Keywords :
Version : WINDOWS:4.0,5; winnt:3.0,4.0
Platform : WINDOWS winnt
Issue type : kbhowto