Top Banner
NEW FORM ELEMENTS, ATTRIBUTES & TYPES 03/15/2022 1
29

New Form Element in HTML5

Aug 07, 2015

Download

Education

Zahra Rezwana
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: New Form Element in HTML5

04/15/2023 1

NEW FORM ELEMENTS, ATTRIBUTES & TYPES

Page 2: New Form Element in HTML5

04/15/2023 2

Introduction

HTML5 web forms introduced new form elements, input types, attributes ,and other features.

Many features using in our interfaces: form validation, combo boxes, placeholder text, and the like.

Marking up forms easier on the developer, also better for the user.

Page 3: New Form Element in HTML5

04/15/2023 3

Evaluation

Forms section of HTML5 was titled Web Forms 2.0 that added new types for forms.

Started by Opera and edited by Opera employee Ian Hickson, was submitted to the W3C in early 2005.

Combined with Web Applications 1.0 to create the basis of Web Hypertext

Application Technology Working Group (WHATWG) HTML5 specification.

Page 4: New Form Element in HTML5

04/15/2023 4

What are forms?

HTML forms are used to collect user input.Html form contains form elements.Example:<form> . form elements .</form>

Now Lets look at:HTML5 New Form ElementsHTML5 New Form AttributesHTML5 New Element Types

Page 5: New Form Element in HTML5

04/15/2023 5

Criteria

HTML5 form element must be complete to the following criteria:

It must include pleasant and working UI. able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon

etc.) It should be fully accessible.

Page 6: New Form Element in HTML5

04/15/2023 6

New Form Element

HTML5 added the following form elements:

1. <datalist>

2. <keygen>

3. <output>

Page 7: New Form Element in HTML5

04/15/2023 7

New Form Element1. <datalist>

The <datalist> element specifies a list of pre-defined options for an <input> element. The list is created with <option> elements inside the <datalist>

<form action=“demo.html” method=“get”>

Webpage: <input type=“url” list=“url_list” name=“link” />

<datalist id=“url_list”>

<option label=“W3School” value=http://www.w3schools.com />

<option label=“Googlel” value=http://www.google.com />

<option label=“Yahool” value=http://www.yahoo.com />

</datalist>

<input type=“submit”/>

</form>

Page 8: New Form Element in HTML5

04/15/2023 8

New Form Element

2. <keygen>

The <keygen> Defines a key-pair key-pair generator field used for forms. When the form submitted, the private key is stored locally, and the public key is

sent to the server. The purpose of the <keygen> element is to provide a secure way to authenticate

users.

<form action="demo_keygen.asp" method="get">  Username: <input type="text" name="usr_name">  Encryption: <keygen name="security">  <input type="submit"></form>

Page 9: New Form Element in HTML5

04/15/2023 9

New Form Element

3. <output>

The <output> tag represents the result of a calculation.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0  <input type="range" id="a" value="50">100  +<input type="number" id="b" value="50">  =<output name="x" for="a b"></output></form>

Page 10: New Form Element in HTML5

04/15/2023 10

Attributes of the <datalist> elementAttribute Description

contenteditable Specifies whether the content of an element is editable or not

contextmenu Specifies a context menu for an element. The context menu appears when a user right-clicks on the element.

hidden Specifies that an element is not yet, or is no longer, relevant.

draggable Specifies whether an element is draggable or not.

dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped

spellcheck Specifies whether the element is to have its spelling and grammar checked or not.

Translate Specifies whether the content of an element should be translated or not

Page 11: New Form Element in HTML5

04/15/2023 11

Attribute: id<form action="action_page.php">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

</datalist>

<input type="submit">

</form> Result:

Example

Page 12: New Form Element in HTML5

04/15/2023 12

Attributes of <keygen> elementAttribute value Description

autofocus autofocus

Specifies that a <keygen> element should automatically get focus when the page loads

challenge challenge

Specifies that the value of the <keygen> element should be challenged when submitted

disabled disabled Specifies that a <keygen> element should be disabled

form form_id Specifies one or more forms the <keygen> element belongs to

keytype rsadsaec

Specifies the security algorithm of the key

name name Defines a name for the <keygen> element

Page 13: New Form Element in HTML5

04/15/2023 13

Attribute: name<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security" autofocus>

<input type="submit">

</form>

"Encryption" field automatically get focus when the page loads:

The autofocus attribute of the keygen tag is not supported in Firefox.

