Description of Design Project
Websites use many form objects to collect information from users. The form shown in Figure 36 is well organized and requests information that most people are comfortable giving over the Internet, such as name, address, and phone number. There are several helpful explanations that guide the user in filling out the form correctly to report an environmental violation.
- Connect to the Internet, then navigate to the U.S. Environmental Protection Agency website, pictured in Figure 36 (to the right of this text), epa.gov (The page in figure 36 can be reached if you Click Here).
- Does this site use forms to collect information?:
Yes, if you click on the link above (the link that says "Click Here") it will take you to the site that Figure 36 was captured from. View the source code on the site and you'll see the following form fields to collect user data (listed below Figure 36):
- <input name="alleged_violator_name" size="40" type="text" />
- <input name="alleged_violator_address" size="40" type="text" />
- <input name="alleged_violator_city" size="40" type="text" />
- <input name="alleged_violator_zip" size="10" type="text" />
- <input name="alleged_violation_date" size="10" type="text" value="mm/dd/yyyy" />
- <input name="name" size="40" type="text" />
- <input name="email" size="40" type="text" />
- <input name="phone" size="40" type="text" />
- <input name="address" size="40" type="text" />
- <input name="city" size="40" type="text" />
- <input name="zip" size="10" type="text" />
- <input name="still_occurring" type="radio" value="1" />
- <input checked="checked" name="still_occurring" type="radio" value="0" />
- <input name="notify_state" type="radio" value="1" />
- <input checked="checked" name="notify_state" type="radio" value="0" />
- <input name="department_contact" size="30" type="text" value="" />
- <input name="alleged_violation_intent" type="radio" value="Accidental"/>
- <input name="alleged_violation_intent" type="radio" value="Intentional" />
- <input name="alleged_violation_intent" type="radio" value="Unknown" />
- <input name="alleged_violation_type" type="radio" value="Release" />
- <input name="alleged_violation_type" type="radio" value="Dump/Buried" />
- <input name="alleged_violation_type" type="radio" value="Spill" />
- <input name="alleged_violation_type" type="radio" value="Spray" />
- <input name="alleged_violation_type" type="radio" value="Fill" />
- <input name="alleged_violation_type" type="radio" value="Falsified" />
- <input name="media_type_land" type="checkbox" value="1" />
- <input name="media_type_water" type="checkbox" value="1" />
- <input name="media_type_air" type="checkbox" value="1" />
- <input name="media_type_worker" type="checkbox" value="1" />
- <input name="media_type_document" type="checkbox" value="1" />
- <input name="alleged_violation_entity" type="radio" value="Individual" />
- <input name="alleged_violation_entity" type="radio" value="Company" />
- <input name="alleged_violation_entity" type="radio" value="Government/Military" />
- <input name="alleged_violation_entity" type="radio" value="Unknown" />
- <input name="statement" type="checkbox" value="read" />
- <input name="submit" type="submit" value="Send Report" /> An argument could be made against including the submit button and the checkbox before it (an affirmation that the visitor has read the disclaimers for the site), but these are form objects that gather information about the visitor (without a submit button, the visitor can't submit any of the form information he/she entered).
- Is the form arranged logically? Explain why or why not. Yes, the form requests all of the information that the EPA needs to initiate action against the volatilization. I like the format of the form requests, also. The form requests the violation information at the very top of the form. When the visitor starts filling out the site they probably wants to start pointing fingers at the violator(s), so requesting the violator(s) name at the beginning of the form makes it more likely that the visitor will complete the form. Secondly, the form requests information about the visitor (the accuser) when the visitor is still heated enough to want to say, "Yes, I'm making these accusations!". Finally the form requests violation details after the visitor has finally gotten into the groove for making this complaint.
- The action for the violation form is: <form action="http://cfpub.epa.gov/compliance/sendmail/add_tc.cfm" method="post">
The search field at the top of the page is actually a form, too. It's action is: <form class="epa-search" method="get" action="http://nlquery.epa.gov/epasearch/epasearch" >
Strictly speaking the action is what is performed by the script (or program) located at the URL that follows the "action=..." part of the <form...> tag. - Do you see any hidden fields?: There are hidden fields in the web page; the visitor can't see them, but if you're viewing the source code, you'll see plenty of them. Most of the hidden fields on the web page are part of the search field (...and like I said, the search field is a form).
<form class="epa-search" method="get" action="http://nlquery.epa.gov/epasearch/epasearch">
<label class="element-hidden" for="search-box">
Search</label>
<input class="form-text" placeholder="Search EPA.gov" name="querytext" id="search-box" value=""/>
<button class="epa-search-button" id="search-button" type="submit" title="Search">
Search</button>
<input type="hidden" name="fld" value="" />
<input type="hidden" name="areaname" value="" />
<input type="hidden" name="areacontacts" value="" />
<input type="hidden" name="areasearchurl" value="" />
<input type="hidden" name="typeofsearch" value="epa" />
<input type="hidden" name="result_template" value="2col.ftl" />
<input type="hidden" name="force" value="no" />
<input type="hidden" name="filter" value="sample4filt.hts" />
</form>
Hidden fields supply information from your form, but the site visitor can't see them. E.g., maybe you are using this form on several different web sites, and you need to include site specific information to your script; there is no need to tell the visitor about this additional information. -
Are any of the forms secure?: The violation form uses the "Post" protocol. Post doesn't display any of the form information in the URL string that is sent to the action script. Since the post data doesn't have to be URL text, it can be encrypted. For this reason, post data is more secure then data sent by the "Get" protocol.
Furthermore, some of the links on the web page (and you get to them through forms or through direct links) are to https sites; i.e., these sites are secured by the SSL protocol:
- https://publicaccess.zendesk.com/hc/en-us/articles/212071687-Does-EPA-handle-all-environmental-concerns-
- https://blog.epa.gov/blog/
- https://twitter.com/epa
- https://www.facebook.com/EPA
- https://www.youtube.com/user/USEPAgov
- https://www.facebook.com/sharer.php?u=http://www2.epa.gov/enforcement/report-environmental-violations&t=Report Environmental Violations
- https://twitter.com/intent/tweet?original_referer=http://www2.epa.gov/enforcement/report-environmental-violations&text=Report Environmental Violations&url=http://www2.epa.gov/enforcement/report-environmental-violations&via=EPA&count=none&lang=en
- https://plus.google.com/share?url=http://www2.epa.gov/enforcement/report-environmental-violations
-
Could the information in this form be collected with different types of form objects? If so, which form objects would you use:
There is a text form in the violation form that says, "Specific driving/walking/boating directions (from nearest intersection, main road, waterway or supply navigational coordinates, if necessary):" This is just text that needs to be read by a human being. That means this form isn't really part of an automated process (though some parts of the process can be automated, this isn't a 100% automated process), but was made to alert a person working at the EPA to process the complaint. To fully automate the EPA violation process (maybe not a sufficient condition, but a necessary condition) this textarea section of the form could be replaced with a link to Google Maps, or a homegrown GIS solution. Prosecuting the violation would still require human intervention, but this could be used to automate the process of putting all the necessary violation information in an EPA lawyer's inbox (you could argue that the raw data could be put into a lawyer's inbox without processing it, but that could lead to delays in processing).
An actual object? The person making the complaint could just take a picture of the violation and drag it into the form or it could be added as a "share" option (an app could be made for smartphones to do this). The image would become part of an <img> structure. Take a look at:https://sites.google.com/a/flosscience.com/gis/Home/google-earth/html-primer-for-google-earth
too see how to use Google Earth for this type of application. -
Does the form use tables for the page layout?:
Yes, the structure of the violation form is
<form>
<table>
</table>
</form>
This is an extremely common layout for forms; embedding a table into the form. Forms are arranged as rows and columns, so a table makes a lot of sense for form layouts. -
Does the form use labels for its fields? If so, were the labels created using the <label> element or with text labels in in table cells?:
The search field has a label; "Search" What is interesting about this label is that it actually appears in the search field. The labels in the violation form are just text inside of <td>...</td> tags. E.g.
</tr><tr><td colspan="2" style="width:50%"><strong>Your contact information</strong></td>