�ݺ�ߣ

of 11
HTML5 formsinputtypes
HTML5 introducesnolessthana baker’sdozen(yes,that’s13!) new inputtypesforforms.The new
inputtypeswe’ll be lookingatare:
search
email
url
tel
number
range
date
month
week
time
datetime
datetime-local
color
search
<input type="text" name="search">
Well,whatif we couldwrite somethinglike …
<input type="search" name="search">
email
<input type="email" name="email" required>
<inputtype="email" name="email"value="xyz.jp">
isn’tvalidinFirefox,Safari,orChrome (there isnoissue inOpera).
url
<input type="url" name="url" required>
<input type="tel" name="tel" id="tel" required>
number
<inputtype="number"min="5"max="18"step="0.5" value="9"name="shoe-size">

of 11
<inputtype="text"pattern="[0-9]*"name="shoe-size">
range
<inputid="skill"type="range"min="1"max="100"value="0">
Datesand times
<inputid="dob"name="dob"type="date">
You can go a stepfurtherby usingthe min and max attributestoensure the usercan onlychoose froma
specifieddate range.
<inputid="startdate"name="startdate"min="2012-01-01" max="2013-01-01" type="date">
date
month
<inputid="expiry"name="expiry"type="month"required>
You can alsodrill downto type="week".Notice how Operahighlightsaspecificweekusingthe same
date pickercontrol,
<inputid="vacation"name="vacation"type="week">
time
type="time"rendersaspinbox similartothatusedearlierforselectingthe precisetime.
<inputid="exit-time"name="exit-time"type="time">
datetime
We can combine the date andtime by usingtype="datetime"forspecifyingaprecise time onagiven
day,
<inputid="entry-day-time"name="entry-day-time"type="datetime">
datetime-local
Finallywe canachieve slightlymore granularcontrol byselectingaprecise time ona givendaywitha
local time zone variationusingtype="datetime-local".
<inputid="arrival-time"name="arrival-time "type="datetime-local">
Date andtime caveats

of 11
.
As withthe othernewinputtypes,if abrowserdoesn’trecognizethem, itwill simplydefaultbackto
type="text"
color
<inputid="color"name="color"type="color">
Inputtypessummary

of 11
Code used in this page
01.<div>
02.<h3>type="color"</h3>
03.<input type="color" name="color">
04.</div>
05.
06.<div>
07.<h3>type="date"</h3>
08.<input type="date" name="date">
09.</div>
10.
11.<div>
12.<h3>type="datetime"</h3>
13.<input type="datetime" name="datetime">
14.</div>
15.
16.<div>
17.<h3>type="datetime-local"</h3>
18.<input type="datetime-local" name="datetime-local">
19.</div>
20.
21.<div>
22.<h3>type="email"</h3>

of 11
23.<input type="email" name="email">
24.</div>
25.
26.<div>
27.<h3>type="month"</h3>
28.<input type="month" name="month">
29.</div>
30.
31.<div>
32.<h3>type="number"</h3>
33.<input type="number" name="number">
34.</div>
35.
36.<div>
37.<h3>type="range"</h3>
38.<input type="range" id="range" name="range">
39.<output for="range" id="output"></output>
40.</div>
41.
42.<div>
43.<h3>type="search"</h3>
44.<input type="search" name="search" results="5" autosave="saved-searches">
45.</div>
46.
47.<div>
48.<h3>type="tel"</h3>
49.<input type="tel" name="tel">
50.</div>
51.
52.<div>
53.<h3>type="time"</h3>
54.<input type="time" name="time">
55.</div>
56.
57.<div>
58.<h3>type="url"</h3>
59.<input type="url" name="url">
60.</div>
61.
62.<div>
63.<h3>type="week"</h3>
64.<input type="week" name="week">
65.</div>
66.
67.<div>
68.<input type="submit" value="Send">
69.</div>

