HTML5 SVG

Toggle navigation
TUTORIAL HOME
HTML5 SVG
❮ Previous Next ❯
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 Element
The HTML 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 element.

Element
4.0 9.0 3.0 3.2 10.1
SVG Circle
Example

»
SVG Rectangle

Example

»
SVG Rounded Rectangle
Example

»
SVG Star
Example

»
SVG Logo
SVG
Example

      <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″ />


SVG
Sorry, your browser does not support inline 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
No support for event handlers
Poor text rendering capabilities
You can save the resulting image as .png or .jpg
Well suited for graphic-intensive games
Resolution independent
Support for event handlers
Best suited for applications with large rendering areas (Google Maps)
Slow rendering if complex (anything that uses the DOM a lot will be slow)
Not suited for game applications
To learn more about SVG, please read our SVG Tutorial.

❮ Previous Next ❯

HTML5 Style Guide and Coding Conventions

TUTORIAL HOME
HTML5 Style Guide and Coding Conventions
❮ Previous Next ❯
HTML Coding Conventions
Web developers are often uncertain about the coding style and syntax to use in HTML.

Between 2000 and 2010, many web developers converted from HTML to XHTML.

With XHTML, developers were forced to write valid and “well-formed” code.

HTML5 is a bit more sloppy when it comes to code validation.

Be Smart and Future Proof
A consistent use of style, makes it easier for others to understand your HTML.

In the future, programs like XML readers, may want to read your HTML.

Using a well-formed-“close to XHTML” syntax, can be smart.

Always keep your code tidy, clean, and well-formed.

Use Correct Document Type
Always declare the document type as the first line in your document:

If you want consistency with lower case tags, you can use:

Use Lower Case Element Names
HTML5 allows mixing uppercase and lowercase letters in element names.

We recommend using lowercase element names because:

Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write
Bad:

This is a paragraph.

Very Bad:

This is a paragraph.

Good:

This is a paragraph.

Close All HTML Elements
In HTML5, you don’t have to close all elements (for example the

element).

We recommend closing all HTML elements.

Bad:

This is a paragraph.

Good:

This is a paragraph.

Close Empty HTML Elements
In HTML5, it is optional to close empty elements.

Allowed:

Also Allowed:

However, the closing slash (/) is REQUIRED in XHTML and XML.

If you expect XML software to access your page, it is a good idea to keep the closing slash!

Use Lower Case Attribute Names
HTML5 allows mixing uppercase and lowercase letters in attribute names.

We recommend using lowercase attribute names because:

Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write
Bad:

Good:

Quote Attribute Values
HTML5 allows attribute values without quotes.

We recommend quoting attribute values because:

Mixing uppercase and lowercase values is bad
Quoted values are easier to read
You MUST use quotes if the value contains spaces
Very bad:
This will not work, because the value contains spaces:

Bad:

Good:

Image Attributes
Always add the “alt” attribute to images. This attribute is important when the image for some reason cannot be displayed. Also, always define image width and height. It reduces flickering because the browser can reserve space for the image before loading.

Bad:

Good:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px”>
Spaces and Equal Signs
HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together.

Bad:

Good:

Avoid Long Code Lines
When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.

Try to avoid code lines longer than 80 characters.

Blank Lines and Indentation
Do not add blank lines without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Do not use unnecessary blank lines and indentation. It is not necessary to indent every element:

Unnecessary:

Famous Cities

Tokyo

    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.

Better:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.

Table Example:

Name	Description
A	Description of A
B	Description of B

List Example:

London

Paris

Tokyo

Omitting and ?
In the HTML5 standard, the tag and the tag can be omitted.

The following code will validate as HTML5:

Example

Page Title

This is a heading

This is a paragraph.

»
We do not recommend omitting the and tags.

The element is the document root. It is the recommended place for specifying the page language:

Declaring a language is important for accessibility applications (screen readers) and search engines.

Omitting or can crash DOM and XML software.

Omitting can produce errors in older browsers (IE9).

Omitting ?
In the HTML5 standard, the tag can also be omitted.

By default, browsers will add all elements before , to a default element.

You can reduce the complexity of HTML, by omitting the tag:

Example

Page Title

This is a heading

This is a paragraph.

»
We do not recommend omitting the tag.

Omitting tags is unfamiliar to web developers. It needs time to be established as a guideline.

