Internet Programming
Lecture 8
By : [Link] Bishri
[Link] Bishri
Agenda
HTML Forms
➢ The <input> Element
➢ The <select> Element
➢ The <textarea> Element
➢ The <button> Element
[Link] Bishri
HTML Forms
[Link] Bishri
The <form> Element
➢ The HTML <form> element defines a form that is
used to collect user input
➢ An HTML form contains form elements.
➢ Form elements are different types of input elements,
like: text fields, checkboxes, radio buttons, submit
buttons, and more.
[Link] Bishri
The <label> Element
➢ The <label> tag defines a label for many form elements.
➢ The <label> element is useful for screen-reader users
➢ The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them
together.
[Link] Bishri
The <input> Element
➢ The <input> element is the most important form
element.
➢ The <input> element is displayed in several ways,
depending on the type attribute.
[Link] Bishri
➢ If the type attribute is omitted, the input
field gets the default type: "text".
[Link] Bishri
Text Fields
➢ <input type="text"> defines a single-line input
field for text input.
[Link] Bishri
Example 1 : Display the following web page
[Link] Bishri
Example 1: solution
[Link] Bishri
Radio Buttons
➢ <input type="radio"> defines a radio button.
➢ Radio buttons let a user select ONE of a limited
number of choices.
[Link] Bishri
Example 2 : Display the following form on a
web page
[Link] Bishri
Example 2: solution
[Link] Bishri
The Submit Button
➢ <input type="submit"> defines a button
for submitting the form data to a form-handler.
➢ The form-handler is typically a page on the server with a
script for processing input data.
➢ The form-handler is specified in the
form's action attribute.
[Link] Bishri
➢ <input type="submit"> defines a button
for submitting the form data to a form-handler.
[Link] Bishri
Example 3 : Display the following form on a
web page
[Link] Bishri
Example 3: solution
[Link] Bishri
The Action Attribute
➢ The action attribute defines the action to be performed
when the form is submitted.
➢ The form data is sent to a page on the server
when the user clicks on the submit button.
➢ In the example above, the form data is sent to
a page on the server called "/action_page.php".
This page contains a server-side script that
handles the form data.
➢ If the action attribute is omitted, the action is set to the
current page.
[Link] Bishri
The Method Attribute
➢ The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the
form data.
[Link] Bishri
When to use GET and POST??
➢The default HTTP method when submitting form data is
GET.
➢ When GET is used, the form data will be visible in the
page's address field.
➢ Always use POST if the form data contains sensitive
or personal information. The POST method does not
display the form data in the page address field.
[Link] Bishri
The Name Attribute
➢ Each input field must have a name attribute to be
submitted.
➢ If the name attribute is omitted, the data of that
input field will not be sent at all.
[Link] Bishri
The <select> Element
➢ The <select> element defines a drop-down list
➢ The <option> elements defines an option that can be
selected.
[Link] Bishri
➢ By default, the first item in the drop-down list is selected.
➢ To define a pre-selected option, add
the selected attribute to the option:
[Link] Bishri
Example 4 : Display the following form on a
web page
[Link] Bishri
Example 4: solution
[Link] Bishri
Visible Values:
➢ Use the size attribute to specify the number of visible
values
[Link] Bishri
Example 5 : Display the following form on a
web page
[Link] Bishri
Example 5: solution
[Link] Bishri
Allow Multiple Selections:
➢ Use the multiple attribute to allow the user to select
more than one value
[Link] Bishri
Example 6 : Display the following form on a
web page
[Link] Bishri
Example 6: solution
[Link] Bishri
The <textarea> Element
➢ The <textarea> element defines a multi-line input field
(a text area)
➢ The rows attribute specifies the visible number of lines in a
text area.
➢ The cols attribute specifies the visible width of a text area.
[Link] Bishri
Example 7 : Display the following form on a
web page
[Link] Bishri
Example 7: solution
[Link] Bishri
➢ You can also define the size of the text area by using
CSS:
[Link] Bishri
Execute the following code
[Link] Bishri
Thank you
[Link] Bishri