HTML_Notes

HTML
#HTML:-
1) HTML stands for Hyper Text Markup Language.
2) HTML is used to create web pages and web applications.
3) HTML is widely used language on the web.
4) We can create a static web site by HTML only.
5) HTML describes the structure of a Web page.
6) HTML consists of a series of elements.
7) HTML elements tell the browser how to display the content.
8) Technically, HTML is a Markup language rather than a programming language.
#Markup Language:-
 A markup language is used to format and structure text in a document.
 It makes text interactive and dynamic by turning it into images, tables, links, etc.
#Web Page :-
 A web page is a document written in HTML and displayed by a web browser.
 It is identified using a URL.
 Web pages can be static or dynamic.
 Static web pages can be created using only HTML.
#Features of HTML:-
1. Easy to Learn: HTML is a simple and easy-to-understand language.
2. Formatting Options: It has many formatting tags to create effective presentations.
3. Flexible Design: Being a markup language, it allows flexible web page design with text.
4. Hyperlinks: HTML lets programmers add links using the <a> tag, improving user browsing experience.
5. Platform Independent: HTML works on all platforms like Windows, Linux, and macOS.
6. Multimedia Support: It allows adding graphics, videos, and sounds to make web pages interactive.
7. Case-Insensitive: Tags can be written in either lowercase or uppercase.

#Structure of HTML:-
 <!DOCTYPE>: It defines the document type or it specifies the version of HTML to the browser.
 <html>: This tag indicates the document is HTML and contains all other HTML elements expect <!DOCTYPE>.
 <head>: It should be the first element inside the <html> element, which Contains metadata about the document
and comes before the <body>.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
 <title>: Specifies the title of the HTML page, shown at the top of the browser window or tab. Must be inside the
<head> tag and closed immediately. (Optional)
Example: <title>My Webpage</title>.
 <body>: Contains the visible content of the webpage, such as text, images, and links. It is placed inside the
<html> tag.
Example:<body>
Welcome to my webpage!
</body>
 <h1>: Text between <h1> tag describes the first level heading of the webpage.
Example: <h1>Welcome!</h1>
 <p>: Text between <p> tag describes the paragraph of the webpage.
Example: <p>This is a paragraph of text.</p>.
*An HTML document consist of its basic building blocks which are:
 Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and >
brackets. Example: <h1> or <p>
 Attributes: Provide additional information about an element. Written in the opening tag and consist of a
name and value.
Example: <img src="image.jpg" alt="A picture">
 Elements: The complete structure, including the tags and the content inside them.
Example: <p>This is a paragraph.</p>.
#HTML Tags :-
 HTML tags are keywords that tell the browser how to format and display content.
 Tags help the browser distinguish HTML content from plain text.
 Most tags have three parts: opening tag, content, and closing tag (e.g., <p>Content</p>). Some tags are
self-closing (e.g., <img>).
 Browsers read HTML documents from top to bottom, left to right.
 Tags are used to build HTML documents and define their properties.
 Each tag has unique properties and functions.
 An HTML file must include essential tags to help the browser recognize it as HTML.
 All tags are written inside < > brackets.
 Each tag serves a specific purpose.
 Most tags need an opening <tag> and a closing </tag>, except for self-closing tags.
 HTML tags are always written in lowercase.
#Unclosed HTML Tags:-
•Some HTML tags are not closed, for example br and hr.
•<br> Tag: br stands for break line, it breaks the line of the code.
•<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
#HTML Attribute:-
 HTML attributes are special words which provide additional information about the elements or attributes
are the modifier of the HTML element.
 Each element or tag can have attributes, which defines the behavior of that element.
 Attributes should always be applied with start tag.
 The Attribute should always be applied with its name and value pair.
 The Attributes name and values are case sensitive, and it should be written in Lowercase only.
 You can add multiple attributes in one HTML element, but need to give space between two attributes.
