HTML_GL
  1. What is HTML
  2. Features Of HTML
  3. HTML Editor
  4. HTML Skeleton
  5. HTML Basic
  6. HTML Comment
  7. HTML Elements
  8. What is HTML Elements Definition
  9. Types of Elements
  10. HTML Attributes
  11. HTML Tags
  12. HTML Forms
  13. HTML CSS
  14. HTML Classes
  15. HTML Marquees
  16. HTML File Path
  17. HTML Embed Multimedia
  18. HTML Quotations
  19. HTML Semantic Elements
  20. HTML Frames
  21. HTML IFrames
  22. HTML vs XHTML
  23. HTML Canvas
  24. HTML SVG

What is HTML

HTML Stands for HyperText Markup Language,where

  • HyperText stands for Link between web pages.
  • Markup Language means Text between tags that define the structure.

HTML is a markup language that is used to create web pages. It defines how the web page looks and how to display content with the help of elements. It forms or defines the structure of our Web Page, thus it forms or defines the structure of our Web Page. We must remember to save your file with .html extension

Learn Python, it is easy

Features Of HTML

  • The learning curve is very easy (easy to modify)
  • Creating effective presentations
  • Adding Links wherein we can add references
  • Can display documents on platforms like Mac, Windows, Linux, etc
  • Adding videos, graphics, and audios making it more attractive
  • Case insensitive language

HTML Editor

  • Simple editor: Notepad
  • Notepad++
  • Atom
  • Best editor: Sublime Text

HTML Skeleton

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

HTML Basic

<!DOCTYPE html>

Instruction to the browser about the HTML version.

<html>

  • Root element which acts as a container to hold all the code
  • The browser should know that this is an HTML document
  • Permitted content: One head tag followed by one body tag

<head>

  • Everything written here will never be displayed in the browser
  • It contains general information about the document
  • Title, definitions of CSS and script sheets
  • Metadata(information about the document)

<body>

  •  Everything written here will be displayed in the browser
  • Contains text, images, links that can be achieved through tags
  •  Examples:
  • ○ <p> This is our first paragraph. </p>
  • ○ <a href=”http://www.google.com”>Go To Google</a>
  • ○ <img src=”photo.jpg”>

HTML Comment

  • Comments don’t render on the browser
  • Helps to understand our code better and makes it readable.
  • Helps to debug our code
  • Three ways to comment:
  1. Single line
  2. Multiple lines
  3. Comment tag //Supported by IE

HTML Elements

  • Elements are created using tags
  • Elements are used to define the semantics
  • Can be nested and empty

 What is HTML Elements Definition

<p color=”red”> This is our first Paragraph </p>

Explanation:

  • Start tag: <p>
  • Attributes: color =” red”
  • End tag : </p> // optional
  • Content: This is our first Paragraph

Types of Elements

  • Block Level

○ Takes up full block or width and adds structure in the web page

○ Always starts from the new line

○ Always end before the new line

○ Example:

■ <p >

■ <div>

■ <h1>…<h6>

■ <ol>

■ <ul>

  •  Inline Level

○ Takes up what is requires and adds meaning to the web page

○ Always starts from where the previous element ended

○ Example :

■ <span>

■ <strong>

■ <em>

■ <img>

■ <a>

HTML Attributes

  • Properties associated with each tag is called an Attribute.
  • <tag name=”value”></tag> is the structure.
  • There are some Global Attributes that can be applied to all the tags.
    • Title: Add extra information (hover)
    • Style: Add style information(font,background,color,size)
  • There are some attributes that can be applied to specific tags.
    • <img src=” URL” width=”100” height=”70” alt=” File cannot be loaded”>
    • src is the attribute used in image tag to define the path
    • Width is an attribute used to define width in pixels
    • Height is an attribute used to define width in pixels
    • Alt i.e alternate text if an image is not loaded
  • <a href=” URL”> Name of the link </a>
    • href is used for defining the path of the link
  • <hr color=”red”>
    • color is used to set the color of the horizontal line drawn on the webpage.

HTML Tags

  • Enclosed within <>
  • Different tags render different meanings.
  • Example:
    • <title> 
      • Whatever is written this tag comes up in the web page’s tab
      • Defines the title of the page
      • Syntax: <title>Home </title>
  • <p>
    • Defines the paragraph
    • Syntax:<p > This is our first Paragraph </p>

List of Self-closing tags

●  <hr> tag

○  Stands for horizontal rule

○  Dividing the web page

○  Syntax:  <hr>

●  <br> tag

○  Stands for break line

○  Moving to next line

○  Syntax: <br>

●  <img> tag

○ To add images in the web page

○ Syntax:  <img src=”path”>

○ Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1592195241233-84b15fc81ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" title="lotus" style="width:500px">
</body>
</html>
HTML

●  <h1> tag …… <h6>tag

○  Stands for heading tag

○  Defines heading of a page

○  h1 represents most important page in the page

○  h6 represents least important page in the page

○  Syntax:  <h1>This is my first heading </h1>

○  Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>This is heading 1 </h1>
	<h2>This is heading 2 </h2>
	<h3>This is heading 3 </h3>
	<h4>This is heading 4 </h4>
	<h5>This is heading 5 </h5>
	<h6>This is heading 6 </h6>
</body>
</html>
HTML

● <strong> tag

○  Defines the text to be bold

○  Replaced <b>tag //HTML5

○  Syntax:  <strong> This text is important </strong>

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit <strong>amet, consectetur adipisicing elit, sed do eiusmod</strong>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>

HTML

● <em> tag

○  Defines the text to be bold

○  Replaced <i>tag //HTML5

