Creating HTML Forms in Microsoft Expression Web 2

Posted by: Minal Agarwal , on 4/11/2009, in Category Expression Web
Views: 23871
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.                  

Toolbox task pane

A form with dashed outline will now be placed on the page.
Form
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.
Text Box
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.
Form Field Properties
 
Alternatively, double click on the newly inserted text box to open the Text Box Properties window. Enter values for various properties as shown below:
 
Text Box Properties
 
·         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.
 
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 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.
Group 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.
 
Check Box Properties
 
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.
If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email  
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


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????
Comment posted by Charles Rennaker on Wednesday, August 11, 2010 4:35 PM
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.
Comment posted by deded on Sunday, November 21, 2010 2:14 AM
wedewd
Comment posted by Kinsey on Thursday, March 24, 2011 6:37 PM
Helped immensely!  Simplest way I could find to do this.
Comment posted by fvergerger on Tuesday, December 17, 2013 2:43 PM
fwefwecfw egeg

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel