AWF - Interactive Forms [LESSON]
Interactive Forms
We have spent much time providing you with information on how to design a website and enhance it with CSS and tables. Your role as a web designer will also include creating web forms to gather information for clients. More than likely, you completed forms while visiting one of your favorite websites. At that time, you probably did not give any thought to the coding used to create the form. This lesson will provide you with the knowledge needed to create a web form using HTML. You will discover the types of forms and input fields associated with form development. You will also discover various options for processing the data so that information can be shared with the appropriate stakeholders. GUI editors normally will have the ability to add forms built into the programs. However, if you are building a site in a text editor or if you need to customize your forms, then you will need to understand HTML form basics.
Types of Web Forms Lesson
Web Forms
There are a multitude of forms that visitors access and complete as they frequent websites. You might be surprised to know that web forms can be categorized into two types. Forms used for E-commerce, technical support, and feedback are designed to obtain data from the user. This type of form would fall under the category of data collection. The other category is search. When you access a website and search for a topic, you are benefiting from this type of form.
As a web designer, you will need to determine which type of form you need to create and what type of data needs to be included to meet the form type. The data will drive the form elements that you decide to use as you construct the form in HTML. After you determine the form type and the data needed, you need to begin to think about how you will design your form to ensure visitors do not have any difficulties completing the form.
Take a moment to click through the Best Practices for User-Friendly Forms to familiarize yourself with the content.
Structuring Web Forms Lesson
Building Your Web Form
The <form> element is the input container that will be used in your HTML document to build your form. You will also need to use the action and method attributes with the <form> tag in your HTML document. The action attribute is the URL for the form handler
. The method attribute is used to determine how you want form data to be sent to the form handler.
The learning object below contains hotspots to detail the type of input fields commonly used on forms. There are other input fields that are also used such as the password, date, and time.
Below are the commonly used form elements:
| Type | Description |
|---|---|
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choices) |
| <input type="checkbox"> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type="submit"> | Displays a submit button (for submitting the form) |
| <input type="button"> | Displays a clickable button |
| <label> | Defines a label for several form elements. |
Form Validation
There is a possibility that incorrect data may be entered as individuals enter data into the web form. You can check the data either with local JavaScript or PHP scripts on your server.
Security Issues in Web Form Collection
Processing Form Data
Once data has been entered in a form, it needs to be processed so that information can be shared with the client. Before you obtain a program to handle your form data, you should understand what you desire to do with it.
Security Issues
Your client will want to be assured that the form data is not compromised and will probably ask your opinion about selecting a web-hosting provider if he/she has not left that decision up to you. It is important to make sure the web hosting provider supports the applications you need to run on the server to process the form input data. Some questions you should ask include the following:
- What kind of technology do you use for security?
- What type of security issues have you addressed with previous clients? What was the outcome?
- What kind of backup do you provide?
- How do you monitor your network?
- Will I receive the same type of support regardless of the time I call?
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION