Forms with CSS (1 of 3) – HTML Markup

When I develop web pages, I try to use web standards complaint HTML code and CSS for layout and design. This gives a lot of flexibility in the design while being usable for people using screen readers and other browsers that don’t use CSS.

This has worked fine with regular web pages, however I’ve always struggled with how to mark up forms to be semantically correct. After doing a little research on the subject, I’ve switched the way I typically write forms. I’m still learning so am open to suggestions to improve my skills.

Some of the forms I used to write would have elements that looked like:

<p>
  First Name:
  <input id="txtFirstName" name="txtFirstName" />
</p>
<p>
  Last Name:
  <input id="txtLastName" name="txtLastName" />
</p>

When I wanted the input boxes to line up vertically with each other, I’d either add the necessary spacing using “ “or build a table with labels in the first column and input fields in the second.

I’ve come to realize that there are better ways to do this markup. The way I typically do this now is:

<fieldset>
  <legend>Name</legend>
  <label for="txtFirstName">First Name:</Label>
  <input id="txtFirstName" name="txtFirstName" />

  <label for="txtLastName">Last Name:</Label>
  <input id="txtLastName" name="txtLastName" />
</fieldset>

This adds a little more HTML code, however provides more semantic information. Once you get used to coding the form like this, it’s pretty easy. A huge advantage of using the <fieldset> and <label> tags, you have a lot of hooks to use with your CSS. This makes it easy to format the form. More information in “Forms with CSS (2 of 3) – Styles

Note for ASP.NET programmers: The third tip in this article from Standards Schmandards shows how to tie your <label> tags to the tags that is generated from <asp:TextBox>.

Related Articles:
Forms with CSS (2 of 3) – Styles
Forms with CSS (3 of 3) – Checkboxes

Advertisements

Adding CSS to a Single Page

The project I’m working on has a page with an input form, and I  want to use CSS to format the form. Options for locating these styles include adding them in the main stylesheet used by the project, adding an embedded stylesheet to the page, creating a new CSS file and adding it to the master page, or creating a new CSS file and adding it to the page with the form.

I decided to create the CSS file and link it only page with the input form. In this project, linking to an additional CSS file is easier to implement than embedded styles, and should be easier to maintain in the long run. Adding styles to the main CSS file or linking from master file would mean that all the pages in the project would get the extra styles, not just the one that has the form.

This project is being developed in .NET, and is taking advantage of master files (a cool feature added in .NET 2.0) The <HEAD> section of the input form is coming from the master file, therefore I can’t simply add the link in .aspx file here. It has to be linked though the backend code. To do this, I added the following code to the Page_Load function:

// Add a CSS file to handle the formatting of the form
HtmlLink cssLink = new HtmlLink();

cssLink.href="/grainstorage/styles/form.css";
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
Header.Controls.Add(cssLink);

This code builds the link with the proper information, then adds it to the header of the page at runtime. Works like a charm when you have a stylesheet that only affects a few pages in your project.

New Aquatic Center

This week Ames held a special election to determine whether we can do a bond issue to build a new aquatic center. It passed, approximately 75% yes!

The aquatic center is something that Ames desperately needs. We have a couple of swimming pools now, but they don’t have the slides, toys, etc. When some daycares take kids swimming, they travel to one of two small towns close to Ames, because they have newer, better pools. It’s unusual for people to go from a bigger town to a much smaller one for services.

The best thing about getting this new aquatic center is that it will give the kids another option for something to do in the summer. In my mind, this is a good way to help keep them from getting into trouble.

Connecting JavaScript with a TextBox

Yesterday I was working on a web application where we wanted to have a JavaScript function run when the user changes a TextBox. It was a simple function, which took three input values and performs calculations to generate two additional values. I soon discovered two issues when working with JavaScript in ASP.NET. The first is that the TextBox control is server-side, so it doesn’t include the client-side “onclick” attribute. Second, is that when .NET generates the input box, it adds the ID of the parent container to the ID of the TextBox, for example ID=”TextBox1″ may become ID=”ctl00_ContentPlaceHolder1_TextBox1″.

Doing an Internet search, I found two solutions to the first issue. One option is to include the attribute onchange=”myJavaScriptFunction()” in the TextBox control. Visual Studio will give you a warning, but it does work. The second option is to include the following line of code in the Page_ Load function:

TextBox1.Attributes.Add("onchange", "myJavaScriptFunction()");

I prefer this method because Visual Studio doesn’t flag it.

To solve the second issue, I found an example where they used the ClientID attribute of the TextBox Control to find the element in JavaScript. Here is a sample JavaScript Function that does a popup alert, giving the value that was entered in TextBox1:

function myJavaScriptFunction()
{
  var myField = document.getElementById("<%= TextBox1.ClientID %>");

  alert(myField.value);
}

This is a kind of ugly, but it works. You can create as many variables as you need to point to your .NET controls. The function I wrote yesterday had 5 of these temporary variables. Seems like a lot of work to assign values to a couple readonly fields in the form.