HTML Elements - Part 2 : Form Introduction
Hello There Pretty Brain ...
In this tutorial, we continue with the introduction to HTML elements. We started this journey in HTML Elements 1. And now we're looking to throw a couple more elements into that pretty brain of yours.
This tutorial is part of the Build Your Own Site tutorial series. Feel free to start the series from scratch if you're interested in building your own site.
Ready ...
The next element on the list is the Image tag
This element is used to show images on the browser. It looks like this :
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
The
src attribute tells us which image the element will be showing
The alt attribute is a description of sorts for the image (you can write whatever in there).
The style attribute is used to control how the image looks. We'll be dealing with styling at a much later stage. but for now, just know that it controls how the image will look on the page.
Go ahead and replace this image with any image you want. It's as easy as changing the name of the src attribute in the image tag
The image has to be in the same folder as the index file. The document root of your site.
This tag below has the src attribute changed to rightname.gif from wrongname.gif.
<img src="rightname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
An image can be named anything, maybe your image name is
"girlfriend.png", or "hater.jpeg", or "dog.jpg", or "mom.gif". The point is HTML will take whatever size or format of image you got!! Isn't that great?!
Alright .. Okay .. Now save your index file and reload your page again :
Do you see it ?! Your picture in the browser? :) .. Awesome right :)
Okay take a break, eat a cookie, and a whole sheep carcass and come back.
Let's get back in there ...
The next element is the Form tag.
The form tag is used to show the forms you usually see on websites.
Essentially it's a container for all the other elements used as inputs for users.
This bad boy looks a little like Brad Pitt on a Sunday morning, sitting on deserted house's porch, and sipping lightly on a cup of the last nights ginger tea. I know right. all kinds of weird, soul, touchy, feely, emotions, feeling right there.
Okay ... Voila!
<form>
.
form inputs
.
</form>
In a little bit we'll be looking at all the input elements this bad boy can house. But for now; I want to go through all the attributes that Brad Pitt over here has.
We'll start with the
action attribute. The action attribute looks like this:
<form action="action_page.php">
</form>
The
action attribute defines the action performed when the user submits the form.
Note that the action value in our form above is a php file named action_page.php.
This means that when the form is submitted (don't worry we'll get to submitting forms soon) the action_page.php will be loaded and run by the server.
The action_page.php file will probably have some php code that can handle the incoming data, process it, and respond accordingly. We'll get to this a bit later in these lessons.
The next form attribute on our list is the method attribute.
This attribute is used to specify which http request method will be used to send the form data.
Okay take a deep breath and sip some tea, we're about to go just a little deeper and explain this for you.
When you send data on the server; you're making what they call an http request.
HTTP is an acronym for Hypertext Transfer Protocol. Remember HTML is short for Hypertext Markup Language, so an HTTP Request will be a method to transfer HTML data across and within servers.
So this "method" attribute helps us choose, or rather select a way to transfer our data.
In these tutorials we'll be looking at two HTTP methods, GET and POST.
Think of the two this way; GET shows the data in the url like so "/test/demo_form.php?name1=value1&name2=value2". Whilst POST hides the data, making them visible only to the scripts it's sending to.
We won't be submitting or transferring any data as yet. For now; Just be happy that you understand a bit about how we transfer data across sites and servers.
In the next tutorial, we'll look at the various form inputs ..
"Remember HTML is short for "Hypertext Markup Language", so an HTTP Request will be a method to transfer "HTML data" across and within servers."
The Village Geek
"Alright alright, alirght ..." - Matthew McConaughey
See you in the next page partner.
Cape Town, South Africa
