Scribd
Upload
14 views

HTML Input Types

Dnbf f

Uploaded by

devsingh202004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

HTML Input Types

Dnbf f

Uploaded by

devsingh202004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

HTML Tutorial with Dynamic HTML

1. HTML Image Tag:


• HTML <img /> tag is insert image into a web document.
• HTML image path define/declare inside <img /> tag.
• The <img /> tag is empty tag, that mean's no closing tag.
• <img /> tag have some attributes are use for display image on web page.
• The src attribute, src stands for "source", that is path of image URL.
• Alt Attribute used to define an "alternate text" for an image. This specifies text to be identified in the
image name.
• Width and Height specifies the size of image to display on webpage.

Image Tag Attribute

Attributes Values Description


src "image source url path" Required, Image path should be absolute path.
width "size_px" Specifies the Width to display the image.
Height "size_px" Specifies the Height to display the image.
Align "left" ,"right" Specifies the image align side.
Border "Size" eg. "0" Specifies the image border size.
alt "alternate text" Required Attribute. Specifies text to be identify the image.

Example : Image alignment (Right side)

<html>
<head>
</head>
<body>
<img src="images\img_nat.png" width="120" height="80" alt="Natural" align="right"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed by mankind, in a natural form. A natural
resource is often characterized by amounts of biodiversity existent in various ecosystems.</p>
</body>
</html>
Image alignment (Wrap around)
<html>
<head>
</head>
<body>
<img src="images\img_nat.png" width="120" height="80" alt="Natural" align="left"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed by mankind, in a natural form. A natural
resource is often characterized by amounts of biodiversity existent in various ecosystems. Natural
<br clear="all" />
resources are derived from the environment. Many of
them are essential for our survival while others are used for satisfying
our wants. Natural resources may be further classified in different ways.
</p>
</body> </html>
Image Link

<html>
<head>
</head>
<body>
<a href="http://www.way2tutorial.com/html/tutorial.php">
<img src="images\img_nat.png" width="120" height="70" alt="Natural" />
</a>
</body>
</html>

2. HTML Links - HTML Internal Link

