Lisa Wollin

Creating borderless input fields

Here's a tip from Rich Klein about how to make borderless input fields.

A good way to display data and allow input is to create an input field in a table cell that is sized to the cell and is borderless. You can then "underline" the field by setting the bottom border property of the cell.

If you are working with SQL Server, you can match the maxlength attribute of the input field with the DefinedSize property of the SQL table field.

Here’s how you might do it:

Read the recordset of the SQL table query. Let’s say the recordset is defined as rs1.

<% ThisValue = rs1("ThisField")
    This Length = rs1("ThisField").DefinedSize %>

This sets the variables, ThisValue and ThisLength, with the values that you need.

Then, in the body of the page place the following style tags and the contents:

<style>
    .under1 {border-bottom-width: 1px;}
        '"border-bottom: 1px;" may also work
    .text   {width: 100%; background-color: #008080; border-width: 0; color: #00FFFF;}
        'the background color attribute can be whatever matches your body background.
</style>

Then you would create your table, cells, and input fields. By setting the class attribute, you can place these styles wherever you like.

<table>
    <tr>
        <td class="under1">
            <input type="text" name="txtUserInput" class="text"
                value="<%=ThisValue%>" maxlength="<%=ThisLength%>">
        </td>
    </tr>
</table>

And so on ...

When this is done, the user input fields should all have underlines and extend the entire cell width. The Input field character length is only determined by the field size defined in SQL. The borders of the input field and also the top, left and right sides of the cell should not display. Since the background of the input field is the same as the background, it should blend right in.

Published Friday, June 25, 2004 9:07 AM by lisawoll
Filed under:
Anonymous comments are disabled

© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Microsoft
Page view tracker