Or
HTML Attributes Simplified:
 Attributes give extra information or modify an HTML element.

 Attributes define the behavior of an element.
 They are always added to the opening tag.
 Attributes use a name-value pair (e.g., name="value").
 Attribute names and values are case-sensitive and should be written in lowercase.
 Multiple attributes can be added to one tag, separated by spaces.
Example:
 <img src="image.jpg" alt="Description" width="500">
Explanation Simplified:
In the example, a style attribute is used with the <p> tag to apply CSS properties.
 The style attribute customizes an element's appearance.

 It sets the paragraph's height to 50px and its color to blue.
Example:
<p style="height: 50px; color: blue;">This is a styled paragraph.</p>
#The title attribute:-
 The title attribute is used as text tooltip in most of the browsers.

 It display its text when user move the cursor over a link or any text.
 You can use it with any text or link to show the description about that link or text.
 In our example, we are taking this with paragraph tag and heading tag.
#The href attribute:-
 The href attribute is the main attribute of <a> anchor tag.

 This attribute gives the link address which is specified in that link.
 The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.
#The src Attribute:-
 Thesrcattribute is one of the important and required attribute of<img>element.

 It is source for the image which is required to display on browser.
 This attribute can contain image in same directory or another directory.
 The image name or source should be correct else browser will not display the image.
Or
The src Attribute Simplified:
 The src attribute is required for the <img> tag.

 It specifies the source (path) of the image to display in the browser.
 The source can be in the same directory or a different directory.
 If the source is incorrect, the image won’t display.
Example:
 <img src="image.jpg" alt="Sample Image">

 <img src="folder/picture.png" alt="Another Image">\
#Absolute Path:
 Starts from the root directory of the system and gives the exact location of a file or directory.
 It always points to the same place, no matter where you are in the system.
 An absolute path is the full URL or path to a file.
#Relative Path:
 Starts from the current directory and describes the file's location in relation to it.
 It's more convenient when working within a specific directory or subdirectory.
Example:
 Absolute Path: /home/user/images/photo.jpg

 Relative Path: images/photo.jpg
#Metadata:-
 Metadata in HTML describes the content of a website and is stored in the HTML code.
 It helps search engines understand and rank pages based on keywords.
 Browsers use metadata for tasks like displaying content and reloading pages.
 The <meta> tag defines metadata about an HTML document.
 <meta> tags are placed inside the <head> element and typically include details like the character set,
page description, keywords, author, and viewport settings.
Example:<head>
<meta charset="UTF-8">
<meta name="description" content="An example website.">
<meta name="keywords" content="HTML, website, tutorial">
<meta name="author" content="John Doe">
</head>
 Metadata is not displayed on the webpage but can be read by machines.

 It's used by browsers for displaying content, search engines for keywords, and other web services.
 The <meta> tag allows web designers to control the viewport (the visible area of a webpage).
Example:
 <meta name="viewport" content="width=device-width, initial-scale=1">

#Favicon:- A favicon is a small image displayed next to the page title in the browser tab.
#HTML Lists:-HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List: An unordered list starts with the<ul>tag. Each list item starts with the<li>tag.
The list items will be marked with bullets (small black circles) by default.
Ordered HTML List: An ordered list starts with the<ol>tag. Each list item starts with the<li>tag.
The list items will be marked with numbers by default.
OR
HTML Lists group related items together.
Unordered List:
 Starts with the <ul> tag.

 Each list item starts with the <li> tag.
 Items are marked with bullets (small black circles) by default.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List:
 Starts with the <ol> tag.

 Each list item starts with the <li> tag.
 Items are marked with numbers by default.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
#Unordered HTML List:-

