Scribd
Upload
25 views

10 CA HTML Notes Full

Uploaded by

ishika.rathoree
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

10 CA HTML Notes Full

Uploaded by

ishika.rathoree
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

What is HTML?

HTML is a markup language that helps to create the content of a web page using
different commands.

• H: H stands for Hyper, which means something which is active.


• T: T stands for Text, command written with the help of alphabets, known as
tags
• M: M for markup, helps to render a portion enclosed in a specific tag
• L: L for language, simple English language to identify the codes

Why HTML?
1.
1. HTML is needed to develop a web page or website.
2. If you are looking for a career in web designing or web development in
the future, HTML is the first step.
3. To understands search engine and landing information.
4. It helps to understand the scripting language, which is very important
for web designers or web developers.
5. It helps to create design templates and themes for different websites.

So now let’s talk about what are the requirements of HTML?

Requirements of HTML
For learning requirement you need to understand the following:

• The structure of a page or document with its elements header, footer,


document body, titles, margins, etc.
• Formatting commands like fonts, bold, italics, underline, and so on.

For writing code and display results you need to understand the following:

• Text editor: A software that is used to write the code. For example, Notepad,
vim editor, notepad++, etc.
• Web browser: A web browser is a program that is used to display the web
page. It works as a platform for HTML that compiles your code and displays
the output. For example google chrome, Mozilla Firefox, internet explorer, etc.

So for HTML, we will use notepad as a text editor and any chrome browser for the
result display.

Writing HTML code


To write HTML code you need to have basic typing skills as well as windows
navigation using a keyboard. As you will work on more than one window always
while using HTML. At least three windows simultaneously:

• Text editor
• Browser
• Folder window where you save your files
Remembers these short cut keys for quick navigation and helpful during writing
HTML and viewing results.

• Alt + Tab ↣ Navigate in different windows


• Ctrl + S ↣ Save the file
• F12 ↣ Save as
• F5: Refresh the browser

So now to write HTML code you need to understand the structure of the HTML page.

Structure of HTML page


An HTML page structure has two main sections:

• Head: Contains the information related to your page heading which is mostly
not visible to users but useful for search web browser and WWW
• Body: Contains the information or original contents to be displayed on your
web page

An HTML page structure has few tags. These tags must be written for each and
every page.

Basic tags of HTML structure


First, let me introduce what is a tag? A tag is an HTML command written in angular
brackets. For ex. <HTML>…</HTML>. A tag is written with / is known as ending tag.
There are two types of HTML tag:

• Container: A tag that contains starting as well as ending tag is known as a


container tag.
• Empty: A tag doesn’t have an ending tag with / mark is known as an empty
tag.

There are four main tags used for HTML page structure:

• HTML: Every page starts with <HTML> and ends with </HTML>. The entire
HTML code must be written in between these two tags.
• HEAD: It specifies the head or header of the page. Most part of this tag is not
directly visible to the user. It plays an important role in a web page. It helps to
divide the page, write different scripts, writing styles, and link different external
documents for the HTML web page.
• TITLE: It displays a page title on title bar the web browser and very important
for the search engines to display information on WWW.
• BODY: It is the main area of the page. Whatever you want to display on the
page, you must write in this section.

Now be ready for your first HTML page is here with a single line output:

<HTML>

<HEAD>
<TITLE>

My First web page.

</TITLE>

</HEAD>

<body>

Welcome to HTML.

</body>

</HTML>

While writing code follow these important tips to avoid errors:

• When you write a starting tag, immediately press enter and write ending tag
as well if your tag is a container tag. Then write the required tags or code in
between.
• HTML is case insensitive language. It means that whether you write a tag in
capital letters or small letters everything is accepted without error. You can
check in my code, as I wrote a few HTML tags in the capital, few in small
letters.
• Whatever content you want in a specific block or under the tag that must be
written in a proper sequence. Means if you write anything after </html> or
</body> it has no meaning.

Type above code in notepad, don’t try to do copy paste as you are learning. Type the
code. If possible try to give indentation for tags to write as blocks like this:

<html>

<head>

<title>Your Tile </title>>

</head>

<body>Your page contents

</body>

</html>
Saving HTML file
After completion of the above code typing, now it’s required to be saved. Follow
these steps to save the file:

• Click on File Save option. A save dialog box appears.

Save file as html

• Don’t forget to write .html at the end of file.


• Then click on the Save button.

Rendering your HTML File


Now go to the location where you save the HTML file. You will get a browser icon
generally internet explorer with the file name. Double click to open and that’s it. You
will get your output.
Now again if you want to write in your HTML file again, you need to open that file in
the text editor.

• Select the file.


• Right-click on that
• Select open with option
• Choose notepad

Or open notepad and use open command. Select all files in all files option available
next to the filename in the file open dialog box.

HTML Basic Elements or Tags


Before starting with this topic explore the following basic terms associated
with HTML.

Terms related to HTML


Tag or Element
The HTML command is known as tag or element. It is written within angular
brackets. For example, <HTML>, <Head>, <title> etc.

Attribute
An attribute is a property name that adds more functionality to the content enclosed within a
tag. The attribute is written next to the tag name.

Value
Value refers to the property value which can be applied to the attribute of an HTML element.
Value must be provided next to attribute with equals to (=) sign. Then written into double
quotes.

HTML Tag structure


An HTML tag written in the proper manner with its attributes and values is called an HTML
tag structure.
Ex. <body bgcolor=”blue”>

In the above example body is tag, bgcolor is attribute and “blue” is value. Every HTML tag
starts with an angular bracket then tag name, then attribute (if required) then value.

In the next section of Basic HTML Elements Class 10, we will discuss some basic
tags.

The <HTML> tag


This is main tag of HTML document. Every HTML code starts with <HTML> and ends with
</HTML>. Then developer can write the entire code in between <HTML> and </HTML>. It
tells the browser that the document is an HTML document. Along with HTML tag following
attributes can be used:

dir Attribute
This tag specifies the direction of the text in the document. It can be either left to right or right
to left. The values can be ltr (left-to-right) or rtl (right-to-left).
For example,
<HTML dir="ltr">

LANG Attribute
It specifies the language used in HTML document. Mostly the value is the first two initial
letters of the language used in the web page.

For example,
<HTML lang="fr">

If you want to know more values for lang attribute click here.

The <head> tag


It defines the head section of the HTML web page. It consists of the header information such
as the title of the webpage, scripts like javascript or VBScript, styles used in the document,
and description tags. This tag has no attribute.

The <title> tag


It displays the title of your webpage on the title bar. It plays an important role to crawl your
webpage by Google or any other search engine. The title must be descriptive, unique, and
short for each document.
For example,
<html>
<head>
<title> HTML basic tags </title>
</head>
<body>
Main content of the page goes here.
</body>
</html>

Output
The title tag in HTML

The <body> tag


It is the main area where the user’s content will be displayed on the web page. Each and
every content like text, lists, tables, images, audio, video, frames, etc. will be inserted
between <html> and </html>. This element has the following attributes:

Background
The background attribute is used to apply or change the background image of your
webpage.

For example,
<html>
<head>
</head>
<body background="back-img.jpg">
Your contents goes here.
</html>

When you are using an image as background following points should be taken care of:

1.
1. The image must be copied into the same folder where you want to save your
HTML file.
2. Write an image name with an extension. Check the properties of the image to
view the extension.
3. All browsers did not support displaying a background image with this
attribute.
4. You must ensure that the text colour and background image colour should be
used in such a way that the user can read the text properly.
5. The image extension must be provided with your file name.
bgcolor

html bgcolor attribute output

This attribute is also related to the background color of the webpage. The value can be any
color name or color code. The color code is made up of the hexadecimal code with #rrggbb
format. You can use the color code for light or dark color combinations. Let’s have look on
this code:

Note: The hexadecimal code is using 0 to 9 digits and A to F letters such as #0011DD.
<html>
<head>
<title>Background Color Demo</title>
</head>
<body bgcolor="blue">
Your contents goes here.
</html>

Output

html bgcolor attribute output


(1)

Text
This attribute changes the color of text written into the webpage. The text which is not a part
of any other element or formatting styles can be displayed with the given color.

For example,
<html>
<head>
<title>Background Color Demo</title>
</head>
<body bgcolor="blue" text="white">
Your contents goes here.
</html>

Output

text attribute of body tag

link
This attribute is used to change the color of the link text in the web page. The detailed
explanation I will cover in the anchor tag section later. By default it is blue.

