HTML 

FORMS
St.Xavier’s College

© Krupa Shah
HTML FORM EXAMPLE

First Name :

Last Name :
THE <FORM> ELEMENT

 The HTML <form> element defines a form

that is used to collect user input:
 <form>
.
form elements
.
</form>
 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:
 Example
 <form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
 RADIO BUTTON INPUT
 <input type="radio"> defines a radio button.
 Radio buttons let a user select ONE of a limited
number of choices:
 Example
 <form>
  <input type="radio" name="gender" value="male
" checked> Male<br>
  <input type="radio" name="gender" value="fema
le"> Female<br>
  <input type="radio" name="gender" value="othe
r"> Other
</form>
 THE SUBMIT BUTTON
 <input type="submit"> defines a button for submitting the
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:
 Example
 <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
<br><br>
  <input type="submit" value="Submit">
</form>
 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.
 In the example above, the form data is sent to a
page on the server called "/action_page.php".
This page contains a server-side script that
handles the form data:
 <formaction="/action_page.php">
 If the action attribute is omitted, the action is
set to the current page.
 THE TARGET ATTRIBUTE
 The target attribute specifies if the submitted
result will open in a new browser tab, a frame, or
in the current window.
 The default value is "_self" which means the form
will be submitted in the current window.
 To make the form result open in a new browser
tab, use the value "_blank":
 Example
 <form action="/action_page.php"target="_blank">
 Other legal values are "_parent", "_top", or a name
representing the name of an iframe.
 THE METHOD ATTRIBUTE

 The method attribute specifies the HTTP method

(GET or POST) to be used when submitting the
form data:
 Example

<form action="/action_page.php"method="get">
or:
 Example

<form action="/action_page.php"method="post">
 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:
 /action_page.php?firstname=Mickey&lastname=Mouse
 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 want 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:
 Example
 <form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><
br><br>
  <input type="submit" value="Submit">
</form>
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.
 Example
 <form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
<br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Attribute Description

accept-charset Specifies the charset used in the submitted

form (default: the page charset).

action Specifies an address (url) where to submit the

form (default: the submitting page).

autocomplete Specifies if the browser should autocomplete

the form (default: on).

enctype Specifies the encoding of the submitted data

(default: is url-encoded).

method Specifies the HTTP method used when

submitting the form (default: GET).

name Specifies a name used to identify the form (for

DOM usage: document.forms.name).

novalidate Specifies that the browser should not validate

the form.
target Specifies the target of the address in the action
attribute (default: _self).
 HTML FORM ELEMENTS
 The <input> Element
 The most important form element is
the <input> element.
 The <input> element can be displayed in several
ways, depending on the type attribute.
 Example
<input name="firstname" type="text">
 If the type attribute is omitted, the input field
gets the default type: "text".
 All the different input types are covered in the
next chapter.
THE <SELECT> ELEMENT

 The <select> element defines a drop-down

list:
 Example
 <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
 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:
 Example
 <option value="fiat" selected>Fiat</option>
 VISIBLE VALUES:
 Use the size attribute to specify the number of
visible values:

 Example
 <select name="cars"size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
 ALLOW MULTIPLE SELECTIONS:
 Use the multiple attribute to allow the user to
select more than one value:

 Example
 <select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
 THE <TEXTAREA> ELEMENT
 The <textarea> element defines a multi-line input field (a text
area):
 Example
 <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
 The rows attribute specifies the visible number of lines in a
text area.
 The cols attribute specifies the visible width of a text area.
 This is how the HTML code above will be displayed in a browser:
 You can also define the size of the text area by using CSS:
 Example
 <textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
 THE <BUTTON> ELEMENT
 The <button> element defines a
clickable button:
 Example
 <button type="button" onclick="alert('Hello
World!')">Click Me!</button>
 This is how the HTML code above will be
displayed in a browser:
  Click Me!
 Note: Always specify the type attribute for the
button element. Different browsers may use
different default types for the button element.
HTML5 FORM ELEMENTS

 HTML5 added the following form elements:

 <datalist>
 <output>
 Note: Browsers do not display unknown
elements. New elements that are not
supported in older browsers will not "destroy"
your web page.
 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.
 Example
 <form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>
 HTML5 <OUTPUT> ELEMENT
 The <output> element represents the result of a calculation
