Skip to main content
Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.

The <input> element in HTML4

HTML4 input elements use the type attribute to specify the data type.HTML4 provides following types −
TypeDescription
textA free-form text field, nominally free of line breaks.
passwordA free-form text field for sensitive information, nominally free of line breaks.
checkboxA set of zero or more values from a predefined list.
radioAn enumerated value.
submitA free form of button initiates form submission.
fileAn arbitrary file with a MIME type and optionally a file name.
imageA coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission.
hiddenAn arbitrary string that is not normally displayed to the user.
selectAn enumerated value, much like the radio type.
textareaA free-form text field, nominally with no line break restrictions.
buttonA free form of button which can initiates any event related to button.
Following is the simple example of using labels, radio buttons, and submit buttons −
...
<form action="http://example.com/cgiscript.pl" method="post">

   <p>
 
      <label for="firstname">first name: </label>
      <input type="text" id="firstname"><br />
  
      <label for="lastname">last name: </label>
      <input type="text" id="lastname"><br />
  
      <label for="email">email: </label>
      <input type="text" id="email"><br>
  
      <input type="radio" name="sex" value="male"> Male<br>
      <input type="radio" name="sex" value="female"> Female<br>
      <input type="submit" value="send"> <input type="reset">
      
   </p>
</form>
 ...

The <input> element in HTML5

Apart from the above mentioned attributes, HTML5 input elements introduced several new values for the type attribute. These are listed below.
NOTE − Try all the following example using latest version of Opera browser.
S.No.Type & Description
1datetime
A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
2datetime-local
A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
3date
A date (year, month, day) encoded according to ISO 8601.
4month
A date consisting of a year and a month encoded according to ISO 8601.
5week
A date consisting of a year and a week number encoded according to ISO 8601.
6time
A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
7number
This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
8range
The range type is used for input fields that should contain a value from a range of numbers.
9email
This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
10url
This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

The <output> element

HTML5 introduced a new element <output> which is used to represent the result of different types of output, such as output written by a script.
You can use the for attribute to specify a relationship between the output element and other elements in the document that affected the calculation (for example, as inputs or parameters). The value of the for attribute is a space-separated list of IDs of other elements.
<!DOCTYPE HTML>
<html>
<head>
   <script type="text/javascript">
      function showResult()
      {
         x = document.forms["myform"]["newinput"].value;
         document.forms["myform"]["result"].value=x;
      }
   </script>
</head>
   <body>

      <form action="/cgi-bin/html5.cgi" method="get" name="myform">
         Enter a value : <input type="text" name="newinput" />
         <input type="button" value="Result"  onclick="showResult();" />
         <output name="result"></output>
      </form>
  
   </body>
 
</html>
This will produce following result −

The placeholder attribute

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The place holder text must not contain carriage returns or line-feeds.
Here is the simple syntax for placeholder attribute −
<input type="text" name="search" placeholder="search the web"/>
This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.
<!DOCTYPE HTML>
<html>

   <body>

      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
         <input type="submit" value="submit" />
      </form>

   </body>
 
</html>
This will produce following result −

The autofocus attribute

This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.
HTML5 introduced a new attribute called autofocus which would be used as follows −
<input type="text" name="search" autofocus/>
This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.
<!DOCTYPE HTML>
<html>

   <body>
   
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="text" name="newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type="submit" value="submit" />
      </form>
      
   </body>
   
</html>

The required attribute

Now you do not need to have javascript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value −
<input type="text" name="search" required/>
This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.
<!DOCTYPE HTML>
<html>

   <body>
   
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="text" name="newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type="submit" value="submit" />
      </form>
      
   </body>
   
</html>
This will produce following result −

Comments

Post a Comment

Popular posts from this blog

The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more
In this chapter, we will see how to enable remote desktop application. It is important because this enables us to work remotely on the server. To do this, we have the following two options. For the first option, we have to follow the steps given below. Step 1  − Go to Start → right click “This PC” → Properties. Step 2  − On Left side click “Remote Setting”. Step 3  − Check radio button “Allow Remote connection to this computer” and Check box “Allow connection only from computers running Remote Desktop with Network Level Authentication (recommended)” → click “Select Users”. Step 4  − Click Add. Step 5  − Type user that you want to allow access. In my case, it is administrator → click OK. For the  second option , we need to follow the steps given below. Step 1  − Click on “Server Manage” → Local Server → click on “Enable” or Disable, if it is Disabled.
Post a Comment
Read more
In this chapter, we will see how to configure WSUS and tune it. The following steps should be followed for configuring it. Step 1  − When you open it for the first time, you should do it by going to “Server Manager” → Tools → Windows Server Update Services, then a Configuration wizard will be opened and then click → Next. Step 2  − Click “Start Connecting” → Wait until the green bar is full and then → Next. Step 3  − Check the box for which the updates want to be taken, I did for English and then → Next. Step 4  − Check the box for all the products which you want to update. It is just for Microsoft products and it is recommended to include all the products related to Microsoft and then → Next. Step 5  − Choose the classification updated to be downloaded, if you have a very good internet speed, then check all the boxes, otherwise just check “Critical Updates”. Step 6  − Now we should schedule the updates which I will recommend to do it a...
Post a Comment
Read more