CIS89A - 9. Gathering information

File:Udine loggia Leonello 400 x 300.jpg

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


Keywords

• 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?

Assignments

Coding project title 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 Reading guide 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 several different Google Forms question types appropriately. Note that Google automatically sets up a spreadsheet to capture responses. Post the link to your "Share" 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 project, 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 coding project. Publish a link to your project.
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 link to your coding project to the Creating Forms assignment.
7. Post a link to your coding project and any comments or questions about the assignment to the Creating Forms discussion.
   
   
8. 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. More than just Google, there are Baidu, Bing, and Yahoo! and others. Find an article that gives a good overview or specific advice about using these elements effectively. Post a brief summary and a link to the article in the Search Engine Optimization discussion.
   
   
9. 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.
   
   
10. 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.
    
    
11. Phishing - Do you think you know an email scam when you see one? Take this quiz and see if you can tell the real corporate emails to customers from the phishing scams. I got 7 out of 10 right. I missed 1 scam but I would have ignored two real requests from companies I do business with.
    http://www.sonicwall.com/furl/phishing/
    
    
12. eCommerce - Some of the "best" examples of web site design are the sites that sell stuff. Find a site that sells products or services online. Think about why the customer visits this site. How does the site design help the customer buy from the site? Post a link to a commercial web site with a brief description of what makes this a successful (or not) web design to the eCommerce site design discussion. Keep the description short - 2-3 sentences.

Media

• 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

FORMS

Web forms — Working with user data - Learn web development | MDN

Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.essential aspects of Web f...

GET vs POST - Difference and Comparison | Diffen

HTTP POST requests supply additional data from the client (browser) to the server in the message body. In contrast, GET requests include all required data in the URL. Forms in HTML can use either m...

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. how to build and grow your business, find niche opportunities, market your...

Styling HTML forms - Learn web development | MDN

use CSS with HTML forms to make them more beautiful. Surprisingly, this can be a little bit tricky. For historical and technical reasons, form widgets don't mesh well with CSS. Because of those...

Internet/computer tricks

• Text Fixer - tutorials, code creator
• 27 People Share The One Cool Internet Or Computer Trick They Know - these suggestions are not something you are going to use everyday, but it is interesting that you can do this

Internet of Things

• Internet of Things - such as environmental monitoring
• The Internet of Things Will Thrive by 2025 - Many experts say the rise of embedded and wearable computing will bring the next revolution in digital technology.
• Internet of Things - Examples - great overview with lots of interesting examples in a broad range of categories.
• The Internet of Things - More objects are becoming embedded with sensors and gaining the ability to communicate. The resulting information networks promise to create new business models, improve business processes, and reduce costs and risks.
• The World's Top 10 Most Innovative Companies In The Internet Of Things - range of companies and products from tech giants Intel to consumer Nest
• Internet of Things - machines and everyday objects are connected via the Internet. Within the IoT, devices are controlled and monitored remotely and usually wirelessly. IDC predicts that the IoT will include 212 billion things globally by the end of 2020.

HTML5

HTML5 - New Tags (Elements)

The following tags (elements) have been introduced in HTML5 − <audio> Defines an audio file.<canvas> This is used for rendering dynamic bitmap graphics on the fly, such as graphs or...

HTML5 - Tags Reference

A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated...

W3schools Html5 Tutorial​ - XpCourse

w3schools html5 tutorial​ provides a comprehensive and comprehensive pathway for students to see progress after the end of each module. With a team of extremely dedicated and quality lecturers, <...

Responsive Web Design Viewport

"HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.You should include the following <meta> viewport element in all your web page...

• New Features in HTML5
• W3 HTML5 differences - official W3 document but very hard to read
• Beautiful HTML5 Websites - links to examples
• What Beautiful HTML Code Looks Like - looks at each line of HTML code on the sample web page, and describes the good points
• 5 Ravishing Must Know HTML5 Features - in addition to this article, the Web Developer Juice site has lots of ideas and suggestions for developers
• HTML5Pattern is a source of regularly used Input-Patterns.

SEARCH ENGINE OPTIMIZATION (SEO)

SEO checklist – Squarespace Help Center

"built for clean indexing by search engines, but the content you add to your site and how you present it plays a big role in how well people can find you. As you prepare to publish your site,...

Ubersuggest: Free Keyword Research Tool - Neil Patel

<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtaylor/seo' rel='tag'>seo&lt...

Find Your Campaign Keywords with Keyword Planner - Google Ads

"Choose the right keywordsThe right keywords can get your ad in front of the right customers, and Google Ads Keyword Planner is here to help. "
<p class="diigo-tags&qu...

6 common SEO mistakes and how to avoid them • Yoast

"With holistic SEO, you don’t just focus on the content or technical aspects of your site but also work on user experience (UX). A factor that’s more important than ever when it comes to S...

2016.3 2540 . 2018.3 5131