○  Syntax:  <em> This text is special </em>

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit <em>amet, consectetur adipisicing elit, sed do eiusmod</em>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>

HTML

● <ol> tag

○  Stands for an ordered list

○  To define a series of events that take place in some order

○  Example making a tea (like a flow chart)

○  Syntax: <ol>………</ol>

●  <ul> tag

○  Stands for unordered list

○  To define a series of events that take place where the order is not important.

○  Example your hobbies

○  Syntax: <ul>………</ul>

● <li> tag

○  Defines the list item

○  Used inside the ol and ul tag to define the events

○  Syntax: <li></li>

○  Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
       <li>  Cricket </li>
       <li>  Football </li>
       <li>  Hockey </li>
   </ul>

</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ol>
       <li>  Cricket </li>
       <li>  Football </li>
       <li>  Hockey </li>
   </ol>

</body>
</html>
HTML

● <div> and <span> tags

○  Both of these are used to group different tags .

○  Acts like a container.

○  Effective while styling.

○  Syntax: <div>………</div>

○  Syntax: <span>….</span>

○  Difference <div> is block level and <span> is inline level.

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit amet, <div>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore</div> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

</body>
</html>

HTML
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore</span> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

</body>
</html>

HTML

● <a> tags

○  Used to add links in a web page

○  <a href=”url”> Name of the link </a>

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="https://www.google.com/">go to google</a>

</body>
</html>
HTML

● <table> tags

  • Used to create a table on a web page
  • Need other tags for completing the creation of a table
    • <tr> : for marking the table row
    • <th> : for table header
    • <td> : for table column data
    • Everything is always enclosed within <tr>
    • <thead> : to keep all header data
    • <tbody> : to keep all body data
  • Example:
<!DOCTYPE html>
<html>
<head>
	<title>Color Chart</title>
</head>
<body>
	<h1>My first Color Chart</h1>
	<table border="1">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Mixed with</th>
			</tr>
		</thead>
		<tbody>
			<!-- Red  -->
			<tr>
				<td>Red</td>
				<td>Turns to pink </td>
				<td>White</td>
			</tr>
			<!-- Dark Blue  -->
			<tr>
				<td>Dark Blue</td>
				<td>Turns to Sky Blue</td>
				<td>White</td>
			</tr>
			<!--  Green  -->
			<tr>
				<td>Green</td>
				<td>Turns to Black</td>
				<td>Blue</td>
			</tr>
		</tbody>
	</table>

</body>
</html>


HTML

● <form> tags

  • action attribute: It specifies the URL to send form data to
  • method attribute: specifies the type of HTTP request(GET or POST)
  • Example: <form action=”/my-form-submitting-page”  method=”POST”>
  • <input>: used to accept data from the user
  • Some types of inputs are:
  • Text: used to store text data. Syntax: type=”text”
  • Password: used to enter a secure password. Syntax: type=”password”
  • Placeholder: temporary text in input fields. It is generally accompanied by “text” and “password” attributes. Syntax: placeholder=”insert- text-here”
  • Button: used to include buttons in the form. Syntax: type=”button” value=”insert-text-here”
  • Submit button: For creating a submit button. All the data will get submitted when it is clicked. Syntax: type=”submit”
  • Checkbox: to provide the ability to check multiple options. Syntax: type=”checkbox”. To check options by default, set it with the checked attribute.
  • Radio Button: allows one to choose a single option. Syntax: type=”radio”. Keep the name attribute of all the options the same.
  • <select>: For every possible option to select, use an <option> tag<option>
  • Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can specify how large the text area is by using the “rows” and “cols” attributes
  • Labels: add captions for individual items in a form. Syntax: <label>. A label can be used by placing the control element inside the <label> element, or by using the “for” and “id” attributes.
  • Validations ensure that users fill out forms in the correct format, e.g.:
  • required: The Boolean attribute which makes a field mandatory:
  • email: the browser will ensure that the field contains an @ symbol.
  • Example:
<!DOCTYPE html>
<html>
<head>
	<title>Register</title>
</head>
<body>
	<h1>Register Form</h1>
	<form>
		<label>First Name: <input type="text" name="firstName" placeholder="firstName" required></label>
		<label>Last Name: <input type="text" name="lastName" placeholder="lastName" required></label><br>

		<label>Male <input type="radio" name="gender" value="male"></label>
		<label>Female <input type="radio" name="gender" value="female"></label>
		<label>Other <input type="radio" name="gender" value="other"></label><br>

		<label>Email: <input type="email" name="email" placeholder="your email" required></label>
<!-- 		<label>Password: <input type="password" name="password" placeholder="your password" minlength="5" maxlength="10"></label><br>
 --> 
 		<label>Password: <input type="password" name="password" placeholder="your password" pattern=".{5,10}" required title="Please enter password of length 5 to 10"></label><br>

		<label for="">Birthday: </label>
		<select id="birthday" name="Month">
			<option>Month</option>
			<option>Jan</option>
			<option>Feb</option>
			<option>Mar</option>
			<option>Apr</option>
		</select>
		<select id="birthday" name="Day">
			<option>Day</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
		</select>
		<select id="birthday" name="Year">
			<option>year</option>
			<option>1990</option>
			<option>1991</option>
			<option>1992</option>
			<option>1993</option>
			<option>1994</option>
		</select><br>

		<label>I agree to the terms and conditions 		
			<input type="checkbox" name="check">
		</label><br>

		<input type="submit" name="submit">

	</form>
</body>
</html>
HTML

HTML Forms