(like one performed by a script).
 Example
 Perform a calculation and show the result in
an <output> element:
 <form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
 =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input

controls
<output> Defines the result of a calculation
HTML INPUT TYPES
 Input Type Text
 <input type="text"> defines a one-line text
input field:
 Example
 <form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
 INPUT TYPE PASSWORD
 <input type="password"> defines a password
field:
 Example
 <form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
 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:
 Example
 <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
<br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
<br><br>
  <input type="submit" value="Submit">
</form>
 If you omit the submit button's value attribute,
the button will get a default text:
 Example
 <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="M
ickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="M
ouse"><br><br>
  <input type="submit">
</form>
 INPUT TYPE RESET
 <input type="reset"> defines a reset button that
will reset all form values to their default values:
 Example
 <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Micke
y"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse
"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
 INPUT TYPE RADIO
 <input type="radio"> defines a radio button.
 Radio buttons let a user select ONLY ONE of a
limited number of choices:
 Example
 <form>
  <input type="radio" name="gender" value="male" 
checked> Male<br>
  <input type="radio" name="gender" value="femal
e"> Female<br>
  <input type="radio" name="gender" value="other"
> Other
</form>
 INPUT TYPE CHECKBOX
 <input type="checkbox"> defines a checkbox.
 Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
 Example
 <form>
  <input type="checkbox" name="vehicle1" value
="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value
="Car"> I have a car 
</form>
INPUT TYPE BUTTON

 <input type="button"> defines a button:

 Example
 <input type="button" onclick="alert('Hello
World!')" value="Click Me!">
 HTML5 INPUT TYPES
 HTML5 added several new input types:
 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week
 INPUT TYPE COLOR
 The <input type="color"> is used for input fields
that should contain a color.
 Depending on browser support, a color picker
can show up in the input field.
 Example
 <form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
 INPUT TYPE DATE
 The <input type="date"> is used for input fields
that should contain a date.
 Depending on browser support, a date picker
can show up in the input field.
 Example
 <form>
  Birthday:
  <input type="date" name="bday">
</form>
 You can also use the min and max attributes to
add restrictions to dates:
 Example
 <form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-
12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-
01-02"><br>
</form>
INPUT TYPE DATETIME-LOCAL
 The <input type="datetime-local"> specifies a
date and time input field, with no time zone.
 Depending on browser support, a date picker
can show up in the input field.
 Example
 <form>
  Birthday (date and time):
  <input type="datetime-
local" name="bdaytime">
</form>
 INPUT TYPE EMAIL
 The <input type="email"> is used for input fields
that should contain an e-mail address.
 Depending on browser support, the e-mail address
can be automatically validated when submitted.
 Some smartphones recognize the email type, and
adds ".com" to the keyboard to match email
input.
 Example
 <form>
  E-mail:
  <input type="email" name="email">
</form>
INPUT TYPE FILE

 The <input type="file"> defines a file-select

field and a "Browse" button for file uploads.
 Example
<form>
  Select a
file: <input type="file" name="myFile">
</form>
 INPUT TYPE MONTH
 The <input type="month"> allows the user to
select a month and year.
 Depending on browser support, a date picker
can show up in the input field.
 Example
 <form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
 INPUT TYPE NUMBER
 The <input type="number"> defines
a numeric input field.
 You can also set restrictions on what numbers
are accepted.
 The following example displays a numeric input
field, where you can enter a value from 1 to 5:
 Example
 <form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" 
max="5">
</form>
INPUT RESTRICTIONS
Attribute Description

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an

input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input

value against

readonly Specifies that an input field is read only (cannot be

changed)
required Specifies that an input field is required (must be filled
out)
size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

 The following example displays a numeric input
field, where you can enter a value from 0 to
100, in steps of 10. The default value is 30:

 Example
 <form>
  Quantity:
  <input type="number" name="points" min="0" m
ax="100" step="10" value="30">
</form>
INPUT TYPE RANGE

 The <input type="range"> defines a control

for entering a number whose exact value is
not important (like a slider control). Default
range is 0 to 100. However, you can set
restrictions on what numbers are accepted
with the min, max, and step attributes:
 Example
 <form>
  <input type="range" name="points" min="0" 