Meta Data
The element is required in HTML5. Make the title as meaningful as possible:

HTML5 Syntax and Coding Style
To ensure proper interpretation, and correct search engine indexing, both the language and the character encoding should be defined as early as possible in a document:

HTML5 Syntax and Coding Style

Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the tag.

The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following viewport element in all your web pages:

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag

With the viewport meta tag

HTML Comments
Short comments should be written on one line, like this:

Comments that spans more than one line, should be written like this:

<!–
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
–>
Long comments are easier to observe if they are indented two spaces.

Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not necessary):

Short rules can be written compressed, on one line, like this:

p.intro {font-family: Verdana; font-size: 16em;}
Long rules should be written over multiple lines:

body {
background-color: lightgrey;
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Place the opening bracket on the same line as the selector
Use one space before the opening bracket
Use two spaces of indentation
Use semicolon after each property-value pair, including the last
Only use quotes around values if the value contains spaces
Place the closing bracket on a new line, without leading spaces
Avoid lines over 80 characters
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):

Accessing HTML Elements with JavaScript
A consequence of using “untidy” HTML styles, might result in JavaScript errors.

These two JavaScript statements will produce different results:

Example
var obj = getElementById(“Demo”)

var obj = getElementById(“demo”)
»
Visit the JavaScript Style Guide.

Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: “london.jpg” cannot be accessed as “London.jpg”.

Other web servers (Microsoft, IIS) are not case sensitive: “london.jpg” can be accessed as “London.jpg” or “london.jpg”.

If you use a mix of upper and lower case, you have to be extremely consistent.

If you move from a case insensitive to a case sensitive server, even small errors will break your web!

To avoid these problems, always use lower case file names.

File Extensions
HTML files should have a .html or .htm extension.

CSS files should have a .css extension.

JavaScript files should have a .js extension.

Differences Between .htm and .html
There is no difference between the .htm and .html extensions. Both will be treated as HTML by any web browser or web server.

The differences are cultural:

.htm “smells” of early DOS systems where the system limited the extensions to 3 characters.

.html “smells” of Unix operating systems that did not have this limitation.