alink
This attribute is used to change the color of an active link text. Active links are those link
which is in use currently. When you click on the link and press the mouse on the link this
color is displayed on the text.

vlink
This attribute changes the color of the visited link text. By default the visited link color is
purple.

The <br> Tag


HTML does not print the text as it is you write in the text editor. Suppose you want to print 5
lines in different lines, but HTML print all the contents in the same line up to the width of your
browser. So if you want break the line you have to use <br> tag. br means Break. It breaks
your line and starts a new line from the next letter. Have a look at the following code and
browser output:

<html>
<head>
<title>br demo</title>
</head>
<body>
This is my webpage.
I have created my web page using HTML.
Learning web page designing is quite interetring.
</html>

<html>
<head>
<title>br demo</title>
</head>
<body>
This is my webpage.
<br>
I have created my web page using HTML.
<br>
Learning web page designing is quite interetring.
</html>

The <hr> Tag


This tag is used to draw a horizontal line across the page. hr means that horizontal rule.
Let’s have a look at the following HTML code.
<html>
<head>
<title> HR tag</title>
</head>
<body>
Welcome to my blog - TutorialAICSIP.
<hr>
This website provides you study material for Artificial Intelligence,
Computer Science, Inoformatics Practices, Information technology and
Computer Applications.
</body>
</html>

Output

HR tag output HTML


Formatting Tags Class 10

Attributes of HR tag
HR can have the following attributes:

1. Color: It is used to apply color to HR. The value can be any color name or color code.
2. Size: It is Used to change the height of HR. It can be in number or %.
3. Width: It is used to change the width of HR. It can be in number or %.
4. Align: It is used to change the alignment of HR.

<html>
<head>
<title> HR tag</title>
</head>
<body>
Welcome to my blog - TutorialAICSIP.
<hr color="red" size=5 width="50%" align="left">
This website provides you study material for Artificial Intelligence,
Computer Science, Inoformatics Practices, Information technology and
Computer Applications.
</body>
</html>

Output

HTML HR Attributes Output

In the next section of HTML formatting tags class 10, you will learn how to insert
comments.

Inserting comments
Comments are additional text required to describe some tags or to write explanatory of the
specific tags in the HTML web page. Comments in HTML page starts with <!–Comment
Text–>. Comment text is not displayed in the output.

The next section of HR tag for HTML formatting tags class 10 talks about the heading tags.

The heading tags


Headings are very useful for HTML documents. It helps to write the keywords in the
document. You can write the headings in a proper hierarchy with appropriate levels of
headings. These headings levels are ranging from heading 1 to heading 6. The top-level
heading is heading 1 and the bottom level heading is H6. H1 is the biggest in size whereas
H6 is the smallest. Have look at the following code:
<html>
<head>
<title> Headings in HTML</title>
</head>
<body>
Welcome to my blog - TutorialAICSIP. This blog provides you following
subjects study materials of CBSE curriculum.
<h1>Computer Science</h1>
<h2>Artificial Intelligence</h2>
<h3>Informatics Practices</h3>
<h4>Information Technology</h4>
<h5>Computer Applications</h5>
<h6>Computer 4 to 8</h6>
</body>
</html>

Output
Headings in HTML

The <p> Tag


The <p> tag is used to apply formatting like a paragraph. The text written in between
<p>…</p> known as paragraph body. Whenever you want to write the contents of a specific
section you can use this tag.

The <b>, <i>, <u> tag


The <b> tag is used to apply a bold effect to the enclosed text.

The <i> tag is used to apply an italics affect the enclosed text.

The <u> tag is used to underline the enclosed text.


<html>
<head>
<title> Bold, Italics and underline in HTML</title>
</head>
<body>
Welcome to my blog -<b>TutorialAICSIP</b>.
This blog provides you computer related subjects <i>study materials</i> of
<u>CBSE curriculum<u>
</body>
</html>

Lists in HTML
Lists are an important part of a document. Whether it is a word document or pdf document or
web document. It adds functionality to understand the contents clearly. In your textbook you
have seen the list of questions, points are listed in numbers or symbols!

This information makes your text and document contents more attractive and readable. So
now questions coming into your mind about how to use lists in HTML? Don’t worry, in the
next paragraph, you will learn that! Before that let understands about types lists supported
by HTML.

In the next section of lists in HTML class 10 you will learn types of lists it HTML.
Types of Lists in HTML
HTML support three types of lists basically. They are:

1.
1. Ordered (Numbered) Lists – A list with numbers.
2. Unordered (Bulleted) Lists – A list with symbols or bullets
3. Description (Definition) Lists – A list to write definitions or terminologies.

Ordered (Numbered) Lists


To generate order lists in HTML following tags are used:

1.
1. OL: The ordered lists always starts with <ol> and ends with </ol>.
2. LI: LI tag specifies list items and written between <ol> and </ol>. For a
number of the list items, the same number of <li> tags are required.

Example:

<html>
<head>
<title>Ordered List in HTML</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ol>
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Compueter Applciations</li>
<li>Artificial Intelligence</li>
</ol>
</body>
</html>

Output

lists in HTML class 10

Attributes of an ordered list


Ordered lists can be customized using the following attributes:

1. type : It specifies the type of list. Such lists types are a,A,i,I.
2. start: It is the value of starting point for the list.
Observe this code:

<html>
<head>
<title>Ordered List in HTML</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ol type="a">
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Compueter Applciations</li>
<li>Artificial Intelligence</li>
</ol>
</body>
</html>

Output:

unordered lists in HTML class 10

Unordered List in HTML


To use unordered list HTML provides <ul> and </ul> tag.
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ul>
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technulogy</li>
<li>Compueter Applciations</li>
<li>Artificial Intelligence</li>
</ul>
</body>
</html>

An unordered list has a type attribute only. It supports three types of bullets:

1.
1. Disc: This default type of bullets in HTML.
2. Circle: You can change the type in the circle which is coming like disc only
but without any fill color.
3. Square: It displays the list with square filled bullets.
<html>
<head>
<title>Unordered List with circle type</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ul type="circle">
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Computer Applications</li>
<li>Artificial Intelligence</li>
</ul>
</body>
</html>

Output

bulletetd lists in HTML class 10

Description Lists in HTML


This list is used to write definitions or terminologies on HTML web page. To use this type of
list, the following tags are used:

1.
1. DL: It is used to start and end the description list.
2. DT: It is used to write the term or word for the definition.
3. DD: It is used to write the data or descriptive text for the term.

Observe the following code:

<html>
<head>
<title>Descrition List</title>
</head>
<body>
<dl>
<dt>HTML
<dd>Hpyertext markup language is used to create the static webpage.
</dt>
</dl>
</body>
</html>
Insert Images in HTML
For computer applications, I have covered Unit 1 Networking, HTML Basics, HTML
Basic Elements, and HTML formatting tags in previous articles. In this article, I am
going to discuss Images in HTML.

Topics Covered

• Images supported by HTML


• The <img> tag
o How to insert images in HTML document?
o Attributes of <img>
• Inserting Multiple images in HTML

Images supported by HTML


So basically, images are used to make the HTML document more attractive and
presentable. HTML supports two types of images based on the saved locations:
1. Internal Images: The images saved in same folder where the HTML file is saved
is known as Internal Images.
2. External Images: The images saved in another folder outside the folder where
HTML file is saved is known as External Images.
The extensions supported by HTML are .jpg, .png, .gif, .bmp etc.

The <img> tag


To insert images in HTML <img> tag is used. This tag is an empty tag. It doesn’t
have a closing tag.

How to insert images in HTML document?


Before inserting image in HTML document copy the images in the folder where
you are going to save your HTML document. Here I am saving my file in
D:HTML Codes folder. So, I have created one more folder i.e. Images in the same
folder and all images I have copied into this folder. Observe the following screen

shot:
The folder looks like this after copying all images:
If you are using windows OS you can’t see the extension automatically. You need
to make it visible by following these steps (For window 7 or later):

1. Open the folder where you are saving your files.


2. Click on organize → Folder and Search options.
3. Now click on View tab.
4. Remove the click from the option hide extensions for known file
types. As displayed in screenshot.

5. Click on OK Button.

