Scribd
Upload
19 views4 pages

WD Lecture 5-Supplementary

Uploaded by

hossain.fahad2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views4 pages

WD Lecture 5-Supplementary

Uploaded by

hossain.fahad2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lecture 5

Topics: Form

An HTML form is a section of a webpage that allows users to enter and submit data. Forms are used for
tasks like signing up for a newsletter, logging in, submitting feedback, or placing an order. When a user
submits a form, the data is se
nt to a server for processing.
Basic Structure of an HTML Form
An HTML form is created using the <form> element, which can contain various input elements like text fields,
radio buttons, checkboxes, and submit buttons.
Example of a Simple HTML Form:
Common Form Input Types

• <input type="text">: Single-line text input.


• <input type="password">: Single-line text input that masks characters for privacy.
• <input type="email">: Email input with validation for proper email format.

• <input type="number">: Numeric input, allowing only numbers.


• <input type="radio">: Radio button for selecting one option from a group.
• <input type="checkbox">: Checkbox for selecting or deselecting an option.
• <input type="submit">: Button to submit the form data to the server.
• <textarea> </textarea>: Multi-line text input.
• <select></select>: Dropdown menu for selecting one option from a list.

HTML Form Attributes:


HTML form attributes are used to configure the behavior and functionality of forms. These attributes
are added to the <form> element to control how the form data is processed, validated, and
submitted. Below are the key attributes commonly used with HTML forms, along with explanations
and examples.
1. action:
• Specifies the URL of the server-side script that will handle the form data when the form is
submitted.
• If the action attribute is not specified, the form will submit to the same URL as the current
page.
• Example: <form action="submit_form.php" method="post">
2. method:
• Defines the HTTP method to be used when submitting the form.
• Common values: POST and GET
• GET:
o Appends the form data to the URL, in name/value pairs
o NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)
o The length of a URL is limited (2048 characters)
o Useful for form submissions where a user wants to bookmark the result
o GET is good for non-secure data, like query strings in Google

• POST:
o Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)
o POST has no size limitations, and can be used to send large amounts of data.
o Form submissions with POST cannot be bookmarked
HTML Input Types:
• <input type="text">
• <input type="number">
• <input type="password">
• <input type="date">
• <input type="email">
• <input type="file">
• <input type="checkbox">
• <input type="radio">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="button">
• <input type="hidden">
• <input type="color">
• <input type="datetime-local">
• <input type="image">
• <input type="month">
• <input type="range">
• <input type="tel">
• <input type="time">
• <input type="url">
• <input type="week">

Attributes of Input Element:


1. type

• Description: Specifies the type of input element. Common values include text, password, email,
number, checkbox, radio, file, submit, etc.
• Example: <input type="text" name="username">
2. name:

• Description: Defines the name of the input element, which is used to identify the data when
the form is submitted.
• Example: <input type="text" name="username">

3. value:
• Description: Specifies the initial value of the input field or the value submitted with the
form.
• Example: <input type="text" name="username" value="JohnDoe">
4. placeholder:
• Description: Provides a short hint that describes the expected value of the input. The hint is
displayed in the input field when it is empty.
• Example: <input type="text" name="username" placeholder="Enter your username">
5. required:
• Description: Indicates that the input field must be filled out before the form can be
submitted.
• Example: <input type="text" name="username" required>
Sample Quiz Questions:

1. What does the <html> tag represent in an HTML document?


o A) The document's title
o B) The body content of the document
o C) The root element of an HTML document
o D) A paragraph element
o Answer: C) The root element of an HTML document
2. Which of the following is the correct way to add an attribute to an HTML element?
o A) <p class="text">This is a paragraph.</p>
o B) <p class=text>This is a paragraph.</p>
o C) <p.class="text">This is a paragraph.</p>
o D) <p (class="text")>This is a paragraph.</p>
o Answer: A) <p class="text">This is a paragraph.</p>
3. The <head> element in an HTML document is where the metadata and links to external resources like
stylesheets are placed.
o Answer: True
4. The id attribute is used to define a unique identifier for an HTML element and can be used multiple
times in a document.
o Answer: False (The id attribute must be unique within a document)
5. What is the full form of HTML?
o Answer: Hypertext Markup Language
6. Design a login form using HTML with username, password and login button.

You might also like