Building a Web Form in ASP.NET - How to use flow layout

(Page 2 of 5 )

By default, you develop web forms in flow layout. When you use flow layout, the text and controls you add to a form are positioned from left to right and from top to bottom. Because of that, the position of the controls can change when the form is displayed depending on the size of the browser window and the resolution of the display.

To understand how flow layout works, figure 2-6 shows the beginning of a version of the Future Value form that doesn’t use a table to align its text and controls. To create this form, I started by typing the text for the heading directly into the form. Then, I pressed the Enter key twice to add space between the heading and the text and controls that follow it. Next, I typed the text that identifies the first control, I pressed the space bar twice to add some space after the text, and I added a drop-down list. When I added the drop-down list, it was placed immediately to the right of the text and spaces. I used similar techniques to enter the remaining text and text box.

Finally, I formatted the heading at the top of the form. To do that, I selected the text and then used the controls in the Formatting toolbar to change the font size to 20 points, to make the heading bold, and to change its color to blue.

You can see the result in the aspx code in this figure. Notice that the special code &nbsp: was inserted for each space between the text and the controls that follow. In addition, a Br element is inserted for each line break. To apply the formatting to the heading, a Strong element is used, along with a Span element with a Style attribute that specifies the font size and color.

Because you’re limited to what you can do with spaces and line breaks, you’ll frequently use tables to format a form in flow layout. For example, you can see in this figure that the drop-down list and the text box aren’t perfectly aligned. In addition, there’s not much space between the line that contains the drop-down list and the line that contains the text box. In the next figure, then, you’ll learn how to add a table to a form so you can align the text and controls just the way you want.

The beginning of the Future Value form created using flow layout

Figure 2-6.  How to use flow layout

The aspx code for the Future Value form

  <form id="form1" runat="server">
  <div>
      <strong><span style="font-size: 20pt; color: blue">
      401K Future Value Calculator</span></strong><br /><br />
      Monthly investment&nbsp;&nbsp;
      <asp:DropDownList ID="DropDownList1" runat="server">
      </asp:DropDownList><br />
      Annual interest rate&nbsp;&nbsp;
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  </div>
  </form>

How to use flow layout

1. When you add controls to a form in flow layout, they will appear one after the other, from left to right and from top to bottom. Flow layout is the default for web forms in Visual Studio 2005.
   

2. To insert a space after a control, use the space bar. The special code &nbsp: is inserted into the aspx file.

3. To insert a line break after a control, press Enter. A <br /> tag is inserted into the aspx file.
   
4. To insert literal text, type it directly into the designer window. Then, you can use the controls in the Formatting toolbar and the commands in the Format menu to change the font or font size; apply bold, italics, or underlining; or apply foreground or background color.
   
5. To align text and controls when you use flow layout, you normally use tables as described in the next figure.

Next: How to add a table to a form >>
 

More ASP.NET Articles
More By Murach Publishing

Comments On: Building a Web Form in ASP.NET

· This article is an excerpt from the book "Murach's ASP.NET 2.0 Web Programming with...   >>> Post your comment now!

Buy this book...

This article is excerpted from the book Murach's ASP.NET 2.0 Web Programming with VB2005, written by Doug Lowe (Murach, 2006; ISBN: 1890774324). Check it out today at your favorite bookstore. Buy this book now.