The Eduladder is a community of students, teachers, and programmers just interested to make you pass any exams. So we help you to solve your academic and programming questions fast.
In eduladder you can Ask,Answer,Listen,Earn and Download Questions and Question papers.
Watch related videos of your favorite subject.
Connect with students from different parts of the world.
Apply or Post Jobs, Courses ,Internships and Volunteering opportunity. For FREE
See Our team
Wondering how we keep quality?
Got unsolved questions? Ask Questions

HTML5-->View question

What are the new form elements introduced in HTML5?

HTML 5 is the latest version of HTML. What are the new form elements found in HTML 5 version.


Asked On2019-06-18 19:27:34 by:ramyav97

Taged users:
naikaumprakashgokilapriyaprajwalamvthegdxavi738

Likes:
Be first to like this question

Dislikes:
Be first to dislike this question
Talk about this  Like  Dislike
View all qusetions
Answers

New Semantic/Structural Elements

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

htmlimage

<article>  

A self-contained composition in a document that is independently distributable or reusable, e.g. a forum post, a magazine or newspaper article, or blog entry.

<aside>  

Defines content tangentially related to the content surrounding it, such as related reading links and glossaries, which may or not be nested within an article element.

<figcaption>  

Defines a caption for a <figure> element

<figure>  

Used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code listings, etc.

<header>  

Not be confused with the <head> element, the <header> tag typically contains the section?s heading (an h1?h6 element), as well as other content, such as a navigation links, table of contents, a search form, or any relevant logos.

<footer>  

For content located at the very bottom of the web page or nearest section. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, etc. It in turn may contain entire sections, with appendices, indexes, license agreements, and other similar content.

<main>  

Delineates the main content of the body of a document or web app. As such, the main content area holds content that is directly related to or expands upon the central topic of the page. Moreover, it helps screen readers and other assistive technologies understand where the main page content begins.

<mark>  

Meant to bring the reader?s attention to a part of the text due to its contextual relevance.

<nav>  

Denotes a section with navigation links, either to other pages or to parts within the same page.

<section>  

Unlike the <div> tag, which is used for a myriad of purposes, not the least of which is formatting content, the <section> element demarcates a thematic grouping of content. Each section typically includes a heading element and associated content within DIVs and Paragraphs. Examples include introduction, blog entries, and contact information.

<details>  

Produces an expandable box to display additional information. The expanding/collapsing behaviour does not depend on scripting, so it should work even if JavaScript is disabled or not supported.

<summary>  

An optional element that summarizes the contents of the parent details element. As such, it may contain a description, caption, or legend.

<time>  

Contains both human-friendly contents, along with a machine-readable form of those contents in the datetime attribute. The kinds of content range from various kinds of dates, to times, time-zone offsets, and durations.

Text-level Elements

<bdi>  

Defines a part of text that might be formatted in a different direction from other text

<wbr>  

Defines a possible line-break in text that is written as one long word.

New Form Elements

HTML5 introduces a number of new input types, attributes, and other elements to the HTML language.

<datalist>  

Defines pre-defined options for input controls. It works in a similar way to an autocomplete textbox.

<keygen>  

Defines a key-pair generator field (for forms). When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.

<output>  

Defines the result of a calculation

<progress>  

Presents a progress bar that tracks the progress of a task.

New Input Types

HTML5 introduced a number of new input types for forms to address specific behavioral and formatting requirements that were lacking for the HTML 4.01 spec. For instance, handling the inputting of dates, numbers, telephone numbers, etc.

New Input TypesNew Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

More Relaxed Attribute Syntax

In HTML5, attribute values may be delimited by single or double quotes or, in the case of single word entries, without either. Attributes without a value (such as disabled) don't require an equals or quotes (="").

Graphic Elements

Defines graphic drawing using JavaScript Defines graphic drawing using SVG

See the following article for more information on the HTML5 canvas element and this article for more on the HTML5 svg element.


Answerd on:2019-06-24 Answerd By:avi738

Likes:
|avi738

Dislikes:
Be first to dislike this answer
Talk about this  Like  Dislike

You might like this video:Watch more here

Watch more videos from this user Here

Learn how to upload a video and start earning here

Key Advantages Provided by HTML5 for Developers

