Form

Web forms can collect anything from name and e-mail address and a
message, to images and files from your
computer. For instance, when you log in to your web-based e-mail account
like Gmail, you’re filling out a form with your username and your password.
Here’s a look at how you can use HTML to create web forms.


Understanding web forms
When you fill out a form, the information is sent to the web server. What
exactly the web server does with the information is up to the programs
running on the server. For example, when you fill out the contact form on
my website, the server e-mails the information e-mailed to me, but when you
fill out a form to find hotel rooms on a hotel’s website, the server looks in its
database for matching rooms based on the dates that you fill out. In Book VI,
you work with server-side programs to process web forms. For now, focus
on the forms themselves.
In HTML terms, forms are created with the <form> element. Forms open
with <form> and close with </form>, as in this example:


<form action=”#”>
<input type=”text” name=”emailaddress”>
<input type=”submit” name=”submit”>
</form>


You see how to create your own form in the next section.
Looking at form elements
There are many ways to get input through a form, each with its own specific
name or type of input. The code example in the preceding section includes
two input types: a text type and a submit type. The text type creates
a box where the users can enter information. The submit type creates a
button that users use to send the information to the server.
There are many other types of input elements in a form, including these:
✦ Drop-down or select: Creates a drop-down box with multiple choices
from which the user can pick one.
✦ Check boxes: Creates one or more boxes that the user can select.
✦ Radio buttons: Creates one or more small buttons, of which the user
can select only one.
✦ Others: There are other specialty types — including password, text
area, and file — that enable you to gather other types of input from the
user.

You’ve already seen the basic form elements, but there’s more to creating
forms than just adding elements. Forms need to be integrated with other
HTML in order to display like you want them to. Beyond that, as you see
later in the chapter, you can also style forms with Cascading Style Sheets
(CSS). But for now, work on building a simple form.


The HTML used to create this form is shown here:

<!doctype html>
<html>
<head>
<title>A Basic Form</title>
</head>
<body>
<h1>A Basic Form</h1>
<hr>
<form action=”#”>
<fieldset>
<legend>Form Information</legend>
<div>
<label for=”username”>Name:</label>
<input id=”username” type=”text” name=”username”>
</div>
<div>
<label for=”email”>E-mail Address:</label>
<input id=”email” type=”text” name=”email”>
</div>
</fieldset>
</form>
</body>
</html>