Creating HTML Forms in Microsoft Expression Web 2
Posted by: Minal Agarwal
in Category Expression Web
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.
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!