HTML5 wanted developers to have more flexibility while designing websites and there have been significant improvements that are worth noticing:

  1. Persistent error handling:
    Most of the browsers have the support to parse structurally/syntactically incorrect HTML code, but until a few years ago, there was no standardized process to handle this. It meant that new browser developers had to perform malformed HTML document tests in different browsers in the bid to create improved error handling processes via the marvels of reverse engineering. The consistent HTML5 error handling has made a huge difference in this regard.The improved parsing algorithms that are used in HTML5 have unquantifiable benefits. Surveys reveal that around 90 percent of websites are liable to comprise of some incorrectly written code (tag soup) so being able to handle errors aptly is imperative. Furthermore, inherent error handling saves developers a lot of money and tons of time.
  2. Improved semantics for elements:
    To enhance code insinuation, improvements have been made to the semantic roles of various existing elements. Section, article, nav and header are the new elements that have replaced most of the now-obsolete div elements, and this has made the process of mistake-scanning a whole lot less complicated.
  3. Enhanced support for web application features:
    One of the primary goals of HTML5 was to allow browsers to function as application platforms. Web sites in the past used to be a lot less complex but over time, the cumbersomeness has increased. HTML5 provides developers with enhanced control of their websites’ performance. In the past, the developers had to use workarounds because many server-side technologies and browser extensions were not present. Now, with HTML5, there is no use to employ any JS-based or Flash work-around (as previously done in HTML4) because there are elements inherently present in HTML5 that provide all the functionalities.
  4. Mobile web made easier:
    Even today, creating a mobile version of a website can be a headache for developers. The smartphone-owning demographic has seen exponential proliferation over the past decade, and that created a need for improved HTML standards. End users want to be able to access a web resource at any time and via any device which makes having responsive websites a requirement. HTML5 has made mobile support a lot simpler by being able to cater to the low-powered electronic devices like tablets and smartphones.
  5. The canvas element:
    One of the most discussed features of HTML5 is the <canvas> element. The introduction of this unique tag has had an enormous impact on the use of Adobe Flash. Even though many websites still use Flash, HTML5 has got the preference of many people, and it’s believed that soon Flash will run completely obsolete.Using the canvas element, a developer can draw graphics using different colors and shapes by making use of scripts (e.g. JavaScript). It’s worth mentioning that canvas is merely a graphic container and to define the graphics, a script has to be executed. An example where JavaScript is used in conjunction with canvas is:

    <canvas id=”TestCanvas” width=”200″ height=”100″></canvas>
    var c = document.getElementById(“TestCanvas”);
    
    var context = c.getContext(“2d”);
    
    context.fillStyle = “#FF0000”;
    
    context.fillRect(0,0,140,75);
  6. The Menu element:
    The newly added <menu> and <menuitem> elements are constituents of the interactive elements specifications but aren’t often used or talked about by the developer community. However, these two items can be used to ensure enhanced web interactivity.The <menu> tag is used to represent menu commands in mobile and desktop applications for simplicity purposes. A possible usage of the menu tag can be:

        <body contextmenu=”new-menu”>
    
        <menu id=” new-menu” type=”context”>
    
        <menuitem>Hello!</menuitem>
    
        </menu>
       </body>
  7. Customizable Data Attributes:
    It was possible to add custom attributes before HTML5, but it was a risky affair; for example, in HTML4, custom attributes would sometimes stop a page from rendering completely, and they could often become the cause of incorrect/invalid documents. The data-* attribute in HTML5 has brought an end to this often-occurring problem. There are multiple uses for this attribute, but the primary objective of its introduction was the storage of extra information about different elements. Now, custom data can be included, and it gives developers increased chances of making engaging and efficient web pages without having to introduce server-side lookups or Ajax calls.
  8. Cookies were (or should be) bid adieu:
    Local storage support was a huge addition to HTML5. In the pre-HTML5 days, if developers wanted to store anything, they had to make use of cookies. Cookies can hold a small amount of data (not to mention, everybody hates them) and this made the localStorage object’s addition to HTML5 an even more welcome benefit. The localStorage object is a part of the global window namespace and can be accessed from wherever desired while using scripts.

Answerd on:2019-06-19 Answerd By:avi738

Likes:
Be first to like this answer

Dislikes:
Be first to dislike this answer
Talk about this  Like  Dislike

You might like this video:Watch more here

Watch more videos from this user Here

Learn how to upload a video and start earning here

The most interesting new HTML5 elements are: 

New semantic elements like <header>, <footer>, <article>, and <section>.

New attributes of form elements like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

Answerd on:2019-06-19 Answerd By:avi738

Likes:
Be first to like this answer

Dislikes:
Be first to dislike this answer
Talk about this  Like  Dislike

You might like this video:Watch more here

Watch more videos from this user Here

Learn how to upload a video and start earning here



Lets together make the web is a better place

We made eduladder by keeping the ideology of building a supermarket of all the educational material available under one roof. We are doing it with the help of individual contributors like you, interns and employees. So the resources you are looking for can be easily available and accessible also with the freedom of remix reuse and reshare our content under the terms of creative commons license with attribution required close.

You can also contribute to our vision of "Helping student to pass any exams" with these.
Answer a question: You can answer the questions not yet answered in eduladder.How to answer a question
Career: Work or do your internship with us.Work with us
Create a video: You can teach anything and everything each video should be less than five minutes should cover the idea less than five min.How to upload a video on eduladder