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.
HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:
Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type
Description
Type “1”
This is the default type. In this type, the list items are numbered with numbers.
Type “I”
In this type, the list items are numbered with upper case roman numbers.
Type “i”
In this type, the list items are numbered with lower case roman numbers.
Type “A”
In this type, the list items are numbered with upper case letters.
Type “a”
In this type, the list items are numbered with lower case letters.
HTML Ordered List Example
Let’s see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type=”1″ because it is the default type.
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
Note: We can create a list inside another list, which will be termed as nested List.
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:Aries-One of the 12 horoscope sign.Bingo-One of my evening snacksLeo-It is also an one of the 12 horoscope sign.Oracle-It is a multinational technology corporation.
Click here for full details of HTML description list. HTML Description List
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list.
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .
HTML Table Tags
Tag
Description
<table>
It defines a table.
<tr>
It defines a row in a table.
<th>
It defines a header cell in a table.
<td>
It defines a cell in a table.
<caption>
It defines the table caption.
<colgroup>
It specifies a group of one or more columns in a table for formatting.
<col>
It is used with <colgroup> element to specify column properties for each column.
<tbody>
It is used to group the body content in a table.
<thead>
It is used to group the header content in a table.
<tfooter>
It is used to group the footer content in a table.
HTML Table Example
Let’s see the example of HTML table tag. It output is shown above.
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can’t be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.
Use of height and width attribute with img tag
You have learnt about how to insert an image in your web page, now if we want to give some height and width to display image according to our requirement, then we can set it with height and width attributes of image.
Note: Always try to insert the image with height and width, else it may flicker while displaying on webpage.
Use of alt attribute
We can use alt attribute with tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute:
To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this:
Chrome
IE
Firefox
Opera
Safari