An HTML (HyperText Markup Language) form is a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc., to store the information of a user on the web server. An HTML form is used to enter data that is to be sent to the server for processing, such as name, email address, password, phone number, etc., using interactive controls.

An example of a simple HTML form is:

First Name:

Last Name:

The various elements of HTML forms with the details are captured below:

<form> element 

The <form> element of HTML is used to create HTML form which is used for user to input information.

<form>
..
form elements
..
</form>

The <form> element contains different types of input elements. Some of the form elements are: text fields, checkboxes, radio buttons, submit buttons, etc.

Below is the table consisting of form elements.

TagDescription
<form>This element defines an HTML form for user input
<input>This element defines fines an input control
<textarea>This element defines a multiline input control (text area)
<label>This element defines a label for an <input> element
<fieldset>This element groups related elements in a form
<legend>This element defines a caption for a <fieldset> element
<select>This element defines a drop-down list
<optgroup>This element of HTML <form> defines a group of related options in a drop-down list
<option>This element defines an option in a drop-down list
<button>This element defines a clickable button
<datalist>This element of HTML <form> specifies a list of pre-defined options for input controls
<output>This element defines the result of a calculation.

HTML Form Attributes

Now let’s learn about the different attributes for the HTML <form> element.

The HTML form Attribute specifies that the element can contain one or more forms. The various <form> attributes are defined below:

  1. The Action Attribute

As the same specifies, the action attribute defines the action to be performed when the form is submitted.

When the submit button is clicked by the user, the form data is sent to a file that is on the server.

Let us understand with an example below: the form data is sent to a file named “action_sample.php”. The file consists of a server-side script that handles the form data:

Example:

On submit, send form data to “action_sample.php”:

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
 <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
<label for="country">Age:</label><br>
 <input type="text" id="country" name="country" value="India"><br><br>

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

Note: If the action attribute is removed, then the action is set to the current page.

  1. The Target Attribute

As the name indicates, the target attribute specifies where the response is displayed after the user submits the form.

The target attribute can have one of the following values as mentioned in the table below:

The default value of the target attribute is _self which means that the response will be displayed in the current window.

ValueDescription
_blankThis value means the response is displayed in a new window or tab.
_selfThis value means the response is displayed in the current window.
_parentThis value means the response is displayed in the parent frame.
_topThis value means the response is displayed in the full body of the window.
framenameThis value means the response is displayed in a named iframe.

Let us understand with an example:

<form action=”/action_sample.php” target=”_blank”>

The submitted result of above query will open in a new browser tab.

  1. The Method Attribute

The method attribute is used to specify the HTTP method to be used when submitting the form data.

GET method is the default HTTP method used when submitting form data. 

The form-data is sent as URL variables (with method=”get”) or as a HTTP post method(with method=”post”).

Let us take an example that uses the GET method when submitting the form data:

<form action=”/action_sample.php” method=”get”>

An example using he POST method when submitting the form data is as below:

<form action=”/action_sample.php” method=”post”>

Some important points to remember when using the GET method are:

  • The form data is appended to the URL with the Get method, in name/value pairs
  • We should never use the Get method to send sensitive data that is not meant to be exposed. It is because the submitted form data is visible in the URL. So the sensitive information will be exposed.
  • The length of a URL when using the Get method is limited to 2048 characters.
  • GET method should be used for non-secure data, like query strings in Google

Some important points to remember when using the POST method are:

  • Post method appends the form data inside the body of the HTTP request. The form data that is submitted is not shown in the URL.
  • Post method can be used to send large data; it has no size limitation. 
  • Form submissions that are done with the Post method cannot be bookmarked

Note: We should always use the Post method if the form data contains any sensitive information that is not meant to be exposed.

  1. The Autocomplete Attribute

As the name autocomplete specifies, the browser automatically fills the values based on what the user has filled earlier when this attribute is on.

With the help of the autocomplete attribute, users can specify whether a form should have autocomplete on or off.

Example of autocomplete attribute is with autocomplete ON is:

<form action=”/action_sample.php” autocomplete=”on”>

  1. The Novalidate Attribute

The Novalidate attribute of HTML form is a boolean attribute. As we know, boolean means 2 values, either yes or no. So when the novalidate attribute of the HTML form is present, it indicates or specifies that the form-data should not be validated when submitted.

An example of a form with a novalidate attribute is as below:

<form action=”/action_sample.php” novalidate>

Below is the list of all <form> attributes

AttributeDescription
accept-charsetThis attribute is used to define or specify the character encodings used for form submission
ActionThis attribute is used to define or specify where to send the form data when a form is submitted
autocompleteThis attribute is used to tell  whether a form should have autocomplete on or off
enctypeThis attribute is used to tell how the form-data should be encoded when submitting it to the server (only for method=”post”)
methodThis attribute is used to tell the HTTP method to use when sending form-data
NameThis attribute is used to tell the name of the form
novalidateThis attribute is used to tell that the form should not be validated when submitted
RelThis attribute is used to tell the relationship between a linked resource and the current document
TargetThis attribute is used to define where to display the response that the user receives after submitting the form

HTML Form Elements

Now let us learn about the HTML <form> Elements

The various HTML <form> elements that are available and can be used are as below:

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

Let us learn in details about the form elements:

  1. The <input> Element

Since HTML forms are used to take input from the user, so <inpot> elemnt is one of the most used form element.

Depending on the type attribute, the <input> element is displayed in several ways.

Some of the examples are:

<label for=”age”>Age:</label>

<input type=”text” id=”age” name=”age”>

  1. The <label> Element

The HTML form element  <label> , defines a label for several form elements.