max="10">
</form>
INPUT TYPE SEARCH

 The <input type="search"> is used for search

fields (a search field behaves like a regular
text field).
 Example
 <form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
INPUT TYPE TEL

 The <input type="tel"> is used for input fields

that should contain a telephone number.
 Note: The tel type is currently only
supported in Safari 8.
 Example
 <form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
INPUT TYPE TIME

 The <input type="time"> allows the user to

select a time (no time zone).
 Depending on browser support, a time picker
can show up in the input field.
 Example
 <form>
  Select a time:
  <input type="time" name="usr_time">
</form>
INPUT TYPE URL

 The <input type="url"> is used for input fields

that should contain a URL address.
 Depending on browser support, the url field can
be automatically validated when submitted.
 Some smartphones recognize the url type, and
adds ".com" to the keyboard to match url input.
 Example
 <form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
INPUT TYPE WEEK

 The <input type="week"> allows the user to

select a week and year.
 Depending on browser support, a date picker
can show up in the input field.
 Example
 <form>
  Select a week:
  <input type="week" name="week_year">
</form>
HTML INPUT TYPE ATTRIBUTE

Tag Description
<input Specifies
type=""> the input
type to
display
 HTML INPUT ATTRIBUTES
 The value Attribute

 The value attribute specifies the initial value for an

input field:

 Example
 <form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form>
THE READONLY ATTRIBUTE

 The readonly attribute specifies that the

input field is read only (cannot be changed):
 Example
 <form action="">
  First name:<br>
  <input type="text" name="firstname" value=
"John" readonly>
</form>
THE DISABLED ATTRIBUTE

 The disabled attribute specifies that the

input field is disabled.
 A disabled input field is unusable and un-
clickable, and its value will not be sent when
submitting the form:
 Example
 <form action="">
  First name:<br>
  <input type="text" name="firstname" value=
"John" disabled>
</form>
THE SIZE ATTRIBUTE

 The size attribute specifies the size (in

characters) for the input field:
 Example
 <form action="">
  First name:<br>
  <input type="text" name="firstname" value=
"John" size="40">
</form>
 THE MAXLENGTH ATTRIBUTE
 The maxlength attribute specifies the maximum allowed
length for the input field:
 Example
 <form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
 With a maxlength attribute, the input field will not accept
more than the allowed number of characters.
 The maxlength attribute does not provide any feedback. If
you want to alert the user, you must write JavaScript code.
 Note: Input restrictions are not foolproof, and JavaScript
provides many ways to add illegal input. To safely restrict
input, it must be checked by the receiver (the server) as
well!
 HTML5 ATTRIBUTES
 HTML5 added the following attributes for <input>:
 autocomplete
 autofocus
 form
 formaction
 formenctype
 formmethod
 formnovalidate
 formtarget
 height and width
 list
 min and max
 multiple
 pattern (regexp)
 placeholder
 required
 step
 and the following attributes for <form>:
 autocomplete
 novalidate
 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.
 Tip: It is possible to have autocomplete "on" for the form, and "off"
for specific input fields, or vice versa.
 The autocomplete attribute works with <form> and the
following <input> types: text, search, url, tel, email, password,
datepickers, range, and color.
 Example
 An HTML form with autocomplete on (and off for one input field):
 <form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-
mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
 THE NOVALIDATE ATTRIBUTE

 The novalidate attribute is a <form>attribute.
 When present, novalidate specifies that the form
data should not be validated when submitted.
 Example
 Indicates that the form is not to be validated on
submit:
 <form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
THE AUTOFOCUS ATTRIBUTE

 The autofocus attribute specifies that the

input field should automatically get focus
when the page loads.
 Example
 Let the "First name" input field automatically
get focus when the page loads:
 First
name:<input type="text" name="fname" autof
ocus>
 THE FORM ATTRIBUTE
 The form attribute specifies one or more forms
an <input> element belongs to.
 Tip: To refer to more than one form, use a space-
separated list of form ids.
 Example
 An input field located outside the HTML form (but still a
part of the form):
 <form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last
name: <input type="text" name="lname" form="form1">
 THE FORMACTION ATTRIBUTE
 The formaction attribute specifies the URL of a file that will
process the input control when the form is submitted.
 The formaction attribute overrides the action attribute of
