Scribd
Upload
3 views9 pages

HTML Form

HTML forms are essential for collecting user input and sending it to a server for processing. The document outlines various form elements, such as <input>, <label>, <select>, and their attributes, which define their behavior and appearance. Additionally, it discusses form validation techniques to ensure the accuracy and completeness of user input before submission.

Uploaded by

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

HTML Form

HTML forms are essential for collecting user input and sending it to a server for processing. The document outlines various form elements, such as <input>, <label>, <select>, and their attributes, which define their behavior and appearance. Additionally, it discusses form validation techniques to ensure the accuracy and completeness of user input before submission.

Uploaded by

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

What is Form ?

"HTML forms are used to collect input or data from users


and send it to a server for further processing."
What are Form Elements ?

Form elements are the components within an HTML form that allow users to enter
and submit data.

<input> tag is used to create a field where users can enter data, like text,
numbers, or passwords, on a web page

<label> tag in HTML is used to define a caption or name for an input element It
helps users to understand what information they should enter.

<Select> tag in HTML is used to create a dropdown menu where users can choose
one or more options from a list.

<textarea> tag in HTML is used to create a large text box where users can enter
multiple lines of text, like for writing a comment or message.
What are Form Elements ?

<button> tag in HTML creates a clickable button on a web page. When clicked, it
can perform actions like submitting a form or triggering a script.

<fieldset> tag in HTML is used to group related elements, like input fields, within a
form. It helps organize the form and often includes a caption using the <legend> tag.

<legend> tag in HTML is used to provide a title or caption for a <fieldset>. It helps
describe what the grouped form elements are about..

<datalist> tag in HTML is used to provide a list of predefined options for an


<input> field. As the user types, they can choose from the options in the list, similar
to autocomplete suggestions .

<option> tag in HTML is used to provide the select options in the drop down list .

<optgroup> tag in HTML is used to group related <option> elements inside a


dropdown list .
What is HTML Input and its types ?

"HTML <input> is an unpaired tag used to accept different types of


input from a user. The type of input is specified by the type attribute,
which can have various values such as text, email, password, date, and
more."
<input type="button"> <input type="password">
<input type="checkbox"> <input type="radio">
<input type="color"> <input type="range">
<input type="date"> <input type="reset">
<input type="datetime-local"> <input type="search">
<input type="email"> <input type="submit">
<input type="file"> <input type="tel">
<input type="hidden"> <input type="text">
<input type=“button"> <input type="time">
<input type="month"> <input type="url">
<input type="number"> <input type="week">
Attributes of Input Tag.

HTML <input> elements have several attributes that define their behavior and
appearance. Some common attributes include:

type: Specifies the type of input (e.g., text, email, password).

name: Defines the name of the input field, which is used when data is submitted.

value: Specifies the initial value of the input field.

placeholder: Provides a short hint that describes the expected value of the input.

required: Indicates that the input field must be filled out before submitting the
form.
Attributes of Input Tag.

readonly: Makes the input field non-editable but still allows it to be submitted.

disabled: Disables the input field, making it unmodifiable and non-submittable.

maxlength: Sets the maximum number of characters allowed in the input field.

minlength: Sets the minimum number of characters allowed in the input field.

min and max: Define the minimum and maximum values for number, date, and range
inputs.

pattern: Specifies a regular expression that the input value must match for validation.

autocomplete: Suggests possible input values based on the user's past entries.

autofocus: Automatically focuses on the input field when the page loads.

size: Specifies the width of the input field in characters.


multiple: Allows multiple values (mainly used with file input fields).
Form Attributes

The Novalidate Attribute


The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be


validated when submitted.

The Autocomplete Attribute


The autocomplete attribute specifies whether a form should have
autocomplete on or off.

When autocomplete is on, the browser automatically complete values


based on values that the user has entered before.

Method attribute specifies way of sending the data


Value – get(less secure,2048 characters, through url) ,
post(more secure,no limit of characters,directly to server)
Form validation ?

Form validation is the process of checking user input in a form to


ensure it meets the specified criteria before it is submitted to the
server. It helps prevent errors and ensures the data is accurate and
complete.

required: Specifies that an input field must be filled out before submitting the form.
<input type="text" name="username" required>

maxlength: Sets the maximum number of characters allowed in an input field.


<input type="text" name="username" maxlength="20">

minlength: Sets the minimum number of characters required in an input field.


<input type="password" name="password" minlength="8">
Form validation ?

min and max: Define the minimum and maximum values for numeric, date, or range inputs.
<input type="number" name="age" min="18" max="100">
<input type="date" name="dob" min="1900-01-01" max="2023-12-31">

pattern: Specifies a regular expression that the input value must match for validation.
<input type="text" name="zipcode" pattern="\d{5}">

step: Defines the legal number intervals for numeric input fields.
<input type="number" name="quantity" step="1">

type: Although primarily defining the kind of input, it also has validation purposes, such as
ensuring an email address is correctly formatted
<input type="email" name="email">

autocomplete: Suggests possible input values based on the user's past entries, useful for
ensuring consistent data entry.
<input type="text" name="city" autocomplete="on">

You might also like