This element of HTML form is useful for screen reader users. When the focus of the user is on the input element, the screen reader will read the label.

Some users have difficulty clicking on a very small region( radio button or check box); the label element is helpful. When user clicks on text within <label> element , radio button/checkbox is toggled.

Example:

<input type=”checkbox” name=”click_lbl” id=” click_lbl ” value=” click_lbl “><label for=”click_lbl “> Click this label to select.</label>

  1. The <select> Element

As the name select specifies, the <select> element of HTML form defines a drop-down list:

Let us try to understand about select with the help of an example:

<label for="cars">Choose a car:</label>
<select id="car" name="car">
  <option value="maruti">Maruti</option>
  <option value="hyundai">Hyundai</option>
  <option value="skoda">Skoda</option>
  <option value="ford">Ford</option>
</select>

The <option> element defines an option that can be selected from the given options.

The first item in the drop-down list is the default that is selected.

If we want to define a pre-selected option, the the select attribute can be added to the option:

For Example

<option value=”ford” selected>Ford</option>

Visible Values:

The size attribute of the HTML form is used to specify the number of visible values:

Example

<label for="car">Choose a car:</label>
<select id="car" name="car" size="3">
  <option value="maruti">Maruti</option>
 <option value="hyundai">Hyundai</option>
  <option value="skoda">Skoda</option>
  <option value="ford">Ford</option>
</select>

If we want to allow Multiple Selections, then multiple attribute can be used that allows the user to select more than one value:

<label for="car">Choose a car:</label>
<select id="car" name="car" size="4">
  <option value="maruti">Maruti</option>
 <option value="hyundai">Hyundai</option>
  <option value="skoda">Skoda</option>
  <option value="ford">Ford</option>
</select>
  1. The <textarea> Element

The <textarea> element defines a text area for multi-line input. 

For Example:

<textarea name=”sample_text” rows=”20″ cols=”40″>

The cat was chasing the mouse in the garden.

</textarea>

Here, the rows attribute specifies the number of lines that are visible in a text area.

And the cols attribute defines the width of a text area specified.

The output of the above code snippet is:

The size of text area can also be defined using CSS:

Example

<textarea name=”sample_text” style=”width:300px; height:700px;”>

The cat chasing the mouse in the garden.

</textarea>

  1. The <button> Element

The next import form element is the <button> element which defines a clickable button:

Example:

<button type=”button” onclick=”alert(‘Hello World!!!’)”>Click Me!</button>

The output of above code snippet is:

Please Note: Since different browsers might use different default types for button elements, we should always specify the type attribute for button elements.

  1. The <fieldset> and <legend> Elements

Another important form element <fieldset> is used to group related data in a HTML form.

The <legend> element is used to define a caption for the <fieldset> element.

Let us try to understand about fieldset and legend with the help of an example:

<form action="/action_sample.php">
  <fieldset>
    <legend>PersonalInfo:</legend>
    <label for="first_name">First name:</label><br>
    <input type="text" id="first_name" name="first_name" value="Chris"><br>
    <label for="last_name">Last name:</label><br>
    <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
  1. The <datalist> Element

The <datalist> element, as the name list specifies, is a list of pre-defined options for an <input> element.

Users will be able to see a drop-down list of the pre-defined option when they input data.

For Example:

<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<form action="/action_sample.php">
  <input list="cars" name="cars">
  <datalist id="cars">
    <option value="Maruti">
    <option value="Ford">
    <option value="Skoda">
    <option value="Audi">	
    <option value="Hyundai">
  </datalist>
  <input type="submit">
</form>
</body>
</html>
  1. The <output> Element

The <output> element, as the name specifies, represents the result of any calculation. 

Let us try to understand the output element with the help of an example.

<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<form action="/action_sample.php"
input="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="x" name="x" value="50">
  100 +
  <input type="number" id="y" name="y" value="50">
  =
  <output name="z" for="x y"></output>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

HTML Input Types

Now let’s learn about the different types for the HTML <input> element.

The different input types that are used in HTML forms are mentioned below:

<input type=”button”>

<input type=”checkbox”>

<input type=”color”>

<input type=”date”>

<input type=”datetime-local”>

<input type=”email”>

<input type=”file”>

<input type=”hidden”>

<input type=”image”>

<input type=”month”>

<input type=”number”>

<input type=”password”>

<input type=”radio”>

<input type=”range”>

<input type=”reset”>

<input type=”search”>

<input type=”submit”>

<input type=”tel”>

<input type=”text”>

<input type=”time”>

<input type=”url”>

<input type=”week”>

Please Note: The default value of the type attribute is “text”.

  1. Input Type Text

<input type=”text”> of the HTML form defines a text input field with single line

For Example:

<!DOCTYPE html>
<html>
<body>
<h2>Text field</h2>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id=" first_name " name=" first_name "><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id=" last_name " name=" last_name "><br><br>
  <input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
</body>
</html>

The output of above code snippet is:

  1. Input Type Password

<input type=”password”>, this input type defines a password field:

For Example:

<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action="/action_page.php">
  <label for="loginid">LoginId:</label><br>
  <input type="text" id="loginid" name="loginid"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>

This is how the HTML code above will be displayed in a browser:

  1. Input Type Submit

<input type=”submit”>, as the name indicates, is used to define a button for submitting form data to a form handler.

The form-handler is usually a server page that has a script for processing input data.

The form-handler is defined in the form action attribute:

For Example:

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
  <input type="submit" value="Submit">
</form> 

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

</body>
</html>

Display in browser:

  1. Input Type Reset

As the name indicates <input type=”reset”> specifies a reset button that resets all the form values to their default values:

Example

<!DOCTYPE html>
<html>
<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 
<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>
</body>
</html>

This is how the HTML code above will be displayed in a browser:

  1. Input Type Radio

Radio buttons as the name specifies allows user to select only one choice of the available choices. Its syntax is <input type=”radio”> defines a radio button.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action_page.php">
  <input type="radio" id="Maths" name="Subject" value="Maths">
  <label for="Maths">Maths</label><br>
  <input type="radio" id="Physics" name="Subject" value="Physics">
  <label for="Physics">Physics</label><br>
  <input type="radio" id="Chemistry" name="Subject" value="Subject">
  <label for="Chemistri">Chemistry</label><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

This is how the HTML code above will be displayed in a browser:

  1. Input Type Checkbox

As the name specifies, the Input type Checkbox defines a checkbox.

Its syntax is <input type=”checkbox”>

With checkboxes a user can select zero or more options from limited number of options.

Example code:

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_sample.php">
  <input type="checkbox" id="subject1" name="subject1" value="Maths">
  <label for="subject1"> I love Maths</label><br>
  <input type="checkbox" id="subject2" name="subject2" value="Physics">
  <label for="subject2"> I love Physics</label><br>
  <input type="checkbox" id="subject3" name="subject3" value="Chemistry">
  <label for="subject3"> I love Chemistry</label><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

This is how the HTML code above will be displayed in a browser:

  1. Input Type Button

As the name specifies, Input type button defines a button

Syntax is: <input type=”button”> 

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello Everyone!!!')" value="Click Me!">
</body>
</html>

Output of the above HTML code  will be displayed in a browser:

  1. Input Type Color

As the name specifies, Input type color is used for fields that contain color. Syntax is: <input type=”color”> 

Example

<!DOCTYPE html>
<html>
<body>
<h2>Show a Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<form action="/action_sample.php">
  <label for="favcolor">What is your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above code:

  1. Input Type Date

As the name specifies, Input type date is used  for fields that contain date. Its syntax is : <input type=”date”> 

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>
<form action="/action_page.php">
  <label for="birthday">When is your Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above code is:

  1. Input Type Datetime-local

This input type specifies a date and time input field, with no time zone.

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<form action="/action_page.php">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of the above code is:

  1. Input Type Email

As the name specifies , this input type is used for input field that contain an email address. Syntax is <input type=”email”> 

For Example

<!DOCTYPE html>
<html>
<body>

<h2>Email Address</h2>
<form action="/action_sample.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above code is:

  1. Input Type File

As the name specifies, the Input type file defines a file-select field and also a “Browse” button that is used for file uploads. The syntax is  <input type=”file”> 

Example

<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>
<form action="/action_sample.php">
  <label for="sample_file">Select a file:</label>
  <input type="file" id="sample_file" name="sample_file"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above HTML code is:

  1. Input Type Hidden

As the name specifies, input type hidden defines a hidden input field that is not visible to the user. Syntax is : <input type=”hidden”> 

Please Note: The value of field with input type hidden is not displayed to the user in the page’s content but it is visible using any browser’s developer tools or “View Source” functionality. 

For Example

<!DOCTYPE html>
<html>
<body>
<h1>Hidden Field</h1>
<form action="/action_sample.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="emailid" name="emailid" value="sample@gmail.com">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above code is:

  1. Input Type Month

As the name specifies, with this input type, the user can select a month and a year. Syntax is: <input type=”month”> 

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<form action="/action_sample.php">
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above code is:

  1. Input Type Number

As is obvious from the name, input type number defines a numeric input field. 

Syntax is: The <input type=”number”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<form action="/action_sample.php">
  <label for="rollno">Roll No. (between 1 and 50):</label>
  <input type="number" id="rollno" name="rollno" min="1" max="50">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of the above code is:

  1. Input Restrictions

Please find below the list of some common input restrictions:

AttributeDescription
CheckedThis attribute of the HTML form specifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”).
DisabledThis attribute of the HTML form specifies that an input field should be disabled.
MaxThis attribute specifies the maximum value for an input field.
MaxlengthThis attribute of the HTML form specifies the maximum number of character for an input field.
MinThis attribute specifies the minimum value for an input field.
PatternThis attribute of the HTML form specifies a regular expression to check the input value against on form submission.
ReadonlyThis attribute specifies that an input field is read-only (cannot be changed).
RequiredThis attribute specifies that an input field is required (must be filled out).
SizeThis attribute specifies the width (in characters) of an input field.
StepThis attribute of the HTML form specifies the legal number intervals for an input field.
ValueThis attribute specifies the default value for an input field.
  1. Input Type Range

As the name range specifies, the input type range allows to enter a number whose exact value is not important. Syntax is  <input type=”range”> . The default range is defined from 0 to 100. 

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<form action="/action_sample.php" method="get">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of above code is :

  1. Input Type Search

As the name specifies, input type search is used for search fields. Syntax is : The <input type=”search”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<form action="/action_sample.php">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of the above code is:

  1. Input Type Tel

As the name specifies, input type Tel is used for input fields that contain a telephone number. Syntax is <input type=”tel”>

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>Time Input Control</h1>

<form action="/action_sample.php">
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output of above code snippet is:

  1. Input Type Url

As the name indicates, this input type is used for fields that contain URL. The syntax is <input type=”url”> .

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>URL Input Field</h1>
<form action="/action_sample.php">
  <label for="homepage">Homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code snippet is:

  1. Input Type Week

The <input type=”week”> allows the user to select a week and year.

For Example

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

HTML Input Type Attribute