Now you are ready to insert image in your HTML document. The <img> tag has
one attribute i.e. src which take the file location including file name as value. Look
at the following code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
To insert images use img tag.
<img src=”imagestulips.jpg”>
</body>
</html>
After saving this file my folder looks like this:
Now you can change the image layout by using different attributes of image tag.
Attributes of <img>
1. Src: Specifies the path of file inserted as images.
Width: It is used to change the horizonal pixels of image. The default value is in
pixel. It can be set in pixels, pt, cm or %.
2. Height: It is used to change the vertical pixels of image.
3. Border: It is used to change/apply the border/frame to the image. The value can be
in pixels.
4. HSpace: It is used to apply horizontal space between text and image.
5. Align: It is used to place the image at relative position with text.
6. Alt: It is used to provide descriptive text for the image. This text is displayed when
user moves mouse over the image.
Observe the following code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
To insert images use img tag. The img tag has one attribute i.e. src which take the
file location including file name as value.
<img src=”imagestulips.jpg” width=”300″ height=”300″ border=”1″ Hspace=20
alt=”tulips are very beautiful flowers”>
</body>
</html>
Output

Inserting Multiple images in HTML


Code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
The different images coming in the pictures folder are displayed as below:
<br/>
<img src=”imagestulips.jpg” width=”300″ height=”300″ border=”1″ Hspace=20
alt=”Tulips”>
<img src=”imagesChrysanthemum.jpg” width=”300″ height=”300″ border=”1″
Hspace=20 alt=”Chrysanthemum”>
<img src=”imagesDesert.jpg” width=”300″ height=”300″ border=”1″ Hspace=20
alt=”Desert”>
<img src=”imagesHydrangeas.jpg” width=”300″ height=”300″ border=”1″
Hspace=20 alt=”Hydrangeas”>
</body>
</html>
Images supported by HTML
So basically, images are used to make the HTML document more attractive and
presentable. HTML supports two types of images based on the saved locations:
1. Internal Images: The images saved in same folder where the HTML file is saved
is known as Internal Images.
2. External Images: The images saved in another folder outside the folder where
HTML file is saved is known as External Images.
The extensions supported by HTML are .jpg, .png, .gif, .bmp etc.

The <img> tag


To insert images in HTML <img> tag is used. This tag is an empty tag. It doesn’t
have a closing tag.

How to insert images in HTML document?


Before inserting image in HTML document copy the images in the folder where
you are going to save your HTML document. Here I am saving my file in
D:HTML Codes folder. So, I have created one more folder i.e. Images in the same
folder and all images I have copied into this folder. Observe the following screen

shot:
The folder looks like this after copying all images:
If you are using windows OS you can’t see the extension automatically. You need
to make it visible by following these steps (For window 7 or later):

1. Open the folder where you are saving your files.


2. Click on organize → Folder and Search options.
3. Now click on View tab.
4. Remove the click from the option hide extensions for known file
types. As displayed in screenshot.

5. Click on OK Button.

Now you are ready to insert image in your HTML document. The <img> tag has
one attribute i.e. src which take the file location including file name as value. Look
at the following code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
To insert images use img tag.
<img src=”imagestulips.jpg”>
</body>
</html>
After saving this file my folder looks like this:
Now you can change the image layout by using different attributes of image tag.
Attributes of <img>
1. Src: Specifies the path of file inserted as images.
Width: It is used to change the horizonal pixels of image. The default value is in
pixel. It can be set in pixels, pt, cm or %.
2. Height: It is used to change the vertical pixels of image.
3. Border: It is used to change/apply the border/frame to the image. The value can be
in pixels.
4. HSpace: It is used to apply horizontal space between text and image.
5. Align: It is used to place the image at relative position with text.
6. Alt: It is used to provide descriptive text for the image. This text is displayed when
user moves mouse over the image.
Observe the following code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
To insert images use img tag. The img tag has one attribute i.e. src which take the
file location including file name as value.
<img src=”imagestulips.jpg” width=”300″ height=”300″ border=”1″ Hspace=20
alt=”tulips are very beautiful flowers”>
</body>
</html>
Output

Inserting Multiple images in HTML


Code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
The different images coming in the pictures folder are displayed as below:
<br/>
<img src=”imagestulips.jpg” width=”300″ height=”300″ border=”1″ Hspace=20
alt=”Tulips”>
<img src=”imagesChrysanthemum.jpg” width=”300″ height=”300″ border=”1″
Hspace=20 alt=”Chrysanthemum”>
<img src=”imagesDesert.jpg” width=”300″ height=”300″ border=”1″ Hspace=20
alt=”Desert”>
<img src=”imagesHydrangeas.jpg” width=”300″ height=”300″ border=”1″
Hspace=20 alt=”Hydrangeas”>
</body>
</html>
Output:

HTML forms are set of different form elements that allow to interact with the
user by your HTML web page and collect the data and information from user.

HTML Form fields


HTML supports certain fields to collect different information from user. These fields
are as following:

1. Textbox : It is used to user allow to enter a single line text field in HTML forms.
Textfield is mostly used to collect Names or any single value in forms.
2. TextArea: It is used to collect multi-line text entries in HTML forms. This field is used
to accept the address field in a form.
3. Password: It is similar to the textbox field but the characters are displayed in a
special symbolic form when the user enters them. As its name, it is used to collect a
password from the user.
4. Radio Buttons: These fields are used to accept a single value from given multiple
choices or options. It looks like a circle with a dot when selected. For example, select
gender, stream like science, commerce, and humanities, etc.
5. Checkbox: It is used to select multiple choices from a given set of values. It is
coming in a square box with a tick mark in front of it when selected. For example
hobbies, subjects etc.
6. Combobox: It also provides a list but with a drop-down list. It means when users
click on the small arrow coming to next to the dropdown it will expand to downwards
and display the list.
7. Button: Buttons are used to submit or save the data as well as clear the enterd data
into form.

These fields are categorized into the following categories:

1. Input : Textbox, Password, TextArea


2. Select: Radio Button, Checkbox, List and Combobox
3. Call to Action: Submit button or Reset Button

Inserting fields into HTML form


Textbox
To insert textbox in HTML form follow this syntax:
<input type=”text” size=”n” maxlength=”n”>

Example:

<input type=”text” size=40 maxlength=”10″ value=”Enter text”>

The input tag is used to insert a textbox in HTML form. It has following attrinutes:

1. type: It must text when you want to insert textbox.


2. size: It specifies the width of the textbox. It must be a numeric value.
3. maxlength: It is used to specify the maximum number of characters allowed on a
textbox.
4. value: It is used to provide the default text inside textbox.

Output

Textbox preview in HTML

TextArea
To insert a textarea, <textarea> is used with below given syntax:

<textarea rows=”n” cols=”n”></textarea>

Example:

<textarea rows=7 cols=40 ></textarea>

The textarea tag has two primary attributes:

1. rows: Specifies number of lines in the textarea field by default.


2. cols: Allow number of characters allowed in a single line.

Output
Password
Password field allows to accept password from keyboard. the syntax is as following:

<inpyt type=”password”>

Example:

<input type=”password”>

The password field can accept similar attributes as textbox.

Output

Radio Button
Radio button allows to insert a circle button to select only one choice from given set
of values. The syntax is as following:

<input type=”radio” name=”text” value=”text” checked>Text_2_display

Example:

<input type=”radio” name=”gen” value=”Male” checked>Male


<input type=”radio” name=”gen” value=”Female”>Female

Radio button accepts following attributes:

1. name: When you want to allow to select a single value, you have give same name to
all radio buttons in the form.
2. value: It saves the text written as value into the database when submit button is
clicked.
3. checked: If you want to display the checkbox should be selected automatically when
your HTML page loads in the browser, you can use this attribute.

Output:

Radio button in HTML

Checkbox
As we have already discussed that checkbox allows to select multiple values from
given choices. The syntax is almost similar like radio button. So let us take an
example:
<input type=”checkbox” name=”gen” value=”Plying Cricket” checked>Plying Cricket
<input type=”checkbox” name=”gen” value=”Reading Books”>Reading Books

Output

Combobox
To create combobox you need to combine two tags in HTML form.

1. Select : To create a list


2. Option: To create item list to fill in combobox.

Example:

<select>

<option> January

<option> February

<option> March

</select>

Output

Default Combo box

Button
There are three types of buttons:

1. Submit: It allows to save data.


2. Reset: It allows to clear the form.
3. Button: It is mostly used to run the developer’s code.

The syntax is as following:

<input type=”button” value=”text”>

Example:
<input type=”submit” value=”Save”>

<input type=”reset” value=”reset”>

Output

Creating a form in HTML


A form tag is used to create a form in HTML. The syntax for form tag is as following:

<form action=”file” method=”method”>….</form>

The form tag has following attributes:

1. Action: This accept the file name or page should be redirected after click on the
button.
2. Method: This specifies how the data will be saved either get or post after click. The
value get means getting data and post means sending data through the form into
server.

You might also like