Scribd
Upload
18 views

HTML Forms

Uploaded by

Muhammad Rasool Al-Jaafrah
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
18 views

HTML Forms

Uploaded by

Muhammad Rasool Al-Jaafrah
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 95

HTML FORMS

BIT 381
HTML Form
An HTML form is a section of a document which contains
controls such as text fields, password fields, checkboxes,
radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to


be sent to the server for processing such as name, email
address, password, phone number, etc.
An HTML form is used to collect user input. The
user input is most often sent to a server for
processing.
Example: HTML Form

<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"
value="Mohammad"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"
value="Jaafrah"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a
page called "/action_page.php".</p>

</body>
</html>
HTML Form & Form Attributes
HTML Form Syntax

The <form> element is a container for different types of input


elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
How forms work
How forms work
HTML Form Attributes

o HTML action attribute


o HTML method attribute
o HTML target attribute
o HTML autocomplete attribute
o HTML enctype attribute
o HTML novalidate attribute HTML5
o ……
The Action Attribute
o The action attribute defines the action to be performed when the form is submitted.
o Usually, the form data is sent to a file on the server when the user clicks on the submit button.
o Tip: If the action attribute is omitted, the action is set to the current page.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value=“Mohammad"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value=“Jaafrah"><br><br>
<input type="submit" value="Submit">
o the form data is sent to a file called "action_page.php". This file contains a server-side
</form>
script that handles the form data:
The Target Attribute
o The target attribute specifies where to display the response that is received after
submitting the form.
o The target attribute can have one of the following values:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

**The default value is _self which means that the response will open in the current window.
The Method Attribute

o The method attribute specifies the HTTP method to be used when submitting the form
data.
o The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post”).
o The default HTTP method when submitting form data is GET.
The Method Attribute

get: The get value of method attribute is default value while submitting
the form. But this is not secure as it displays data in URL after
Notes on GET:the form.
submitting

Appends the form data to the URL, in name/value pairs


NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
GET is good for non-secure data, like query strings in Google
The Method Attribute

post: We can use the post value of method attribute when we want to
process the sensitive data as it does not display the submitted data in
URL.
Notes on POST:

Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
POST has no size limitations and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked
The Autocomplete Attribute

o The autocomplete attribute specifies whether a form should have autocomplete on or


off.
o When autocomplete is on, the browser automatically complete values based on values that the
user has entered before.
The novalidate Attribute
o The novalidate attribute is a <form> attribute.
o When present, novalidate specifies that all of the form-data should not be validated when submitted.

<form action="/action_page.php" novalidate>


<label for="email">Enter your email:</label>
<input type="email" id="email"
name="email"><br><br>
<input type="submit" value="Submit">
</form>
HTML Form Elements
HTML Form Elements

o The HTML <form> element can contain one or more of the following form elements:

 The <label> Element


 The <input> Element
 The <select> Element
 The <button> Element
 The <datalist> Element
 The <output> Element
 …………
The Name Attribute for <input>

 Notice that each input field must have a name attribute to be submitted.

 If the name attribute is omitted, the value of the input field will not be sent at
all.
The <label> Element

o The <label> tag defines a label for many form elements.


o The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focuses on the input element.
o The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within the
<label> element, it toggles the radio button/checkbox.
o The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.
The <label> Element- Example
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</form>
HTML <input> element

o The HTML <input> element is fundamental form element.


o It is used to create form fields, to take input from user.
o We can apply different input filed to gather different information form user.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname"
name="fname"><br><br>
<input type="submit" value="Submit">
</form>
The <select> Element

