Scribd
Upload
2 views25 pages

Notes - HTML

The document provides an overview of HTML, CSS, and JavaScript, which are essential languages for web development. It explains the structure of HTML documents, the purpose of various HTML tags, and the use of attributes, comments, and elements. Additionally, it includes examples and explanations of common HTML tags and their functionalities, emphasizing the importance of responsive design and the roles of different tags in creating web pages.

Uploaded by

demo class
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views25 pages

Notes - HTML

The document provides an overview of HTML, CSS, and JavaScript, which are essential languages for web development. It explains the structure of HTML documents, the purpose of various HTML tags, and the use of attributes, comments, and elements. Additionally, it includes examples and explanations of common HTML tags and their functionalities, emphasizing the importance of responsive design and the roles of different tags in creating web pages.

Uploaded by

demo class
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Notes

Web development is the process of building and maintaining websites and web
applications.

To create a website, 3 common languages are: HTML, CSS, JS

 HTML  It provides the basic structure and content of a web page.

 CSS  It is used to style the HTML elements of a web page.

 Java Script  It provides functionality to the web page. It adds


interactivity and dynamic behavior to web pages.

Real Life Example: Think of building a house

 HTML is like frame of the house, providing the door, windows, rooms etc.

 CSS is like the interior & exterior design to make house visually appealing.

 Java Script is like electrical system, plumbing systems, etc. of a house.

Few terms:

 Website: A website is a collection of related web pages.

 Webpage: A web page is a single page within a website, identified by a unique


URL. It can contain text, images, audio, video, hyperlinks, etc.

 Homepage: It is the first page of a website.

 Web Server: A computer that stores and delivers website files.

A web server is a system — either software, hardware, or both — that stores,


processes, and delivers web content to users over the Internet.

 URL: It stands for Uniform Resource Locator. It is the unique address of a


resource on the internet, such as a web page, image, or video.

 Responsive design: Responsive web design is about creating web pages that
looks good on all devices. A responsive design will automatically adjust
their layout and content to the screen size and resolution of the device they
are being viewed on. This ensures a good user experience regardless of whether
someone is viewing the site on a desktop computer, a tablet, or a smartphone.

gs/html/pg-1
HTML - The Structure

 Sir Tim Berners-Lee developed HTML. He is considered as the Father of HTML.

 HTML stands for Hyper Text Markup Language.

Hypertext: Hypertext means, text, images, etc. with a link embedded in it.
If you click on that link, it will open a new webpage.

Markup language: Markup language uses tags to define elements within a


document. Every tag in a markup language has a special meaning of its own
and performs a particular operation.

 HTML is used to create the structure of a webpage.

 HTML is not a case sensitive language.

 HTML files have .html or .htm extension.

NOTE: HTML is not a programming language. A programming language uses logic to


produce a result, it uses conditional statements, variables, etc. Whereas HTML
is a markup language, that create structures using tags for data presentation.

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag. That
means, the HTML element is everything from the start tag to the end tag.

Example: <h1> Hello ! </h1>

Tags

Tags are used to structure the content on web pages. Tags are pre-defined
elements in HTML, enclosed within angle < > brackets. All HTML tags have a
particular function associated with them.

There are 2 types of tags in HTML:

 Paired Tags  Paired tags have a separate opening and a separate closing
tag. The closing tag has a forward slash (/) before the tag name.

Example: <p> Welcome to HTML </p>

 Unpaired Tags  Unpaired tags are single tags with no closing tag. These
tags are also called singular tags or empty tags.

Example: <br>
gs/html/pg-2
Attributes

 HTML attributes provide additional information about HTML elements (tags).

 Attributes are always specified in the start tag.

 Attributes usually come in name/value pairs like: name="value"

Example: <img src = "[Link]">

Here, <img> is the tag and 'src' is the attribute name. The 'src' attribute
specifies the path of the image to be displayed.

Comments in HTML

To create a comment in HTML, use <!-- and -->.

Any text written inside <!-- and --> is considered as a comment and it does not
display on the webpage.

Basic Structure of HTML document

<!DOCTYPE html>
<html>
<head>
<title> ------ </title>
</head>
<body>
----------Any tags can be given
</body>
</html>

Explanation of the above HTML tags:

 <!DOCTYPE html>: It is the Document Type Declaration for HTML5. It is written


