New Form Elements – Part 1

0
1042

In this session we will be learning new form elements, input types and different functionality that come to forms in HTML5.

  • What’s new in HTML5:
    • New input types.
    • New Tags.
    • New list elements.
  • New Input Types:
    • HTML5 has several new input types such as:
      Color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week etc.
    • Some browsers might not be able to render the new types yet, but the good news is, you can still use them. They will just be read as standard text input.
  • New input field types:
    1. Email:
      • The new email input type allows the form to validate the email address format without the use of Javascript.
      • To check a proper email address format you need to use javascript or any other server side processing language, but using email input tag there is no need of javascript for such validations.
      • Usage is shown below:
    2. Color:
      • Color input field allows you to select a color from a color picker.
      • Usage is shown below:
    3. Date:
      • Date input field shows a popup calendar and allows the user to select a date.
      • Usage is shown below:
    4. Range:
      • Range input field gives us a control for entering a number whose exact value is not important(like a slider control).
      • You can have a slider which goes between the given range.
      • Usage is shown below:
      • Here, “min” and “max” are the input tag attributes which specify the minimum and maximum value for the input type “range“.
    5. Tel:
      • Tel is used to define a field for entering a telephone number.
      • If the telephone number entered in “tel” input field is not valid, you will get a pop up giving a message.
      • Usage is shown below:
    6. Time:
      • Time input field is used to define a field for entering time.
      • It is same a “date” input field.
      • Usage is shown below:
    7. Url:
      • url input field is used to define a field for entering a url/link.
      • If you go through the field, you will have a message that pop’s up.
      • Usage is shown below:
  • New Form Elements:
    1. Datalist:
      • Datalist specifies a list of pre-defined options for an input element.
      • It provides an autocomplete feature on input elements. Users will see a drop-down list of pre-defined options as they input data.
      • You can use the input elements “list” attribute to bind it together with a datalist element.
      • Example of datalist is given below:
    2. Keygen:
      • Keygen is an advanced feature of HTML5.
      • It provides a secure way to authenticate users.
      • The keygen tag 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 send to the server.
      • The public key could be used to generate a client certificate to authenticate the user in future.
      • Example of keygen is given below:
    3. Output:
      • Now we have an output tag which performs a calculation and show the result in an output element.
      • Example of output element is shown below:

    We have learned about some of the new input elements and form elements theoretically and will see them practically in next section.

LEAVE A REPLY

Please enter your comment!
Please enter your name here