Creating HTML Forms in Microsoft Expression Web 2

Abstract: Your existing FrontPage HTML forms work fine in Microsoft Expression Web 2, along with their validation. But Expression does not allow you to insert FrontPage "bots". In this article we will learn to create HTML forms in Microsoft Expression Web 2.

Creating HTML Forms in Microsoft Expression Web 2

Your existing FrontPage HTML forms work fine in Microsoft Expression Web 2, along with their validation. But Expression does not allow you to insert FrontPage "bots". In this article we will learn to create HTML forms in Microsoft Expression Web 2.

We will start with the basics of creating a form and proceed to learn about the various form controls in detail.

To create an HTML form, follow these steps:

1.Open an existing page or create a new page to insert a form. Then place your cursor where you want the form to be added. In the Toolbox task pane, expand the Form Controls and double click or drag the Form to the page.

A form with dashed outline will now be placed on the page.

2.Expand the form to make space to add fields by dragging its edges.

3.Expression Web has incorporated many form controls to let you have a better control in gathering required information from your users. I will be explaining only a few that would be frequently used.

a.Text box:

A text box can contain a single line of text.

Place you cursor in the form, where you want to add the text box and in the Toolbox task pane, double click on Input (Text). When the text box is added; right-click on it

and choose Form Field Properties… from the menu.

Alternatively, double click on the newly inserted text box to open the Text Box Properties window. Enter values for various properties as shown below:

·Name: is used by form handling scripts and is not visible to the users.

·Initial value: enter a value if you want the text box to display some initial text.

·Width in characters: sets the width of a single line in characters.

·Tab order: decides the order of focus, when a user uses the tab key to jump from one field to another in the form.

·Password field: Choose Yes if you want to use this field for a password else leave it as No.

Click OK.

b.Text Area:

A text area can contain multiple lines of text unlike text box, which can input only a single line of text.

Place you cursor in the form, where you want to add the text box and in the Toolbox task pane, double click on Text Area.

Right-click on the text area and choose Form Field Properties… from the menu. In the TextArea Box Properties window, enter values for different properties.

Text Area Box Properties are similar to that of the text box, except for the Number of line: that set the height for the text area (in lines).

c.Group Box

A group box lets you create a collection of labels and buttons in a way to organize a group of field controls in a single box. For example, if you want to gather information about a user’s interest and provide multiple checkboxes to choose from, you could insert a group box with such multiple check boxes. This would identify the group as well as organize all the checkboxes in it.

Double click on Group Box button in the Toolbox task pane. Right-click and open the Group Box properties. Set the label and alignment for the box. Now you can add buttons or other controls to this box.

d.Checkboxes and Radio Buttons:

Checkboxes have only two states; checked or unchecked. The key difference between a check box and a radio button is that you can check multiple checkboxes, while radio buttons force the user to make one choice.

To enter a checkbox, double click on the Input (Checkbox) in the Toolbox task pane. Double click on the checkbox to open its Properties window.

Initial state property lets you decide the initial value of the checkbox; by default it is ‘Not checked’, but you can change it to Checked if you want.

Add a radio button similarly to your page and then go to its properties by double clicking on it. All the other properties are similar to the checkbox properties except for the values for Initial state for radio/option buttons. Choose ‘Selected’ or ‘Not selected’; default value is ‘Selected’.

e.Submit and Reset Buttons:

Submit and Reset buttons are two types of push buttons. Each button is functioned to trigger a particular action. The last step of filling a form is to submit the details filled in. This is the function of a Submit button. Reset button is used to reset all the values entered in the form and allow users to re-enter.

To enter these buttons on your form, double click on the buttons Input (Submit) and/or Input (Reset). Open their properties window. Enter suitable names and values/labels. For the submit button let the Button type be Submit and for reset button let it be Reset.

Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke

User Feedback

Comment posted by
james
on Thursday, June 17, 2010 12:35 PM

doesn't tell me how to do anything with the form. I can't email it, I can't use it to populate a survey, it's nothing

Comment posted by
Sam
on Sunday, July 11, 2010 3:39 AM

This is an excellent article. I have now made the form as per your instructions but how do I get it to work? How do i add the script that makes the form actually do something????

Your article on creatting a FORMS page was great up to the point at which you did not provide a place to store the input and a way to retrieve it. For an interactive form there must be a way to retrrieve the input. Can you finish this page. Forms become a problem since hosting companys have dropped Microsoft front page extensions.