o The <select> element defines a drop-down list:

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value=“BMW">BMW</option>
<option value=“Ford">Ford</option>
<option value=“KIA">KIA</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The <select> Element-selected value
o The <option> element defines an option that can be selected.
o By default, the first item in the drop-down list is selected.
o To define a pre-selected option, add the selected attribute to the option:
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="KIA" selected>KIA</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The <select> Element-visible value
o Use the size attribute to specify the number of visible values:

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="KIA" selected>KIA</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The <select> Element- Multiple Selections:
o Use the multiple attribute to allow the user to select more than one value:

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3“ multiple >
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="KIA" selected>KIA</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The <textarea> Element
o The <textarea> element defines a multi-line input field (a text area):
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">WELCOM TO YARMOUK UNIVERSITY
</textarea>
<br><br>
<input type="submit">
</form>
o The rows attribute specifies the visible number of lines in a text area.
o The cols attribute specifies the visible width of a text area.
o You can also define the size of the text area by using CSS:
<textarea name="message" style="width:200px; height:600px;">
WELCOM TO YARMOUK UNIVERSITY
</textarea>
The <button> Element
o The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click


Me!</button>
The <fieldset> and <legend> Elements
o The <fieldset> element is used to group related data in a form.
o The <legend> element defines a caption for the <fieldset> element.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="Mohammad"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Jaafrah"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <datalist> Element
o The <datalist> element specifies a list of pre-defined options for an <input>
element.
o Users will see a drop-down list of the pre-defined options as they input data.
<form action="/action_page.php">
o The list attribute of the <input> element, must refer to the id attribute of the
<input list="browsers" name="browser">
<datalist>
<datalist element.
id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
The <output> Element
o The <output> element represents the result of a calculation (like one performed by a
script).
<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>
HTML Input Types
HTML <input> element

o The HTML <input> element is fundamental form element.


o It is used to create form fields, to take input from user.
o We can apply different input filed to gather different information form user.
HTML TextField Control

o The type="text" attribute of input tag creates textfield control also known as single line
textfield control.
o The name attribute is optional, but it is required for the server side component such as JSP,
ASP, PHP etc.(Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.)

<form>
First Name: <input type="text" name="firstname"/>
<br/>
Last Name: <input type="text" name="lastname"/>
<br/>
</form>
Text Field -Example
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"
value="Mohammad"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="Jaafrah">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20
characters.</p>
</body>
</html>
HTML Password Field Control

o The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password"
name="password"/> <br/>
</form>
HTML 5 Email Field Control

o The email field in new in HTML 5.

o It validates the text for correct email address. You must use @ and . in this field.
o Note: If we will not enter the correct email, it will display error like:
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/>
<br/>
</form>
Input Type Submit

o <input type="submit"> defines a button for submitting form data to a form-handler.


o The form-handler is typically a server page with a script for processing input data.
o The form-handler is specified in the form's action attribute:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" ><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
><br><br>
<input type="submit" value="Submit">
</form>
Input Type Submit
o <input type="submit"> defines a button for submitting form data to a form-handler.
o The form-handler is typically a server page with a script for processing input data.
o The form-handler is specified in the form's action attribute:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" ><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
><br><br>
<input type="submit" value="Submit">
</form>
o If you omit the submit button's value attribute, the button will get a default text:
Submit button control
o The <input type="submit"> defines a button for submitting the form data to a form-
handler.
o The form-handler is typically a file on the server with a script for processing input data.
o The form-handler is specified in the form's action attribute.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>
Submit button control-Example
<!DOCTYPE html>
<html>
<body>
<h2>LOGIN Forms</h2>
<form>
<label for="name">USER NAME</label>
<input type="text" id="name" name="name"><br> <br>
<label for="pass">PASSWORD</label>
<input type="Password" id="pass" name="pass"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Input Type Reset
o <input type="reset"> defines a reset button that will reset all form values to their
default values:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" ><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
• If you change the input values and then click the "Reset" button, the form-data
will be reset to the default values.
Input Type Button
o <input type="button"> defines a button:

<input type="button" onclick="alert('Hello World!')"


value="Click Me!">
Radio Button Control
o The <input type="radio"> defines a radio button.
o Radio buttons let a user select ONE of a limited number of choices.
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Radio Button Control-Example

<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender"
value="male"/>Male
<input type="radio" id="gender" name="gender"
value="female"/>Female <br/>
</form>

 If you use one name for all the radio buttons, only one radio button can be selected at a
