Scribd
Upload
27 views

Lab 3 - en

The document discusses HTML forms and elements used to collect user input on web pages. It covers the <form>, <input>, <select>, <textarea>, and <label> elements. It provides examples of different input types like text, password, checkbox, radio and file upload. It also discusses attributes like action and method for form submission. The document contains examples and exercises for students to practice creating forms and linking between pages.

Uploaded by

ALEXIS s
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

Lab 3 - en

The document discusses HTML forms and elements used to collect user input on web pages. It covers the <form>, <input>, <select>, <textarea>, and <label> elements. It provides examples of different input types like text, password, checkbox, radio and file upload. It also discusses attributes like action and method for form submission. The document contains examples and exercises for students to practice creating forms and linking between pages.

Uploaded by

ALEXIS s
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Introduction to Web

Programming – Lab 3
Mitrea Dan Alexandru
[email protected]
HTML Forms
HTML forms are used to collect user input.
The <form> element defines an HTML form

Example
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.The common way to
submit a form to a server, is by using a submit button. If the action attribute is omitted, the action is set to
the current page.

The Method Attribute


The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

You should use POST: You should use GET:


If the form is updating data, or includes sensitive If the form submission is passive (like a search
information (password). engine query), and without sensitive information.
POST offers better security because the GET is best suited to short amounts of data. Size
submitted data is not visible in the page address. limitations are set in your browser.
Input Types
• Input Type: text
<input type="text"> defines a one-line input field for text input
• Input Type: password
<input type="password"> defines a password field:
• Input Type: submit
<input type="submit"> defines a button for submitting form input to a form-
handler.

• Input Type: checkbox


<input type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.

• Input Type: radio


<input type="radio"> defines a radio button - let a user select ONLY ONE of a
limited number of choices
HTML Form Elements
• The <select> Element (Drop-Down List)
The <select> element defines a drop-down list:
The <option> elements defines the options to select.

• The <textarea> Element


The <textarea> element defines a multi-line input field (a
text area)

• The <label> Element


The <label> element defines a label for an <input> element
HTML Form Example
Example

Download the zip file from the lab website and complete the
html code. The css code is already written.
Example
HTML Links
In HTML, links are defined with the <a> tag:

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
Example
Edit every page and add to the title the name of file. Also,
create a heading inside the page with the name of the file.
Exercise 1
You have the following page structure. Create a navigation bar
and link properly the web pages (relative path). Every page
must have the navigation list.

Edit every page and add to the title the name of file. Also,
create a heading inside the page with the name of the file.

For example:
You edit contact.html
The title of page must be “Contact”
The heading of page must be “Welcome to Contact Page”
A
B
C
D
E
F
Exercise 2
Work with the next website layout
Exercise 2

a. You have some navigation links on the page. Link them to the right pages (all pages - modify
the source code ).
b. Edit the page login.html like in the picture from the next slide.
c. Edit the page contact.html like in the picture from the next slide.
d. Edit the page about.html. Add two pictures to the page, one paragraph and a list. Use also
strong and em tag.
A
B
C
D
E
F

You might also like