Technical Differences
When a URL does not specify a filename (like https://www.Omegas.com/css/), the server returns a default filename. Common default filenames are index.html, index.htm, default.html, and default.htm.

If your server is configured only with “index.html” as default filename, your file must be named “index.html”, not “index.htm.”

However, servers can be configured with more than one default filename, and normally you can set up as many default filenames as needed.

Anyway, the full extension for HTML files is .html, and there’s no reason it should not be used.

❮ Previous Next ❯

HTML5 Migration

Toggle navigation
TUTORIAL HOME
HTML5 Migration
❮ Previous Next ❯
Migration from HTML4 to HTML5
This chapter is entirely about how to migrate from HTML4 to HTML5.

This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original content or structure.

You can migrate from XHTML to HTML5, using the same recipe.

Typical HTML4 Typical HTML5

HTML5 Semantic Elements

Toggle navigation
TUTORIAL HOME
HTML5 Semantic Elements
❮ Previous Next ❯
Semantics is the study of the meanings of words and phrases in a language.

Semantic elements = elements with a meaning.

What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements:

and – Tells nothing about its content.

Examples of semantic elements: ,

, and

– Clearly defines its content.

Browser Support
Yes Yes Yes Yes Yes
HTML5 semantic elements are supported in all modern browsers.

In addition, you can “teach” older browsers how to handle “unknown elements”.

Read about it in HTML5 Browser Support.

New Semantic Elements in HTML5
Many web sites contain HTML code like:

to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

HTML5 New Elements

HTML5 New Elements
❮ Previous Next ❯
New Elements in HTML5
Below is a list of the new HTML5 elements, and a description of what they are used for.

New Semantic/Structural Elements
HTML5 offers new elements for better document structure:

Tag Description

Defines an article in the document

Defines content aside from the page content
Defines a part of text that might be formatted in a different direction from other text

Defines additional details that the user can view or hide
Defines a dialog box or window

Defines a caption for a

element

Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

HTML5 Browser Support

Toggle navigation
TUTORIAL HOME
HTML5 Browser Support
❮ Previous Next ❯
You can teach older browsers to handle HTML5 correctly.

HTML5 Browser Support
HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can “teach” older browsers to handle “unknown” HTML elements.

You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.

Define Semantic Elements as Block Elements
HTML5 defines eight new semantic elements. All these are block-level elements.

To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:

header, section, footer, aside, nav, main, article, figure {
display: block;
}
Add New Elements to HTML
You can also add new elements to an HTML page with a browser trick.

This example adds a new element called to an HTML page, and defines a style for it:

Example

document.createElement(“myHero”)</script>

myHero {
      display: block;
      background-color: #dddddd;
      padding: 50px;
      font-size: 30px;
}

A Heading

My Hero Element

»
The JavaScript statement document.createElement(“myHero”) is needed to create a new element in IE 9, and earlier.

Problem With Internet Explorer 8
You could use the solution described above for all new HTML5 elements.

However, IE8 (and earlier) does not allow styling of unknown elements!

Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.

Syntax For HTML5Shiv
The HTML5Shiv is placed within the tag.

The HTML5Shiv is a javascript file that is referenced in a tag.

You should use the HTML5Shiv when you are using the new HTML5 elements such as:

, ,

HTML Input Types

Toggle navigation
TUTORIAL HOME
HTML Input Types
❮ Previous Next ❯
This chapter describes the different input types for the element.

Input Type Text
defines a one-line text input field:

Example

First name:

Last name:

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

First name:

Last name:

Input Type Password
defines a password field:

Example

User name:

User password:

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

First name:

Last name:

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

First name:

Mickey

Last name:

Mouse

Submit
If you omit the submit button’s value attribute, the button will get a default text:

Example

First name:

Last name:

»
Input Type Reset
defines a reset button that will reset all form values to their default values:

Example

First name:

Last name:

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

First name:

Mickey

Last name:

Mouse

Submit Reset
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
defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

Male

Female

Other

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

Male
Female
Other
Input Type Checkbox
defines a checkbox.

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

Example

I have a bike

I have a car

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

I have a bike
I have a car
Input Type Button
defines a button:

Example

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

Click Me!
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 Color
The 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

Select your favorite color:

»
Input Type Date
The 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

Birthday:

»
You can also add restrictions to dates:

Example

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

»
Input Type Datetime-local
The 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

Birthday (date and time):

»
Input Type Email
The 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

E-mail:

»
Input Type Month
The allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example

Birthday (month and year):

»
Input Type Number
The 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

Quantity (between 1 and 5):

»
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
You will learn more about input restrictions in the next chapter.

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

Quantity:

»
Input Type Range
The 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

»
Input Type Search
The is used for search fields (a search field behaves like a regular text field).

Example

Search Google:

»
Input Type Tel
The is used for input fields that should contain a telephone number.

The tel type is currently supported only in Safari 8.

Example

Telephone:

»
Input Type Time
The 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

Select a time:

»
Input Type Url
The 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

Add your homepage:

»
Input Type Week
The allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example

Select a week:

»
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

HTML Input Type Attribute
Tag Description
Specifies the input type to display

❮ Previous Next ❯

HTML5 Introduction

Toggle navigation
TUTORIAL HOME
HTML5 Introduction
❮ Previous Next ❯
What is New in HTML5?
The DOCTYPE declaration for HTML5 is very simple:

The character encoding (charset) declaration is also very simple:

HTML5 Example:

Title of the document

Content of the document……

The default character encoding in HTML5 is UTF-8.

New HTML5 Elements
The most interesting new HTML5 elements are:

New semantic elements like

~~MAUJUZI TV ONLINE Uncategorized Leave a comment April 15, 2019May 16, 2019 2 Minutes~~

HTML Input Attributes Toggle navigation TUTORIAL HOME HTML Input Attributes ❮ Previous Next ❯ The value Attribute The value attribute specifies the initial value for an input field: Example First name: » The readonly Attribute The readonly attribute specifies that the input field is read only (cannot be changed): Example First name: » 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 First name: » The size Attribute The size attribute specifies the size (in characters) for the input field: Example First name: » The maxlength Attribute The maxlength attribute specifies the maximum allowed length for the input field: Example First name: » 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 : 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 : 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 complete 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 and the following types: text, search, url, tel, email, password, datepickers, range, and color. Example An HTML form with autocomplete on (and off for one input field): First name: Last name: E-mail: » Tip: In some browsers you may need to activate the autocomplete function for this to work. The novalidate Attribute The novalidate attribute is a 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: E-mail: » 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: » The form Attribute The form attribute specifies one or more forms an 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): First name: Last name: » 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 element. The formaction attribute is used with type=”submit” and type=”image”. Example An HTML form with two submit buttons, with different actions: First name: Last name: <input type="submit" formaction="/action_page2.php" value=”Submit as admin”> » 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 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.html” method=”post”> First name: <input type="submit" formenctype="multipart/form-data” value=”Submit as Multipart/form-data”> » 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 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: First name: Last name: <input type="submit" formmethod="post" formaction="action_page_post.html” value=”Submit using POST”> » The formnovalidate Attribute The formnovalidate attribute overrides the novalidate attribute of the element. The formnovalidate attribute can be used with type=”submit”. Example A form with two submit buttons (with and without validation): E-mail: » 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 element. The formtarget attribute can be used with type=”submit” and type=”image”. Example A form with two submit buttons, with different target windows: First name: Last name: <input type="submit" formtarget="_blank" value=”Submit to a new window”> » The height and width Attributes The height and width attributes specify the height and width of an 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: » The list Attribute The list attribute refers to a element that contains pre-defined options for an element. Example An element with pre-defined values in a : » The min and max Attributes The min and max attributes specify the minimum and maximum values for an element. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week. Example elements with min and max values: Enter a date before 1980-01-01: Enter a date after 2000-01-01: Quantity (between 1 and 5): » The multiple Attribute The multiple attribute specifies that the user is allowed to enter more than one value in the element. The multiple attribute works with the following input types: email, and file. Example A file upload field that accepts multiple values: Select images: » The pattern Attribute The pattern attribute specifies a regular expression that the 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: » 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: » 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: » The step Attribute The step attribute specifies the legal number intervals for an 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: » Test Yourself with Exercises! Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » HTML Form and Input Elements Tag Description Defines an HTML form for user input Defines an input control ❮ Previous Next ❯ MAUJUZI TV ONLINE Uncategorized Leave a comment April 15, 2019May 16, 2019 5 Minutes