time.

 Using radio buttons for multiple options, you can only choose a single option at a time.
Checkbox Control
o The <input type="checkbox"> defines a checkbox.
o Checkboxes let a user select ZERO or MORE options of a limited number of choices..
<form>
<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Input Type Color
o The <input type="color"> is used for input fields that should contain a color.
o Depending on browser support, a color picker can show up in the input field.

<form action="/action_page.php">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"
value="#ff0000">
<input type="submit" value="Submit">
</form>
Input Type Date
o The <input type="date"> is used for input fields that should contain a date.
o Depending on browser support, a date picker can show up in the input field.

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Input Type Date
o You can also use the min and max attributes to add restrictions to
dates:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Input Type Datetime-local
o The <input type="datetime-local"> specifies a date and time input field, with no time
zone.
o Depending on browser support, a date picker can show up in the input field.
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime"
name="birthdaytime">
</form>
Input Type Image
o The <input type="image"> defines an image as a submit button.
o The path to the image is specified in the src attribute.

<form action="/action_page.php">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
</form>
Input Type File
o The <input type="file"> defines a file-select field and a "Browse" button for file
uploads.

<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile"
name="myfile"><br><br>
<input type="submit" value="Submit">
</form>
Input Type Hidden
o The <input type="hidden"> defines a hidden input field (not visible to a user).
o A hidden field lets web developers include data that cannot be seen or modified by users when a form is
submitted.
o A hidden field often stores what database record that needs to be updated when the form is submitted.
o Note: While the value is not displayed to the user in the page's content, it is visible (and can be
edited) using any browser's developer tools or "View Source" functionality. Do not use hidden
inputs as a form of security!
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value=“9999">
<input type="submit" value="Submit">
</form>
Input Type Month
o The <input type="month"> allows the user to select a month and year.
o Depending on browser support, a date picker can show up in the input field.

<form action="/action_page.php">
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Submit">
</form>
Input Type Number
o The <input type="number"> defines a numeric input field.
o You can also set restrictions on what numbers are accepted.
o The following example displays a numeric input field, where you can enter a value from 1 to 5:

<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1"
max="5">
<input type="submit" value="Submit">
</form>
Input Type Number
o Input Restrictions Attribute Description

checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or
type="radio")

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlengt Specifies the maximum number of character for an input field


h
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


Input Type Range
o The <input type="range"> defines a control for entering a number whose exact value is not important
(like a slider control).
o Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max,
and step attributes:
<form action="/action_page.php" method="get">
<label for="vol">Volume (between 0 and
50):</label>
<input type="range" id="vol" name="vol" min="0"
max="50">
<input type="submit" value="Submit">
</form>
Input Type Search
o The <input type="search"> is used for search fields (a search field behaves like a regular text field).

<form action="/action_page.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch"
name="gsearch">
<input type="submit" value="Submit">
</form>
Input Type Tel
o The <input type="tel"> is used for input fields that should contain a telephone number.

<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-
9]{2}-[0-9]{3}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>
Input Type Time
o The <input type="time"> allows the user to select a time (no time zone).
o Depending on browser support, a time picker can show up in the input field.

<form action="/action_page.php">
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Submit">
</form>
Input Type URL
o The <input type="url"> is used for input fields that should contain a URL address.
o Depending on browser support, the url field can be automatically validated when submitted.
o Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

<form action="/action_page.php">
<label for="homepage">Add your
homepage:</label>
<input type="url" id="homepage"
name="homepage">
<input type="submit" value="Submit">
</form>
Input Type Week
o The <input type="week"> allows the user to select a week and year.
o Depending on browser support, a date picker can show up in the input field.

