返回列表 发新帖

html5新增的表单元素和属性实例解析

90.2k 8
swmozowtfl 发表于 2015-7-12 16:09:19|湖北 | 查看全部 阅读模式
本文以实例代码演示说明了html5新增的表单元素和属性,演示代码中包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel 类型文本框、url 类型文本框以及还有日期、时间类型的 input元素等等。7 O1 y% S9 u: j7 w
示例代码如下:- B( H8 X: X# F2 p
>5 S2 b0 n, Z) Y4 b$ Z$ F
复制代码代码如下:<!doctype html>2 ~$ s& r( R& @3 a/ H
<meta charset=utf-8>
& m" R, _' t9 k0 j( Z<title>html5 移动web开发指南</title>& u: p8 x: x3 c" s$ t7 _3 g
<style type=text/css>; `) A" u' o2 [
h1, h2, h3, h4, h5, h6' t6 ~/ v) J7 ^0 [. C0 R
{% E% w) y/ p9 m+ Y" {3 F  l
text-align: center;
3 z+ Q* k9 W, M% p( D  r: J& U}1 Y) ^; q* `9 p1 u
input
8 x2 W! \. u/ P, y{
7 {# [  O6 m  I6 M& ^+ t6 Ywidth: 450px;2 U) _3 P; b7 f: D) S4 c' L# b
}
7 |; X/ n' E- N% uinput[type=range]
( p  A/ r' N9 c6 E1 D7 s{: Q5 ?) V, b8 ~# X4 l
-webkit-appearance: none !important;
) ~0 q" V) k- e4 e, a3 H-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset,
' U& r* e5 x$ f! B+ J, Z9 ?: ~0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset,
/ o: N; f1 e3 Q+ @/ S: |; T3 |' J0 0px 1px rgba(0, 0, 0, 0.6) inset;
% R) R! `5 G7 O9 t3 [  jmargin-top: 2px;
8 B2 V* u9 A9 k/ d# M% ]  D+ H4 Qbackground-color: #272728;
4 d; X! ]2 Q: hborder-radius: 15px;# H( J3 u. t- m# F5 {& J1 V
width: 400px;. E2 T, ], N  m  d+ X7 H$ n1 b
}
1 x5 h0 D8 {* x3 r/*-webkit-slider-thumb:设置上面滑块的样式*/1 A/ d9 H* s5 B
input[type=range]::-webkit-slider-thumb6 r& M. y: E' V& y0 X
{
- U4 z- H/ r6 M& C; M1 P1 w-webkit-appearance: none !important;6 I) ~- l- x3 L" V
cursor: default;
0 a  Y+ ?* Y* D$ h0 {: ]8 vtop: 1px;
+ j% V* D& X& y/ _8 U: i* h; Pheight: 9px;
! N( }7 L; \! ~/ C0 o4 l7 mwidth: 20px;
! y6 y  X0 X# p: Nbackground: none repeat scroll 0 0 #777;
0 s+ E  J7 ~0 B, |" g$ {" ^' K5 g: _3 aborder-radius: 15px;0 c/ r5 j8 L# K  v$ o; Z
-webkit-box-shadow: 0 -1px 1px black inset;+ g6 y" k8 r. q1 i* Q
}
9 @; W6 N# W3 \, I3 x: t6 V2 i</style>/ X) N- s- h! ~1 Z  B
>; g$ y: \2 X" K
<header>
. k; p$ d. U6 D<section>; Y+ s, S/ {7 C/ @# @) o$ H! [
<h1>
% d; e2 d# U6 b3 c+ |html5 移动web开发指南</h1>3 [7 u/ f6 R* C4 x! J
</section>) ^* w: O& @3 I' A4 t) ?
</header>
8 i- A% E0 J4 H3 L; C% |0 Q, Q<fieldset>/ b* S0 K% g- R1 Y
<legend>html5 新元素--表单元素</legend>2 r/ ^: a( d' c: L6 m! l5 O
<section>% a) ?6 H6 S  ]/ |& R7 C4 ]1 `  M
<pre> placeholder 属性:
0 N* K% C4 b3 T& |1 z/ b一般用在文本框上8 d6 y, e! f- Z5 Y5 z+ T$ B( a
其主要作用是当文本框处于未输入状态并且内容为空时给文本框的提示内容/ n5 m4 P6 J3 a
效果:. g3 c6 q1 I4 L
当文本框获取焦点时,提示信息自动清空,失去焦点且未输入内容时,提示信息又自动出现
  Q2 D8 [3 k: M* d; A' i省去传统的文本框需要借助 onfocel 和 onblur 事件才能实现的效果1 ]0 J$ G/ B, R8 g
(兼容大部分的pc浏览器和mobile浏览器,只能说科技确实进步了)
( C& f: G. C: i9 |. s示例:<input type=text placeholder=我是 placeholder,是用来起提示作用>
$ X9 U$ d. p3 S6 e  B</pre>) B# n9 L9 q% _8 s( [! v; I
</section>
* {* s; ]! d1 W9 O  D& x1 o<section>
3 @0 W) f9 @+ g  d: K1 ^<pre> autofocus 属性:
2 l! u  v  B  F- n. r指定控件自动获取焦点,需要注意的是一个html页面上只能有一个控件具有改属性
, ]9 t- t' X& A# c2 `9 |示例:<input type=text autofocus=true placeholder=我设置了 autofocus自动获取焦点属性>  J, L  Z* a. Z; k4 T2 i5 K  o
</pre>" m% A- a- l9 `2 x- ]3 G# Q6 j
</section>) h. N# n% D/ {/ J: L
<section>6 |( L6 W0 G; p8 C
<pre> list 和 datalist 元素:' t% G% O8 K; ?: P
list 元素的主要作用是提示文本框输入,提示的数据源则由 datalist 提供
9 n5 Q/ j( L1 f目前 list 和 datalist 元素只有 opera 浏览器支持,甚至没有任何一款移动浏览器支持该特性
8 X9 ?1 i: G4 c6 d* C% S6 Z9 W示例:<input type=text placeholder=我添加了 list 属性 和 datalist 元素,可没多少人懂我 list=mydatalist>/ C  G5 Y: n- Q1 k. s* X, Y+ r
<datalist id=mydatalist>- F+ ~% Y" Q0 P1 A4 `% v2 H* ]
<option label=1>我是datalist1</option>
; o( e, t" U; q& C<option label=2>我是datalist2</option>
7 l$ s# Z: h2 `$ X# U: o<option label=3>我是datalist3</option>$ P. j! R. U2 |  ?& b0 A# Z2 S$ y
<option label=4>我是datalist4</option>' [( J: s: V' `+ W
</datalist>% _+ x. n: H* p& {7 {9 {# O
</pre>
# o# S$ f2 y9 s' b8 l/ G8 |5 H</section>5 Z4 H! L6 w8 r
<section>
$ k$ T( U* R# d9 _6 T, ?<pre> search 类型文本框:
0 p+ D* Y6 @) Z9 j. N主要用来搜索关键词的文本框
% Q4 ]4 C: r+ W1 a: Q0 s. O该文本框和普通文本框唯一区别,在 safari 和 chrome 浏览器下,文本框的外观为圆角
6 q8 B' z7 {, M2 x5 ]8 y9 j示例:<input type=search placeholder=我是search 类型文本框>
: n' ^7 u5 L9 I. A</pre>7 k$ V, Y! l2 l/ _- \+ f, f
</section>& z7 h9 N7 N) o* x) e
<section>8 U! |! n+ m+ K3 T% c
<pre> email 类型文本框:
* i+ e& T/ x. q1 {" I9 T是一个可以指定电子邮件内容的文本框,通常用在输入e-mail地址的输入文本框上5 J+ q1 U! Q1 _9 L
这种文本框和普通文本框在外观上几乎一样,但实际上在safari移动版浏览器下是有区别的
3 `  y2 e0 w  d  \4 b9 ?7 {其键盘会根据文本框类型不同而显示相对应的键盘
% J1 t: A( \/ [4 ]  b$ ]8 M( [示例:<input type=email placeholder=我是 email 类型文本框>1 M6 P  i, q; E: _0 T7 j
</pre>
* h, e. `1 u* }/ k/ B2 h- P0 c8 p</section>; i* Y+ m  w. N- s1 X
<section>
$ _; s# m9 A( e9 M<pre> number 类型文本框:
+ I7 e7 W1 A% V. t: z是一种用于输入数字的文本框类型
" H5 C; d2 A' O6 [3 Z它可以配合 min、max、及step属性使用& [1 l8 A( ]" [0 S7 n$ c
示例:<input type=number value=0 min=0 max=10 step=1>
2 q8 L; t( o' w1 v" ~</pre>% p" P) p, u2 O+ a. X/ x7 y1 U
</section>3 p- H% v5 W& u; R, ^1 u; E
<section>
, ~# H/ P; o$ b7 h! p+ ~0 m<pre> range 类型文本框:6 c/ `) q0 w3 e. V* C
是一种数值范围输入文本框类型,提供的是一种滑动输入方式) Z, ]- g/ p: T; W% f5 b
需要配合 min、max、range等属性的使用8 A3 W; K3 d4 b9 ?; \* l+ f' W
示例:<input type=range value=1 min=0 max=100 step=1>
1 |3 \3 b: [/ Z  n</pre>
) m  [" a/ K$ Z8 d</section>3 z! w2 d( n* U
<section>
, c6 f2 i" m6 I0 J& O: F( y4 g<pre> tel 类型文本框:
6 v7 X6 ~4 h' D" G1 s, g  B* J是一种供用户输入电话号码的文本框类型  W' e8 a/ c6 L# @8 Y7 \& f
这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘! V. a6 E- r: z3 S! V* B* ~" B
示例:<input type=tel placeholder=我是 tel 类型文本框>
; k0 m- m) R6 m; q* ?: L: b4 C</pre>6 d2 J$ u9 Q% b% L# H
</section>
# \6 U8 L1 i* @! H& R<section>( [: ^; y9 n7 T! T# y: \, k+ s
<pre> url 类型文本框:3 p% P& }- h% F) E3 ~
是一种供用户输入url地址的文本框类型2 `) m/ w& b% K2 [1 C
这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘
& i* L: h- P7 I$ o1 X, _9 v# B7 x示例:<input type=url placeholder=我是 url 类型文本框>1 m" a  ?, l+ G% g1 H* }
</pre>% o; ?" ^0 W* i
</section>! ~. I8 d% M- d! h2 q0 s& f8 I
<section>
% |* a' D& o* F6 F8 O* @<pre> 在html5规范中,除了新增表单元素外,还有日期、时间类型的 input元素
2 O4 A0 ?$ J3 p* X但这些类型都没有得到广泛的支持2 m' i+ K" N) b7 ]4 p; i- B: h
具体如下:2 c2 q7 j! A! F4 U* H% J
日期和时间(含时区):
% t* a+ D* E6 {' Q* W' n, j! A/ U<input type=datetime>+ U, Z7 h& r4 X- |3 w% o6 o4 O
日期和时间(不含时区):
0 W" y# W9 W; w& B! m3 L3 {<input type=datetime-local>- B8 h) D# H: Q+ `3 O
时间选择器文本框:
  V, _9 ?5 k: ]. Z6 x8 C, S! d+ Y+ i<input type=time>
