Sunday, 5 February 2017

HTML5 NEW FORM ELEMENTS

HTML5 SUPPORTS THE FOLLOWING LIST OF NEW ELEMENTS –

·        <datalist> - It is used to list a set of data to be used in a list of options, like autocomplete feature used in forms. It enables us to provide a list of predefined options to the user as they input data. It is a paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>Welcome</title>       
</head>
<body>     
          Enter your favourite color<br/>
          <input type="text" name="favcolor" list="colors">
          <datalist id="colors">
          <option value="GREEN">
          <option value="RED">
          <option value="WHITE">
          </datalist>
</body>
</html>


·        keygen - Generate keys to authenticate users. The purpose of the <keygen> element is to provide a secure way to authenticate users. The keygen is used to generate key for a form. The private key is stored in browser and the public key is sent to the server, when the form is clicked or submitted. It is a non paired tag.

Attribute
Value
Description

autofocus
autofocus
<keygen> element should be automatically get focus when the page loads.

challenge
challenge
<keygen> should be challenged when page is submitted.

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

name
name
Defines a name for the <keygen> element.


<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>Welcome</title>       
</head>
<body>     
          <form action="abc.html">
          Username<br/>
          <input type="text" name="uname" id="user"><br/>
          Encryption key :<br/>
          <keygen name="encrypt" challenge="challenge"><br/>
          <input type="submit" value="Generate">
          </form>
</body>
</html>


·        output - It is used to display the result of arithmetical calculation. It is a paired key.

Attribute
Value
Description

for
element_id
Specifies the relation between the result of the calculation.

form
form_id
Specifies one or more forms, the output belongs to.

name
name
Specifies a name for the output element.


<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>Welcome</title>       
</head>
<body>     
          <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
          Number1<input type="number" name="a" value="0">+
          Number2<input type="number" name="b"/>=
          <output name="x" for="a b"></output>
         
          </form>
</body>
</html>


parseInt global function – The parseInt() function parses the string and returns an integer.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>Welcome</title>       
</head>
<body>     
          <script>
          var x = prompt("Enter num1");
          var y = prompt("Enter num2");
          var z = parseInt(x) + parseInt(y);
          document.write(z);
          </script>
</body>
</html>

No comments:

Post a Comment