HTML Form Elements TUTORIAL HOME HTML Form Elements ❮ Previous Next ❯ This chapter describes all HTML form elements. The Element The most important form element is the element. The element can be displayed in several ways, depending on the type attribute. All the different input types are covered in the next chapter. The Element The element defines a drop-down list: Example Volvo Saab Fiat Audi » The 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 Fiat » The Element The element defines a multi-line input field (a text area): Example The cat was playing in the garden. » 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 the garden. The Element The element defines a clickable button: Example Click Me! » This is how the HTML code above will be displayed in a browser: Click Me! HTML5 Form Elements HTML5 added the following form elements: Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will not “destroy” your web page. HTML5 Element The element specifies a list of pre-defined options for an element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the element, must refer to the id attribute of the element. Example » HTML5 Element The purpose of the element is to provide a secure way to authenticate users. The element specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future. Example A form with a keygen field: Username: Encryption: » HTML5 Element The element represents the result of a calculation (like one performed by a script). Example Perform a calculation and show the result in an element: <form action="/action_page.php" oninput=”x.value=parseInt(a.value)+parseInt(b.value)”> 0 100 + = » Test Yourself with Exercises! Exercise 1 » Exercise 2 » Exercise 3 » HTML Form Elements = new in HTML5. Tag Description Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a label for an element Groups related elements in a form Defines a caption for a element Defines a drop-down list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a clickable button Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation ❮ Previous Next ❯ MAUJUZI TV ONLINE Uncategorized Leave a comment April 15, 2019May 16, 2019 2 Minutes

~~Design a site like this with WordPress.com Get started~~

Tag: HTML5

HTML5 SVG

HTML5 Style Guide and Coding Conventions

Famous Cities

Tokyo

Famous Cities

Tokyo

This is a heading

This is a heading

HTML5 Migration

Famous Cities

London

Paris

Tokyo

Famous Cities

London

Paris

Tokyo

Famous Cities

London

Paris

Tokyo

Famous Countries

England

France

Japan

HTML5 Semantic Elements

WWF

What Does WWF Do?

What Does WWF Do?

HTML5 New Elements

HTML5 Browser Support

A Heading

HTML Input Types

HTML5 Introduction

HTML Input Attributes

HTML Form Elements