at the beginning of an HTML document, before the <html> tag.

 <html lang="en">: It is the parent tag for all HTML elements. Everything
related to an HTML document must be written inside the <html> tag. lang="en"
specifies the language as English.

 <head>: This tag contains meta-information about the HTML document, such as
the title, character set, and links to external resources.

NOTE: It is a container tag for all those elements that are not directly
displayed on the webpage but required for the page functionalities.

gs/html/pg-3
 <title>: It specifies the title of the webpage, which is displayed in the
browser's title bar or tab.

 <body>: Encloses all the content that will be displayed on the webpage.

NOTE: All above tags are paired tags. Only <!DOCTYPE html> is a singular tag.

Few HTML Tags

Paired Tags

 <h1> to <h6>: These are heading tags. They represent different levels of
headings, with <h1> being the largest and <h6> being the smallest.
Example: <h1> Hello! </h1>

 <p>: It defines a paragraph, anything written inside <p> and </p> displays
as a paragraph on the webpage.
Example: <p>Hello! Hello! Hello! Hello! Hello!
Hello! Hello! Hello! Hello! Hello! Hello! Hello! </p>

 <strong>: It is used to define text with strong importance. The content inside
is displayed in bold.
Example: <strong> Hello! </strong>

 <b>: It is used to make the text bold, without any extra importance.
Example: <b> Hello! </b>

 <u>: It is used to underline the content.


Example: <u> Hello! </u>

 <i>: It is used to show the content in italic.


Example: <i> Hello! </i>

 <mark>: It defines text that should be highlighted.


Example: <mark> Hello! </mark>

 <a>: <a> tag, known as Anchor tag creates a hyperlink, which is used to link
from one web page to another.

A hyperlink is a specific type of link that allows users to navigate from


one web page or resource to another by clicking on it.

You can create hyperlinks using text, images, etc. available on a webpage.
Anything (text, image, etc.) between opening <a> and closing </a> tags become
clickable and when someone clicks on it, the linked page will be opened.

gs/html/pg-4
Syntax: <a href="URL" target="_target_type"> Text to be linked </a>

Explanation:
href: It specifies the URL of the page that the link points to.

target: It specifies where to open the linked document. Few values are:

 _blank: Opens the linked document in a new window or tab.

 _self: Opens the linked document in the same frame. (default)

Text to be linked is the part that will be visible to the reader. Clicking
on the text, will send the reader to the specified URL address.

NOTE: There are more attributes of <a> tag

Example 1: linking website using text


<body>
<a href="[Link] Facebook Site </a>
</body>

Example 2: linking website using image


<body>
<a href="[Link]
<img src="[Link]" width="100" height="100">
</a>
</body>

Example 3: linking text to an email address and phone number


<body>
<h2>Contact Us:</h2>
<a href="[Link] Via Mail </a><br>
<a href="[Link] Via Phone </a>
</body>

Example 4: linking to another section on the same web page


<body>
<h1>HTML Notes</h1>
<a href="#intro"> Introduction </a><br />
<a href="#tags"> Tags </a>

<h2 id="intro">Introduction to HTML</h2>


<p> Write about HTML</p>

<h2 id="tags">Tags In HTML</h2>


<p>Write about tags</p>
</body>
gs/html/pg-5
Link Colors

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue.

A visited link is underlined and purple.

An active link is underlined and red.

NOTE: Color of links can be changed.

 <div>: It defines a division or a section in the document. It is a block-


level container to group related elements, allowing you to apply styles or
scripts to them as a single unit.
Example:
<div style="background-color: yellow">
<h1>Hello !</h1>
<h3>Hello !</h3>
</div>

 <span>: It is an inline container. It provides a way to style specific


portions of text without disrupting the overall flow of the document.
Example:
<h1> HTML is used to <span style="color: blue;"> Structure </span>
the webpage. </h1>

 <header>: It represents a container for introductory content or a set of


navigational links. It is placed at the top of the page or section.
Example:
<body>
<header>
<h1>HTML Introduction</h1>
<p>Posted by GS</p>
</header>
</body>

 <footer>: The <footer> tag defines a footer for a document or section. A


