Scribd
Upload
2 views

5-Web Mark Language-Part4(Form) 6

This document is a lecture on HTML forms, detailing their structure and various input elements used for data collection on web pages. It covers the purpose of forms, syntax, and specific controls such as text fields, password fields, radio buttons, and checkboxes. Additionally, it explains the importance of attributes like 'name' and 'for' for functionality and user experience.

Uploaded by

sarahbntabdullah2024
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

5-Web Mark Language-Part4(Form) 6

This document is a lecture on HTML forms, detailing their structure and various input elements used for data collection on web pages. It covers the purpose of forms, syntax, and specific controls such as text fields, password fields, radio buttons, and checkboxes. Additionally, it explains the importance of attributes like 'name' and 'for' for functionality and user experience.

Uploaded by

sarahbntabdullah2024
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

APPLIED COLLEGE

Computing Department
Intermediate Diploma in
Databases and Web
Development

Lecture 7

Web markup language–


Part 4

1
Outlines for part 4

 HTML Form
 HTML Form Input
 HTML <form> element attributes

2
HTML Form

 An HTML form is a section of a document which


contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button,
menus etc.

 An HTML form facilitates the user to enter data that


is to be sent to the server for processing such as
name, email address, password, phone number, etc.
3

.
Why use HTML Form

 HTML forms are required if you want to collect some data from
of the site visitor.

 For example: If a user want to purchase some items on


internet, he/she must fill the form such as shipping address
and credit/debit card details so that item can be sent to the
given address.

4
HTML Form Syntax

5
HTML <form> element

The HTML <form> element provide a document section to take


input from user. It provides various interactive controls for
submitting information to web server such as text field, text
area, password field, etc.

Note: The <form> element does not itself create a form


but it is container to contain all required form elements,
such as <input>, <label>, etc.
6
HTML Form Tags

7
HTML <input> element

The HTML <input> element is fundamental form element. It is


used to create form fields, to take input from user. We can apply
different input filed to gather different information form user.

Following is the example to show the simple text input.

8
9
HTML TextField Control

o The type="text" attribute of input tag creates textfield control


also known as single line textfield control.

o The name attribute is optional, but it is required for the server


side component such as JSP, ASP, PHP etc.

10
Note: If you will omit 'name' attribute then the text filed input
will not be submitted to server. 11
oHTML <textarea> tag in form

o The <textarea> tag in HTML is used to insert multiple-line text


in a form. The size of <textarea> can be specify either using
"rows" or "cols" attribute or by CSS.

12
13
Label Tag in Form

o It is considered better to have label in form. As it makes the


code parser/browser/user friendly.

o If you click on the label tag, it will focus on the text control. To
do so, you need to have for attribute in label tag that must be
same as id attribute of input tag.

14
15
HTML Password Field Control

 The password is not visible to the user in password field control.

16
HTML 5 Email Field Control

 The email field in new in HTML 5. It validates the text for


correct email address. You must use @ and . in this field.

17
Note: If we will not enter the correct email, it
will display error like:

18
Radio Button Control

 The radio button is used to select one option from


multiple options. It is used for selection of gender, quiz
questions etc.

 If you use one name for all the radio buttons, only one
radio button can be selected at a time.

 Using radio buttons for multiple options, you can only


choose a single option at a time

 . 19
20
. Checkbox Control

 The checkbox control is used to check multiple options


from given checkboxes.

21
 Note: These are similar to radio button except it can
choose multiple options at a time and radio button can
select one button at a time, and its display.

22
. Submit button control

 HTML <input type="submit"> are used to add a submit


button on web page. When user clicks on submit button,
then form get submit to the server.

23
24
Update by Ikhlas Saad 2024-Semester1 25

You might also like