Scribd
Upload
7 views34 pages

Lecture 04

i want to download this book

Uploaded by

jibransarwari2
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 views34 pages

Lecture 04

i want to download this book

Uploaded by

jibransarwari2
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/ 34

Introduction

Mozamel Jawad 12 October 2022


2
HTML Forms
• 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.
The <input> Element

The <input> element is the most important form element.


The <input> element can be displayed in several ways, depending on
the type attribute.

Type Description

<input type="text"> Defines a one-line text input field


<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input
<input type="text"> defines a one-line input field for text input:
Input Type Password
<input type="password"> defines a password field:
Radio Button Input
• <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices:
Input Type Submit
• <input type="submit"> defines a button for submitting form data to a form-handler.
• The form-handler is typically a server page with a script for processing input data.
• The form-handler is specified in the form's action attribute:

• <input type="reset"> defines a reset button that will reset all form values to their default values:
• <input type="button"> defines a button:
The Action Attribute
• The action attribute defines the action to be performed when the form is
submitted.
• Normally, the form data is sent to a web page on the server when the user clicks
on the submit button.

• Note: 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 form data:
When to Use GET?

• The default method when submitting form data is GET.


• However, when GET is used, the submitted form data will be visible in the page
address field:
Notes on GET:
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the result
• GET is better for non-secure data, like query strings in Google
When to Use POST?

Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.

Notes on POST:
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked
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.

This example will only submit the "Last name" input field:
Input Type Checkbox

• <input type="checkbox"> defines a checkbox.


• Checkboxes let a user select ZERO or MORE options of a limited number of choices.
The <select> Element
• The <select> element defines a drop-down list:
• The <option> elements defines an option that can be selected.
• 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:
The <select> Element

Visible Values: Allow Multiple Selections:


• Use the size attribute to specify the • Use the multiple attribute to allow the
number of visible values: user to select more than one value:
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
HTML5 <datalist> Element

• The <datalist> element specifies a list of pre-defined options for an <input> element.
• Users will see a drop-down list of the pre-defined options as they input data.
• The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.


The <legend> element defines a caption for the <fieldset> element.
HTML5 Input Types

HTML5 added several new input types:


• Color , date , datetime-local , email , month , number , range , search
tel , time , url , week
Input Type Email

Input Type Date


Input Type File

• The <input type="file"> defines a file-select field and a "Browse" button for file
uploads
HTML Input Attributes

The value Attribute


• The value attribute specifies the initial value for an input field:

The readonly Attribute


The readonly attribute specifies that the input field is read only (cannot be changed):
The disabled Attribute
• The disabled attribute specifies that the input field is disabled

The size Attribute


The size attribute specifies the size (in characters) for the input field:
The maxlength Attribute
The maxlength attribute specifies the maximum allowed length for the input field:

With a maxlength attribute, the input field will not accept more than the allowed number of
characters.
The autocomplete Attribute
• The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off.
• When autocomplete is on, the browser automatically completes the input values
based on values that the user has entered before.
The autofocus Attribute
• The autofocus attribute specifies that the input field should automatically get
focus when the page loads.
The list Attribute
• The list attribute refers to a <datalist> element that contains pre-defined options
for an <input> element.
The multiple Attribute
• The multiple attribute specifies that the user is allowed to enter more than one
value in the <input> element.
• The multiple attribute works with the following input types: email, and file.
The placeholder Attribute
• The placeholder attribute specifies a hint that describes the expected value of an
input field.
• The hint is displayed in the input field before the user enters a value.
• The placeholder attribute works with the following input types: text, search, url,
tel, email, and password.
The required Attribute
• The required attribute specifies that an input field must be filled out before
submitting the form.
The HTML <video> Element
• To show a video in HTML, use the <video> element:
The HTML <audio> Element
• To play an audio file in HTML, use the <audio> element:

You might also like