Now let’s learn about the HTML Input Attributes

  1. The value Attribute

The value attribute of HTML input element defines an initial value for an input field.

For Example:

Input fields with initial (default) values:

<!DOCTYPE html>
<html>
<body>

<h1>Input value attribute</h1>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code snippet is:

  1. The readonly Attribute

As the name specifies, the readonly attribute of the HTML input element defines that an input field is read-only. This field cannot be modified, and its value is sent when submitting the form.

For Example

<!DOCTYPE html>
<html>
<body>

<h1>Readonly attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The output of above code snippet is :

  1. The disabled Attribute

As the name specifies ,the disabled attribute of HTML input element specifies that an input field should be disabled.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input disabled attribute</h1>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The output is as below:

  1. The size Attribute

As the name specifies, the size attribute of HTML input element specifies the  width, in characters, of an input field. Its defaut value is 20

For Example

To set a width for an input field, which in PIN in below example:

<!DOCTYPE html>
<html>
<body>

<h1>The input size attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code is :

  1. The maxlength Attribute

This attribute specifies the maximum number of characters that can be allowed in an input field.

Example

Below snippet sets a maximum length for an input field PIN:

<!DOCTYPE html>
<html>
<body>

<h1>The input maxlength attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The output of above code is:

  1. The min and max Attributes

This attribute specifies the minimum and maximum values for an input field of HTML form.

For Example:

Below code snippet sets a max date, a min date, and a range of legal values:

<!DOCTYPE html>
<html>
<body>
<h1>The input min and max attributes</h1>
<form action="/action_sample.php">
  <label for="date_max">Enter a date before 1980-01-01:</label>
  <input type="date" id="date_max" name="date_max" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> 
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The output of above code is:

  1. The multiple Attribute

As indicated by the name, the multiple attribute of the HTML form element specifies that the user is allowed to enter more than one value in an input field.

For Example

<!DOCTYPE html>
<html>
<body>

<h1>The input multiple attributes</h1>

<form action="/action_sample.php">
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code is :

  1. The pattern Attribute

The pattern attribute of the HTML input element specifies a regular expression that the input field’s value is checked for when the user submits the form.

For Example:

In the below example, an input field that can contain only three letters. It cannot have any number or special characters:

<!DOCTYPE html>
<html>
<body>
<h1>The input pattern attribute</h1>
<form action="/action_sample.php">
  <label for="ccode">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The output of above code snippet is :

  1. The placeholder Attribute

As the name specifies, the placeholder attribute specifies a sample value or short description of the expected format in the input field.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input placeholder attribute</h1>

<form action="/action_sample.php">
  <label for="phone">Enter phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code is :

  1. The required Attribute

As the name indicates, the required attribute specifies that an input field is required to be filled before submitting the form.

<!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>
<form action="/action_sample.php">
  <label for="Loginid">LoginId:</label>
  <input type="text" id="Loginid" name="Loginid" required><br><br>
  <label for="password">Password:</label>
  <input type="text" id="password" name="password" required><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code is:

  1. The step Attribute

This attribute specifies the legal number intervals for an input field in a HTML form input element.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input step attribute</h1>
<form action="/action_sample.php">
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit" value="Submit">
</form>

</body>
</html> 

The output of above code is as below:

  1. The autofocus Attribute

As the name autofocus indicates, the autofocus attribute specifies that an input field should automatically get focus whenever the page is loaded.

For Example:

Suppose the user wants that when the page loads the automatic focus is on Firstname:

<!DOCTYPE html>
<html>
<body>
<h1>The input autofocus attribute</h1>
<form action="/action_sample.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output of the above code snippet is :

  1. The height and width Attributes

As the name indicates, the height and width attributes specify an <input type=”image”> element of HTML form.

For example:

The example below define an image as the submit button, with height and width attributes:

<!DOCTYPE html>
<html>
<body>

<h1>The input height and width attributes</h1>

<form action="/action_sample.php">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
</body>
</html>
  1. The list Attribute

As the name indicates, the list attribute of HTML input refers to a <datalist> element that contains pre-defined options.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input list attribute</h1>

<form action="/action_sample.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
  </datalist>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The output of above code snippet is:

  1. The autocomplete Attribute

As the name indicates, the autocomplete attribute specifies whether a form or an input field should have autocomplete feature on or off.

Example

<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>
<form action="/action_sample.php" autocomplete="on">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML Input form* Attributes

Now let us learn about the different form* attributes for the HTML <input> element.

  1. The form Attribute

The input form attribute of the HTML form specifies the form to which the <input> element belongs to.

For Example:

In the below code snippet, an input field is located outside of the HTML form but it is still a part of the form.

<!DOCTYPE html>
<html>
<body>
<h1>The input form attribute</h1>
<form action="/action_sample.php" id="form1">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <input type="submit" value="Submit">
</form>
<label for="last_name">Last name:</label>
<input type="text" id="last_name" name="last_name" form="form1">

</body>
</html>
  1. The formaction Attribute

The input formaction attribute of the HTML form attribute specifies the URL of the file that will process the input when the form is submitted.

For Example:

Below example represents an HTML form with two submit buttons, but with different actions:

<!DOCTYPE html>
<html>
<body>

<h1>The input formaction attribute</h1>
<p>The formaction attribute specifies the URL of a file that will process the input when the form is submitted.</p>
<form action="/action_sample.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="text" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_sample2.php" value="Submit as Admin">
</form>

</body>
</html>

The output of above code snippet is as below:

  1. The formenctype Attribute

As the name indicates, the input formenctype attribute of the HTML form specifies how the form-data should be encoded when submitted. It is used only for forms with method=”post”.