Example

Page 14: New Form Element in HTML5

04/15/2023 14

Attributes of the <output> element

Attribute Value Description

for element_id Specifies the relationship between the result of the calculation, and the elements used in the calculation

form form_id Specifies one or more forms the output element belongs to

name name Specifies a name for the output element

Page 15: New Form Element in HTML5

04/15/2023 15

Example Attribute: form, name, for<form action="demo_form.asp" id="numform" 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">

<br><br>

<input type="submit">

</form>

<output form="numform" name="x" for="a b"></output> Result:

The form attribute of the output element is not supported in any of the major bowsers.

Page 16: New Form Element in HTML5

16

HTML5 gives us input types that provide for more data-specific UI elements and

native data validation. HTML5 has a total of 13 new input types:1. search

2. email

3. url

4. tel

5. datetime

6. date

7. month

04/15/2023

Types of the <input> element

8. week

9. time

10. datetime-local

11. number

12. range

13. color

Page 17: New Form Element in HTML5

04/15/2023 17

TYPE = SEARCH

<input type> search

The search type is used for search fields

Search type is only supported in Chrome, Opera, andsafari.

Search Google: <input type="search" name="googlesearch" />

Page 18: New Form Element in HTML5

04/15/2023 18

TYPE = EMAIL <input type> email The email type (type="email") is used for specifying one or more email addresses. Supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

Only supported in Chrome, Opera, firefox and safari.

E-mail: <input type="email" name="usermail" />

Page 19: New Form Element in HTML5

04/15/2023 19

TYPE = URL <input type> url

The url type is used for input fields that should contain a URL address.The value of the url field is automatically validated when the form is submitted.

Search type is only supported in Chrome, Opera, firefox .

Add your homepage: <input type="url" name="homepage" />

Page 20: New Form Element in HTML5

04/15/2023 20

<input type> tel

For telephone numbers, use the tel input type (type="tel").

Unlike the url and email types, tel type doesn’t enforce a particular syntax or pattern.

Letters and numbers—indeed, any characters other than new lines or carriage returns—are valid.

Telephone: <input type="tel" name="usrtel" />

TYPE = TEL

Page 21: New Form Element in HTML5

04/15/2023 21

TYPE = RANGE <input type> range

The range input type (type="range") displays a slider control in browsers . As with the number type, it allows the min, max, and step attributes.

Define a control for entering a number whose exact value is not important

<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label><input type="range" min="1" max="10" name="rating" type="range">

Page 22: New Form Element in HTML5

04/15/2023 22

TYPE = COLOR

<input type> color

The color input type (type="color") provides the user with a color picker.

Supported only in Opera

Select your favorite color: <input type="color" name="favcolor" />

Page 23: New Form Element in HTML5

04/15/2023 23

TYPE = KEYGEN <input type> keygen

The purpose of the <keygen> element provide a secure way to authenticate users.The <keygen> specifies key-pair generator field in a form.When form submitted, two keys generated, one private and other public.<form action="demo_keygen.asp" method="get">  Username: <input type="text" name="usr_name" />  Encryption: <keygen name="security" />  <input type="submit" /></form>

Page 24: New Form Element in HTML5

04/15/2023 24

TYPE = OUTPUT <input type> output

The <output> element represents the result of a calculation (like one performed by a script).

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" name="a" value="50" />100+<input type="number" name="b" value="50" />=<output name="x" for="a b"></output></form>

Page 25: New Form Element in HTML5

04/15/2023 25

Browser Compatibility

Page 26: New Form Element in HTML5

04/15/2023 26

Page 27: New Form Element in HTML5

04/15/2023 27

Backward Compatibility

The <datalist> element is not supported in Internet Explorer 9 (and earlier versions), or Safari.

The <keygen> element is not supported in Internet Explorer.

The <output> element is not supported in Internet Explorer.

Page 28: New Form Element in HTML5

04/15/2023 28

CONCLUSION

HTML5 is still work in progress and not due to completely roll out until the latter part of 2011.

there is no urgency to redesign a Web site using the new iteration of the language.

Only a handful of major brands, including Mozilla Firefox and Google Chrome, currently support HTML5 elements.

Those companies’ browsers are only a small fraction of the browsing populations.

Microsoft’s Internet Explorer is the most widely used browser and currently has the least amount of support for HTML5.

Page 29: New Form Element in HTML5

04/15/2023 29