If you have followed along so far, you should be having a lot of fun? We covered the basics of how the page is structured, threw in Favicons for fun, added links and images, and then gave it structure with lists and tables.
So far, though, the only thing that has given your pages any difference from text on a peace of paper has been links, right? Your readers haven't had much to do while they were on your site.
To give them power is in the realm of JavaScript and other scripting languages. The main way that HTML gives your visitors this power of interacting with your website as a program is through forms.
Forms sound rather boring, but in the world of the World Wide Web, forms can let you do a lot of things, and not really appear to be forms.
The problem with forms is that you need scripts to deal with them. It's not tricky, it's just outside the capability of HTML. So I am going to get you started here, but we will visit forms in great detail later when we are working with php.
Form input types:
| Name | The mark-up | How it looks |
|---|---|---|
| Text *NOTE* | <input type="text" name="x" value="Text..." /> | |
| Button | <input type="button" name="x" value="button" /> | |
| Checkbox | <input type="checkbox" name="x" /> | |
| File | <input type="file" name="x" /> | |
| Password | <input type="password" name="x" /> | |
| Radio | <input type="radio" name="x" /> | |
| Reset | <input type="reset" name="x" value="Reset the Form" /> | |
| Submit | <input type="text" name="x" value="Text..." /> |
Some info:
*NOTE* If you don't remember all the others for now, don't worry to much, but try to remember this one. It is the one you are going to use most often.
The 'file' attribute is used when you want your users to load files, such as a photo sharing site like Flickr might have to let users upload their images to the website.
There is another one called 'hidden'. Don't worry about it...it doesn't mean much to us without scripting, so we'll leave it out for now.
Type in the password box...you can see what happens.
The last two are basically for dealing with the form. The Reset button is a courtesy to your users, especially if you have lots of radio or check box buttons. If they messed up, they can 'reset' the form and start over. The 'Submit' button tells the browser that the form is done and can now be sent off.
There is a totally different one. All the above tags fall as attributes of the 'input' tag. But there is one that has it's own tag, and that is 'textarea'
| Name | The mark-up | How it looks |
|---|---|---|
| Textarea | <textarea name="x">Type here</textarea> |
The 'textarea' tag is written totally different. If you look at the code above you will see that two major differences. The one is that the input tags are not closed. Instead we just add a little '/' backslash to the end of them (have a look). The other is that instead of a 'value' attribute, we add the text between the opening and closing tags.
That will be the topic of the next post...the actual structure of html. Just remember it for now.
Okay, lets talk about a couple other aspects. When we make a form, we are going to enclose it in <form> tags. These 'form' tags allow you to say what you want to do with the form.
Now, forms can be really useful, but for now lets just cover the basics.
In the 'form' tag at the top you have two attributes that are typically used with Forms. The first is the 'action' attribute. The action is simply were will we go when the form is submitted. You may simply re-load the current page, but a script in the page detects that there is a variable and accepts this information and does with it whatever it was told to. It may be emailed back to us, it may send them a confirmation email. It may be an automated ordering system. There are many possibilities. A blog post or post on a social media site. Upload pictures. So much of what you do on the web today is done through forms and the scripts behind them.
Aside from the 'action' attribute, there is another that is typically found in the opening 'form' tag, the method. Now again, this isn't going to mean that much to you yet, but will mean a lot when we start scripting. Stick with these tutorials and you will get the power.
Alright, we are almost done with this html tutorial The next section will cover the way the mark up works and include a few new things. After that we will move on to CSS, where we will keep learning some aspects of html as well.