* a, ]# j" U5 `- Q( E8 w4 x9 D日期选择器文本框:& M+ @6 f6 P% m# z( t7 P
<input type=date>& X& ]# y/ R  D3 ~# U  k, _9 K% y8 h
年的周号选择器文本框:
) o( ]* p9 s$ @5 z6 j/ R<input type=week>' d. p, N- G2 i9 f* s
月份选择器文本框:
  t. v  y: B0 l! y6 S2 D<input type=month>; \- k  s) Z' T7 B1 M3 _. m
</pre>3 z5 H4 C, E+ i  h- e
</section>3 x, @+ D: ?8 P3 W
</article>
+ s( z* z$ W( [7 E7 P, A</fieldset>- `6 l  ?2 r( C1 }" L# q
<footer>
$ t; U0 W' X4 ?+ W$ q<section>% t! _6 z) j, G; U+ S
<h5>
2 x# k4 }) {$ \7 ~html5 新元素--表单元素4 \+ d) F0 G3 V. j6 B
</h5>
6 k( Z2 V( V" u$ P  g% x</section>: Z1 X$ D! ~& H" g( h
</footer>
2 C# s! M/ b/ a# r7 r5 `</html>
1 ?5 w" t. I5 t. N9 \3 A( A
) d- b6 L7 x" u3 \5 [1 r更多网页制作信息请查看: 网页制作

回复|共 8 个

wwdu926a 发表于 2015-10-6 15:43:26|委内瑞拉 | 查看全部
嘿...反了反了,,,,
tohme 发表于 2015-10-6 15:43:32|俄罗斯 | 查看全部
卧虎藏龙里面半天云的人物个性。由此而言,作者是性格是完善的,想必经历过家庭的其 乐融融,也经历过种种人伦惨剧吧,把作者的创作潜质激发的淋漓尽致。
seazvyt 发表于 2015-10-6 15:43:52|亚太地区 | 查看全部
这个程序有没有漏洞啊
gevaemaidovef 发表于 2015-10-6 15:43:59|美国 | 查看全部
怎么这么跟别人不一样类~
wwzcdenleclv 发表于 2016-1-4 15:20:58|芬兰 | 查看全部
我不是来为楼主呐喊加油的,也不是对楼主进行围堵攻击的。
tohme 发表于 2016-1-4 15:21:25|山西 | 查看全部
做为新人!在这里不敢大声说话!送完经验我就走!
bqtklouu 发表于 2016-1-4 15:21:34|浙江 | 查看全部
真的 好久都没有这么笑了~ 好开心哦
buingeEvineus 发表于 2016-1-4 15:22:17|Reserved | 查看全部
命不能争,运可以造,弱者认命,强者抗命,能者求命,智者造命。

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 站长技术交流论坛|互联网技术交流平台|Ai技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表