CIS89A - 9. Gathering information

From WikiEducator
Jump to: navigation, search
Udine loggia Leonello

Data collection - Forms

Collecting information can be as simple as requesting comments from readers, or as complex as a final exam for an upper division college course. Forms provide a broad range of functionality to validate and format input information. Forms can guide the user through complex information gathering processes and make the information ready for further processing by other applications.

Learning outcomes

  • understand the concept and uses of Forms in web pages
  • create a basic form
  • validate form content
  • make forms more user-friendly
  • style forms for layout
  • understand the concept and uses of JavaScript and HTML5 API in web pages


  • text, radio button, data area, checkbox, submit, menu, hidden controls, file upload, validate, pattern, action, required fields, JavaScript, API, objects, methods, event handler, cookies, storage, offline, geolocation, canvas

Reading guide

  • What types of input can be processed in a form?
  • What validation can be applied to form input?
  • How can information entered in a form be processed?
  • Why would you want to include client-side validation in a form?
  • What are the new functions that are introduced in HTML5? Why are these important to web page developers?


Assignment file name and required elements

  • cis89forms1 - form, input, type, name, value, placeholder, button, checkbox, datetime, email, radio, url, maxlength, textarea, size, step, color, option, hidden, file, pattern, action, table, tabindex, label, meter, style, fieldset, script * input form, text box, checkbox, pull down menus, prefilled entries, color selector, gauge submit button

  1. Review the Keywords and Study questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Read Chapter 12. Creating Forms, Chapter 13. Formatting and Styling Forms, Chapter 14. Beyond Static HTML in the textbook.

  3. Test drive - Google form - Google Drive is very convenient for working collaboratively and sharing your work. The Form creator can be used to collect all sorts of data. Some teachers are even using Google Forms for quizzes and exams.
    Create a Google Form to gather multiple kinds of information. Use all the different Google Forms functions appropriately. Note that Google automatically sets up a spreadsheet to capture responses. Post a link to your form to the Google Form discussion.
    Fill in the Forms posted by 3-5 others and submit. Check your own form to view the results

  4. Creating Forms - In a new Thimble file, use the assignment elements and tags to add a form to edit input information. Create a form that demonstrates assignment requirements. Use all the elements and tags within your page. Publish your HTML file.
  5. action=mailto - Once you collect information in your form, you need to do something with it. Normally this requires interaction with a program. One alternative is to have the contents of your form emailed to yourself. NOTE this doesn't always work. It depends... on your users' browsers and your email reader. However, if it works, it is an easy way to understand how information input into a form can be passed along for processing. See Mailto Forms HTML Forms Tutorial, and also When Mailto Forms Don't Work. If it works - Great! If not, you should get the idea about how this could work.
  6. Submit the full name of your assignment file to the Creating Forms assignment.
  7. Post a link to your assignment file and any comments or questions about the assignment to the Creating Forms discussion.

  8. Beyond static HTML - There are a number of new features that have been added with HTML5. Pick one or more and add examples for the feature you select to your page. This should be visible in the page display so you may need to add additional information to highlight this feature. Be sure to comment your code. Also post a brief description of your HTML5 feature to the Beyond static HTML discussion.

  9. Search Engine Optimization (SEO) - Being "found" and listed in search results is an important part of publicizing your site. The elements in head section of the page is used for this. Find an article that gives a good overview or specific advice about using these elements effectively. Poat a brief summary and a link to the article in the Search Engine Optimization discussion.

  10. Internet of Things (IoT) - The next big thing is the Internet of Things. The articles listed in the Media section provide a great overview with lots of interesting examples in a broad range of categories. Take a look. What do you think? What is one example that is a surprise but you would like to see? Post the name and ONE sentence about your selection to the Internet of Things discussion. Conclude your post with a question. Reply to 2 others and concluded your replies with questions.

  11. Success Skills - Solve it - There are many tools available on the web to help with problem solving skills development and practice. Critical Thinking, Problem Solving and Decision Making are the primary focus of the articles provided. Review 2-3 articles from Success skills Solve it. Find another similar article that your would recommend be added to the list. Post a link and a brief summary of 1 to the Success Skills - Solve it discussion.

Icon multimedia.gif


  • Wendy Willard - Chapter 12. Creating Forms, Chapter 13. Formatting and Styling Forms
  • Wendy Willard - Chapter 14. Beyond Static HTML
  • HTML Dog HTML Beginner Tutorial
  • Visual Quickstart - 16. Forms

HTML Tutorial for Beginners: 19 Creating a Submit Button for Forms - YouTube
video explains how to create a submit button for html forms. It applies to Module 9 and is 3 minutes and 52 seconds long.
<p class="diigo-tags"><strong>Tags:</...
Making Forms Fabulous with HTML5 - HTML5 Rocks
HTML5 introduces a number of new input types. These new input types give hints to the browser about what type of keyboard layout to display for on-screen keyboards. Mobile browsers are relatively c...
HTML Forms by Ricardo Beltran on Prezi
Chances are, you have or will interact with a form this week.Whenever you want to collect information from a visitor, you will need a form. HTML forms give you a set of elements to collect data fro...
How to use Google Forms - Computer - Docs editors Help
use Google Forms to create online surveys and quizzes and send them to other people. Set up a new form or quiz, Edit and format a form or quiz, Send your form for people to fill out
Forms | HTML Dog
Forms are used to collect data inputted by a user. They can be used as an interface for a web application, for example, or to send data across the web. They tend to be used in conjunction with a pr...
Making Forms Fabulous with HTML5 - HTML5 Rocks
HTML5 introduces a number of new input types. These new input types give hints to the browser about what type of keyboard layout to display for on-screen keyboards.
<p class="d...
How To Create HTML Form in Notepad in Just 5 Minutes (Step by Step) Easy HTML Tutorials - YouTube
Create HTML Form in Notepad in Just 5 Minutes (Step by Step) Easy HTML Tutorials. This form can be used as any type of form you like, such as contact ...
<p class="diigo-tags&qu...

Internet/computer tricks

Internet of Things


2016.3 2540 . 2018.3 5131