YouTip LogoYouTip

Html5 Form Elements

* * * ## New Form Elements in HTML5 HTML5 introduces the following new form elements: * `` * `` * `` **Note:** Not all browsers support the new form elements introduced by HTML5, but you can still use them. Even if a browser doesn't support these form attributes, they will still render as regular form elements. * * * ## The HTML5 `` Element The `` element defines a list of options for an input field. The `` attribute specifies that a form or input field should have autocomplete functionality. When a user starts typing in an autocomplete field, the browser should display the predefined options: Use the `list` attribute of the `` element to bind it with the `` element. ![Image 1: Opera]( 2: Safari]( 3: Chrome]( 4: Firefox]( 5: Internet Explorer]( ## Example Using the `` element to predefine values for an `` element: ```html ``` [Try it Β»]( * * * ## The HTML5 `` Element The `` element provides a reliable method for authenticating users. The `` tag defines a key pair generator field for forms. When the form is submitted, two keys are generated: a private key and a public key. The private key is stored on the client side, while the public key is sent to the server. The public key can later be used to verify the user's client certificate. This element has been deprecated and is no longer recommended. Alternatives include: 1. Using the Web Cryptography API to generate keys in JavaScript 2. Using specialized cryptographic libraries ![Image 6: Opera]( 7: Safari]( 8: Chrome]( 9: Firefox]( 10: Internet Explorer]( ## Example A form containing a `` field: ```html
Username: Encryption:
``` [Try it Β»]( * * * ## The HTML5 `` Element The `` element is used for various types of output, such as calculations or script-generated results: ![Image 11: Opera]( 12: Safari]( 13: Chrome]( 14: Firefox]( 15: Internet Explorer]( ## Example Displaying calculation results in an `` element: ```html
0 100 + =
``` [Try it Β»]( * * * ## New Form Elements in HTML5 | Tag | Description | | --- | --- | | [``]( | The `` tag defines a list of options for an `` element. Use this tag together with the `` element to specify possible values for the input field. | | [``]( | The `` tag defines a key pair generator field for forms. | | [``]( | The `` tag defines various types of output, such as results generated by scripts. |
← Html5 Form AttributesHtml5 Form Input Types β†’