1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Ubercool HTML5 Forms

Discussion in 'Web Development' started by pradeep, Jul 30, 2012.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    The latest version of HTML, viz. HTML5 brings in a lot of improvements & new feautres, and amongst those is the important one - form elements. HTML5 help you provide a rich user experience and layout with these new form elements.

    Although HTML5 is far from being useful to the mass and only the latest versions of the popular web browsers support HTML5, some do support HTML5 partially, so be warned and don't skip a thorough testing before implementing any HTML5 feature on a production environment.

    In this article we'll be looking at a few HTML5 form elements.

    [​IMG]

    Inputs in HTML5



    HTML5 brings a lot of new input types like email, url, range, color, telephone, date picker, progress bar etc. Some of these help in the new validation feature provided by HTML5, while other are UI improvements, let's look at a few interesting ones.

    Slider

    HTML:
    <input type="range" min=0 max=100 step=5 value=30 name="temp-slider">
    
    Date Picker

    HTML:
    <input type="date"name="dt">
    
    Spinner

    The step attribute's value determines by how much will the value be increased/decreased.

    HTML:
    <input type="number-spin" min="0" max="100" step="5" value="15">
    
    Placeholder

    I think that this will be the most used one.

    HTML:
    <input name="fname" type="text" placeholder="Enter your first name">
    
    Datalist

    This is very interesting, a combination of a text field and a select box.

    HTML:
    <input name="my_website" id="my_website" type="url" list="my_website_list" >
    <datalist id="my_website_list">
    <option value="http://www.go4expert.com" label="Code Expert">
    <option value="http://whatanindianrecipe.com" label="Delicious Indian Recipes">
    <option value="http://bestofperl.com" label="Best Of Perl">
    </datalist>
    
    Multiple File Selection

    No need for any third party uploaders, here is file input with multiple file selection.

    HTML:
    <input type="file" name="my_images" multiple="multiple" />
    
    Progress Bar

    Here is a progress bar, no need for CSS to emulate a progress bar.

    HTML:
    <progress id="prog" max=100 value=45>45%</progress>
    
    Meter

    Shows a meter, similar to the progress bar.

    HTML:
    <meter min=0 max=100 value=43 optimum=100>43</meter>
    
    Color Picker

    This will bring up the system's color picker for you.

    HTML:
    <input type="color">
    

    References



    https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5
    http://diveintohtml5.info/detect.html
     
  2. programming

    programming New Member

    Joined:
    Sep 1, 2012
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    Now that is really UberCool for all those jumping working on/with HTML5. I've gone through both the Reference URLs and have bookmarked them. Although I think I may require the one that informs about "Forms in HTML" (or more correctly HTML5) as I often have to work on such things. Grateful to you Pradeep.
     

Share This Page