Forms- New Inputs for the HTML Forms

Written by @m_k_amin 19 May 2013

Html5 Enables you to make different new input elements for the HTML forms. They are Color, Date, DateTime, Time, Month, Week, Email, Number, Range, Search, Tel and Url. Although all of these inputs may not be available for some browsers yet, there is no escape from HTML5! The following code shows how to simply use these new inputs. Enhance your forms by HTML5 and Enjoy! BackLinks are appreciated!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->



<form actione="" method="get" novalidate="novalidate" >

Color: <input type="color" name="bgcolor"><br><br>

Date: <input type="date" name="btday" min="2000-12-19" max="2010-12-19" step="2"><br><br>

Date Time: <input type="datetime" name="bdaytime"max="1990-12-19T16:39:57" step="2"><br><br>

Local Date Time: <input type="datetime-local" name="ldatetime" min="2000-12-19T16:39:57" max="2005-12-19T16:39:57"><br><br>

Time: <input type="time" name="ytime" min="7:39" max="13:39"><br><br>

Month: <input type="month" name="bdaymonth" min="1996-12" max="2006-01" step="3"><br><br>

Week: <input type="week" name="w-y" min="1996-W12" max="2006-W11" step="2"><br><br>

Email:<input type="email" name="umail" autocomplete="on" multiple="multiple" pattern="^[A-Za-z0-9]*@kerixa.com$" placeholder="you@kerixa.com"><br><br>

Number: <input type="number" name="val" step="0.1" min="1" max="5"><br><br>

Range: <input type="range" name="rng" min="1" max="10" step="3"><br><br>

Search: <input type="search" name="mksearch"><br><br>

Tel: <input type="tel" name="telphone" autofocus= "autofocus"><br><br>

URL: <input type="url" name="link" autocomplete="off"><br><br>

<input name="Submit1" type="submit" value="submit" formtarget="_blank" />

<input name="Submit1" type="submit" value="submit" Formmethod= "post" formaction="demo_admin.asp"/>

</form>



<div style="text-align: center"><br><font face="Tahoma"><a target="_blank" href="https://html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300