<footer> element typically contains - authorship information, copyright
information, contact information, sitemap, back to top links, etc.
Example:
<footer>
<p>Author: GS<br>
<a href="[Link]
</footer>

gs/html/pg-6
 <main>: It defines the main content of an HTML document, which should be
unique. Only one <main> element should exist per page.

It should not contain any content that is repeated across documents such
navigation links, copyright information, etc.

It should not be placed inside <article>, <aside>, <nav>, <footer>, or


<header> elements.

Example: <body>
<main>
<h1>Programming Languages</h1>
<p>C Programming, C++ Programming</p>

<article>
<h1>C Programming</h1>
<p>C is a Procedural language</p>
</article>

<article>
<h1>C++ Programming</h1>
<p>C++ programming is an Object oriented
programming.</p>
</article>
</main>
</body>

 <ul>: It defines an unordered (bulleted) list. It is used to group a


collection of items where the order does not matter. Each item within the
list is defined by the <li> (list item) tag.

Example:
<body>
<ul>
<li>Mouse</li>
<li>Keyboard</li>
</ul>

<ul>
<li>Mouse</li>
<li>Keyboard</li>
</ul>
</body>

 <li>: It defines an item in a list. It is used inside ordered, unordered and


menu lists.

gs/html/pg-7
 <ol>: It defines an ordered list. An ordered list can be numerical or
alphabetical. It provides sequential organization of items.

The numbering format can be customized using attributes:

type attribute: Allows changing numbering style to lowercase/uppercase


letters (a, A), or Roman numerals (i, I).

start attribute: Specifies the starting number of the list.

reversed attribute: Creates a descending list.

Example: <body>
<ol>
<li>Mouse</li>
<li>Keyboard</li>
<li>Speaker</li>
</ol>
<ol type='A' start='3'>
<li>Mouse</li>
<li>Keyboard</li>
<li>Speaker</li>
</ol>
</body>

 <style>: It is used to define style information (CSS) for a document. It must


be placed within the <head> tag.

Example: <head>
<style>
#p {
color:red
</style>
</head>

<body>
<h1 id="p">HELLO !</h1>
</body>

 <audio>: It is used to embed audio content directly into a webpage.

The <audio> tag can contain one or more <source> tags with different audio
sources. The browser will choose the first source it supports.

The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

gs/html/pg-8
Few Attributes of <audio> tag:

src: Specifies the URL of the audio file.

controls: Adds default audio controls (play, pause, volume, etc.).

<source>: Allows specifying multiple audio formats for browser


compatibility.

Example 1: adding 1 audio file

<audio src="Sare%20Jahan%20Se%20Acha.mp3" type="audio/mpeg" controls>


Your browser does not support the audio element.
</audio>

Example 2: adding 2 audio files

<audio controls>
<source src="Sare%20Jahan%20Se%20Acha.mp3" type="audio/mpeg">
<source src="Vande%20Mataram.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 <video>: The <video> tag is used to embed video content in a document.

-------Same as <audio> tag-------

NOTE: Attributes of <video> is same as of <audio> tag.

Example:
<video src="TomJerry.mp4" width="350" height="250" controls>
Video tag not supported by your browser
</video>

 <nav>: It is used to define a section of the page that contains navigation


links. It includes links to other pages within the website or to different
sections of the same page.

It is used to mark-up major navigation blocks on a website, such as the main


menu, table of contents, or index.

Example 1: using list element


<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
gs/html/pg-9
Example 2: without list element
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>

 <iframe>: It is used to display a web page within a web page.

The HTML <iframe> tag specifies an inline frame. An inline frame is used to
embed another document within the current HTML document.

The embedded document can be a webpage, video, audio, google map, etc.

The content inside the iframe remains independent of the parent document,
meaning styles and scripts of the parent document do not interfere.

Attributes of <iframe>:

src: Specifies the URL of the page or content to be embedded.

width and height: Sets the dimensions of the iframe.

frameborder: Specifies whether to display a border around the iframe (0


for no border, 1 for a border). By default, an iframe has a border.

allowfullscreen: Enables full screen mode for content like videos.

Example:
<body>
<iframe
src="[Link]
width="600px" height="450px" allowfullscreen>
</iframe>
</body>

Unpaired Tags (Empty Tags)

 <br>: It is used to insert a single line break.