of 11
01.<div>
02.<h3>Autocomplete</h3>
03.<input type="text" name="autocomplete" autocomplete="off">
04.</div>
05.
06.<div>
07.<h3>Autofocus</h3>
08.<input type="text" name="autofocus" autofocus>
09.</div>
10.
11.<div>
12.<h3>Formaction</h3>
13.<input type="submit" formaction="http://example.org/save" value="Save">
14.</div>
15.
16.<div>
17.<h3>Formenctype</h3>
18.<input type="submit" formenctype="application/x-www-form-urlencoded"
value="Save with enctype">

of 11
19.</div>
20.
21.<div>
22.<h3>Formmethod</h3>
23.<input type="submit" formmethod="POST" value="Send as POST">
24.</div>
25.
26.<div>
27.<h3>Formnovalidate</h3>
28.<p>Does the same thing as if the attribute novalidate had been applied to
the <form> element.</p>
29.<input type="submit" formnovalidate value="Don't validate">
30.</div>
31.
32.<div>
33.<h3>Formtarget</h3>
34.<input type="submit" formtarget="_blank" value="Post to new tab/window">
35.</div>
36.
37.<div>
38.<h3>list</h3>
39.<input type="text" name="characters" list="data-list">
40.<datalist id="data-list">
41.<option value="Hugo Reyes">
42.<option value="Jack Shephard">
43.<option value="James 'Sawyer' Ford">
44.<option value="John Locke">
45.<option value="Sayid Jarrah">
46.</datalist>
47.</div>
48.
49.<div>
50.<h3>max</h3>
51.<input type="range" max="95">
52.</div>
53.
54.<div>
55.<h3>min</h3>
56.<input type="range" min="2">
57.</div>
58.
59.<div>
60.<h3>multiple</h3>
61.<input type="file" multiple>
62.</div>
63.
64.<div>
65.<h3>readonly</h3>
66.<input type="text" readonly>
67.</div>
68.
69.<div>
70.<h3>required</h3>
71.<input type="text" name="required" required>

of 11
72.</div>
73.
74.<div>
75.<h3>Pattern (only allows uppercase letters)</h3>
76.<input type="text" pattern="[A-Z]*">
77.</div>
78.
79.<div>
80.<h3>Placeholder</h3>
81.<input type="text" name="placeholder" placeholder="Enter text here">
82.</div>
83.
84.<div>
85.<h3>Spellcheck</h3>
86.<input type="text" spellcheck="true">
87.</div>
88.
89.<div>
90.<h3>Step</h3>
91.<input type="number" step="5">
92.</div>
93.
94.<div>
96.</div>

of 11
01.<div>
02.<h3>Datalist</h3>
03.<input type="text" name="characters" list="data-list">
04.<datalist id="data-list">
05.<option value="Hugo Reyes">
06.<option value="Jack Shephard">
07.<option value="James 'Sawyer' Ford">
08.<option value="John Locke">
09.<option value="Sayid Jarrah">
10.</datalist>
11.</div>
12.
13.<div>
14.<h3>Keygen</h3>
15.<keygen name="key"></keygen>
16.</div>
17.
18.<div>
19.<h3>Meter</h3>
20.<meter min="0" max="10" value="7"></meter>
21.</div>
22.
23.<div>
24.<h3>Output</h3>
25.<p>If input type="range" and the oninput event on forms are supported in
your web browser, slide the range below to see the value in the output
element.</p>
26.<input type="range" id="range" name="range">
27.<output for="range" id="output"></output>
28.</div>

of 11
29.
30.<script>
31.(function () {
32.var theForm = document.getElementById("the-form");
33.if ("oninput" in theForm) {
34.theForm.addEventListener("input", function () {
35.output.value = range.value;
36.}, false);
37.}
38.})();
39.</script>
40.
41.<div>
42.<h3>Progress</h3>
43.<progress max="100" value="70">70%</progress>
44.</div>
45.
46.<div>
48.</div>

�ݺ�ߣ

Html5 forms input types

More Related Content

Html5 forms input types