Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
We have a little div for our results, and it just has these result fields in it. And you'll notice that it has an output element for each of these results. So let's go ahead and load this in a browser. I'll open this with Firefox, and we have our couple of little number fields here. And I'm just going to put in a number, and you'll notice that it's immediately starting to calculate. And as I type, it's calculating. And this is because we're using this oninput event here in the form.
Now, it's worth noting at this point that oninput, as well as the output element, are not supported yet in the current versions of Microsoft Internet Explorer, which is IE9 and before. It is implemented in IE10, so if you have IE10 by the time you're seeing this, it ought to work. It's currently implemented in all the other browsers that I have tested, and it's this oninput event that allows us to just type and have the results immediately show up.
And so it's calling calc, and calc is this little function here. Very simple. It simply gets the value of a and b and it does a little math for sum, product, diff, quotient, and remainder. And it loads the values of those, and those are these output elements, so you have ids sum, diff, product, quotient, and remainder. The for attribute associates it with these other IDs--a and b--so that the browser knows that these are associated.
Now when I look at how this is implemented, there is a lot of things about it that don't quite make sense to me. So either it will continue to morph and evolve and change as it gets implemented or it won't. For one thing, I found that it's not restricted to numeric output, and yet the spec says that it is used for the output of calculations. And I'm not really seeing the value of this for attribute. It doesn't seem to do anything, at least not in the ways that I've seen it demonstrated on the Internet and I haven't seen a lot of demonstrations of it.
So this is a new element. The implementations I've seen don't really limit it to numeric output. It looks like it could be convenient for a lot of different uses, but I hate to recommend that as we really don't know what the browsers are going to do with it. At this point, I'm considering it semantically tied to the results of calculations, but we'll see where it goes in the future.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.