1. 22-3375 Web Design I
FORMS

2. Student Presentations
Present your initial ideas for your portfolio
Walk us through the flow (homepage, detail, about)
What types of work will you be showing?

4. What is a form?
Forms provide an interface allowing users to
interact in some way with your site.
Forms collect input via controls, such as buttons,
text fields, or scrolling menus. Controls are placed
on the page using special elements in the markup.
These elements are merely an interface for
collecting information and do not actually possess
the data.
from Web Design in a Nutshell by Jennifer Niederst Robbins

7. Form Types

8. There are three basic types
of form controls, for:
Adding Text
Making Choices
Submitting Forms
Uploading Files

9. Adding Text
Text Input
Password Input
Text Area

10. Making Choices
Radio Buttons
Checkboxes
Drop-downs

11. Submitting Forms
Submit Buttons
Image Buttons
Buttons

12. Uploading Files
File Upload

13. Form Syntax

14. <form>
</form>
The <form> tag is used to create an HTML form
for user input.

15. <form>
<input>
</form>
<input> elements are used within a <form>
element to declare input controls that allow users
to input data.
<input> is an inline, self-closing tag.
An input field can vary in many ways, depending
on the type attribute.

16. <form>
<input type=”text” name=”username”>
</form>
The <input> tag should always have, at a
minimum, a type and name attribute.
The “type” attribute controls the form type (text,
radio, dropdown, etc), and the “name” attribute is
how you identify the data when it is sent to the
server.

17. Input Attributes: type
You create the different type of form
elements through the “type” attribute.
These include:
text, password, radio, checkbox, select,
file, submit, image, and hidden.

18. Input Attributes: type
For example:
<input type=”text”>
would create this:

19. Input Attributes: name
You then need to add a name so the data
can be identified by the server:
<input type=”text” name=”username”>

20. Class Exercise
Create a form for our tutorial:
Text input (name)
Dropdown (favorite color)
Radio (human or robot)
Text area (comment)
Submit

21. Adding Text: Examples
Text Input

22. Adding Text: Examples
Text Input You can add additional attributes to your text
inputs to control their width (size, in characters),
and maxlength (in characthers). You can also
control the width of the input field in your css
(in pixels, % or ems).

23. Adding Text: Examples
Text Area Text areas are a bit different: they are not
contained in an <input> tag, and they require a
closing tag (<textarea></textarea>.

24. Making Choices: Checkboxes
Checkboxes With checkboxes and radio buttons, the
“name” attribute creates the grouping
between the options. The “value” attribute
tells the server which option the user selected.
add a “checked” value if you want an option to
be preselected.

25. Making Choices: Radio Buttons
Radio Buttons Use a radio button when the user can only
select one option. Like checkboxes, add a
“checked” value if you want an option to be
preselected.

26. Making Choices: Dropdowns
Drop-downs Dropdowns are made up of two opening and
closing tags: <select> and <option>. Whatever
option appears at the top is the default, unless
you add a “selected=”selected” attribute to
the option tag.

27. Uploading Files
File Upload

28. Submitting Forms: Submit
Submit A simple <input type=”submit”> is the easiest
way to add a submit button to your form. You
can hook onto this element in css by using the
pseudo selector input[type=submit].

29. Submitting Forms: Image
Image <input type=”image”> allows you to replace
the standard submit button with an image of a
submit button. This method is not
recommended.

30. Submitting Forms: Button
Button Inside a <button> element you can put
content, like text or images. This is the
difference between this element and buttons
created with the <input> element.

31. EXAMPLE

32. Form Labels

33. <form>
Your Name<br>
<input type=”text” name=”name”><br>
Your Email<br>
<input type=”text” name=”email”><br>
<input type=”submit”>
</form>
There are a few ways to add labels to your form
elements. The simplest way is to just add
unmarked up text with <br> elements.

34. <label for=”name”>
Your Name
<label><br>
<input type=”text” name=”name” id=”name”>
Another way is to use the “label” element. It can
wrap both the label and input, or stand outside of
the input. You can style the label element in css.
If you use this method, you should add a “for”
attribute to the label that matches the id of the
form element (not required, but good for
accessibility reasons).

35. <label>
Your Name<br>
<input type=”text” name=”name”>
<label>
You can also wrap the entire element in the
label tag. Both used of the label tag give your
radio and checkboxes the added feature of
making the entire field clickable.

36. Form Design