in Python allows you to manipulate functions for increasing the flexibility and re-usability of your code. You can create higher-order functions using nested scopes or callable objects.
Additionally, the functools module provides utilities for working with higher-order functions, making it easier to create decorators and other function-manipulating constructs. This tutorial will explore the concept of higher-order functions in Python and demonstrate how to create them.
What is a Higher-Order Function?
A higher-order function is a function that either, takes one or more functions as arguments or returns a function as its result. Below you can observe the some of the properties of the higher-order function in Python −
A function can be stored in a variable.
A function can be passed as a parameter to another function.
A high order functions can be stored in the form of lists, hash tables, etc.
Function can be returned from a function.
To create higher-order function in Python you can use nested scopes or callable objects. Below we will discuss about them briefly.
Advertisement
Creating Higher Order Function with Nested Scopes
One way to defining a higher-order function in Python is by using nested scopes. This involves defining a function within another function and returns the inner function.
Example
Let’s observe following example for creating a higher order function in Python. In this example, the multiplier function takes one argument, a, and returns another function multiply, which calculates the value a * b
defmultiplier(a):# Nested function with second number defmultiply(b):# Multiplication of two numbers return a * b
return multiply
# Assigning nested multiply function to a variable
multiply_second_number = multiplier(5)# Using variable as high order function
Result = multiply_second_number(10)# Printing result print("Multiplication of Two numbers is: ", Result)
Output
On executing the above program, you will get the following results −
Multiplication of Two numbers is: 50
Creating Higher-Order Functions with Callable Objects
Another approach to create higher-order functions is by using callable objects. This involves defining a class with a __call__ method.
Example
Here is the another approach to creating higher-order functions is using callable objects.
classMultiplier:def__init__(self, factor):
self.factor = factor
def__call__(self, x):return self.factor * x
# Create an instance of the Multiplier class
multiply_second_number = Multiplier(2)# Call the Multiplier object to computes factor * x
Result = multiply_second_number(100)# Printing result print("Multiplication of Two numbers is: ", Result)
Output
On executing the above program, you will get the following results −
Multiplication of Two numbers is: 200
Higher-order functions with the ‘functools’ Module
The functools module provides higher-order functions that act on or return other functions. Any callable object can be treated as a function for the purposes of this module.
Working with Higher-order functions using the wraps()
In this example, my_decorator is a higher-order function that modifies the behavior of invite function using the functools.wraps() function.
import functools
defmy_decorator(f):@functools.wraps(f)defwrapper(*args,**kwargs):print("Calling", f.__name__)return f(*args,**kwargs)return wrapper
@my_decoratordefinvite(name):print(f"Welcome to, {name}!")
invite("Tutorialspoint")
Output
On executing the above program, you will get the following results −
Calling invite
Welcome to, Tutorialspoint!
Working with Higher-order functions using the partial()
The partial() function of the functools module is used to create a callable ‘partial’ object. This object itself behaves like a function. The partial() function receives another function as argument and freezes some portion of a functions arguments resulting in a new object with a simplified signature.
Example
In following example, a user defined function myfunction() is used as argument to a partial function by setting default value on one of the arguments of original function.
On executing the above program, you will get the following results −
100
Working with Higher-order functions using the reduce()
Similar to the above approach the functools module provides the reduce() function, that receives two arguments, a function and an iterable. And, it returns a single value. The argument function is applied cumulatively two arguments in the list from left to right. Result of the function in first call becomes first argument and third item in list becomes second. This is repeated till list is exhausted.
Example
import functools
defmult(x,y):return x*y
# Define a number to calculate factorial
n =4
num = functools.reduce(mult,range(1, n+1))print(f'Factorial of {n}: ',num)
Output
On executing the above program, you will get the following results −
A Script is a small program which is used with HTML to make web pages more attractive, dynamic and interactive, such as an alert popup window on mouse click. Currently, the most popular scripting language is JavaScript used for websites.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
HTML <script> Tag
The HTML <script> tag is used to specify a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section.
It is mainly used to manipulate images, form validation and change content dynamically. JavaScript uses document.getElementById() method to select an HTML element.
An event is something which user does, or browser does such as mouse click or page loading are examples of events, and JavaScript comes in the role if we want something to happen on these events.
HTML provides event handler attributes which work with JavaScript code and can perform some action on an event.
Syntax:
<element event = "JS code">
Example:
<input type="button" value="Click" onclick="alert('Hi, how are you')">
Output:
Click Event Example
Click on the button and you csn see a pop-up window with a message
HTML can have following events such as:
Form events: reset, submit, etc.
Select events: text field, text area, etc.
Focus event: focus, blur, etc.
Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc.
Following are the list for Window event attributes:
Event Event Name
Handler Name
Occurs when
onBlur
blur
When form input loses focus
onClick
click
When the user clicks on a form element or a link
onSubmit
submit
When user submits a form to the server.
onLoad
load
When page loads in a browser.
onFocus
focus
When user focuses on an input field.
onSelect
select
When user selects the form input filed.
Note: You will learn more about JavaScript Events in our JavaScript tutorial.
Let’s see what JavaScript can do:
1) JavaScript can change HTML content.
Example:
<!DOCTYPE html>
<html>
<body>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaTpoint!";
}
</script>
</body>
</html>
2) JavaScript can change HTML style
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "brown";
document.getElementById("demo").style.backgroundColor = "lightgreen";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
Suppose, you have various HTML files which should have same script, then we can put our JavaScript code in separate file and can call in HTML file. Save JavaScript external files using .js extension.
Note: Do not add <script> tag in the external file, and provide the complete path where you have put the JS file.
function fun() {
var x = document.getElementById("frm1").value;
alert("Hi"+" "+x+ "you have successfully submitted the details");
}
Output:
HTML <noscript> Tag
HTML <noscript> tag is used to write disabled script in the browser. The text written within <noscript></noscript> tag is not displayed on the browser.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>This text is not visible in the browser.</noscript>
</body>
</html>
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline frame.
An HTML iframe embeds another document within the current HTML document in the rectangular region.
The webpage content and iframe contents can interact with each other using JavaScript.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
Here, “src” attribute specifies the web address (URL) of the inline frame page.
Set Width and Height of iframe
You can set the width and height of iframe by using “width” and “height” attributes. By default, the attributes values are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.
Example: (Pixels)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>
</body>
</html>
Example: (Percentage)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://www.javatpoint.com/" height="50%" width="70%"></iframe>
</body>
</html>
You can also use CSS to set the height and width of the iframe.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Use the CSS height and width properties to specify the size of the iframe:</p>
You can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="https://www.javatpoint.com" target="iframe_a">JavaTpoint.com</a></p>
<p>The name of iframe and link target must have same value else link will not open as a frame. </p>
</body>
</html>
new.hmtl output code:
<!DOCTYPE html> <html> <head> <style> p{ font-size: 50px; color: red;} </style> </head> <body style="background-color: #c7f15e;"> <p>This is a link below the ifarme click on link to open new iframe. </p> </body> </html>
Embed YouTube video using iframe
You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many more properties for the video.
Following are some steps to add YouTube video on your webpage:
Goto YouTube video which you want to embed.
Click on SHARE ➦ under the video.
Click on Embed <> option.
Copy HTML code.
Paste the code in your HTML file
Change height, width, and other properties (as per requirement).
The id attribute is used to specify the unique ID for an element of the HTML document. It allocates the unique identifier which is used by the CSS and the JavaScript for performing certain tasks.
Note: In the Cascading Style sheet (CSS), we can easily select an element with the specific id by using the # symbol followed by id.
Note: JavaScript can access an element with the given ID by using the getElementById() method.
Syntax
<tag id="value">
Example 1: The following example describes how to use the id attribute in CSS document:
<!DOCTYPE html>
<html>
<head>
<title>
Example of Id attribute in CSS
</title>
<style>
#Cars {
padding: 40px;
background-color: lightblue;
color: black;
text-align: center;
}
#Bikes
{
padding: 50px;
background-color: lightGreen;
text-align: center;
}
</style>
</head>
<body>
<p> Use CSS to style an element with the id: </p>
<h1 id="Cars"> Cars </h1>
<h1 id="Bikes"> Bikes </h1>
</body>
</html>
Output:
Example 2: The following example describes how to use the ID attribute in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> Date Attribute </title>
<script>
function viewdate() {
var x = document.getElementById("dob").value;
document.getElementById("demo").innerHTML = x;
</script>
</head>
<body>
Employee Name: <input type="text" placeholder="Your Good name"/>
<br>
<br>
Date of Joining:
<input type="date" id="dob">
<br>
<button onclick="viewdate()"> Submit
</button>
<br>
<h2 id="demo"> </h2>
</body>
</html>
Let’s suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties.
CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.
CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).
Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.
Example:
<body style="text-align: center;">
<h2 style="color: red;">Welcome to javaTpoint</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">This is a great website to learn technologies in very simple way. </p>
</body>
In the above example, we have used a style attribute to provide some styling format to our code.
Output:
Welcome to javaTpoint
This is a great website to learn technologies in very simple way.
Three ways to apply CSS
To use CSS with HTML document, there are three ways:
Inline CSS: Define CSS properties using style attribute in the HTML elements.
Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.
Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.
To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).
Example:
<h3 style="color: red;
font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;">Learning HTML using Inline CSS</h3>
Output:
Learning HTML using Inline CSS
Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.
We can use internal CSS to apply a style for a single HTML page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using element name*/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/*Internal CSS using class name*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Note: In the above example, we have used a class attribute which you will learn in the next chapter.
External CSS:
An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.
If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.
There are two files need to create to apply external CSS
First, create the HTML file
Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
Link the CSS file in your HTML file using tag in header section of HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
In HTML there are various attributes available for <form> element which are given below:
HTML action attribute
The action attribute of <form> element defines the process to be performed on form when form is submitted, or it is a URI to process the form information.
The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to process your form.
Note: If action attribute value is blank then form will be processed to the same page.
It will redirect to a new page “action.html” when you click on submit button
HTML method attribute
The method attribute defines the HTTP method which browser used to submit the form. The possible values of method attribute can be:
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.
Example:
<form action="action.html" method="post">
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 submitting the form.
AD
Example:
<form action=”action.html” method=”get”>
When submitting the data, it will display the entered data in the form of:
The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to complete automatically. It can have two values “on” and “off” which enables autocomplete either ON or OFF. The default value of autocomplete attribute is “on”.
Note: it can be used with <form> element and <input> element both.
HTML enctype attribute
The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server. The possible values of enctype can be:
application/x-www-form-urlencoded: It is default encoding type if the enctype attribute is not included in the form. All characters are encoded before submitting the form.
The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this attribute in form then it does not perform any type of validation and submit the form.
Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference.
HTML <input> element attribute
HTML name attribute
The HTML name attribute defines the name of an input element. The name and value attribute are included in HTTP request when we submit the form.
Note: One should not omit the name attribute as when we submit the form the HTTP request includes both name-value pair and if name is not available it will not process that input field.
Example:
<form action = "action.html" method = "get">
Enter name:<br><input type="name" name="uname"><br>
Enter age:<br><input type="number" name="age"><br>
Enter email:<br><input type="email"><br>
<input type="submit" value="Submit">
</form>
Output:
Fill the form
Enter name:
Enter age:
Enter email:
Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form.
Click on submit and see the URL where email is not included in HTTP request as we have not used name attribute in the email input field
HTML value attribute
The HTML value attribute defines the initial value or default value of an input field.
Example:
<form>
<label>Enter your Name</label><br>
<input type="text" name="uname" value="Enter Name"><br><br>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" value="Enter email"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" value=""><br><br>
<input type="submit" value="login">
</form>
Output:
Fill the form
Enter your Name
Enter your Email-address
Enter your password
Note: In password input filed the value attribute will always unclear
HTML required attribute HTML5
HTML required is a Boolean attribute which specifies that user must fill that filed before submitting the form.
Example:
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" required><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>
Output:
Fill the form
Enter your Email-address
Enter your password
If you will try to submit the form without completing email field then it will give an error pop up.
HTML autofocus attribute HTML5
The autofocus is a Boolean attribute which enables a field automatically focused when a webpage loads.
In HTML <input type=” “> is an important element of HTML form. The “type” attribute of input element can be various types, which defines information field. Such as <input type=”text” name=”name”> gives a text box.
Following is a list of all types of <input> element of HTML.
type=” “
Description
text
Defines a one-line text input field
password
Defines a one-line password input field
submit
Defines a submit button to submit the form to server
reset
Defines a reset button to reset all values in the form.
radio
Defines a radio button which allows select one option.
checkbox
Defines checkboxes which allow select multiple options form.
button
Defines a simple push button, which can be programmed to perform a task on an event.
file
Defines to select the file from device storage.
image
Defines a graphical submit button.
HTML5 added new types on <input> element. Following is the list of types of elements of HTML5
type=” “
Description
color
Defines an input field with a specific color.
date
Defines an input field for selection of date.
datetime-local
Defines an input field for entering a date without time zone.
email
Defines an input field for entering an email address.
month
Defines a control with month and year, without time zone.
number
Defines an input field to enter a number.
url
Defines a field for entering URL
week
Defines a field to enter the date with week-year, without time zone.
search
Defines a single line text field for entering a search string.
tel
Defines an input field for entering the telephone number.
Following is the description about types of <input> element with examples.
1. <input type=”text”>:
<input> element of type “text” are used to define a single-line input text field.
Example:
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
<p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
</form>
Output:
Input “text” type:
The “text”field defines a sinlge line input text field.Enter first name
Enter last name
Note:The default maximum cahracter lenght is 20.
2. <input type=”password”>:
The <input> element of type “password” allow a user to enter the password securely in a webpage. The entered text in password filed converted into “*” or “.”, so that it cannot be read by another user.
After clicking on submit button, this will submit the form to server and will redirect the page to action value.We will learn about “action” attribute in later chapters
4. <input type=”reset”>:
The <input> type “reset” is also defined as a button but when the user performs a click event, it by default reset the all inputted values.
Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values.
5. <input type=”radio”>:
The <input> type “radio” defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time.
Example:
<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
Kindly Select your favorite color Red blue green pink
6. <input type=”checkbox”>:
The <input> type “checkbox” are displayed as square boxes which can be checked or unchecked to select the choices from the given options.
Note: The “radio” buttons are similar to checkboxes, but there is an important difference between both types: radio buttons allow the user to select only one option at a time, whereas checkbox allows a user to select zero to multiple options at a time.
Kindly Select your favorite sportsCricket Tennis Football Baseball Badminton
7. <input type=”button”>:
The <input> type “button” defines a simple push button, which can be programmed to control a functionally on any event such as, click event.
Note: It mainly works with JavaScript.
Example:
<form>
<input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
</form>
Output:
Input “button” type.
Click the button to see the result:
Note: In the above example we have used the “alert” of JS, which you will learn in our JS tutorial. It is used to show a pop window.
8. <input type=”file”>:
The <input> element with type “file” is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.
The <input> type “color” is used to define an input field which contains a colour. It allows a user to specify the colour by the visual colour interface on a browser.
Note: The “color” type only supports color value in hexadecimal format, and the default value is #000000 (black).
Note:The default value of “color” type is #000000 (black). It only supports color value in hexadecimal format.
2. <input type=”date”>:
The <input> element of type “date” generates an input field, which allows a user to input the date in a given format. A user can enter the date by text field or by date picker interface.
Example:
<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End date:<br><br>
<input type="submit">
</form>
Output:
Input “date” type
Select Start and End Date:
Start date:
End date:
3. <input type=”datetime-local”>:
The <input> element of type “datetime-local” creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information.
Example:
<form>
<label>
Select the meeting schedule: <br><br>
Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
</label>
<input type="submit">
</form>
Output:
Input “datetime-local” type
Select the meeting schedule:
Select date & time:
4. <input type=”email”>:
The <input> type “email” creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address.
Example:
<form>
<label><b>Enter your Email-address</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>
Note:User can also enter multiple email addresses separating by comma or whitespace as following:Enter multiple Email-addresses
5. <input type=”month”>:
The <input> type “month” creates an input field which allows a user to easily enter month and year in the format of “MM, YYYY” where MM defines month value, and YYYY defines the year value. New
The <input> element type number creates input filed which allows a user to enter the numeric value. You can also restrict to enter a minimum and maximum value using min and max attribute.
The <input> type week creates an input field which allows a user to select a week and year form the drop-down calendar without time zone.
Example:
<form>
<label><b>Select your best week of year:</b></label><br><br>
<input type="week" name="bestweek">
<input type="submit" value="Send data">
</form>
Output:
Input “week” type
Select your best week of year:
9. <input type=”search”>:
The <input> type “search” creates an input filed which allows a user to enter a search string. These are functionally symmetrical to the text input type, but may be styled differently.
The <input> element of type ?tel? creates an input filed to enter the telephone number. The “tel” type does not have default validation such as email, because telephone number pattern can vary worldwide.
Example:
<form>
<label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>
Output:
Input “tel” type
Enter your Telephone Number(in format of xxx-xxx-xxxx):
Note: Here we are using two attributes that are “pattern” and”required” which will allow user to enter the number in given format and it is required to enter the number in input field.
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. .
Why use HTML Form
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form Tags
Let’s see the list of HTML 5 form tags.
Tag
Description
<form>
It defines an HTML form to enter inputs by the used side.
<input>
It defines an input control.
<textarea>
It defines a multi-line input control.
<label>
It defines a label for an input element.
<fieldset>
It groups the related element in a form.
<legend>
It defines a caption for a <fieldset> element.
<select>
It defines a drop-down list.
<optgroup>
It defines a group of related options in a drop-down list.
<option>
It defines an option in a drop-down list.
<button>
It defines a clickable button.
HTML 5 Form Tags
Let’s see the list of HTML 5 form tags.
Tag
Description
<datalist>
It specifies a list of pre-defined options for input control.
<keygen>
It defines a key-pair generator field for forms.
<output>
It defines the result of a calculation.
HTML <form> element
The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc.
Note: The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc.
Syntax:
<form>
//Form elements
</form>
HTML <input> element
The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input.
Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
Output:
HTML TextField Control
The type=”text” attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.
<form>
First Name: <input type="text" name="firstname"/><br/>
Last Name: <input type="text" name="lastname"/><br/>
</form>
Output:
Note: If you will omit ‘name’ attribute then the text filed input will not be submitted to server.
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using “rows” or “cols” attribute or by CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Output:
Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens.
Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.
Output:
Submit button control
HTML <input type=”submit”> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements.
HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
The 3 HTML description list tags are given below:
<dl> tag defines the description list.
<dt> tag defines data term.
<dd> tag defines data definition (description).
<dl> <dt>HTML</dt> <dd>is a markup language</dd> <dt>Java</dt> <dd>is a programming language and platform</dd> <dt>JavaScript</dt> <dd>is a scripting language</dd> <dt>SQL</dt> <dd>is a query language</dd> </dl>
Output:HTMLis a markup languageJavais a programming language and platformJavaScriptis a scripting languageSQLis a query language
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
disc
circle
square
none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type
Description
Type “disc”
This is the default style. In this style, the list items are marked with bullets.
Type “circle”
In this style, the list items are marked with circles.
Type “square”
In this style, the list items are marked with squares.
Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type. Following is the example to show the CSS property for ul tag.