<form action="/action_page.php">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Submit">
</form>
HTML Input Attributes
The value Attribute
o The input value attribute specifies an initial value for an input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="Mohammad"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Jaafrah"><br><br>
<input type="submit" value="Submit">
</form>
The readonly Attribute
o The input readonly attribute specifies that an input field is read-only.
o A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from
it).
o The value of a read-only input field will be sent when submitting the form!
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Mohammad“
readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Jaafrah"><br><br>
<input type="submit" value="Submit">
</form>
The disabled Attribute
o The input disabled attribute specifies that an input field should be disabled.
o A disabled input field is unusable and un-clickable.
o The value of a disabled input field will not be sent when submitting the form!

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Mohammad“
disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Jaafrah"><br><br>
<input type="submit" value="Submit">
</form>
The size Attribute
o The input size attribute specifies the visible width, in characters, of an input field.
o The default value for size is 20.
o Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="30"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4"><br><br>
<input type="submit" value="Submit">
</form>
The maxlength Attribute
o The input maxlength attribute specifies the maximum number of characters allowed in an input field.
o Note: When a maxlength is set, the input field will not accept more than the specified
number of characters. However, this attribute does not provide any feedback. So, if you
want to alert the user, you must write JavaScript code .

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" maxlength="5"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4"
size="4"><br><br>
<input type="submit" value="Submit">
</form>
The min and max Attributes
o The input min and max attributes specify the minimum and maximum values for an input field.
o The min and max attributes work with the following input types: number, range, date, datetime-local, month,
time and week.
o Tip: Use the max and min attributes together to create a range of legal values.

<form action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-
02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1"
The multiple Attribute
o The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.
o The multiple attribute works with the following input types: email, and file.

<form action="/action_page.php">
<label for="files">Select files:</label>
<input type="file" id="files" name="files"
multiple><br><br>
<input type="submit" value="Submit">
</form>
The pattern Attribute
o The input pattern attribute specifies a regular expression that the input field's value is checked against,
when the form is submitted.
o The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three
letter country code"><br><br>
<input type="submit" value="Submit">
</form>
The pattern Attribute-Example

<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required><br><br>

<label for="psw">Password</label>
<input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or
more characters" required>

<input type="submit" value="Submit">


</form>
The placeholder Attribute
o The input placeholder attribute specifies a short hint that describes the expected value of an input
field (a sample value or a short description of the expected format).
o The short hint is displayed in the input field before the user enters a value.
o The placeholder attribute works with the following input types: text, search, url, number, tel, email, and
password.

<form action="/action_page.php">
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-
[0-9]{3}"><br><br>
<input type="submit" value="Submit">
</form>
The required Attribute
o The input required attribute specifies that an input field must be filled out before submitting the form.
o The required attribute works with the following input types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required>
<input type="submit" value="Submit">
</form>
The step Attribute
o The input step attribute specifies the legal number intervals for an input field.
o Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
o Tip: This attribute can be used together with the max and min attributes to create a range of legal values.
o The step attribute works with the following input types: number, range, date, datetime-local, month, time and
week.

<form action="/action_page.php">
<label for="points">Points:</label>
<input type="number" id="points" name="points"
step="3">
<input type="submit" value="Submit">
</form>
The autofocus Attribute
o The input autofocus attribute specifies that an input field should automatically get focus when the page
loads.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
</form>
The height and width Attributes
o The input height and width attributes specify the height and width of an <input type="image">
element.

<form action="/action_page.php">

<input type="image" src="img_submit.gif" alt="Submit" width="48"


height="48">
</form>
The list Attribute
o The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
The autocomplete Attribute
o The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or
off.
o Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should
display options to fill in the field, based on earlier typed values.
o The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email,
<form action="/action_page.php"
password, datepickers, range, andautocomplete="on">
color.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
autocomplete="off"><br><br>
<input type="submit" value="Submit">
HTML Input form* Attributes
HTML Input form* Attributes
Attribute Description
form specifies the form the <input> element belongs to.
formaction specifies the URL of the file that will process the input when the form is submitted.
formenctype
specifies how the form-data should be encoded when submitted (only for forms with
method="post").
formmethod defines the HTTP method for sending form-data to the action URL.
formtarget specifies a name or a keyword that indicates where to display the response that is
received after submitting the form.
formnovalidate specifies that an <input> element should not be validated when submitted.
novalidate ospecifies that all of the form-data should not be validated when submitted.
The form Attribute
o The input form attribute specifies the form the <input> element belongs to.
o The value of this attribute must be equal to the id attribute of the <form> element it belongs to.