Example

A form with two submit buttons. The first submit button sends the form-data with default encoding, the second submit button sends the form-data encoded as “multipart/form-data”:

<!DOCTYPE html>
<html>
<body>

<h1>The input formenctype attribute</h1>
<form action="/action_sample.asp" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
</body>
</html>
  1. The formmethod Attribute

As the name indicates, the input formmethod attribute of the HTML form defines the HTTP method for sending form-data to the action URL.

The form-data can be sent as URL variables methods “get” and “post”.

For Example:

A form with two submit buttons. The first sends the form-data with method=”get”. The second sends the form-data with method=”post”:

<!DOCTYPE html>
<html>
<body>

<h1>The input formmethod Attribute</h1>

<form action="/action_sample.php" method="get" target="_blank">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <label for="age">Age:</label>
  <input type="text" id="age" name="age"><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

</body>
</html>
  1. The formtarget Attribute

As the name formtarget indicates, the input formtarget attribute of the HTML form specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

For Example

Below is an example of a form with two submit buttons, with different target windows:

<!DOCTYPE html>
<html>
<body>

<h1>The input formtarget attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <label for="age">Age:</label>
  <input type="text" id="age" name="age"><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
</body>
</html>
  1. The formnovalidate Attribute

As the name indicates, the input formnovalidate attribute of the HTML form specifies that an <input> element should not be validated when submitted.

For Example

Below example defines a form with two submit buttons (with and without validation):

<!DOCTYPE html>
<html>
<body>

<h1>The input formnovalidate attribute</h1>

<form action="/action_sample.php">
  <label for="email_id">Enter your email id:</label>
  <input type="email_id" id="email_id" name="email_id" required><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>

</body>
</html>
  1. The novalidate Attribute

The novalidate attribute of the HTML form is a <form> attribute.

When this attribute is present, it indicates that novalidate specifies that all of the form-data should not be validated when submitted.

For Example:

Below code snippet specifies that no form-data should be validated on submit:

<!DOCTYPE html>
<html>
<body>

<h1>The form novalidate attribute</h1>
<form action="/action_sample.php" novalidate>
  <label for="username">Enter your username:</label>
  <input type="username" id="username" name="username" required><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML CSS

You’ve already seen how styles can change the appearance of different elements. Cascading Style Sheets (CSS) is a language for outlining style (e.g. colours, fonts, margin and size) to HTML documents. Let’s see how the Style sheet works. You can attach CSS with HTML documents in 3 simple ways: 

  • Inline:

As the name says, inline CSS used to apply a style to one HTML element at a time with the help of style attribute. Let’s see the example.

  • Internal:

Now we know that inline CSS for one line. What if we want to style the same element (e.g. all <p> tags) in the single HTML document, then we can use internal CSS. An internal CSS is defined in the <Head> section within <Style> tags.

  • External:

In the above two methods, we embedded the style sheet in the HTML document using the style element. The external style sheets are commonly used when you want to do style modifications on different pages. An external style sheet (.css file) contains several style rules. You can attach a .css document to one or more HTML documents with the help of <link> tag inside the head section.

style.css file expressions like:

Let’s check some commonly used font-related CSS properties: 

color 
font-family
font-size
font-style

colorColour property of CSS used to change the colour of the text.
You can use the colour value (numeric | name)
font-familyfont-family property of CSS used to change the font
You can use values as (one or more font names separated by commas)
font-sizefont-size property of CSS used to change the font size
You can use values as (percentage | length unit)
font-stylefont-style property of CSS used to change the font style
You can use values as(italic | oblique)

Let’s check some commonly used box-related CSS properties:

Padding:

The area (space) between the content and boundaries is the padding.

Border:

The border is a line covering the element and its surrounding area such as padding.

Margins:

An optional amount of space added on the outside of the border is the margin.

HTML Classes

The class attribute organizes HTML elements into abstract groups. Different HTML elements can belong to the same class name. With the help of class attributes, you can use a single style rule to apply styles to all of the classed elements at once or manipulate them all with a script.

With the help of class attributes, you can apply styles to all of the classed elements together with a single style rule or control them all with a script.

We have to write (.)class_name to style that class. Let’s check one example of the class attribute.

HTML Marquees

The HTML < marquee > tag is used to rotate text or picture segments, depending on the settings, either horizontally or vertically the screen of your website. The marquee tag has deprecated in HTML5 for the same results you can use CSS and JavaScript. To learn more about JavaScript, you can check our JavaScript blog. 

HTML File Path

You can link different files externally by providing the path location of that file. You can use an absolute or relative path to attach the following files:

  • Web pages
  • Images
  • Style sheets
  • JavaScript

An absolute path is an URL whereas relative path points to a file in the folder. We’ll see an example of both attachment methods.

Absolute path example:

Relative path example:

<img src=” logo.jpg”>
<img src=”images/logo.jpg”>
<img src=”/images/ logo.jpg”>
<img src=”../ logo.jpg”>

HTML Embed Multimedia

In today’s world multimedia is the most important; component of the web. Multimedia can be almost anything, like images, audios, videos, records, music, animations, and many more. You can embed multimedia files in your website with the help of <embed> tag. 

There are many video and audio formats. HTML standard supports the MP4, WebM, and Ogg formats for video whereas MP3, WAV, and Ogg formats for audio. HTML5 provides native audio and video tags as <video> & <audio>. We’ll check both methods to embed multimedia in a web page.

Some attributes which needed for native elements as below:

src: The path/URL for the audio/video to be played.
height: The height of the video.
width: The width of the video.
Controls: it gives controls for audio/video like play, pause, volume, etc.  

