HTML Forms¶
In this lab we will learn to create HTML forms that allow us to gather different types of input from users and send the users information to a file or a database.
Form Structure¶
Form all have the following structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
The action attribute is the place where the form data is sent. Usually HTML forms send their data via an HTTP POST function. The submit input just before the form close tag is the button that the user presses. All the rest of the form consists of labels and inputs in pairs. Sometimes the labels and input pairs are on the same line, and sometimes they are each on their own line. In some inputs such as checkboxes and radio button the label occurs before the input. You can use CSS to determine how your form is styled.
Here are the different types of input fields:
- Input fields - a single line of input
- Selection lists - where a user must select from one or more item of a fixed list
- Text Areas - larger blocks of multi-line text input area
- Checkboxes - check boxes where a user can check many items in a list
- Radio Buttons - a variation of selection lists were all values are visible
Input Fields¶
1 2 3 4 5 |
|
Selection List¶
1 2 3 4 5 6 7 |
|
Textarea¶
1 2 3 4 |
|
Checkboxes¶
We use checkboxes when we have a list of items and each item can have a true or a false value.
1 2 3 4 5 6 7 8 9 10 |
|
What programming languages do you know? (check all that apply)
Radio Buttons¶
Radio buttons are very similar to the selection list in that only one item is selected at a time.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|