The CSSlist-style-typeproperty is used to define the style of the list item marker. It
can have one of the following values .
Value Description
disc Sets the list item marker to a
bullet (default)
circle Sets the list item marker to a
circle
square Sets the list item marker to a
square
none The list items will not be marked
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
#Ordered HTML List:-An ordered list starts with the<ol>tag. Each list item starts with the<li>tag.
The list items will be marked with Description
numbers by defaultType
type="1" The list items will be numbered with
numbers (default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
#HTML Description Lists Simplified:-

 Description Lists are used to list terms with their descriptions.
 The <dl> tag defines the description list.
 The <dt> tag defines the term (name).
 The <dd> tag describes each term.
 Ex:-<dl>
 <dt>HTML</dt>
 <dd>HyperText Markup Language</dd>
 <dt>CSS</dt>
 <dd>Cascading Style Sheets</dd>
 </dl>
#HTML Tables:
 HTML tables are used to arrange data into rows and columns.
 A table consists of table cells inside rows and columns.
 Each table cell is defined by the <td> tag (for data).
 The content of the table cell is placed between the <td> and </td> tags.
 Each table row starts with the <tr> tag and ends with the </tr> tag.
 You can add as many rows as needed, but each row must have the same number of cells.
 Ex:
 <table>
<tr>
<td>Row 1, Cell 1</td>
</tr>
<tr>
</tr>
</table>
--------------------------------------------
<!DOCTYPE html>
<html><body>
<h2>TH elements define table headers</h2>
<table style="width:100%; border:solid">

<tr >
<th style="border:solid">Person 1</th>

</tr>
<tr >
<td style="border:solid">Emil</td>
<td style="border:solid">Tobias</td>
<td style="border:solid">Linus</td>
</tr>
<tr>
<td style="border:solid">16</td>
</tr>
</table></body></html>
<html>
<body>
<h2>Cell that spans two columns</h2>
<table border="solid" width="100%">

<caption> DETAILS </caption>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td height="100px">Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td style="height:50px">Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Cell that spans two rows</h2>
<table style="width:100%" border="solid">

<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
</body>
</html>
#HTML Forms:-
 HTML forms are used to collect user input, usually sent to a server for processing.
 The <form> element creates the form for user input.
 The <form> element acts as a container for different types of input elements, such as text fields, checkboxes, radio buttons,
and submit buttons.
Example:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="subscribe">Subscribe:</label>
<input type="checkbox" id="subscribe" name="subscribe">
<input type="submit" value="Submit">

</form>
@The <input> Element:-

 The <input> element is the most commonly used form element.
 It can be displayed in various ways depending on the type attribute.
Types of <input> Elements:
 <input type="text">: Displays a single-line text input field.
 <input type="radio">: Displays a radio button for selecting one option.
 <input type="checkbox">: Displays a checkbox for selecting one or more options.

 <input type="submit">: Displays a submit button to send the form.
 <input type="button">: Displays a clickable button.

Example:
<input type="text" placeholder="Enter name">
<input type="radio" name="choice" value="option1">

<input type="checkbox" name="subscribe">
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
@Text Fields:-
 The <input type="text"> creates a single-line input field for text.
 The form itself is not visible, only the input fields are.
 By default, the width of a text input field is 20 characters.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Text Input Fields</h2>
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
#The <label> Element:-
 The <label> tag defines a label for form elements.
 It is useful for screen-reader users because it reads out the label when the user focuses on the input element.
 It helps users click on small form elements like radio buttons or checkboxes by allowing them to click the label text to toggle
the element.
 The for attribute of the <label> tag should match the id of the associated <input> element to link them together.
Example:
<form>
<label for="fname">First Name:</label>

<input type="text" id="fname" name="fname"><br>
<label for="subscribe">Subscribe:</label>
<input type="checkbox" id="subscribe" name="subscribe">
</form>
 Radio Buttons: Radio buttons let a user select ONE of a limited number of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
#The Submit Button:-

 The <input type="submit"> creates a button that submits form data.
 The form data is sent to a form-handler, which is usually a file on the server with a script to process the data.
 The form-handler's location is specified in the action attribute of the <form> tag.
Example:
<form action="submit_form.php">
<input type="text" name="username">

</form>
#Checkboxes:-
 Checkboxes allow the user to select zero or more options from a limited set of choices.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> creates a checkbox:</p>

<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
</form>
</body>
</html>
OR from pdf
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label><br><br>
</form>
</body>
</html>
#HTML Form Attributes:
The Action Attribute:
 The action attribute specifies what happens when the form is submitted.
 Typically, the form data is sent to a file on the server, where it is processed.
 In the example, form data is sent to a file called action_page.php, which contains a script to handle the data.
 If the action attribute is not included, the data is sent to the current page.
Example:
<form action="action_page.php">
</form>
The Target Attribute:

 The target attribute defines where the response will be shown after the form is submitted.
 The target attribute can have the following values:
Value Description
_blank Displays the response in a new window or tab.
_self Displays the response in the current window.
_parent Displays the response in the parent frame.
_top Displays the response in the full body of the window.
framename Displays the response in a named iframe.
Example:
<form action="submit_form.php" target="_blank">

</form>
The Method Attribute:-

 The method attribute defines the HTTP method used to submit the form data.
 The data can be sent in two ways:

o GET: Sends form data as URL variables.
o POST: Sends form data as an HTTP post transaction.
 By default, the method is GET.
Example:
<form action="submit_form.php" method="post">

</form>
GET Method:
 GET appends form data to the URL in name/value pairs.
 Do not use GET for sensitive data, as it is visible in the URL.
 URLs have a length limit (2048 characters).
 GET is useful when you want to bookmark or share the result.
 Ideal for non-sensitive data, like search queries in Google.
Example:
<form action="search_results.php" method="get">
<input type="text" name="query">
<input type="submit" value="Search">

</form>
POST Method:
 POST sends form data in the body of the HTTP request (not visible in the URL).
 POST has no size limitations, allowing large amounts of data to be sent.
 Form submissions using POST cannot be bookmarked.
Example:
<form action="submit_data.php" method="post">


</form>
------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<link rel="icon" type="image/x-icon" href="qw.ico">
<title>hello</title>
</head>
<body style="background-color:powderblue;">
<h1> HTML </h1>
<form action="qw.ico" method="get" autocomplete="on" >

<label for="fname"> NAME </label>
<input type= "text" name="fname" value="raj" >
<br>
<label for="pass"> PASSWORD </label>

<input type="password" name="passwd">
<br>
<input type="submit" value="SUBMIT">

<input type="reset" value="CLEAR">
<br>
</form></body></html>
#The HTML <form> Elements:-

The HTML<form>element can contain one or more of the following form elements:
1. <input>
2. <label>
3. <select>
4. <textarea>
5. <button>
6. <fieldset>
7. <legend>
8. <datalist>
9. <output>
10. <option>
The <input> Element:

The <input> element is widely used in forms. It can be displayed in different ways, depending on the type attribute. Here are some
common input types:
 <input type="button">: Creates a clickable button.
 <input type="checkbox">: Displays a checkbox.

 <input type="color">: Lets the user choose a color.
 <input type="date">: Displays a date picker.
 <input type="email">: Used for email addresses.
 <input type="file">: Allows file upload.
 <input type="image">: Displays an image as a button.
 <input type="month">: Allows selecting a month.
 <input type="number">: Lets the user input numbers.
 <input type="password">: Hides the input text (for passwords).
 <input type="radio">: Displays a radio button.
 <input type="reset">: Resets the form fields.
 <input type="search">: Displays a search field.
 <input type="submit">: Creates a submit button.
 <input type="text">: Creates a text input field.
 <input type="time">: Displays a time picker.
 <input type="url">: Used for URL input.
 <input type="week">: Allows selecting a week.
Example:
<input type="email" name="email">

Pdf pg no: 56, 57,58
#The <select> Element:-

 The <select> element creates a drop-down list.
 The <option> element defines the items that can be selected from the list.
 By default, the first item in the list is selected.
 To pre-select an option, use the selected attribute.
 Use the multiple attribute to allow multiple selections.

Example:
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana" selected>Banana</option>
<option value="orange">Orange</option>
</select>
Pdf pg n0:60
#The <textarea> Element:
 The <textarea> element defines a multi-line text input field.
 The rows attribute specifies how many visible lines of text are shown.
 The cols attribute specifies the visible width of the text area.
Example:
<textarea rows="4" cols="50">Your text here...</textarea>
Pg no:64
#The <fieldset> and <legend> Elements
 The <fieldset> element groups related data within a form.
 The <legend> element defines a caption or title for the grouped data inside the <fieldset>.
Example:
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>
Pg no:64
The <datalist> Element:
 The <datalist> element provides a list of predefined options for an <input> element.
 Users see a drop-down list of options while entering data.
 The list attribute of the <input> element must reference the id of the <datalist>.
Example:
<input list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
</datalist>
Pg : 66

HTML_Notes

Uploaded by

HTML_Notes

Uploaded by

HTML

2) HTML is used to create web pages and web applications.