Example: <p>Hello ! Hello ! Hello ! <br> Hello ! Hello !</p>

 <hr>: It is used to give a horizontal line.


Example: <h1>Hello !</h1>
<hr>
<h3>Hello !</h3>

gs/html/pg-10
 <link>: It defines the relationship between the current document and an
external resource. It is an empty element, it contains attributes only.

The <link> tag is most often used to link external style sheets or to add a
favicon to your website.

Few Attributes of <link> tag:

href: Specifies the URL of the linked document.

rel: Specifies the relationship between the current and the linked
document.

type: Specifies the content type of the linked document.

Example: <head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

Adding Favicon:

A favicon is a small image displayed next to the page title in the browser
tab.

It is displayed to the left of the page title.

Favicons are added to HTML documents using the <link> tag within the <head>
section. The rel attribute of the <link> tag is set to icon to specify
that the linked resource is a favicon. The href attribute is used to
provide the path to the favicon image file.

You can use any image you like as your favicon. You can also create your
own favicon on sites like [Link]

Example:
<head>
<title>My Page</title>
<link rel="icon" href="[Link]" />
</head>

<body>
<h1> You can download favicon from [Link] </h1>
<p></p>
</body>

gs/html/pg-11
 <img>: This tag is used to embed an image in an HTML page.

Few Attributes of <img> tag:

src: specifies the path to the image

alt: provides alternative text if the image fails to load.

Example:
<html>
<body>
<img src="[Link]" alt="Flower image" width="300px height="300px">
</body>
</html>

 <meta>: Meta tags are used to provide metadata about an HTML document, such
as character set, page description, viewport settings, etc.

Metadata is data about data. It means information about the webpage content.

<meta charset="UTF-8">: It declares the character encoding for a specific web


page. It tells the browser to use utf-8 character encoding, when translating
machine code into human-readable text and vice versa to be displayed in the
browser.

Charset: It is an HTML attribute of meta tag, that defines the character


encoding for your browser to use, when displaying the website content.

UTF-8: It is an encoding character set that contains all the characters


and symbols in the world.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">:

Ensures the webpage is responsive, meaning it adjusts to different screen


sizes, especially mobile devices.

name="viewport": Specifies that this meta tag is for viewport settings.

width=device-width: Tells the browser to set the viewport width to the


width of the device screen. This is essential for making the page look
good on different screen sizes (like phones, tablets, and desktops).

initial-scale=1.0: Sets the initial zoom level when the page is first
loaded. 1.0 means the page will be displayed at 100% zoom, without any
initial scaling.

gs/html/pg-12
Block and Inline Elements

In HTML, elements are categorized as either block-level or inline based on how


they are displayed on a webpage.

Block-level Elements

 A block-level element always starts on a new line.

 It always takes up the full width available in their parent container,


extending horizontally.

 Have top and bottom margins, contributing to spacing between elements.

 Can contain both inline and other block-level elements.

Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>,
<section>, <nav>.

Inline Elements

 An inline element does not start on a new line.

 It takes up as much width as necessary to contain their content.

 They flow with the text and are part of the line.

 Do not have top and bottom margins.

 Can only contain other inline elements.

Examples: <span>, <a>, <img>, <strong>, <em>, <br>, <label>, <input>, <select>.

HTML id and class attributes

In HTML, id and class are attributes used to identify and style elements.

id Attribute

 The id attribute provides a unique identifier (id) for an element within an


HTML document.

 No two elements on the same page should have the same id.

 The value of the id attribute is case sensitive.

 An id name cannot start with a number.


gs/html/pg-13
 The id attribute is used to point to a specific style declaration in a style
sheet.

 In CSS, an id is selected using the # symbol followed by the id value. (e.g.,


#myElement).

 It is used by JavaScript to access & manipulate the element with specific id.

 JavaScript can access an element with a specific id with the getElementById()


method.

class Attribute

 The HTML class attribute is used to specify a class for an HTML element.

 It is used to group multiple elements that share similar styling.

 The class name is case sensitive.

 A class name cannot start with a number.

 Multiple HTML elements can share the same class.

 HTML elements can belong to more than one class.

 It is used to point to a class name in a style sheet.

 In CSS, a class is selected using the . symbol followed by the class value
(e.g., .myClass).

 It is used by a JavaScript to access & manipulate elements with the specific


