6/27/2006

Nice tips on some ASP.Net 20 Form handling

Filed under: General — russell @ 8:24 pm

10,000 Monkeys has a nice overview of two slightly obscure things in web development: multiple buttons on a form triggered by the enter key and forms without tables. Check here for the info:
Multiple enter key buttons
Forms without tables

if you have two different sets of inputs with save buttons, you can place them in a panel and set the default button for input fields in that panel. Like so:

Code:

No more tables -- only CSS

No more tables -- only CSS

Code:
<table>
<tr>
    <td>Name:</td><td><input type="text" name="name"/></td>
</tr>
<tr>
    <td>Email:</td><td><input type="text" name="email"/></td>
</tr>
<tr>
    <td>Phone:</td><td><input type="text" name="phone"/></td>
</tr>
<tr>
    <td>Address:</td><td><input type="text" name="address"/></td>
</tr>
<tr>
    <td>City:</td><td><input type="text" name="city"/></td>
</tr>
</table> 
	
You can use CSS to style the lablel elements like so: 
	
<style type="text/css">
    fieldset
    {
        width: 16em;
    }
    label
    {
        font-size: 1em;
        width: 5em;
        float: left;
        margin-right: 0.5em;
        display: block;
    }
    #rightAligned label
    {
        text-align: right;
    }
</style>
<fieldset id="rightAligned">
    <legend>Right Aligned</legend>
    <p><label for="name">Name:</label><input type="text" name="name"/></p>
    <p><label for="email">Email:</label><input type="text" name="email"/></p>
    <p><label for="phone">Phone:</label><input type="text" name="phone"/></p>
    <p><label for="address">Address:</label><input type="text" name="address"/></p>
    <p><label for="city">City:</label><input type="text" name="city"/></p>
    <input type="button" class="btn" value="Save"/>
</fieldset>