3) HTML is widely used language on the web.

4) We can create a static web site by HTML only.

5) HTML describes the structure of a Web page.

6) HTML consists of a series of elements.

7) HTML elements tell the browser how to display the content.

8) Technically, HTML is a Markup language rather than a programming language.

 It is identified using a URL.

 Web pages can be static or dynamic.

 Static web pages can be created using only HTML.

2. Formatting Options: It has many formatting tags to create effective presentations.

7. Case-Insensitive: Tags can be written in either lowercase or uppercase.

HTML Attributes Simplified:

 Attributes give extra information or modify an HTML element.

 The style attribute customizes an element's appearance.

<p style="height: 50px; color: blue;">This is a styled paragraph.</p>

#The title attribute:-

 The title attribute is used as text tooltip in most of the browsers.

 The href attribute is the main attribute of <a> anchor tag.

 Thesrcattribute is one of the important and required attribute of<img>element.

The src Attribute Simplified:

 The src attribute is required for the <img> tag.

 <img src="image.jpg" alt="Sample Image">

 Absolute Path: /home/user/images/photo.jpg

<meta name="description" content="An example website.">

<meta name="keywords" content="HTML, website, tutorial">

<meta name="author" content="John Doe">

 Metadata is not displayed on the webpage but can be read by machines.

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

 Starts with the <ul> tag.

 Starts with the <ol> tag.