• HTML Internal Link is linked within the same web page. This link can be absolute path or relative path.
• HTML internal link name is followed by head sign(#). HTML <a> tag is use for anchor point name,
which is referred to a internal link into a same page.
• When click on this anchor link, It's referred link automatically scrolls and display on browser.
• Example: <a name="Lession.1"> link can be referred as <a href="#Lession.1">Lession.1</a>
automatically.

Example

<html>
<head>
</head>
<body>
<a href="#Lession.1">Lession.1</a> <br />
<a href="#Lession.2">Lession.2</a> <br />
<a href="#Lession.3">Lession.3</a> <br />
<a href="#Lession.4">Lession.4</a> <br />
<br />
<a name="Lession.1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lession.2">Introduction of Lession.2</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lession.3">Introduction of Lession.3</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lession.4">Introduction of Lession.4</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>

HTML External Links

• HTML Link - External HTML Links is linked to external web page. This link is may be absolute path or
relative link path.
• <a> tag is used for anchor name which is referred link to another web page.
• External link is great future to drive a webpage one to another and useful for surf many webpage in
website.

Example

<html>
<head>
</head>
<body>
<a href="html.php">HTML</a>
<br />
<br />
<a href="css.php">CSS</a>
<br />
<br />
<a href="javascript.php">Java Script</a>
<br />
</body>
</html>

3. HTML marquee Tag

Definition

• HTML <marquee> tag use to create a scrolling text or scrolling image from left to right, right to left, top
to bottom, bottom to top. There is no limit. It's user define choice.
• <marquee> tag is a container tag to create scrolling text.
• <marquee> tag support following some attributes. This attributes use to add more special effect and easy
control.

Attributes Values Description


behavior "slide" Start completely and stop as soon as text touches the margin.
"scroll" Start completely and off one side.
"alternate" Text bounce as soon as touch both side margin.
bgcolor "color code" Specifies the background color.
direction "left" Left to Right
"right" Right to Left
"up" Bottom to Top
"down" Top to Bottom
width "size" Specifies width in marquee.
height "size" Specifies height in marquee.
loop "2" Loop Continues in limited times.
"infinite" Loop Continues in Infinite.
scrollamount "3" Specifies Speed to scroll on the text.
scrolldelay "3" Specifies time wait long before each marquee.
hspace "size" Specifies left or right margin for outside marquee.
vspace "size" Specifies top or bottom margin for outside marquee.

HTML Marquee Text Examples

• HTML <marquee> tag use to create a scrolling text from left to right, right to left, top to bottom, bottom
to top. There is no limit. HTML Marquee tag is use to display text in marquee style.
• <marquee> tag is a container tag.

Continuous Text scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">Continuous scrolling text</marquee>
</body>
</html>

Slide Stop text


<html>
<head>
</head>
<body>
<marquee behavior="slide" direction="left">Slide Stop text</marquee>
</body>
</html>

Side Touch Margin Bounce Text

<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left">Side Touch Margin Bounce Text</marquee>
</body>
</html>
Upside Text Scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">Upside Text Scrolling</marquee>
</body>
</html>

Marquee Text Scrolling Speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="3">Slow speed scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium speed scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="17">Fast speed scroll speed</marquee>
</body>
</html>

HTML Marquee Image

• HTML <marquee> tag is a container tag and use to create a scrolling image from left to right, right to
left, top to bottom, bottom to top. There is no limit and image display in marquee style.

Continuous scrolling image

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">
<img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>

Slide stop image

<html>
<head>
</head>
<body>
<marquee behavior="slide" direction="left">
<img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>
Side Touch Margin Bounce Image
<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left">
<img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>

Upside Image Scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">
<img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>

Change the Image Scrolling Speed

<html><head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">
<img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="15">
<img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>

HTML Marquee Text Start/Stop Examples

• HTML <marquee> tag use to create a scrolling text as well as you assign click, hover and button effect
to control start/stop marquee text/image. Lets see following some example.

Click and Hold to Stop Marquee

<html><head>
</head>
<body>
<marquee behavior="scroll" direction="left"
onmousedown="this.stop();"
onmouseup="this.start();">Click and hold the mouse marquee stop</marquee>
</body></html>
Hover to Stop Marquee

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">Hower over and hold the mouse marquee stop</marquee>
</body>
</html>

Marquee Start/Stop Buttons

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" id="marquee1"><p>Press Button</p></marquee>
<input type="button" value="Stop Marquee" onClick="document.getElementById('marquee1').stop();"/>
<input type="button" value="Start Marquee" onClick="document.getElementById('marquee1').start();"/>
</body>
</html>

Multiple Start/Stop Marquee

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="10" id="marquee2"><p>Marquee
1</p></marquee>
<marquee behavior="scroll" direction="left" scrollamount="15" id="marquee3"><p>Marquee
2</p></marquee>
<input type="button" value="Stop Marquee 1" onClick="document.getElementById('marquee2').stop();"/>
<input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee2').start();"/><br
/>
<input type="button" value="Stop Marquee 2" onClick="document.getElementById('marquee3').stop();"/>
<input type="button" value="Start Marquee 2" onClick="document.getElementById('marquee3').start();"/>
</body>
</html>
HTML Marquee Text Speed Slow/Fast Examples

• HTML <marquee> tag use to create a scrolling text as well as you also allow to Click or Hover effect to
control the speed of marquee text or image.

Click to slow marquee speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left"
onmousedown="this.setAttribute('scrollamount', 3, 0);"
onmouseup="this.setAttribute('scrollamount', 10, 0);">Click and hold the mouse marquee speed
slow</marquee>
</body>
</html>

Hover over to slow marquee speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left"
onmouseover="this.setAttribute('scrollamount', 3, 0);"
onmouseout="this.setAttribute('scrollamount', 10, 0);">Hover over to slow Marquee Speed</marquee>
</body>
</html>

Marquee speed slow/fast using buttons

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="6" id="marquee5">Marquee slow/medium/fast
speed using buttons</marquee>
<input type="button" value="Slower"
onClick="document.getElementById('marquee5').setAttribute('scrollamount', 1, 0);" />
<input type="button" value="Medium"
onClick="document.getElementById('marquee5').setAttribute('scrollamount', 5, 0);" />
<input type="button" value="Faster"
onClick="document.getElementById('marquee5').setAttribute('scrollamount', 10, 0);" />
</body>
</html>
HTML Marquee Falling Text

• HTML <marquee> falling text style is a combination of one or multiple falling text are drop down from
upside to lowerside.

Marquee Falling Text Example

<html>
<head>
</head>
<body>
<marquee style="z-index:2;position:absolute;left:18px;top:97px;font-family:Cursive;font-
size:14pt;color:#ffcc00;height:200px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:1px;top:89px;font-family:Cursive;font-
size:14pt;color:#ffcc00;height:100px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:111px;top:7px;font-family:Cursive;font-
size:14pt;color:#ffcc00;height:302px;" scrollamount="4" direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:225px;top:83px;font-family:Cursive;font-
size:14pt;color:#ffcc00;height:371px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee>
</body>
</html>
HTML FORMS
4. The <form> Element
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons,
and more.

The <input> Element


The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)

Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how it will look like in a browser:
First name:

Last name:

The Action Attribute


The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action_page.php". This page
contains a server-side script that handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.

The Target Attribute


The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current
window.
The default value is "_self" which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value "_blank":
Example
<form action="/action_page.php" target="_blank">
Other legal values are "_parent", "_top", or a name representing the name of an iframe.

The Method Attribute


The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:
Example
<form action="/action_page.php" method="get">
or:
Example
<form action="/action_page.php" method="post">

When to Use GET?


The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the result
• GET is better for non-secure data, like query strings in Google

When to Use POST?


Always use POST if the form data contains sensitive or personal information. The POST method does not
display the submitted form data in the page address field.
Notes on POST:
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked

The Name Attribute


Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Grouping Form Data with <fieldset>


The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
This is how the HTML code above will be displayed in a browser:
Personal information: First name:
Mickey

Last name:
Mouse

5. HTML Input Types


Input Type Text
<input type="text"> defines a one-line text input field:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how the HTML code above will be displayed in a browser:
First name:

Last name:

Input Type Password


<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
This is how the HTML code above will be displayed in a browser:
User name:

User password:

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


Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey

Last name:
Mouse

If you omit the submit button's value attribute, the button will get a default text:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>

Input Type Reset


<input type="reset"> defines a reset button that will reset all form values to their default values:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey

Last name:
Mouse

If you change the input values and then click the "Reset" button, the form-data will be reset to the default
values.
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
This is how the HTML code above will be displayed in a browser:
Male
Female
Other

Input Type Checkbox


<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car

Input Type Button


<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:

HTML5 Input Types


HTML5 added several new input types:
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
New input types that are not supported by older web browsers, will behave as <input type="text">.

Input Type Color


The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

Input Type Date


The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Type Datetime-local


The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type Email


The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.
Example
<form>
E-mail:
<input type="email" name="email">
</form>

Input Type File


The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
Example
<form>
Select a file: <input type="file" name="myFile">
</form>
Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type Number


The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10.
The default value is 30:
Example
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Type Range


The <input type="range"> defines a control for entering a number whose exact value is not important (like a
slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes:
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>

Input Type Search


The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Input Type Tel


The <input type="tel"> is used for input fields that should contain a telephone number.
Note: The tel type is currently only supported in Safari 8.
Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>

Input Type Time


The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>

Input Type Url


The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>

Input Type Week


The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>

6. HTML Input Attributes


The value Attribute
The value attribute specifies the initial value for an input field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

The readonly Attribute


The readonly attribute specifies that the input field is read only (cannot be changed):
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

The disabled Attribute


The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>

The size Attribute


The size attribute specifies the size (in characters) for the input field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>

The maxlength Attribute


The maxlength attribute specifies the maximum allowed length for the input field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
With a maxlength attribute, the input field will not accept more than the allowed number of characters.
The maxlength attribute does not provide any feedback. If you want to alert the user, you must write JavaScript
code.
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely
restrict input, it must be checked by the receiver (the server) as well!

HTML5 Attributes
HTML5 added the following attributes for <input>:
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step
and the following attributes for <form>:
• autocomplete
• novalidate

The autocomplete Attribute


The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values based on values that the user
has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email,
password, datepickers, range, and color.
Example
An HTML form with autocomplete on (and off for one input field):
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Tip: In some browsers you may need to activate the autocomplete function for this to work.

The novalidate Attribute


The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when submitted.
Example
Indicates that the form is not to be validated on submit:
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

The autofocus Attribute


The autofocus attribute specifies that the input field should automatically get focus when the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
First name:<input type="text" name="fname" autofocus>

The form Attribute


The form attribute specifies one or more forms an <input> element belongs to.
Tip: To refer to more than one form, use a space-separated list of form ids.
Example
An input field located outside the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

The formaction Attribute


The formaction attribute specifies the URL of a file that will process the input control when the form is
submitted.
The formaction attribute overrides the action attribute of the <form> element.
The formaction attribute is used with type="submit" and type="image".
Example
An HTML form with two submit buttons, with different actions:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>

The formenctype Attribute


The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with
method="post").
The formenctype attribute overrides the enctype attribute of the <form> element.
The formenctype attribute is used with type="submit" and type="image".
Example
Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the
second submit button):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

