One way communication:
So far we have created HTML5 that the server sends to the client for display in a browser
Two way communication: How can the client send information back to the server?
Supplying name, address, and payment information for an online purchase
Registering for an online site/service
A form is used to collect data from the client for transmission
Form gathers all the information and submits it as a single "bundle" of information
Different types of form fields exist to permit collecting different types of information
When a form is submitted, it must be processed by the server using a program called a server-side script
The program processes the information and replies in a fashion dictated by its programming
Form Element
All items in the form must be contained in a form element
There is only one set of <form> tags containing all the fields rather than a form tag around each item
Required form attributes:
action -specifies the URL that is to receive the transmitted information method--specified the method to be used for transferring the information
method - specifies the method to be used for transferring the information
For the attribute method, we have two possibilities:
GET
Sends form data as a part of the URL
It is added as a variable/value pair at the end of the URL after the question mark: https://www.google.com/search?q=dogs
Multiple variable/value pairs are separated by the ampersand symbol in the URL: https://www.google.com/search?q=dogs&gws_rd=ssl
For the attribute method, we have two possibilities:
POST
Sends the data to the server in a manner that is not visible to the end user
The information is contained in the page header (meta-data that is sent to the server along with the request)
Still not secure, but information is hidden from the casual observer, or 'shoulder-surfer'
When should we use GET?
When we would like the user to be able to bookmark the link so that they can return to that exact page without submitting the form. When the data is not sensitive data
When should we use POST?
When the data is sensitive data (social security number, username/password, credit card information, etc)
<body>
</body>
The <input> element is used ot create (most of) the fields in a form
The <input> element is an inline, standalone element
Two required attributes:
name - Needed to reference the field when the form has been submitted
type - Identifies which kind of input field is being created (textbox, password, checkbox, radio button, etc)
By default there is no label to direct users on what to input
We must add the descriptive text to instruct users:
First Name:
Attributes:
value - assigns a value to the field
If the form is submitted without being changed by the end user, this value will be submitted
placeholder - this shows text in the field as a prompt. Once the user begins typing in the field, the placeholder disappears
size – specifies the size of the box, in number of characters
maxlength – specifies the maximum number of characters
disabled – specifies if the input element is visible, but the end user is not allowed to fill out the box
autofocus – specifies the element on the page that should receive focus when the form loads
required – specifies that the field must be completed before the form can be submitted
The password field works the same as the textbox field and can utilize the same attributes
The difference between the two is that the password field masks the user input
(I don't know why my application insists on adding the ="" to the required attribute. It isn't necessary)
The checkbox allows a user to select 0, 1, or many options
With a checkbox, the name/value pair is only submitted if the end user selects the checkbox
Attribute:
checked – this will ensure that the box is checked by default
Sauce
Pepperoni
Anchovies
The value for for="" in the <label> element must match the value for id="" in the <input> element
Now, the checkbox will be selected when either the box itself or its label is clicked
Red
Green
Blue
Radio buttons work in the same manner as checkboxes with one major difference: With radio buttons you can only select one option out of a grouping
In order to group, the attribute name must be the same for each option in the group
The submit button allows the user to submit the field for processing. The location is determined by the attribute action in the <form> tag
The reset button allows the user to clear out any user input and reset the form to the default values assigned for each field
Submit & Reset have one optional attribute: value
This will modify the display text in the button(s)
The <textarea> element allows for the creation of a multiline text area
If you want a default value associated with the <textarea>, use the value attribute
cols - width of the element (in characters, not pixels)
maxlength - maximum number of characters
rows - number of rows displayed
readonly - user cannot change the contents
Biography
Here's a little JavaScript that shows how a <textarea> works
What this does is tell the browser to output the value of the text area each time the user enters something
A select list is a drop-down (scrollable) list of predefined options that a user can select from
Each list option is created using the <option>...</option> element
The text between the opening and closing of the option tag is the text that is visible to the end user
The value associated with the selected option is what is submitted
Attributes for <select>
disabled - The list is visible, but the user cannot select from it
size - The number of visible options
multiple - User can select more than one option
Attribute for the <option> element
selected - Specified element is selected when the page loads (user can change)
Chapter 7 - Forms
1. What attribute do we use to tell the browser how a form should be submitted?
A. action
B. post
C. method
D. get
2. (T/F) <input> elements are block elements
A. True
B. False
3. When a form is submitted, what happens?
A. It is processed by a server-side script
B. The browser processes it and displays the result
C. It is converted to an executable file and executed by the server
D. It is converted to an executable file and executed by the browser
4. What form control offers two or more options, but only allows the user to select one?
A. checkbox
B. text
C. textarea
D. radio button
5. If we want a checkbox to be selected by default when the page loads, what binary attribute do we use?
A. selected
B. checked
C. default
D. picked
6. What does the reset control do?
A. Returns all of the form fields to their default values
B. Reloads the page, which clears all of the form values
C. Clears the value from the last selected field
D. Clears only the fields that have a default value specified
7. Which of the following is a server-side scripting language?
A. JavaScript
B. jQuery
C. PHP
D. C++
8. (T/F) We can modify the display of form elements using CSS
A. True
B. False
9. How do we create a multi-line text input field?
A. <input class="text">
B. <textarea></textarea>
C. <input class="textarea">
D. input class="multiline">
10. Which form method should we use to enable bookmarking?
A. GET
B. POST
C. FETCH
D. RETRIEVE