class name.

 JavaScript can access elements with a specific class name with the
getElementsByClassName() method.

Tables

In HTML, Tables are used to organize and display data in a structured format of
rows and columns.

A table cell can contain text, images, lists, links, other tables, etc.

Few Table Tags

 <table>: It creates the table. It acts as a container for all table elements.

 <tr>: Stands for table row and creates a row in the table.
gs/html/pg-14
 <td>: Defines a data cell within a row, containing the actual table data.

 <th>: Defines a header cell within a row, typically used for column labels.
It is often bold and centred.

 <caption>: Provides a title or description for the table.

NOTE: An HTML table may also include <colgroup>, <thead>, <tfoot> and <tbody>

Few Table Attributes:

 rowspan: Specifies the number of rows a cell should span vertically. Used to
merge cells vertically, making a single cell occupy the space of multiple
rows.

 colspan: Specifies the number of columns a cell should span horizontally.


Used to merge cells horizontally, making a single cell occupy the space of
multiple columns.

 bgcolor: Sets background color of table. (CSS property is background-color)

 background: Sets a background image for the table.

 border: Sets the border size of the table.

 cellpadding: Sets the space between the cell content and its border. (CSS
property is CSS padding).

 cellspacing: It is the space between each cell. (CSS property is border-


spacing).

Example 1:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
padding: 2px;
border-spacing: 5px;
border-collapse: collapse;
}
caption {
color: red;
font-weight: 600;
}
</style>
</head>
gs/html/pg-15
<body>
<table style="width: 400px">
<caption>
STUDENT MARKS
</caption>

<tr>
<th>ROLL</th>
<th>NAME</th>
<th>TOTAL MARKS</th>
</tr>

<tr>
<td>1</td>
<td>Rahul</td>
<td>485</td>
</tr>

<tr>
<td>2</td>
<td>Soham</td>
<td>445</td>
</tr>

</table>
</body>
</html>

Example 2: using rowspan and colspan


<html>
<head>
<style>
table {
border-collapse: collapse;
text-align: center;
}
</style>
</head>

<body>
<table border="1" bgcolor="lightyellow" width="400px" cellspacing="3"
cellpadding="5">
<tr>
<th rowspan="6">Months</th>
<th clospan="2">28 days</th>
</tr>
<tr><td>February</td></tr>
gs/html/pg-16
<tr><th>30 days</th></tr>

<tr><td>April, June, Setmeber, November</td></tr>

<tr><th clospan="2">31 days</th></tr>

<tr><td>January, March, May, July, August, October, December</td></tr>


</table>
</body>
</html>

Forms

 The <form> tag in HTML is used to create a form. It is a paired tag.

 An HTML form is used to collect user input. The user input is most often sent
to a server for processing.

 The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

Few Key Attributes of <form>

There are more attributes like autocomplete, etc.

 action: It specifies where to send the form-data when a form is submitted.

Value: URL

Example: <form action="[Link]">

NOTE: If action attribute is omitted, the action is set to the current page.

 method: It specifies the HTTP method that will be used to send data to the
server when the form is submitted.

Values: GET or POST.

GET: Appends the form data to the URL, in name/value pairs. It is not used
to send sensitive data as the submitted form data is visible in the URL.
The length of a URL is limited (2048 characters). It is useful for form
submissions where a user wants to bookmark the result.

gs/html/pg-17
POST: Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL). Always use POST to send
sensitive or personal information. It has no size limitations. Form
submissions with POST cannot be bookmarked.

Example: <form action="/[Link]" method="post">

 target: This attribute specifies where to display the response that is


received after submitting the form.

Values: "_blank" (new window), "_self" (current window) is default, etc.

Example: <form action="/[Link]" method="post" target="_blank">

Common Form Elements

Below are few elements. There are elements like <legend>, <output>, etc.

 <input>: It is used to collect user input in web forms. It supports various


input types such as text, password, checkboxes, radio buttons, and more. It
is an empty element that only contains attributes.

Example: <form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>

 <label>: It represents a caption for a form element in a user interface.

It improves accessibility, by linking label text to form elements. When a


user clicks on the label, it automatically focuses on or activates the
associated input, such as text fields, checkboxes, or radio buttons. It is a
paired element.