#Unordered HTML List:-

#HTML Description Lists Simplified:-

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<h2>TH elements define table headers</h2>

<table style="width:100%; border:solid">

<th style="border:solid">Person 2</th>

<h2>Cell that spans two columns</h2>

<table border="solid" width="100%">

<h2>Cell that spans two rows</h2>

<table style="width:100%" border="solid">

 The <form> element creates the form for user input.

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

<input type="checkbox" id="subscribe" name="subscribe">

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

@The <input> Element:-

 It can be displayed in various ways depending on the type attribute.

Types of <input> Elements:

 <input type="text">: Displays a single-line text input field.

 <input type="radio">: Displays a radio button for selecting one option.

 <input type="checkbox">: Displays a checkbox for selecting one or more options.

 <input type="button">: Displays a clickable button.

<input type="text" placeholder="Enter name">

<input type="radio" name="choice" value="option1">

<input type="text"> Displays a single-line text input field

<input type="button"> Displays a clickable button

 By default, the width of a text input field is 20 characters.

<h2>Text Input Fields</h2>

<input type="text" id="fname" name="fname" value="John"><br>

<input type="text" id="lname" name="lname" value="Doe">

<label for="fname">First Name:</label>

#The Submit Button:-

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

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

<p>The <strong>input type="checkbox"</strong> creates a checkbox:</p>

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<label for="vehicle3"> I have a boat</label><br><br>

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

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

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">