Output: video and music file available in the output folder

HTML Quotations

The quotation elements used in HTML to quote any text in a web document. We can easily differentiate quoted texts apart from normal text. Let’s check commonly used quotation elements of HTML:

q quotation:

The < q > HTML tag is used to quote small parts of text. It’s an inline quotation with both opening and closing tags. 

blockquote quotation:

The <blockquote> HTML tag is used to quote a large section such as paragraph. It changes the alignment of the block to look unique from others.

address quotation:

 The <address> HTML tag used to create an area for an author contact information on the website. It is mostly positioned at the end of the document. The browsers always apply a line break before and after the <address> tag. 

abbr quotation:

The <abbr> HTML tag used to write a shortened form of a word or phrase. The full-form will be pop-up when you mouse hovers on the <abbr> element.

bdo quotation:

The <bdo> HTML tag is used to override a text in bi-directional format. Direction can be left-to-right or right-to-left. 

cite quotation:

The <cite> HTML tag is used for citation. The text written in the <cite> tags draws in italic on the browser.   

HTML Semantic Elements

Semantic elements accurately describe the meaning of words inside an HTML tag. For example, header, table, form, article, footer, etc. Let’s check some semantic elements of HTML:

figure and figcaption element:

The <figure> element used to add content that displays image, snippet, etc. on a web page. A description can attach above or below to the figure using the <figcaption> element. 

section and article elements:

To divide web documents into groups that have a meaningful reason to be grouped like Introduction, conclusion, etc. we can use <section> elements. The <article> tag includes independent content that does not need any other reference, Like YouTube page that contain a different kind of videos. 

mark elements:

The <mark> element is useful to draw special attention to words.

details and summary elements:

The <details> element used to deliver extra information that is hidden by default. When you use <details> element, <summary> element also needed to display heading for <details> element. Users can click on heading to view additional information.

header and footer elements:

The <header> element is used for a container that occurs at the top of a web page. The header element contains information like a logo, headings, etc. The <footer> tag contains information that usually comes at the end of a page such as its author, copyright information, etc.  

aside elements:

The <aside> element comprises independent content that does not need any other reference. An aside may hold a list of links, or anything else that might connect with the surrounding content but not part of it. 

nav elements:

The <nav> element provides a section that contains navigation links for a site. You can use the <nav> tag for the link that provides primary navigation around the website.

HTML Frames

HTML frames used to split the browser window into several sections where a separate HTML document can be loaded in each portion. The bunch of frames displayed in the browser window is called a frameset.  

You can see <frameset> tag replaced <body> tag while creating frames. <body> tag is the most important tag in HTML that’s the reason <frame> and <frameset> tag deprecated in HTML5.

HTML Iframes

<iframe> stands for Inline Frame. The <iframe> tag used to embed a separate HTML file within a web page which can load separately. Iframes are distinct from frames because they are added in a web page, much like an image or video. Iframes add all the advantages of frames and none of the flaws. 

HTML vs XHTML

XHTML stands for eXtensible HTML. XHTML has been introduced to make HTML more extensible and versatile to deal with other data formats (e.g. XML). XHTML has capabilities of both XML and HTML. It can be used as a superior version of HTML. The first version, XHTML 1.0, is almost similar to HTML 4.01. Let’s check face-to-face comparison of both markup language.

ParametersHTMLXHTML
Stands forHyperText Markup LanguageExtensible HyperText Markup Language
Extended fromSGML XML, HTML
File extension.html, .htm.xhtml, .xht, .xml
Closing tagsnot necessarynecessary
<!DOCTYPE>not necessarynecessary
Elements must be in Lowercasenot necessary necessary
Attribute Names must be in Lowercasenot necessary necessary

Let’s check one XHTML code:

HTML Canvas

The word canvas says that it’s a two-dimensional rectangular area for drawing. The <canvas> tag used to draw a graphical item on the web page with the help of JavaScript. The canvas is raster-based and made up of a bunch of tiny pixels, so it has low scalability.

HTML SVG

The <svg> HTML tag is used to draw scalable vector-based graphics for the web. Vector images are made up of a mathematical formula; hence there is no upper or lower limit for scaling. SVG can be customizable through script and CSS. SVG images can handle events. 

This brings us to the end of this tutorial. If you want to improve your skills be sure to enrol in our free programs. Click on the banner below to know more

FAQs

  1. What is HTML used for?

HTML is the programming language that is used to create web page structure and content. By structure we mean the way content is placed within paragraphs, bullets, data tables, or in the form of images and videos. 

2. What HTML means?

HTML stands for HyperText Markup Language is a set of markup symbols and codes that are inserted into a file to display on the internet. Hypertext refers to the hyperlinks on the HTML page and markup language is the way that tags are used to define the layout of the page. The markup instructs the web browsers on how they should display the content and images. 

3. How do I start HTML coding?

  1. Open Notepad (Windows PC) or TextEdit (Mac)
  2. Write or copy an existing HTML code on Notepad
  3. Save the file as HTML page on your computer
  4. View the HTM page on your browser

4. What is HTML syntax?

A syntax in HTML is the arrangement of attributes and elements for the purpose of creating well-formed documents. Syntax defines the purpose of the attributes and elements along with the logical relationship between them. 

5. Is HTML coding good?

HTML is a basic programming language for web developers and designers. It is beneficial for professionals across various disciplines such as developers, marketers, analysts, among others. It is gaining popularity across domains and hence is definitely considered as a good.

0

LEAVE A REPLY

Please enter your comment!
Please enter your name here

two − one =