the <form> element.
 The formaction attribute is used
with type="submit" and type="image".
 Example
 An HTML form with two submit buttons, with different
actions:
 <form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>
 THE FORMENCTYPE ATTRIBUTE
 The formenctype attribute specifies how the form data should
be encoded when submitted (only for forms with
method="post").
 The formenctype attribute overrides the enctype attribute of
the <form> element.
 The formenctype attribute is used
with type="submit" and type="image".
 Example
 Send form-data that is default encoded (the first submit
button), and encoded as "multipart/form-data" (the second
submit button):
 <form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>
 THE FORMMETHOD ATTRIBUTE
 The formmethod attribute defines the HTTP method for
sending form-data to the action URL.
 The formmethod attribute overrides the method attribute of
the <form> element.
 The formmethod attribute can be used
with type="submit" and type="image".
 Example
 The second submit button overrides the HTTP method of the
form:
 <form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using
POST">
</form>
 THE FORMNOVALIDATE ATTRIBUTE

 The formnovalidate attribute overrides the

novalidate attribute of the <form>element.
 The formnovalidate attribute can be used
with type="submit".
 Example
 A form with two submit buttons (with and without
validation):
 <form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate
value="Submit without validation">
</form>
 THE FORMTARGET ATTRIBUTE
 The formtarget attribute specifies a name or a keyword that
indicates where to display the response that is received after
submitting the form.
 The formtarget attribute overrides the target attribute of
the <form> element.
 The formtarget attribute can be used
with type="submit" and type="image".
 Example
 A form with two submit buttons, with different target windows:
 <form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>
 THE HEIGHT AND WIDTH ATTRIBUTES
 The height and width attributes specify the
height and width of an <input
type="image"> element.
 Always specify the size of images. If the browser
does not know the size, the page will flicker
while images load.
 Example
 Define an image as the submit button, with
height and width attributes:
 <input type="image" src="img_submit.gif" alt="Su
bmit" width="48" height="48">
 THE LIST ATTRIBUTE
 The list attribute refers to a <datalist>element that
contains pre-defined options for an <input> element.
 Example
 An <input> element with pre-defined values in a
<datalist>:
 <input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
 THE MIN AND MAX ATTRIBUTES
 The min and max attributes specify the minimum and
maximum values for an <input> element.
 The min and max attributes work with the following input
types: number, range, date, datetime-local, month, time and
week.
 Example
 <input> elements with min and max values:
 Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">
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.
 Example
 A file upload field that accepts multiple values:
 Select
images: <input type="file" name="img" multiple>
 THE PATTERN ATTRIBUTE

 The pattern attribute specifies a regular expression that

the <input> element's value is checked against.
 The pattern attribute works with the following input types:
text, search, url, tel, email, and password.
 Tip: Use the global title attribute to describe the pattern
to help the user.
 Tip: Learn more about regular expressions in our JavaScript
tutorial.
 Example
 An input field that can contain only three letters (no
numbers or special characters):
 Country
code: <input type="text" name="country_code" pattern="[A-
Za-z]{3}" title="Three letter country code">
 THE PLACEHOLDER ATTRIBUTE

 The placeholder attribute specifies a hint that

describes the expected value of an input field (a
sample value or a short description of the format).
 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.
 Example
 An input field with a placeholder text:
 <input type="text" name="fname" placeholder="First
name">
 THE REQUIRED ATTRIBUTE

 The required attribute specifies that an input

field must be filled out before submitting the
form.
 The required attribute works with the
following input types: text, search, url, tel,
email, password, date pickers, number,
checkbox, radio, and file.
 Example
 A required input field:
 Username: <input type="text" name="usrname" 
required>
 THE STEP ATTRIBUTE
 The step attribute specifies the legal number
intervals for an <input> element.
 Example: if step="3", legal numbers could be -3, 0, 3,
6, etc.
 Tip: The step attribute can be used together with the
max and min attributes to create a range of legal
values.
 The step attribute works with the following input
types: number, range, date, datetime-local, month,
time and week.
 Example
 An input field with a specified legal number intervals:
 <input type="number" name="points" step="3">
HTML FORM AND INPUT ELEMENTS

Tag Description

<form> Defines an HTML

form for user
input
<input> Defines an input
control
THANK YOU…!