得知互动

标题: html5新增的表单元素和属性实例解析 [打印本页]
作者: swmozowtfl    时间: 2015-7-12 16:09
标题: html5新增的表单元素和属性实例解析
本文以实例代码演示说明了html5新增的表单元素和属性，演示代码中包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel 类型文本框、url 类型文本框以及还有日期、时间类型的 input元素等等。
( E9 A% T( Q' h0 m$ T1 Y示例代码如下：* W) i) }  r# s. J: w
>
. L2 {. }2 q2 N9 v8 @7 E复制代码代码如下:<!doctype html>: R% P3 p% F3 g8 R# f
<meta charset=utf-8>  G8 @1 |; s" l/ v' _+ T
<title>html5 移动web开发指南</title>
( T! L) L* O$ Z1 t<style type=text/css>
; S+ n- V6 F# j, b9 f+ Ph1, h2, h3, h4, h5, h6& b; W# a& S- I% T6 D
{
/ g4 v" ]7 d" _. Y( G, J. ~text-align: center;' B" K4 J: ]8 [3 `
}
) C* p7 A( [4 }% ?; f3 j0 Y: cinput
, t( {7 Z+ Q! s' y. `/ k7 I{
& E) u4 k! C" D8 ~+ U- xwidth: 450px;9 f$ F" X" Y* C- ^7 X4 G0 \$ W+ u
}- k0 e$ X2 y) u5 H+ j8 ?
input[type=range]
# p. o; g2 [* b* c" L/ M{
( h6 s  V% r- w2 [% B7 D+ b8 E8 Z. }6 `-webkit-appearance: none !important;
' r, j. {# X; D2 o- e-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset,
2 g2 J9 e! c$ c' D6 Y0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset,
0 R: {: e3 C6 T5 |0 0px 1px rgba(0, 0, 0, 0.6) inset;
: u. X) }- B# v4 }: Kmargin-top: 2px;
+ `1 Q% u6 @. O/ I8 abackground-color: #272728;
, X( L1 u6 Z/ i! d8 Xborder-radius: 15px;
* ]; z3 e8 T. @  S& t8 Z+ ywidth: 400px;
/ f- R: y0 R+ H! i}
4 R* l. b! m/ s/ |) P/*-webkit-slider-thumb:设置上面滑块的样式*/
5 _, Y. p, ^) j  A6 \8 rinput[type=range]::-webkit-slider-thumb. H" A4 K" q. I. U/ u
{; Q* J2 C6 O9 h, {% S9 |
-webkit-appearance: none !important;# v! o/ e6 ^7 }
cursor: default;
- |1 m8 I! t/ ^$ O# ktop: 1px;; E% l4 o" Z3 s. K3 a: G  k
height: 9px;* J* Q; g3 ?; O' U( b9 X2 Q
width: 20px;
+ c* J- F8 T) G$ fbackground: none repeat scroll 0 0 #777;3 [& E, n- U# D/ A- d4 p0 P
border-radius: 15px;
# R6 G( c2 r6 s9 D- I-webkit-box-shadow: 0 -1px 1px black inset;" M& ~! v. h& M9 P3 t" X: _$ |
}
. K2 B# D4 V$ h( f- S  J</style>. l# Z1 E' ?8 U) J& `
>
) U5 `0 t6 v1 w<header>0 x- Q$ @$ k, |1 z! t& o
<section>8 [9 c4 n+ d# A7 O) \% l
<h1>
8 O( }( n  K& B- L; I% O& Nhtml5 移动web开发指南</h1>
+ W: m, R: K* a" z) s</section>2 X1 k8 h4 k3 v# L: @' c
</header>8 ]$ C& D6 c4 s2 r* @5 U, S
<fieldset>
6 k* y  I4 a: n# F' S0 M+ E<legend>html5 新元素--表单元素</legend>
& p) C$ G( z9 h0 j( I2 L0 S3 W6 T<section>  f+ |4 C. z1 w1 U
<pre> placeholder 属性：
* E- G. q" b0 G一般用在文本框上
8 S; \# W  z. l  I其主要作用是当文本框处于未输入状态并且内容为空时给文本框的提示内容
1 Y0 d: b: o9 s! v5 @2 l效果：1 f7 i% o2 D5 o; d/ H
当文本框获取焦点时，提示信息自动清空，失去焦点且未输入内容时，提示信息又自动出现" K% P( y3 J/ a; Q7 C5 Q
省去传统的文本框需要借助 onfocel 和 onblur 事件才能实现的效果  j. u* t% ?# ]3 g$ ~, E
(兼容大部分的pc浏览器和mobile浏览器，只能说科技确实进步了)1 g7 D9 l" z3 e  M0 E8 I9 k+ @: [
示例：<input type=text placeholder=我是 placeholder,是用来起提示作用>
' \* \8 V" L) s$ P/ ^- M* w7 A</pre>
/ X/ D* P0 ?8 I( s0 E. M4 J</section>8 X& _% p8 Z" J! _2 q0 r& Z
<section>  {6 k' I8 w+ Y) c: G8 q
<pre> autofocus 属性：6 D9 z# G. i) J2 p, n5 v
指定控件自动获取焦点，需要注意的是一个html页面上只能有一个控件具有改属性
6 t% ]' Q7 E0 d) h$ g示例：<input type=text autofocus=true placeholder=我设置了 autofocus自动获取焦点属性>
# V8 a# `  J* x</pre>7 P/ J) I/ \" Q: {
</section>
# A& p/ Q1 q$ Z8 X% Y9 k<section># }* ^1 w* M) X' p. |
<pre> list 和 datalist 元素：
% m9 ?9 m- Y, L1 Ilist 元素的主要作用是提示文本框输入，提示的数据源则由 datalist 提供
5 R# V7 A7 {3 o1 k: H: U目前 list 和 datalist 元素只有 opera 浏览器支持，甚至没有任何一款移动浏览器支持该特性9 b7 q$ S0 q4 K. F) ^. O
示例：<input type=text placeholder=我添加了 list 属性 和 datalist 元素，可没多少人懂我 list=mydatalist>- `" Y* e  B/ w9 P  h) c
<datalist id=mydatalist>
3 Y' l! L: y% S) |# L<option label=1>我是datalist1</option># _' ?5 ^; S" y* Z5 z- {
<option label=2>我是datalist2</option>
/ ?- y" u; b+ `<option label=3>我是datalist3</option>
' B" k) y8 L3 S: B. q- S<option label=4>我是datalist4</option>
' [1 L3 |. p" Z5 {</datalist>
3 c& @/ z9 f* ~4 W3 y</pre>. |2 h1 _0 X) p: R6 v* d
</section>
1 k2 N7 A$ \5 S<section>5 f4 m2 \6 f  M/ j# H" y; X
<pre> search 类型文本框：& @/ Y1 R, Y/ ~2 v0 J! P
主要用来搜索关键词的文本框
1 L' r3 _0 T; Y2 _  i该文本框和普通文本框唯一区别，在 safari 和 chrome 浏览器下，文本框的外观为圆角9 q/ |/ W9 K5 X6 |
示例：<input type=search placeholder=我是search 类型文本框>
/ m) y& f9 \6 |6 S" _+ i6 F</pre>' Q7 ?4 z) ~  c
</section>
7 e( v7 q" R& U! [' M7 z* p<section>/ E8 s6 r7 G4 a  O5 G
<pre> email 类型文本框：$ E: O) c0 X0 x1 m9 A$ t  Y; m6 _
是一个可以指定电子邮件内容的文本框，通常用在输入e-mail地址的输入文本框上+ [( m% i5 ^9 i4 P4 W4 u$ d. @
这种文本框和普通文本框在外观上几乎一样，但实际上在safari移动版浏览器下是有区别的6 n* ~: |9 e' }' U6 H
其键盘会根据文本框类型不同而显示相对应的键盘. z2 f, s1 Q; O$ m3 ~- m' x/ P
示例：<input type=email placeholder=我是 email 类型文本框>: E" w* b% _* Y# D! A
</pre>: C& l5 r$ o( A* T2 ^
</section>
" r: s/ l' @" m: e( F<section>
( w- P! d% K4 z. j* d<pre> number 类型文本框：8 l, }' g9 A/ W
是一种用于输入数字的文本框类型
5 ^* T$ q  ?- f# @8 V它可以配合 min、max、及step属性使用( O# K$ Y# j/ v( V# D
示例：<input type=number value=0 min=0 max=10 step=1>9 b$ Z0 g/ F8 D) K& ?( R) b
</pre>) |4 d2 W! [( `. P
</section>
3 d  i" Y2 E- K! `<section>
+ a8 q5 u$ U" @: j<pre> range 类型文本框：" `# ~7 R  t" p9 d. O) w0 t! `
是一种数值范围输入文本框类型，提供的是一种滑动输入方式
" g! T4 b4 T0 p, y& b' x. F/ T/ b5 G需要配合 min、max、range等属性的使用- t) B: d8 Q  c; E$ x% E
示例：<input type=range value=1 min=0 max=100 step=1>
, F6 W8 l# ^. f; E7 E</pre>
/ _# H7 ~" s8 i1 ~</section>
, A. {) {# z8 P) i, Z& M. Y2 b<section>
6 u, a2 _# z# Y<pre> tel 类型文本框：/ o: g2 R/ Z" y$ Y/ T: V. g" Z
是一种供用户输入电话号码的文本框类型0 \$ C: I9 g0 M' q: z4 k: e
这种文本框在移动版浏览器下，其键盘会根据文本框类型不同而显示相对应的键盘' h' @/ j% ]  A* M
示例：<input type=tel placeholder=我是 tel 类型文本框>
* C$ `/ K5 g- u</pre>
* c  j0 o) W5 H, X4 ~) t</section>
9 a- j6 e) Z; ^6 O5 I<section>
$ L% j& q- i& ?% [' ~! H<pre> url 类型文本框：9 q6 P$ \# L! R9 g5 ~: E
是一种供用户输入url地址的文本框类型& t. C3 @! H' M+ n' C
这种文本框在移动版浏览器下，其键盘会根据文本框类型不同而显示相对应的键盘4 c3 `7 @" n2 G1 k3 Q
示例：<input type=url placeholder=我是 url 类型文本框>5 p6 T8 \! K) d! C8 P
</pre>$ L- p, i, `& K3 I1 B7 r4 v1 v
</section>/ s! F& j. e8 \5 Q( J
<section>
! ?! {- ]9 h, J5 A9 Q- @<pre> 在html5规范中，除了新增表单元素外，还有日期、时间类型的 input元素; x2 |, T8 u* E5 M7 w! G0 u% m* @2 D
但这些类型都没有得到广泛的支持
9 c3 }( V4 i, x' ~" O7 B/ H6 v具体如下：6 ?3 Z, O3 V9 m2 l
日期和时间(含时区)：
6 @; w3 Q* h4 p<input type=datetime>
8 z% G/ i, Q6 e8 F" v日期和时间(不含时区)：. G9 w) o2 t. q
<input type=datetime-local>* x  d! b& l/ W' d) b
时间选择器文本框：/ m0 ^% q' c5 {5 q) B- {8 e7 t' E
<input type=time>" Y( r9 i, C, p6 N% X; j# |
日期选择器文本框：4 D6 J3 A) o/ J, K+ x. n
<input type=date>2 W1 _$ d0 n3 q! W! x- F% s: W  j4 v
年的周号选择器文本框：
1 D) o: j7 k3 m<input type=week>
; ]0 m/ _' \! J) k  a月份选择器文本框：
4 R0 O: L* M0 h, g2 Y<input type=month>* c8 K* V& x. n' ^- k/ H5 e
</pre>8 X1 d5 i9 @0 {% y1 r4 I
</section>+ G% s0 ]) k; e9 Q, l
</article>
4 K/ M- Q7 Z. @- I8 [( B, n- M4 u</fieldset>! ?, V, X0 ]7 B8 Z, P& S5 \
<footer>
/ g) o4 K& V# j( Z$ p6 J5 e' l4 y<section>! t0 `3 n, t" V! G" G) g: \+ U
<h5>
; \2 G3 m+ ~3 F9 g3 k- c* Ahtml5 新元素--表单元素6 L2 m+ g! d" U: c& q& Y) b0 b
</h5>3 R6 a, ^4 H8 |& h# l8 L8 h, g
</section>
6 Z( ]/ r) E) x5 j7 ]* T' C2 t</footer>
5 a3 p1 n+ Y4 v* K2 z  Q</html>  q5 ]9 p$ f8 n" `" ^
7 y6 C' g* i3 i* e
更多网页制作信息请查看： 网页制作
作者: wwdu926a    时间: 2015-10-6 15:43
嘿...反了反了,,,,
作者: tohme    时间: 2015-10-6 15:43
卧虎藏龙里面半天云的人物个性。由此而言，作者是性格是完善的，想必经历过家庭的其 乐融融，也经历过种种人伦惨剧吧，把作者的创作潜质激发的淋漓尽致。
作者: seazvyt    时间: 2015-10-6 15:43
这个程序有没有漏洞啊
作者: gevaemaidovef    时间: 2015-10-6 15:43
怎么这么跟别人不一样类~
作者: wwzcdenleclv    时间: 2016-1-4 15:20
我不是来为楼主呐喊加油的，也不是对楼主进行围堵攻击的。
作者: tohme    时间: 2016-1-4 15:21
做为新人！在这里不敢大声说话！送完经验我就走！
作者: bqtklouu    时间: 2016-1-4 15:21
真的 好久都没有这么笑了~ 好开心哦
作者: buingeEvineus    时间: 2016-1-4 15:22
命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。



欢迎光临 得知互动 (https://bbs.dezhifl.com/) Powered by Discuz! X5.0