HTML Structure / Forms
Subtitles of the Movie
The last major structural element that I'll cover here before we move on to the next section of the tutorial and get to the basic formatting tags is the Form element. An HTML Form, as you can see here, is a section of a document containing normal content, markup and special elements called controls - these are checkboxes, radio buttons, text-fill boxes and so on and then you also usually have labels for those controls - First name, Last name, e-mail and so on. Users generally complete a form by modifying its controls, that is, entering text or selecting menu items, before submitting the form to an agent for processing. This would be a web server or a mail server. Forms make your html pages interactive by making it possible for your users to give you feedback. Now everything I've covered to this point involves you providing information to your visitors. You'll use forms on your pages whenever you need to get information from your visitors. Here's the code for the form we just saw in the browser. This form has a total of six controls: three input text controls up here - First name, Last name and e-mail in this section of the code. By the way you'll probably be using this control more than any of the others. We have two radio button controls on these two lines and then two button controls, one for submitting the form data and one for resetting the data. A control's control name is given by its named attribute and each control will have both an initial value and a current value, both of which are character strings for the text input types. In general, a control's initial value may be specified with the controller elements of value attribute. Notice that I have a value attribute for my radio buttons - Male and Female in this case are the labels. The control's current value is first set to the initial value, thereafter the control's current value may be modified through user interaction or through the use of scripts, so again in this case I don't have any initial values for my First name, Last name, e-mail, but the user can come in here and change the content here and then either reset that data or send it using the Send button. You would then need some kind of agent to handle that sent data, either through an e-mail server or through a CGI script that's on your server that would then parse that information and usually format it in a way that's going to be usable and also efficient. I'll be reviewing the details of each control including initial values and possible constraints on values imposed by the control a little bit later in the course. Here's another more complex form. This one formatted inside of a table makes it a little bit easier to read. It includes labels, radio buttons, checkboxes, push buttons, drop-down menus, as well as push-buttons for submitting the form. Here is the html code for this form. This is an example of the kind of form that I'll be going into in more detail a little bit later. We can see this is quite a bit more complex mostly because I'm formatting it inside of a table which, I think, makes these forms a little bit easier to handle. Most users don't like forms, particularly long, complex forms so I've divided this into columns, shaded the left column where the labels are to make this a little bit more palatable for your users. That will conclude this section of the tutorial reviewing the more common and important HTML structures that we'll be looking at throughout the rest of this tutorial including Document Type, Head Elements such as Titles, Meta Tags, Script and Style Tags, as well as Block and Inline Body Elements, Paragraphs, Section Headings, List Elements, Divisions, Inline Spans, Tables, and also Forms. Now most of your page formatting will be done with Cascading Style Sheets but there are some formatting tags, some basic formatting tags, that will still come in useful including paragraph versus line breaks, bold and italic, preformatted text, rules and block quotes, abbreviations and others that I'll be reviewing in the next section of the tutorial labeled Basic Formatting.
Tutorial Information
| Course: | HTML 4/5 with CSS |
| Author: | James Gonzalez |
| SKU: | 34077 |
| ISBN: | 1-935320-93-9 |
| Release Date: | 2009-12-31 |
| Duration: | 10.5 hrs / 142 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 