The formmethod Attribute


The formmethod attribute defines the HTTP method for sending form-data to the action URL.
The formmethod attribute overrides the method attribute of the <form> element.
The formmethod attribute can be used with type="submit" and type="image".
Example
The second submit button overrides the HTTP method of the form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Submit using POST">
</form>

The formnovalidate Attribute


The formnovalidate attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute can be used with type="submit".
Example
A form with two submit buttons (with and without validation):
<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>

The formtarget Attribute


The formtarget attribute specifies a name or a keyword that indicates where to display the response that is
received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
Example
A form with two submit buttons, with different target windows:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

The height and width Attributes


The height and width attributes specify the height and width of an <input type="image"> element.
Always specify the size of images. If the browser does not know the size, the page will flicker while images
load.
Example
Define an image as the submit button, with height and width attributes:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

The list Attribute


The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome"> <option value="Opera">
<option value="Safari">
</datalist>

The min and max Attributes


The min and max attributes specify the minimum and maximum values for an <input> element.
The min and max attributes work with the following input types: number, range, date, datetime-local, month,
time and week.
Example
<input> elements with min and max values:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

The multiple Attribute


The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
Select images: <input type="file" name="img" multiple>

The pattern Attribute


The pattern attribute specifies a regular expression that the <input> element's value is checked against.
The pattern attribute works with the following input types: text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special characters):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country
code">

The placeholder Attribute


The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a
short description of the format).
The hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
Example
An input field with a placeholder text:
<input type="text" name="fname" placeholder="First name">

The required Attribute


The required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers,
number, checkbox, radio, and file.
Example
A required input field:
Username: <input type="text" name="usrname" required>
The step Attribute
The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.
The step attribute works with the following input types: number, range, date, datetime-local, month, time and
week.
Example
An input field with a specified legal number intervals:
<input type="number" name="points" step="3">

7. HTML Form Elements


The <input> Element
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example
<input name="firstname" type="text">
If the type attribute is omitted, the input field gets the default type: "text".
All the different input types are covered in the next chapter.

The <select> Element


The <select> element defines a drop-down list:
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
The cat was playing in garden.

You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>

The <button> Element


The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:

Note: Always specify the type attribute for the button element. Different browsers may use different default
types for the button element.

HTML5 Form Elements


HTML5 added the following form elements:
• <datalist>
• <output>
Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will
not "destroy" your web page.

HTML5 <datalist> Element


The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

HTML5 <output> Element


