Scribd
Upload
9 views16 pages

HTML - CONTROL ELEMENTS, Semantic Elements, Media Controls and HTML Api

The document provides an overview of HTML forms, detailing the <form> and <input> elements used to collect user input through various types of fields such as text, radio buttons, and checkboxes. It also discusses semantic HTML elements like <article>, <section>, and <nav>, as well as HTML APIs like the Geolocation API and media controls for audio and video. Examples of HTML code are included to illustrate the usage of these elements and attributes.

Uploaded by

leelarani.info
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
9 views16 pages

HTML - CONTROL ELEMENTS, Semantic Elements, Media Controls and HTML Api

The document provides an overview of HTML forms, detailing the <form> and <input> elements used to collect user input through various types of fields such as text, radio buttons, and checkboxes. It also discusses semantic HTML elements like <article>, <section>, and <nav>, as well as HTML APIs like the Geolocation API and media controls for audio and video. Examples of HTML code are included to illustrate the usage of these elements and attributes.

Uploaded by

leelarani.info
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
You are on page 1/ 16

HTML Form

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

Example

First name:
John

Last name:
Doe

Submit

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

Syntax:

<form>

form elements

</form>

The <form> element is a container for different types of input elements, such as:

1. Text fields

2. Checkboxes

3. Radio buttons

4. Submit buttons

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:

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 Displays a checkbox (for selecting zero or more of many


type="checkbox"> 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"> defines a single-line input field for text input.

Example

A form with input fields for text:

<!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="LEELA"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="RANI">
</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>
</html>

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

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of an input field is 20
characters.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

<!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>

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

Choose your favorite Web language:

HTML
CSS
JavaScript

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<!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="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

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

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

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

</form>

</body>

</html>

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

<!DOCTYPE html>

<html>
<body>

<h2>The name Attribute</h2>

<form action="/action_page.php">

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

<input type="text" id="fname" value="LEELA"><br><br>

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

</form>

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

<p>Notice that the value of the "First name" field will not be submitted, because the input
element does not have a name attribute.</p>

</body>

</html>

HTML Form Action: POST and GET


HTML GET METHOD

<form method="get" action="www.programiz.com/search">

<input type="search" name="location" placeholder="Search.." />

<input type="submit" value="Go" />

</form>

HTML POST METHOD

<form method="post" action="www.programiz.com/user">

<label for="firstname">First name:</label>

<input type="text" name="firstname" /><br />

<label for="lastname">Last name:</label>

<input type="text" name="lastname" /><br />

<input type="submit" />

</form>

………………………………………………………………………………………………….

HTML SEMANTIC ELEMENTS:

HTML tags can be categorized into two types based on semantics in HTML. They are:

 Semantic Tag

 Non-semantic Tag

A semantic element clearly describes its meaning to both the browser and the
developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about


its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly


defines its content.
In HTML there are some semantic elements that can be used to define different parts of a
web page:

 <article>

 <aside>

 <details>

 <figcaption>

 <figure>

 <footer>

 <header>

 <main>

 <mark>

 <nav>

 <section>

 <summary>

 <time>
Section Element:
The <section> element defines a section in a document.

<!DOCTYPE html>
<html>
<body>

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on
issues regarding the conservation, research and restoration of the environment, formerly named
the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London
Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

HTML <article> Element


The <article> element specifies independent, self-contained content.

<!DOCTYPE html>
<html>
<body>

<h1>The article element</h1>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the
second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge
replaced Internet Explorer.</p>
</article>

</body>
</html>

The <header> element represents a container for introductory content or a set


of navigational links.

<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a
future in which humans live in harmony with nature.</p>
</article>

</body>
</html>

HTML <footer> Element


The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
<!DOCTYPE html>
<html>
<body>

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

</body>
</html>

HTML <nav> Element


The <nav> element defines a set of navigation links.

<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

HTML <aside> Element


The <aside> element defines some content aside from the content it is placed in
(like a sidebar).

<!DOCTYPE html>
<html>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was
amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

</body>
</html>

HTML <figure> and <figcaption> Elements


The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element.


The <figcaption> element can be placed as the first or as the last child of
a <figure> element.

The <img> element defines the actual image/illustration.

<!DOCTYPE html>
<html>
<body>

<h2>Places to Visit</h2>

<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around
Alberobello, a declared UNESCO World Heritage Site.</p>

<figure>
<img src="rose.jpg" alt="rose" style="width:50%">
<figcaption>Fig.1 - Rose.</figcaption>
</figure>

</body>
</html>

HTML APIs

API stands for Application Programming Interface. An API is a set of pre-built programs that can
be used with the help of JavaScript. APIs are used to implement already written code to fulfill the needs
of the project you are working on.
HTML Geolocation API: The Geolocation API is used to get the current location of the user or the
page visitor. It will show the user’s location only if the user allows it to do so, as it compromises the
security and privacy of the user.
Syntax:
var loc = navigator.geolocation;
Methods available in Geolocation API:
 getCurrentPosition() Method: The getCurrentPosition() method returns an object with properties
such as latitude, longitude, accuracy, altitude etc.
 watchPosition() Method: This method will return the current position of the user as well as the
updated location when the position of the user changes or the user travels from one location to
another location.
 clearWatch() Method: This method will stop the watchPosition() method to not tracing the user
anymore.
Example:

 HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Geolocation API</title>

</head>

<body>

<div id="container">

<h1>Hey CSE,</h1>

<h3>Welcome to CSE!</h3>

<button type="button" onclick="geoLoc()">

Get Location

</button>

</div>
<script>

var container = document.getElementById("container");

var pos = navigator.geolocation;

function geoLoc() {

if (pos)

pos.getCurrentPosition(getLoc);

else

container.innerHTML = "Your browser does "

+ "not support the Geolocation API.";

function getLoc(loc) {

container.innerHTML = "Latitude: "

+ loc.coords.latitude +

"<br>Longitude: " +

loc.coords.longitude;

</script>

</body>

</html>
HTML 5 Media controls

Using the <video> element

You can use to control video either declaratively, through static HTML, or dynamically, using JavaScript.

First, you need to examine the key attributes available to use on the <video> element as listed in the

Atribute Description
src This attribute specifies the video to play. It can be a local resource within your
own website or something exposed through a public URL on the Internet.
autoplay This attribute tells the browser to start playing the video as soon as it loads. If
this attribute is omitted, the video plays only when told to through player
controls or JavaScript.
controls This attribute tells the browser to include its built-in video controls, such as
play and pause. If this is omitted, the user has no visible way to play the
content. You would use autoplay or provide some other mechanism through
JavaScript to play the video.
height/width These attributes control the amount of space the video will occupy on the page.
Omitting these causes the video to display in its native size.

audio, video controls:

For audio,
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>

For video,
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>

EXAMPLE:

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>


<source src="NATURE.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>

<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank"><strong>Nature</a>.
</body>
</html>

HTML AUDIO CONTOLS:

<!DOCTYPE html>
<html>
<body>

<audio controls autoplay>

<source src="FLUTE.mp3" type="audio/mpeg">


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

</body>
</html>

You might also like