html
Web pages are files that are viewed using a browser. They
are written in a language called HTML. HTML is made up of a set of elements, or
tags, that are used as instructions to tell the browser what should appear on a
web page, and how it should be structured.
An HTML element looks something like this:
<html>
</html>
Anyone can view a webpage's HTML by viewing the source of that
webpage. If you right click on this page, for example, and select "View
Page Source", you can see the HTML that the browser is interpreting in
order to display the page that you see.
Although HTML is a single language maintained by a single
organization, there are many different browsers available, created and
maintained by many different organizations. Firefox, Chrome, Opera, Safari, and
Internet Explorer are all commonly used browsers. Each browser may render HTML
code a little differently, so it is always best to view your HTML files in
multiple browsers to check their appearance in each one.
CSS is commonly used alongside HTML to improve the visual
aspects of a webpage. Our CSS tutorial explains more about using CSS with HTML to separate a
website's content from its design.
HTML stands for
HyperText Markup Language.
- HTML
Document Structure
Each complete HTML element has an opening tag (example: <html>)
and a closing tag (example: </html>).
Text is placed between these two tags, which the browser reads and
follows based on the tag's instructions.
The exceptions to this rule are called "empty elements", and
do not have a closing tag. The image tag <img>, for example, does not
have a closing tag, but can be closed in the same tag by adding a slash to the
end of the tag <img />.
One of the most basic examples of a functional webpage is:
<html>
<head>
<title>My Very First Webpage</title>
</head>
<body>
How do you make milk shake?
Give it a good scare!
</body>
</html>
HTML Element
Several complete elements are used to create a basic webpage, however
the most important set of tags are <html> and </html> because these
tags tell the browser that everything between them is HTML that should be read
and interpreted. All other elements go inside of the <html> and
</html> tags.
Head Element
The head tags and </head> are important because everything inside
of these tags explain things about the document. For example, the <title>
and </title> tags enclose the title text that will identify your webpage
in the browser window, and often in search engines, etc. We will learn more
about the head tags on the next page.
Body Element
The body tags <body> and </body> are essential, as
everything between these two tags will show up as the content of your webpage.
Nesting
It is very important to open and close HTML elements in a specific
order, especially when the tags are nested, or placed inside one another. In
our example, the body tags are inside of the HTML tags. Since the body tag was
the last one opened, it must be the first one closed.
Incorrectly nested tags look like this: <html> <body>
</html> </body>
Correctly nested tags look like this: <html> <body>
</body> </html>
Whitespace
Whitespace is ignored by the
browser, so you can have as many or as few empty lines and spaces/indentations
as you want in your HTML file, and the content will be interpreted the same by
your browser.
- HTML
Form Elements
Web forms are a tool that allow users to interact with a webpage by
entering in information that is sent to the server for processing. If you spend
any time at all on the internet you will have run into forms used in many
different ways, such as signing up for or logging into an email service,
sending emails, placing orders, answering questions on a poll, and many others.
HTML forms, after they are filled out and submitted by the user, will be
sent to a page on the server that is specified in the opening form tag. That
page should contain a script (PHP, etc.) that gathers the information submitted
and handles it by printing it on the page, adding it to a database, emailing it
to someone, etc.
The basic form element looks like this:
<form action="what-to-do-next.php"
method="post"> </form>
or
<form action="what-to-do-next.php" method="get">
</form>
In the opening form tag, the "action" specifies the page that
the user's data is sent to for processing when the form is submitted. The
"method" determines how that the data is sent to that page.
"Post" sends the data behind the scenes, so the user does not see the
information that they sent. "Get" sends the data as a string at the
end of the url, which the user can see in their address bar.
These basic form elements are pretty
much useless on their own, so let's explore some of the more useful form
elements these tags will enclose.
- HTML
Form Fields
The HTML <input> tag is the most commonly used form element. It
can create text form fields, email form fields, password form fields, and
hidden form fields, to name just a few. The "type" attribute defines
which of these and other options will be used in each case.
HTML Text Form Fields
Text form fields allow a user to type characters in one line, which can
vary in length, and can accept an unlimited number of characters unless
otherwise specified.
<form action="what-to-do-next.php"
method="post">
<input type="text" size="25"
name="field-identifier" />
</form>
The result is:
The type attribute specifies the type of form field, in this case
"text". The size attribute specifies the length (size) of the form
field, and the name attribute should assign a unique identity to the field so
that the field can be referenced later when the data is processed.
Using the maxlength attribute with a numerical value will specify the
maximum number of characters that can be entered into the form field. The value
attribute defines characters that will appear in the form field by default, but
can be over-written by the visitor.
HTML Password Form Fields
Password form fields are identical to text form fields with one major
exception. Any characters entered into a password form field will show up in
the browser as asterisks (*) or some kind of dot. While this can keep people
from reading a password over the user's shoulder, it will not encrypt the
password in any way.
<form action="what-to-do-next.php"
method="post">
<input type="password" size="25"
name="password" />
</form>
The result is:
As you can see, the same attributes can be used, with the exception of
the type, which now has a value of "password", and the name, which
should be unique.
Hidden HTML Form Fields
Hidden form fields are never visible on a webpage. They are used
behind-the-scenes to store data that is not entered by the user, but needs
submitted to the server along with the rest of the form data.
The "type" attribute should be set to "hidden" and
the name attribute should assign a unique identity to the field so that the
field can be referenced later when the data is processed. The "value"
attribute should contain the data that is being stored in order to be passed on
to the server when the form is submitted.
<form action="what-to-do-next.php"
method="post">
<input type="hidden" name="hidden-data"
value="No One Will Ever See Me On the Webpage!" />
</form>
Data List
The <datalist> element can be filled with pre-defined
<option> tags that will show a dropdown of auto-complete options in an
<input> form field. For Example:
<form action="what-to-do-next.php"
method="post">
What is your favorite breed of dog? <input list="dog-breeds">
<datalist id="dog-breeds">
<option value="Shiba Inu">
<option value="Jack Russel Terrier">
<option value="Shiba Inu">
<option value="Puppy">
<option value="Labrador">
<option value="German Shepherd">
<option value="Shiba Inu">
</datalist>
</form>
The result is:
What is your favorite breed of dog?
HTML Output Element
The </output> element is a form
field that is used to display results (ouput) instead of accepting input. It
can be used to show calculations and other results, especially within existing
form.
- HTML
Form Buttons
Buttons are essential to HTML forms, because without them the user has
no way of indicating that they have finished filling out the form and want to
submit it for processing. There are two main types of form buttons: Submit
& Reset
The input tag <input> is used to create both submit and reset
buttons using a type of either "submit" or button".
The Submit Button
<form action="what-to-do-next.php"
method="post">
<input type="submit" name="send" value="Send
For Processing!" />
</form>
The result is:
Of the three attributes in our example, only two are required. The
"type" is self-explanatory and the "value" defines the text
that shows up on the button. The name is necessary if you will need to later
identify which button was clicked, or at times for CSS, etc.
The Reset Button
The reset button will return all fields in the form to their default
values when it is clicked.
<form
action="what-to-do-next.php" method="post">
<input type="reset" value="Reset" />
</form>
- HTML
Check Boxes & Radio Buttons
Check boxes allow multiple selections at a time and radio buttons allow
only a single selection at a time, but both use the <input> tag to create
each box or button.
HTML Check Boxes
Checkboxes are intended for choosing "Yes" or "No"
in response to a question, or for allowing multiple selections in response to a
choice given.
<form action="" method="post">
<input type="checkbox" name="favorite1"
value="chocolate" /> Chocolate
<input type="checkbox" name="favorite2"
value="vanilla" /> Vanilla
<input type="checkbox" name="favorite3"
value="mint" /> Mint
</form>
The result is:
Chocolate
Vanilla
Mint
Because more than one checkbox can be selected at a time, the name of
each checkboxes must be unique so that each one can be identified separately.
The values should also be unique in order to represent the value of each
option.
HTML Radio Buttons
Radio buttons are intended to allow a single selection among multiple
options in response to a single choice given.
What has four legs one head but only one foot?
<form action="" method="post">
<input type="radio" name="joke"
value="bed" /> A Bed
<input type="radio" name="joke"
value="clock" /> A Clock
<input type="radio" name="joke"
value="snake" /> A Snake
</form>
The result is:
What has four legs
one head but only one foot?
A Bed
A Clock
A Snake
The name of each group of radio buttons needs to be identical so that
they can be identified as a group. The value of each radio button must be
unique so that the selected value can be identified later.
Tip
If you want a checkbox or radio button to be checked by default, instead
of all options being blank, you can add a single word (checked) to the end of
the element.
<form action="" method="post">
<input type="checkbox" name="tip1"
value="1" checked /> Default Option
<input type="checkbox" name="tip2"
value="2" /> Other Option
<input type="radio" name="tip3"
value="3" checked /> Default Option
<input type="radio" name="tip3" value="4"
/> Other Option
</form>
The result is:
Default
Option
Other Option
Default Option
Other Option
- HTML
Check Boxes & Radio Buttons
Check boxes allow multiple selections at a time and radio buttons allow
only a single selection at a time, but both use the <input> tag to create
each box or button.
HTML Check Boxes
Checkboxes are intended for choosing "Yes" or "No"
in response to a question, or for allowing multiple selections in response to a
choice given.
<form action="" method="post">
<input type="checkbox" name="favorite1"
value="chocolate" /> Chocolate
<input type="checkbox" name="favorite2"
value="vanilla" /> Vanilla
<input type="checkbox" name="favorite3"
value="mint" /> Mint
</form>
The result is:
Chocolate
Vanilla
Mint
Because more than one checkbox can be selected at a time, the name of
each checkboxes must be unique so that each one can be identified separately.
The values should also be unique in order to represent the value of each
option.
HTML Radio Buttons
Radio buttons are intended to allow a single selection among multiple
options in response to a single choice given.
What has four legs one head but only one foot?
<form action="" method="post">
<input type="radio" name="joke"
value="bed" /> A Bed
<input type="radio" name="joke"
value="clock" /> A Clock
<input type="radio" name="joke"
value="snake" /> A Snake
</form>
The result is:
What has four legs
one head but only one foot?
A Bed
A Clock
A Snake
The name of each group of radio buttons needs to be identical so that
they can be identified as a group. The value of each radio button must be
unique so that the selected value can be identified later.
Tip
If you want a checkbox or radio button to be checked by default, instead
of all options being blank, you can add a single word (checked) to the end of
the element.
<form action="" method="post">
<input type="checkbox" name="tip1"
value="1" checked /> Default Option
<input type="checkbox" name="tip2"
value="2" /> Other Option
<input type="radio" name="tip3"
value="3" checked /> Default Option
<input type="radio" name="tip3"
value="4" /> Other Option
</form>
The result is:
Default
Option
Other Option
Default Option
Other Option
- HTML
Textareas
Textareas are similar to text form fields, but span several lines
instead of just one, and allow paragraphs to be defined.
Textareas are a complete element with an opening tag and a closing tag.
If you want text to appear in the textarea by default, that text should be
placed between the opening and closing tags.
<form action="what-to-do-next.php"
method="post">
<textarea></textarea>
<textarea>When is a car not a car? When it turns into a garage!</textarea>
</form>
The results of these two textareas are:
Our examples did not include the name attribute. If you plan to collect
data from a textarea after a form is submitted, a unique name is necessary.
Two attributes unique to textareas are "rows" and
"cols", both of which accept numeric values indicating the size of
the textarea. An example is:
<form action="what-to-do-next.php"
method="post">
<textarea name="user-comment" rows="7"
cols="70"></textarea>
</form>
The result is:
- HTML
Dropdown Menus
Dropdown menus, also called select lists, are similar to both radio
buttons and checkboxes, in that they allow a single selection at a time or
multiple selections at a time from a pre-defined list of options. They take up
less vertical space than multiple radio buttons and check boxes, but not all
options are immediately visible.
The <select> and </select> tags are used to create a
selection list. Each option inside the menu is defined by the <option>
and </option> tags.
<form action="what-to-do-next.php"
method="post">
What runs but never walks?
<select>
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>
The result is:
What runs but never
walks?
Menu Attributes
As with other form elements, the name attribute is necessary in order to
identify the selection when the form is submitted.
The size attribute allows for more than one option to be initially
displayed by adjusting the dropdown menu so that it is shown as a select list.
The "multiple" attribute can allow multiple selections at a
time.
<form action="what-to-do-next.php"
method="post">
What runs but never walks?
<select name="joke-answer" multiple="yes"
size="3">
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>
The result is:
What runs but never
walks?
Since multiple="yes" in our above example, holding down the
shift key while selecting each option will allow more than one option to be
selected.
You can use the <optgroup> element to group together options that
are related to one another, to make them easier to go through:
<form action="what-to-do-next.php"
method="post">
What runs but never walks?
<select name="joke-answer" multiple="yes"
size="3">
<optgroup label="Animals">
<option>Snails</option>
<option>Cheetahs</option>
</optgroup>
<optgroup label="Nature">
<option>Light</option>
<option>Water</option>
<option>Clouds</option>
</optgroup>
</select>
</form>
The result is:
What runs but never walks?
- HTML
Upload Fields
You have probably used file upload fields in the past to upload photos
or other files to the web, and now you get to learn how to create your own file
upload fields. The <input> tag is used, with the type set to
"file" in order to create this field.
One important thing to remember about using the upload field is that the
form method must be set to "post" and not "get" since a
file must be sent behind-the-scenes (it cannot be sent in the URL).
Also, when using this field, the encryption type must be specified in
the opening form tag: enctype="multipart/form-data".
<form action="what-to-do-next.php" method="post"
enctype="multipart/form-data">
<input type="file" name="my-file"
size="50" maxlength="25" /> <br />
<input type="submit" name="upload"
value="Upload!" />
</form>
The result, including the "Upload!" button, is:
You should already be familiar with the "name" attribute,
which is used to identify the contents of the field when the form is submitted.
The "size" attribute should also be familiar, as it controls the
visible size/length of the field on the webpage. "maxlength" controls
(limits) the length of the filename that can be uploaded. The name attribute is
important, but the other two are optional.
If you want to limit the size of the file that can be uploaded, a hidden
form field can be added to the form with a value that is the file size limit
that you prefer (measured in kilobytes).
<input type="hidden" name="MAX_FILE_SIZE" value="500"
/>
- HTML
Form Usability
There are a number of newer HTML elements that are primarily useful for
usability and styling.
The <fieldset> element groups related elements in forms.
The <legend> element creates captions for groups of form elements
(grouped with the <fieldset> element).
The <label> element labels form elements, or provides captions,
which is especially useful when using CSS to style forms.
Example:
<form action="what-to-do-next.php"
method="post">
<fieldset>
<legend>Activities>/legend>
<label>Favorite Sport</label>
<input type="text" name="favsport">
<label>Favorite Craft</label>
<input type="text" name="favcraft">
<input type="submit" value="Submit">
</fieldset>
</form>
Result:
ActivitiesFavorite Sport Favorite Craft
Comments
Post a Comment