The <output> element represents the result of a calculation (like one performed by a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

8. HTML GRAPHICS
HTML5 Canvas

The HTML <canvas> element is used to draw graphics on a web page.


The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a
multicolor rectangle, and a multicolor text.

What is HTML Canvas?


The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support
The numbers in the table specify the first browser version that fully supports the <canvas> element.
Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the
size of the canvas. To add a border, use the style attribute.
Here is an example of a basic, empty canvas:

Example
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Draw a Line
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Draw a Circle
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Draw a Text
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Stroke Text
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Draw Linear Gradient


Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient


ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Circular Gradient


Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient


ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Image
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

HTML5 SVG

What is SVG?
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation

The HTML <svg> Element


The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support
The numbers in the table specify the first browser version that fully supports the <svg> element.
Element
<svg> 4.0 9.0 3.0 3.2 10.1

SVG Circle
Example
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

SVG Rectangle
Example
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

SVG Rounded Rectangle


Sorry, your browser does not support inline SVG.
Example
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG Star
Sorry, your browser does not support inline SVG.
Example
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG Logo
SVG Sorry, your browser does not support inline SVG.
Example
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

Differences Between SVG and Canvas


SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach
JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser
can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its
position should be changed, the entire scene needs to be redrawn, including any objects that might have been
covered by the graphic.

Comparison of Canvas and SVG


The table below shows some important differences between Canvas and SVG:
Canvas SVG
• Resolution dependent • Resolution independent
• No support for event handlers • Support for event handlers
• Poor text rendering capabilities • Best suited for applications with large rendering
• You can save the resulting image as .png or .jpg areas (Google Maps)
• Well suited for graphic-intensive games • Slow rendering if complex (anything that uses
the DOM a lot will be slow)
• Not suited for game applications
HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.

Browser Support
The first web browsers had support for text only, limited to a single font in a single color.
Later came browsers with support for colors and fonts, and images!
Audio, video, and animation have been handled differently by the major browsers. Different formats have been
supported, and some formats require extra helper programs (plug-ins) to work.
Hopefully this will become history. HTML5 multimedia promises an easier future for multimedia.

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats


MP4 is the new and upcoming format for internet video.

MP4 is recommended by YouTube.

MP4 is supported by Flash Players.

MP4 is supported by HTML5.

Format File Description


MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on
.mpg
MPEG the web. Used to be supported by all browsers, but it is not supported in HTML5 (See
.mpeg
MP4).
AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras
AVI .avi
and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV (Windows Media Video). Developed by Microsoft. Commonly used in video
WMV .wmv
cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware.
QuickTime .mov
Plays well on Apple computers, but not in web browsers. (See MP4)
.rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is
RealVideo
.ram still used for online video and Internet TV, but does not play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in
.flvweb browsers.
Ogg .oggTheora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by
WebM .webm
HTML5.
MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly
MPEG-4
.mp4 used in newer video cameras and TV hardware. Supported by all HTML5 browsers.
or MP4
Recommended by YouTube.
Only MP4, WebM, and Ogg video are supported by the HTML5 standard.

Audio Formats
MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital
music.
If your website is about recorded music, MP3 is the choice.
Format File Description
MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices
.mid like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that
MIDI
.midi can be played by electronics. Plays well on all computers and music hardware, but not in
web browsers.
.rm RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths.
RealAudio
.ram Does not play in web browsers.
WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music
WMA .wma
players. Plays well on Windows computers, but not in web browsers.
AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes.
AAC .aac
Plays well on Apple computers, but not in web browsers.
WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux
WAV .wav
operating systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for
MP3 .mp3 music players. Combines good compression (small files) with high quality. Supported by all
browsers.
MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video
MP4 .mp4
format on the internet. This leads to automatic support for MP4 audio by all browsers.
Only MP3, WAV, and Ogg audio are supported by the HTML5 standard.
Html VEDIO
Playing Videos in HTML
Before HTML5, a video could only be played in a browser with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web page.

Browser Support
The numbers in the table specify the first browser version that fully supports the <video> element.
Element
<video> 4.0 9.0 3.5 4.0 10.5

The HTML <video> Element


To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might
flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The
browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.

HTML <video> Autoplay


To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The autoplay attribute does not work in mobile devices like iPad and iPhone.

HTML Video - Browser Support


In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.
The browser support for the different formats is:
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTML Video - Media Types


File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video - Methods, Properties, and Events


HTML5 defines DOM methods, properties, and events for the <video> element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
Example: Using JavaScript
HTML5 Audio
Audio on the Web
Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.

Browser Support
The numbers in the table specify the first browser version that fully supports the <audio> element.
Element
<audio> 4.0 9.0 3.5 4.0 10.5

The HTML <audio> Element


To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML Audio - How It Works


The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The
browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the
<audio> element.

HTML Audio - Browser Support


In HTML5, there are 3 supported audio formats: MP3, WAV, and OGG.
The browser support for the different formats is:
Browser MP3 WAV OGG
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Audio - Media Types


File Format Media Type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

HTML Audio - Methods, Properties, and Events


HTML5 defines DOM methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused, etc.
For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.

HTML5 Audio Tags


Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and <audio>

You might also like