NOTE: The for attribute of the <label> tag should be equal to id attribute
of the <input> element to bind them together.

Example: <form>
<label for="password">Password:</label>
<input type="text" id="password" name="username">
</form>

Here, the for attribute of <label> is same as id attribute of <input>.

gs/html/pg-18
 <select>: It is used to create a drop-down list for user input, containing
<option> tags to display the available choices. It is a paired element.

Its multiple attribute allows selecting one or multiple options from a list.

By default, the first item in the drop-down list is selected. You can
preselect an option with the selected attribute.

Example 1: <form>
<label for="colors">Choose a color:</label>
<select id="colors" name="colors">
<option value="red"> Red </option>
<option value="blue"> Blue </option>
<option value="yellow"> Yellow </option>
</select>
</form>

Example 2: preselected option (blue color is preselected)


<form>
<label for="colors">Choose a color:</label>
<select id="colors" name="colors">
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
</select>
</form>

 <option>: It defines an option in a select list. <option> elements go inside


a <select>, <optgroup>, or <datalist> element.

Example: Shown above with <select> element.

 <textarea>: It is used for multi-line text input. It is a paired element.


Attributes like cols and rows define its size. It's commonly used in forms
to collect user inputs like comment, review, etc.

Example:
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30"> Comment area </textarea>
</form>

 <button>: It is used to create clickable buttons on a webpage. These buttons


can trigger various actions, such as submitting a form, running JavaScript
functions, or simply interacting with users.

Example:
<button type="button" onclick="alert('Hello World!')"> Click Me! </button>

gs/html/pg-19
Few Input Types in HTML Forms:

Below are some input types. There are more input types like "url", "range", etc.

NOTE: The default value of the type attribute is "text".

 <input type="text">: It creates a single-line text input, like for names.

Example: <label for="fname">First name: </label>


<input type="text" id="fname" name="fname">

 <input type="number">: It creates a numeric input field, often with up/down


arrows. You can also set restrictions on what numbers are accepted using
'min' and 'max' attributes.

Example: <label for="num">Enter a number: </label>


<input type="number" id="num" name="number">

 <input type="password">: It creates a password field. The characters in a


password field are masked (shown as asterisks or circles).

Example: <label for="pass">Enter password: </label>


<input type="password" id="pass" name="password">

 <input type="radio">: It creates a radio button. It is used for single-choice


selection.

Radio buttons are normally presented in radio groups (a collection of radio


buttons describing a set of related options). Only one radio button in a
group can be selected at the same time.

NOTE: The radio group must share the same name (the value of the name
attribute) to be treated as a group. You can have as many radio groups on a
page as you want, but each group must share a common name attribute.

NOTE: The value attribute defines the unique value associated with each radio
button. The value is not shown to the user, but is the value that is sent to
the server on "submit" to identify which radio button that was selected.

Example: <form>
<p>Gender :</p>
<input type="radio" id="male" name="gender" value="Male">
<label for="html"> Male </label>

<input type="radio" id="female" name="gender" value="Female">


<label for="css"> Female </label>
</form>
Here, name attribute is common for all options of Gender.
gs/html/pg-20
 <input type="checkbox">: It creates a checkbox. It is used for multiple-
choice selections.

checked attribute makes the checkbox checked by default when the page loads.

Example: <body>
<h3>Favourite Color:</h3>

<form action="/example_page.php">
<input type="checkbox" id="red" name="color" value="Red">
<label for="red"> RED </label><br>

<input type="checkbox" id="blue" name="color" value="Blue">


<label for="blue"> BLUE </label><br>

<input type="checkbox" id="yellow" name="color"


value="Yellow">
<label for="yellow"> YELLOW </label><br>

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


</form>
</body>

 <input type="button">: It defines a clickable button (mostly used with a


JavaScript to activate a script).

Example:<body>
<form>
<input type="button" value="Click me" onclick="msg()">
</form>

<script>
function msg() {
alert("Hello world!");
}
</script>
</body>

 <input type="reset">: It creates a reset button that will reset all the form
values to their default values.

Example:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="Rahul"><br><br>
<input type="reset" value="Reset" />
</form>
gs/html/pg-21
 <input type="submit">: It creates a button for submitting form data to a
server page.

Example:
<form action="/example_page.php">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>

