Hello, world!

HTML 5 Web Forms 2.0 HTML

HTML tutorial helps you to learn the new input types available in HTML5. These new features will help you as we all know that applying online forms is one of the usual tasks executed on the Web.



HTML5 - Web Forms 2.0

This HTML specification indicates Web Forms 2.0, as an extension to the forms features develop in HTML4's.
HTML5 Form elements and attributes offer a higher degree of semantic mark-up than HTML4
Form elements and attributes in HTML5 discard a great deal of the demand for complex scripting and styling that was necessary in HTML4.

The <input> element in HTML4

The following HTML4 input elements use the type attribute to indicate the data type.
text - This type builds a free-form text field, usually free of line breaks.
password - This type builds a free-form text field for sensitive information, usually free of line breaks.
checkbox - This type builds a set of zero or more values from a predefined list.
radio - This type builds an enumerated value.
submit - This type builds a free form of button provides form submission.
file - This type builds an arbitrary file with a MIME type and alternatively a file name.
image - This type builds a coordinate, relevant to a particular image's size, with the additional semantic that it must be the last value chosen and provides form submission.
hidden - This type builds an arbitrary string that is not usually showed to the user.
select - This type builds an enumerated value, same as the radio type.
textarea - This type builds a free-form text field, usually with no line break restrictions.
Button - This type builds a free form of button which can provides any event relevant to button.

Basic example using labels, radio buttons, and submit buttons:

HTML code example html5 - web forms 2.0:

<form action">
    <p>
                
      <label for="givenname">Given name: </label>
      <input type="text" id=" firstname "><br />
                                
      <label for="familyname">Family Name: </label>
      <input type="text" id=" familyname "><br />
                                
      <label for="email">country: </label>
      <input type="text" id="country"><br>
                                
      <input type="radio" name="status" value="single"> Single<br>
      <input type="radio" name="status" value="married"> Married<br>
      <input type="submit" value="send"> <input type="reset">
 
 </p>
</form>

HTML output html5 - web forms 2.0:




Single
Married


The <input> element in HTML5

These are some of the latest values for the type attribute initiated in HTML5 input elements.
datetime - Represents a control for entering a date and time (year, month, day, hour, minute, second, fractions of a second) encoded based on ISO 8601 and UTC time zone.
datetime-local - Represents a control for entering a date and time (year, month, day, hour, minute, second, fractions of a second) encoded based on ISO 8601, with no time zone.
date - Represents a control for entering a date (year, month, day)encoded based on ISO 8601 with no time zone.
month - Represents a control for entering a date that includes a year and a month encoded based on ISO 8601 with no time zone.
week - Represents a control for entering a date that includes a year and a week number encoded based on ISO 8601 with no time zone.
time - Represents a control for entering a time value (hour, minute, seconds, fractional seconds) encoded based on ISO 8601 with no time zone.
number - Represents a control for entering numerical value. The step attribute indicates the precision, defaulting to 1.
range - Represents a control that is used for input fields that should include a value from a range of numbers.
email - Represents a control that accepts email value. This type is used for input fields that validated to contain whichever the empty string or a valid e-mail address. Trying to submit a simple text will force you to input only email address in email@example.com format.
url - Represents a control that accepts URL value. This type is used for input fields that validated to contain whichever the empty string or a valid absolute URL. Trying to submit a simple text will force you to input only URL address either in http://www.example.com format or in http://example.com format.

The <output> element

The <output> element, launched in HTML5 is used to represent the result of a calculation, or the product of various types of output.
A list of space-separated IDs of other elements, signifying that those elements supplied input values to the calculation.
The for attribute is applied to define the connection among the output element and the other elements in the page content affecting the calculation.

HTML code example <output> element:

<!DOCTYPE HTML>
<html>
 
   <script type="text/javascript">
      function showResult()
      {
         x = document.forms["myform"]["newinput"].value;
         document.forms["myform"]["result"].value=x;
      }
   </script>
 
   <body>
 
      <form action="/cgi-bin/html5.cgi" method="get" name="myform">
         Input a value : <input type="text" name="newinput" />
         <input type="button" value="Result"  onclick="showResult();" />
         <output name="result"/>
      </form>
                        
   </body>
            
</html>

The autofocus attribute

The new autofocus attribute that was launched in HTML5 is an easy one-step pattern, simple programmed in JavaScript at the moment of loading the document, automatically focus one appropriate form field.

Syntax autofocus attribute:

<input type="text" name="search" autofocus/>
Newest versions of Mozilla, Safari and Chrome are only browsers supported in this attribute.

HTML code example autofocus attribute:

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

The placeholder attribute

The placeholder on <input> and <textarea> attribute that was launched in HTML5 gives a hint to the user of what is allowed in the field to be inputted.
The placeholder text should not have carriage returns or line-feeds.

Syntax placeholder attribute:

<input type="text" name="search" placeholder="enter to search"/>
Newest versions of Mozilla, Safari and Chrome are only browsers supported in this attribute.

HTML code example placeholder attribute:

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

HTML output placeholder attribute:

Input email :


The required attribute

The new required attribute, launched in HTML5 is used to require a value before the form can be sent.

Syntax required attribute:

<input type="text" name="search" required/>
Newest versions of Mozilla, Safari and Chrome are only browsers supported in this attribute.

HTML code example required attribute:

<form action="/cgi-bin/html5.cgi" method="get">
    Input email : <input type="text" name="newinput" required/>
    <p>Click to submit using Submit button</p>
    <input type="submit" value="submit" />
</form>

HTML output required attribute:

Input email :

Click to submit using Submit button