<body>
<form action="/action_page.php" id="form1">
<!--Note that there are no code here-->
</form>
<label for="fname" form="form1">First name:</label>
<input type="text" id="fname" name="fname"
form="form1"><br><br>
<label for="lname" form="form1">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
<input type="submit" value="Submit" form="form1">

</body>
The formaction Attribute
o The input formenctype attribute specifies how the form-data should be encoded when submitted (only
for forms with method="post").
o Note: This attribute overrides the enctype attribute of the <form> element.
o The formenctype attribute works with the following input types: submit and image.

<form action="/action_page_binary.asp"
method="post">
<label for="fname">First name:</label>
<input type="text" id="fname"
name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data" value="Submit
as Multipart/form-data">
The formenctype Attribute
o The input formenctype attribute specifies how the form-data should be encoded when submitted (only
for forms with method="post").
o Note: This attribute overrides the enctype attribute of the <form> element.
o The formenctype attribute works with the following input types: submit and image.

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit
as Admin">
</form>
The formmethod Attribute
o The input formmethod attribute defines the HTTP method for sending form-data to the action URL.
o Note: This attribute overrides the method attribute of the <form> element.
o The formmethod attribute works with the following input types: submit and image.
o The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").

<form action="/action_page.php" method="get" target="_blank">


<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
The formtarget Attribute
o The input formtarget attribute specifies a name or a keyword that indicates where to display the
response that is received after submitting the form.
o Note: This attribute overrides the target attribute of the <form> element.
o The formtarget attribute works with the following input types: submit and image.

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new
window/tab">
</form>
The formnovalidate Attribute
o The input formnovalidate attribute specifies that an <input> element should not be validated when
submitted.
o Note: This attribute overrides the novalidate attribute of the <form> element.
o The formnovalidate attribute works with the following input types: submit.

<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate" value="Submit without
validation">
</form>
The novalidate Attribute
o The novalidate attribute is a <form> attribute.
o When present, novalidate specifies that all of the form-data should not be validated when submitted.

<form action="/action_page.php" novalidate>


<label for="email">Enter your email:</label>
<input type="email" id="email"
name="email"><br><br>
<input type="submit" value="Submit">
</form>
Examples
Example1
<form>
<label for="firstname">First name: </label>
<input type="text" name="firstname" required> <br><br>
<label for="lastname">Last name: </label>
<input type="text" name="lastname" required> <br><br>
<label for="email">E - Mail : </label>
<input type="email" name="mail" required> <br><br>
<label for="password">password : </label>
<input type="password" name="password" pattern="(?=.*\d)(?=.*[a-
z])(?=.*[A-Z]).{8,}" required> <br><br>
<input type="submit" value="Login!">
</form>
Example2
Example2
<form>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="Enter your full name please " size=70 ><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="jordan">Jordan</option>
<option value="palestine">Palestine</option>
<option value="iraq">Iraq</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="70" rows="4" placeholder="Enter your Message here ... "></textarea><br><br>
<input type="checkbox" name="sub" id="sub">
<label for="sub">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
Example3
Example3
<form> <label>Confirm your <label> Enter your Date of
<fieldset> password</label> Birth</label>
<legend> <input <input
User personal information type="password" type="date“
</legend> name="confirmPass" name="dob"
<label > /><br><br> /><br><br>
Enter your full name <label>Enter your gender</label> <label>Enter your Address:</label>
</label> <input <textarea
<input type="text" name="name" type="radio" name="address"
/><br><br> name="gender" ></textarea><br><br>
<label>Enter your email</label> value="male" <input
<input />Male type="submit"
type="email" <input value="submit"
name="email" type="radio" />
/><br><br> name="gender" </fieldset>
<label>Enter your password</label> value="female" </form>
<input />Female
type="password" <input
name="pass" type="radio"
/><br><br> name="gender"
value="others"
Example…..
End of chapter

You might also like