Scribd
Upload
7 views21 pages

CSC336-WT Lec6 Slides

This document is a lecture on HTML forms, detailing their structure, elements, and attributes essential for collecting user input in web applications. It covers various input types, form submission processes, and enhancements using JavaScript. The lecture emphasizes the importance of understanding form components for creating efficient and user-friendly web forms.

Uploaded by

hocicex411
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
7 views21 pages

CSC336-WT Lec6 Slides

This document is a lecture on HTML forms, detailing their structure, elements, and attributes essential for collecting user input in web applications. It covers various input types, form submission processes, and enhancements using JavaScript. The lecture emphasizes the importance of understanding form components for creating efficient and user-friendly web forms.

Uploaded by

hocicex411
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/ 21

Lecture # 6

CSC336 Web Technologies


Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ


Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1


HTML Forms
Introduction to HTML Forms

HTML Forms: A way to collect user input in a web application.

Forms are commonly used for data submission (e.g., login,


registration, feedback).

Forms communicate with servers to store or process data.


The <form> Element
• The <form> tag is the container for all form
elements.
• It defines a form for collecting user input.
• Example:
<form action="/submit" method="post">
<!-- Form content here -->
</form>
Form Attributes

• action: Specifies the URL where the form data will be sent.
• method: Defines the HTTP method (GET or POST) used to send data.
• GET: Data is sent via the URL (suitable for small data).
• POST: Data is sent in the request body (for secure, large data).
• Example:
<form action="/submit" method="post">
Form Structure

• Forms contain various elements for user interaction.


• Input fields, labels, buttons, and selection lists are all common form
components.
• Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
The <label> Element

• Associates text with a form control.


• Clicking the label focuses the corresponding input field.
• Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
The <input> Element

• The most versatile and commonly used element to collect user input.
• Types: Text, email, password, checkbox, radio, etc.
• Example:
<form>
<input type="text" name="username">
</form>
Common Input Types

Text: Single-line text input. Password: Obscures the Email: Validates the input as Example:
input characters. an email format.

<input type="email" name="user_email" required>


Checkbox Input

• Allows users to select one or more options from a list.


• Example:
<form>
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe to Newsletter</label>
</form>
Radio Button Input
• Radio buttons allow users to select only one option from a group.
• Example:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</form>
The <select> and <option> Elements

• <select>: Used to create a dropdown menu.


• <option>: Defines the individual options within the dropdown.
• Example:
<form>
<select name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
</form>
The <textarea> Element
• Allows for multi-line text input.
• Useful for comments, messages, or descriptions.
• Example:
<form>
<textarea name="message" rows="4" cols="50">
Enter your message here...
</textarea>
</form>
The <button> Element

• Used to submit the form or trigger JavaScript


actions.
• Types include submit, reset, and button.
• Example:
<form>
<button type="submit">Submit</button>
</form>
Form Validation Attributes

• required: Ensures the user fills in the field before submitting.


• maxlength: Limits the maximum number of characters allowed.
• pattern: Validates the input against a regular expression.
• Example:
<form>
<input type="text" name="username" required maxlength="10">
</form>
Placeholder Attribute

• Provides a hint or example of the expected value in a text field.


• Disappears when the user starts typing.
• Example:
<form>
<input type="text" name="username" placeholder="Enter your username">
</form>
The name Attribute

• The name attribute is critical as it identifies the form field when data is submitted
to the server.
• Each input field should have a unique name.
• Example:
<form>
<input type="text" name="username">
</form>
The value Attribute

• Sets the default value for an input field.


• The value is sent to the server when the form is submitted.
• Example:
<form>
<input type="text" name="username" value="JohnDoe">
</form>
Form Submission Process

• When a user submits a form, the browser sends the form data to the server.
• Data is collected and sent based on the input field's name and value attributes.
• Example:
<form action="/submit" method="post">
<input type="text" name="username" value="JohnDoe">
</form>
Form Enhancements with JavaScript

• JavaScript can be used to add dynamic form validation and interactivity.


• Examples include real-time validation, form validation before submission, or
dynamic form fields.
Lesson Learning Outcome (LLOs)

• HTML Forms are fundamental for collecting user input in web applications.
• Forms consist of various elements like <input>, <textarea>, and <button>.
• Understanding form attributes and input elements is key for creating user-friendly
and efficient forms.

You might also like