Here, if you click the "Submit" button, the form-data will be sent to a page
called "/example_page.php".

 <input type="date">: It creates a date input field. The browser usually


renders a date picker interface, allowing the user to select a date from a
calendar.

Example: <form action="/example_page.php">


<label for="birthday">Enter your birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

NOTE: The date format for the <input type="date"> element is standardized as
YYYY-MM-DD. Internally, the input value is always in this format, but the
visual representation of the date picker can vary depending on the browser
and operating system's local settings. For example, a user in the United
States might see a date picker displaying MM/DD/YYYY, even though the
underlying value is still stored as YYYY-MM-DD.

It is important to note that HTML does not provide a direct way to change
the display format of the date picker. The browser determines how the date
is presented to the user.

 <input type="time">: It defines a control for entering a time (does not


include timezone information). The browser provides a time picker interface
in the input field.

Example:
<form>
<label for="start-time">Select a time:</label>
<input type="time" id="start-time" name="start-time">
</form>

NOTE: The format for this input is always a 24-hour format, represented as
HH:mm or HH:mm:ss. While the input may display in 12-hour format, depending
on the browser and operating system settings, but internally the value will
always be submitted in 24-hour format.
gs/html/pg-22
 <input type="tel">: It creates a field for entering phone number.

Example: <form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</form>

Here, pattern attribute enforces a specific format (e.g., XXX-XXX-XXXX) using


a regular expression.

 <input type="email">: It creates a field for an e-mail address. It


automatically validates the input to ensure it follows the correct email
format. Adding the "multiple" attribute allows the user to input multiple
email addresses, separated by commas.

Example:<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" multiple>
</form>

 <input type="file">: It defines a file-select field and a "Browse" button for


file uploads. When the form is submitted, the selected file(s) can be uploaded
to the server.

You can also use the "multiple" attribute within the <input type="file"> tag
to allow users to select multiple files at once.

Example: <form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile" multiple>
</form>

Few Input Attributes

There are more attributes of <input> element. Below are only few.

 id: It serves as a unique identifier for that specific element within the
HTML document. No two elements should have the same id.

 name: It specifies a name for an HTML element.

It is used as a reference when the data is submitted. When a form is submitted,


the browser sends the data to server as name-value pairs. The name attribute
of each form element becomes the key, and the user's input becomes the value.

gs/html/pg-23
NOTE: id must be unique within the HTML document, whereas name can be non-
unique, and is sometimes re-used within a form (like, same name should be
used for all options of radio input type, to ensure that only one radio button
is selected from a group).

Example: <form>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>

<input type="radio" id="age2" name="age" value="60">


<label for="age2">31 - 60</label><br>

<input type="radio" id="age3" name="age" value="100">


<label for="age3">61 - 100</label>
</form>

 value: Specifies the initial value of the input.

The value attribute is used differently for different input types:

For button, reset, and submit - it defines the text on the button.

For text, password, and hidden - it defines the initial (default) value
of the input field. If omitted, the field is empty.

For checkbox, radio, image - It defines the value associated with the
input, which is sent when the form is submitted.

Example: <label for="fname"> First name: </label><br>


<input type="text" id="fname" name="fname" value="Rahul">

 readonly: Specifies that an input field is read-only. It cannot be modified.

Example: <label for="fname"> First name: </label><br>


<input type="text" id="fname" name="fname" value="Rahul" readonly>

 required: It specifies that the input field must be filled out before
submitting the form.

Example: <label for="username"> Username: </label>


<input type="text" id="username" name="username" required>

 placeholder: It provides a hint to the user about what to enter.

Example:
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="000-000- 0000">
gs/html/pg-24
 pattern: It specifies a regular expression that the input field's value is
checked against, when the form is submitted. It is used with input types -
text, date, search, url, tel, email, and password.

Example: <label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Here, a pattern is defined to enter phone number. To add a hyphen after first
3 digits, then again a hyphen after next 3 digits.

 min and max: The min and max attributes specify the minimum and maximum values
for an input field. It is used with input types - number, range, date,
datetime-local, month, time and week.

Example: <label for="number"> Enter Number (between 1 and 10): </label>


<input type="number" id="Number" name="number" min="1" max="10">

-----------------------------------x-----------------------------------------

gs/html/pg-25

You might also like