HTML Form - Part 3

     I hope you read my HTML Form Part 2 article.

     Let's learn HTML5 input types

• <input type="color"> : Used for input fields that should contain a color. 

               Example code
                      <form action="/action_page.php">
                           Select your favorite color:
                           <input type="color" name="favcolor" value="#ff0000">
                      </form>

               Output

• <input type="date"> : Used for input fields that should contain a date. 

               Example code
                      <form action="/action_page.php">
                           Birthday:
                           <input type="date" name="bday">
                      </form>

               Output

• <input type="datetime-local"> : specifies a date and time input field, with no                                                                         time zone. 

               Example code
                      <form action="/action_page.php">
                           Birthday (date and time):
                           <input type="datetime-local" name="bdaytime">
                      </form>

               Output

• <input type="email"> : Used for input fields that should contain an email address. 

               Example code
                      <form action="/action_page.php">
                           E-mail:
                           <input type="email" name="email">
                      </form>

               Output

     If the '@' email is missing it shows the alert as "Please include an '@' in the 
     email address.

• <input type="file"> : defines a file-select field and a "browser" button for file uploads. 

               Example code
                      <form action="/action_page.php">
                           Select a file:  
                           <input type="file" name="myFile">
                      </form>

               Output

• <input type="month"> : allows the user to select a month and year. 

               Example code
                      <form action="/action_page.php">
                           Birthday (month and year):
                           <input type="month" name="bdaymonth">
                      </form>   

               Output

• <input type="number"> : defines a numeric input field. 

               Example code
                      <form action="/action_page.php">
                           Quantity (between 1 and 5):
                           <input type="number" name="quantity" min="1" max="5">
                      </form>

               Output

• <input type="range"> : defines a control for entering a number whose exact value                                              is not important (like a slider control). Default range is 0                                                     to 100. 

               Example code
                      <form action="/action_page.php" method="get">
                           Points:
                           <input type="range" name="points">
                      </form>

               Output

• <input type="search"> : used for search field. 

               Example code
                      <form action="/action_page.php">
                           Search Google:
                           <input type="search" name="googlesearch">
                      </form>

               Output

• <input type-"tel"> : used for input fields that should contain a telephone number. 

               Example code
                      <form action="/action_page.php">
                           Telephone: 
                           <input type="tel" name="phone">
                      </form>

               Output

• <input type="time"> : allows users to select the time. 

               Example code
                      <form action="/action_page.php">
                           Select a time:
                           <input type="time" name="usr_time">
                      </form>

               Output

• <input type="url"> : used for input fields that should contain a URL address. 

               Example code
                      <form action="/action_page.php">
                           Add your homepage:
                           <input type="url" name="homepage">
                      </form>

               Output

• <input type="week"> : allows users to select a week and year. 

               Example code
                      <form action="/action_page.php">
                            Select a week:
                            <input type="week" name="year_week">
                      </form>

               Output

      I think now you have an idea of HTML5 input tags.

     See you soon with the HTML Form part 4 (HTML input attributes)