A CSS stylesheet consists of a set of rules that are interpreted by the web browser and then applied to the corresponding elements such as paragraphs, headings, etc. in the document.
A CSS rule have two main parts, a selector and one or more declarations:
The selector specifies which element or elements in the HTML page the CSS rule applies to.
Whereas, the declarations within the block determines how the elements are formatted on a webpage. Each declaration consists of a property and a value separated by a colon (:) and ending with a semicolon (;), and the declaration groups are surrounded by curly braces {}.
The property is the style attribute you want to change; they could be font, color, background, etc. Each property has a value, for example color property can have value either blue or #0000FF etc.
h1 {color:blue; text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
h1 {
color: blue;
text-align: center;
}
In the example above h1 is a selector, color and text-align are the CSS properties, and the given blue and center are the corresponding values of these properties.
Note: A CSS declaration always ends with a semicolon “;“, and the declaration groups are always surrounded by the curly brackets “{}“.
Writing Comments in CSS
Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the CSS. Comments are significant to programmers but ignored by browsers.
A CSS comment begins with /*, and ends with */, as shown in the example below:
Example
/* This is a CSS comment */
h1 {
color: blue;
text-align: center;
}
/* This is a multi-line CSS comment
that spans across more than one line */
p {
font-size: 18px;
text-transform: uppercase;
}
You can also comment out part of your CSS code for debugging purpose, as shown here:
Example
h1 {
color: blue;
text-align: center;
}
/*
p {
font-size: 18px;
text-transform: uppercase;
}
*/
Case Sensitivity in CSS
CSS property names and many values are not case-sensitive. Whereas, CSS selectors are usually case-sensitive, for instance, the class selector .maincontent is not the same as .mainContent.
Therefore, to be on safer side, you should assume that all components of CSS rules are case-sensitive.
You will learn about the various types of CSS selectors in the next chapter.
In this tutorial you’ll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML.
If you’re just starting out in the world of web development, start learning from here »
Without further ado, let’s get started with the Cascading Style Sheets (CSS).
Including CSS in HTML Documents
CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML document:
Inline styles — Using the style attribute in the HTML start tag.
Embedded styles — Using the <style> element in the head section of a document.
External style sheets — Using the <link> element, pointing to an external CSS file.
In this tutorial we will cover all these three methods for inserting CSS one by one.
Note: The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for an element in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet.
Inline Styles
Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.
The style attribute includes a series of CSS property and value pairs. Each "property: value" pair is separated by a semicolon (;), just as you would write into an embedded or external style sheets. But it needs to be all in one line i.e. no line break after the semicolon, as shown here:
Example
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
Using the inline styles are generally considered as a bad practice. As style rules are embedded directly inside the HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates the purpose of using CSS.
Note: It’s become impossible to style pseudo-elements and pseudo-classes with inline styles. You should, therefore, avoid the use of style attributes in your code. Using external style sheets is the preferred way to add styles to the HTML documents.
Embedded Style Sheets
Embedded or internal style sheets only affect the document they are embedded in.
Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags. Let’s take a look at an example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tip: The type attribute of the <style> and <link> tag (i.e. type="text/css") defines the language of the style sheet. This attribute is purely informative. You can omit this since CSS is the standard and default style sheet language in HTML5.
External Style Sheets
An external style sheet is ideal when the style is applied to many pages of the website.
An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file.
You can attach external style sheets in two ways — linking and importing.
Linking External Style Sheets
Before linking, we need to create a style sheet first. Let’s open your favorite code editor and create a new file. Now type the following CSS code inside this file and save it as “style.css”.
Example
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section, as you can see in the following example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tip: Among all the three methods, using external style sheet is the best method for defining and applying styles to the HTML documents. As you can clearly see with external style sheets, the affected HTML file require minimal changes in the markup.
Importing External Style Sheets
The @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style sheet and use its styles.
You can use it in two ways. The simplest is within the header of your document. Note that, other CSS rules may still be included in the <style> element. Here’s an example:
Example
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
Similarly, you can use the @import rule to import a style sheet within another style sheet.
Example
@import url("css/layout.css");
@import url("css/color.css");
body {
CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages.
Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup (specifically inside the HTML tags); all the font colors, background styles, element alignments, borders and sizes had to be explicitly described within the HTML.
As a result, development of the large websites became a long and expensive process, since the style information were repeatedly added to every single page of the website.
To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium (W3C), which also maintains its standard. CSS was designed to enable the separation of presentation and content. Now web designers can move the formatting information of the web pages to a separate style sheet which results in considerably simpler HTML markup, and better maintainability.
CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.
Note: Our CSS tutorial will help you to learn the fundamentals of the latest CSS3 language, from the basic to advanced topics step-by-step. If you’re a beginner, start with the basic section and gradually move forward by learning a little bit every day.
What You Can Do with CSS
There are lot more things you can do with CSS.
You can easily apply same style rules on multiple elements.
You can control the presentation of multiple pages of a website with a single style sheet.
You can present the same page differently on different devices.
You can style dynamic states of elements such as hover, focus, etc. that isn’t possible otherwise.
You can change the position of an element on a web page without changing the markup.
You can alter the display of existing HTML elements.
You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
You can create animations and transitions effects without using any JavaScript.
You can create print friendly version of your web pages.
The list does not end here, there are many other interesting things that you can do with CSS. You will learn about all of them in detail in upcoming chapters.
Advantages of Using CSS
The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document. Here are some more advantages, why one should start using CSS?
CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of an element. You can write CSS once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML pages.
Easy Maintenance — CSS provides an easy means to update the formatting of the documents, and to maintain the consistency across multiple documents. Because the content of the entire set of web pages can be easily controlled using one or more style sheets.
Pages Load Faster — CSS enables multiple pages to share the formatting information, which reduces complexity and repetition in the structural contents of the documents. It significantly reduces the file transfer size, which results in a faster page loading.
Superior Styles to HTML — CSS has much wider presentation capabilities than HTML and provide much better control over the layout of your web pages. So you can give far better look to your web pages in comparison to the HTML presentational elements and attributes.
Multiple Device Compatibility — CSS also allows web pages to be optimized for more than one type of device or media. Using CSS the same HTML document can be presented in different viewing styles for different rendering devices such as desktop, cell phones, etc.
Tip: Now most of the HTML attributes are being deprecated and it’s not recommended to use. So it’s a good idea to use as much CSS as possible to increase the adaptability your website and make them compatible to future browsers, as well.
What This Tutorial Covers
This CSS tutorial series covers all the fundamentals of CSS, including the idea of selectors, methods of setting colors and backgrounds, way of formatting fonts and text, styling UI elements such as hyperlinks, lists, tables, etc. as well as the concept of CSS box model, and so on.
Once you’re comfortable with the basics, you’ll move on to next level that explains the way of setting dimension and alignment of elements, methods for positioning elements on a web page, using image sprites, as well as the concept of relative and absolute units, visual formatting model, display and visibility, layers, pseudo classes and elements, media dependent style sheets, and so on.
Finally, you’ll explore some advanced features introduced in CSS3 like gradient colors, drop shadow effect, 2D and 3D transforms, alpha transparency, as well as the method of creating transition and animation effect, flex layouts, filter effect, the concept of media queries, and more.
Tip: Every chapter in this tutorial contains lots of real-world examples that you can try and test using an online editor. These examples will help you to better understand the concept or topic. It also contains smart workarounds as well as useful tips and important notes.
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.
