[交流] 使用html表单元素form创建一个常用的注册框 ...

小七 于 5-27 17:59 发表在  建站交流[高级] 6608
      表单元素form在css教程里面我们也有介绍过,当时主要侧重对表单进行样式的修饰,这一节在html的角度再次讲解一遍,我们还是拿一个常规的注册页面来做案例,在常用的大众化网页注册页面,一般有用户名、密码、单选、复选,提交按钮等等几个元素,下面案例演示几个常用的表单元素,分别是:- b' ?! t2 c6 z: X6 e. b2 _( L/ D' t6 b8 R6 O5 {( a$ v7 h" H. {1 V0 ]3 _& t3 X. ]
& |% M' r' y6 T- [. }3 h9 S9 ~# [* L& y: C* Q8 i% s
      1)input标签,这是最重要的一个表单元素,根据不同的type属性有多个形态:6 f& ~0 {) A( M) }0 v2 K- P) q; Q. b9 h1 S3 n
            text,定义常规文本输入,案例中的用户名和密码就是这种;2 s( J4 Y( N" q6 f- J+ _
            radio,定义单选按钮,案例中的性别是单选;! p4 F) G; }( Y# k  U/ Q
            checkbox,定义复选框,案例中的爱好是复选,可以选择多个爱好;  F6 g7 L; {3 G  v8 ~/ i0 }( l+ h) z. f( Y5 e9 x7 `& X
            submit,定义提交按钮,这个很好理解,末尾的按钮;
搜外七街 www.SEOwhy7.com ' x: ?% D% B4 F; W0 I) u1 O' z7 }4 k+ P# k1 y- s- z
      2)textarea标签,定义多行的文本输入控件,这个也比较好理解。/ Z6 z) P9 {) a2 Z5 ?: ^  N  G% |
% _0 h! J, P5 w, S- `% a6 l5 ?& a  Q! P
      完整测试代码如下:- E) V; E- ~% g# E* n# i6 W% t# H7 ^, i; V' ~' {6 y( l7 D* w
, Y) ?4 m1 ]. ?, s" ~8 l6 T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. S1 C6 F& ~  T5 r# I  Z& c- ?- u% z5 u$ R0 \
<html xmlns="http://www.w3.org/1999/xhtml">' r4 ^9 s9 y( C/ H$ S: m  v0 o6 }
<head>0 w9 o+ d# ~! e( i7 X
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />" I4 h5 e# _9 \* M# @! G- B/ {7 T" t5 g" y0 f% S. r+ V. `( F
<title>无标题文档</title>2 A5 y! Y$ p# ]+ S# q2 I" z# j' W% Q  y) S5 s0 \. f7 t1 _
</head>! V6 }. L7 J8 T7 {9 h" s5 g" i$ u: e; H$ f: S2 ^" q% D
% d( n9 h" D" R3 B- [. a; d+ q. q, r+ d/ H# {8 C: D4 \+ w  |
<body>2 B( o% O# f7 c+ y) A  c/ {) z' [' g) D. q$ K( m! C- j' G- v
<form id="form1" name="form1" method="post" action="reg.php">- k3 S$ a1 ]) [0 s& T# [$ I; l( [+ x/ b1 A, q  ]  }; U0 l
  <label>用户名;  @8 `- g& v+ C8 X+ q+ z$ |1 U6 Y4 ]" v8 k, T+ K% \
  <input type="text" name="textfield" />; u- N9 L' x6 Y% F+ U1 V: {) k# k* O- \# B7 o3 q9 Q' l
  </label>* z$ L+ I& b  |% i+ ?; s# W! h0 ?! p8 |" N% q
  <p>9 c0 x/ Q2 ~/ H) V5 g; ]7 _
    <label>密码:! D8 y4 p; ~0 d# a* f5 W! X: q2 Z) G4 i/ h$ `' C; _
    <input type="text" name="textfield2" />1 r' ?# G& i: E3 z, Z# L1 M! ^5 o- l" l% M9 [4 b4 i$ q2 w3 }
    </label># n* v# b9 y$ y* F* Y2 x1 g, r" R2 F
  </p>" Y1 t0 z4 ?; X& }" x9 T8 W1 q- w& l+ G. B) S
  <p>
搜外七街 www.seowhy7.com   <label>- V/ ]$ x. X  e, B1 ]9 v, v7 w+ R
    性别:" T% [3 h( ~' X8 \! o% @+ t7 h
      <input type="radio" name="性别" value="男" />4 M1 h2 y/ s! o0 L- I5 Q  V; \6 K' u
      男
搜外七街 www.seowhy7.com       <input type="radio" name="性别" value="女" />0 Z1 }6 s# D' i' n5 [: Z5 P/ x7 V, |2 r
      女$ C; C5 J; Y4 K& K  `5 G  m/ S- x% c5 L) u  n
  </label>2 n* |, @( {* x: s3 U9 H# n& K3 {$ b
  </p>1 k! [/ u6 V4 Q& B" I, i
    <p>
搜外七街 www.seowhy7.com         爱好:* A9 y' y; F" z) _  n4 D- {; P7 Y
      <label>8 a4 n' q1 f0 p1 }2 k6 q7 }; I( l; w- W8 L
      <input type="checkbox" name="checkbox" value="checkbox" />5 j$ U) T0 Z4 M( g, ?) Q9 Q
      语文
搜外七街 www.seowhy7.com       <input type="checkbox" name="checkbox" value="checkbox" />* ~% [- [  g+ a2 l3 ~0 V1 N) j5 q& s" S1 h& n) F9 _& s* h( o
      数学. _% v8 e& D4 _0 P! \6 [7 S$ K, P/ s/ x0 y
          <input type="checkbox" name="checkbox" value="checkbox" />& @) U  i0 c9 ?' p* N  o1 n- z9 r& X# |% V: J
      物理
搜外七街 www.seowhy7.com           <input type="checkbox" name="checkbox" value="checkbox" />, s; J: w; l9 }. @/ @; a, F9 ^% G( d9 P
      化学7 |8 C- @5 Z' }2 X- s; z2 @6 u* V, P: P2 U9 }* {! }
     </label>
搜外七街 www.seowhy7.com     </p>3 n( W1 ^2 O- q. s- p) Y; R: E/ R' J; J, `: H- e* X& ~3 I' ^; }6 F% H8 J
    <p>; H. k3 `7 Z  \; M7 i: V# x6 e3 @. `" d7 E" S* w8 s
      <label>城市:0 `2 T4 v* `0 f; F* b, c; z8 y8 O6 Q
      <select name="select">" K# d3 O  m2 L5 N" n" n
        <option value="北京">1</option>1 I0 n, ~! ~# J5 D2 G4 q- a) h3 B) d) g! G, M0 J* Q3 X8 z, S  |
        <option value="上海">2</option>7 R, F! U, [0 g% b, j; B9 f* h) g& d" ?0 E- \: }  o& q& B( G
        <option value="深圳">3</option># b: e. O- {$ [$ g( q: U/ t$ N* ~3 r  g$ v# {  a, ^' [( G8 w
      </select>. Q, B+ O; ~2 A9 f' {6 {( r: J  z) j8 M' Z. j
      </label>: p6 ^8 C: U, S+ u0 p! k# B8 s# U& u; c% r! z$ m3 z  ?( Q* e, f& B; Z
    </p>% `: z1 p# `- W) w  M& k% s$ w' ^
    <p>
搜外七街 www.seowhy7.com       <label>备注:6 n, y4 f7 G: A, k) ^5 V  Q, @- r' N
      <textarea name="textarea"></textarea>" }6 ~$ u# R1 X3 v  Y+ w' ^& j7 I' _* }+ w+ Z1 W5 H/ S6 h" l' b: I. m1 b- A
      </label>/ ?! O6 s" {) Z' u; m/ U2 K: e0 d8 \: @2 {
    </p>6 s& \. G: W/ h' _& Z3 b: t& y( r. p2 K# }( ^* i
    <p>  [" g, V6 o" t: W! E8 k* z+ Q4 b8 c/ T
      <label>( Y* c/ H: b& W: q% [6 {/ K1 t: G8 w5 f' ?: T9 S  \, }$ p
      <input type="submit" name="Submit" value="提交" />3 f. G/ t2 R" P4 o; v7 o' a4 V7 }" I# w
      </label>, f, G/ u" |. ^" H/ o2 s' M
    </p>. {$ D, n* z( ?5 u  W6 e, a$ Q. a2 u# Q& L4 C! I; w0 F' S  F- L' b7 ^: U+ j( _6 `# o, p3 l
</form>9 ], [0 B1 |- B0 S0 s7 _) T3 ^. O8 D6 X# f3 K2 ^4 d2 j! w% b: e. c. W
</body>. ]& X8 A9 q- S( J/ c# i0 N! k, m+ t9 Q7 [' P0 T8 |, @
</html>* m' m0 ?3 ]2 o' C3 o1 F& c/ I' X6 J4 P$ W& b* b- [3 }. A8 x- G6 u( s& B, ^( e
+ I/ X& o) `; i; t7 D7 Z9 J% k7 Z+ L6 P/ S0 T0 R
- U2 h2 |: {7 i- B0 K# S3 B: a7 J
      可以看出,这是一个典型的注册框,没有添加css修饰。有几个需要说明的地方:/ C0 b+ d4 }# ?+ q2 I2 K: V1 A7 A+ |, L3 y8 R
5 ~: j4 b6 t' j+ ^/ D
      1)form里面有name和id两个属性,其中name很好理解,是当前表单的名称,叫什么,在同一个html文档中,name可以重复;id是当前表单的唯一标识,在同一个html文档中,id不能重复,id相当于各自的编号,身份证的作用,是唯一的。form里面的name可以理解为一个分组,一个组别里面可以有多个id,也就是很多成员,这样就非常好记忆,也不会出错。# Y( D! M7 e  E) J5 }; K" \9 d4 T# \! k5 c: l; X
' M! `7 N' @- I* l1 |! Z1 t* |$ d& j! I! c$ r1 M1 m) s/ I6 y8 Q4 J/ f
      2)method是发送表单数据的方式,共有两种方法:post和get,get是从服务器上获取数据,post是向服务器传送数据。/ ~/ Z" N' L6 m5 Q7 t) r( v+ w9 d6 P7 U1 H6 W' R
2 e: p4 }8 [! B+ @1 O% T# Y1 U  a9 x+ V. T" f# J8 c4 a7 y! r, j' W
      3)action属性是规定提交表单的时候,表单数据会提交到哪里去,案例中是提交到reg.php这个页面。& y, O: [0 Z# w2 w: F* H% D4 G9 r0 E7 i  a5 r/ p1 `- M3 ]  _8 [$ u
. R9 k$ V; V- u; Z4 A
      4)下拉列表菜单select里面的option选项我们案例里面写的是1,2,3,分别对应的值是北京、上海、深圳,这是为了更加清晰的解释option的用法,当下拉框选择1的时候,下拉框的值“北京”就被选中了,发送到服务器的值就是北京,其实我们也可以直接在<option></option>之间写具体的值,也就是value可以不写,但是这么做不是很规范,毕竟<option></option>之间的文字只是对下拉按钮的说明而已。% Q& Z5 X# e  x0 z5 `6 |9 s( N; I* ]# B, a
7 P$ T! v' J  B) k; }: x. S- O  ^/ d9 m* A/ @
      5)单选框和复选框的value属性是必须要写的,对单选框来说,提交表单的时候,服务器接收到的数据是value的值;对复选框来说,提交表单的时候,服务器接收的数据是被选中的选框的值。
搜外七街 www.seowhy7.com ) ?; v2 f/ ?2 u! n3 H$ Y% ?: g2 A, V$ V) g
& N) c) D( p! N  F7 A. @' f6 d8 |& q2 W  N& ?* }0 b" i, B: b
/ X, K; F# E) c$ v% [/ b6 _4 U6 S% J# U( a" m5 v5 S0 j% a4 h+ F, l6 k! [& K0 H1 j
/ q& R, E! c6 q) t. V) ~* L5 G1 ]* f/ [
1 n% y$ l  b3 I' r8 U, n; Z- N% B. G7 y8 _5 H/ J! {$ @& K1 Q" g- Z! x
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 13 条优质的评论,通过实名认证可以查询更多优质的评论
  • 嘉和 Lv.7 SEO江东帆影 发表于 6-9 08:56
    代码学习很复杂啊,对于不懂的人来说真是一脸懵逼。。。

    评论 使用道具 举报

  • 楼主 管理员 发表于 6-9 12:40
    嘉和 发表于 2017-6-9 08:56
    搜外七街 www.seowhy7.com 代码学习很复杂啊,对于不懂的人来说真是一脸懵逼。。。
    - @% l: F- y' U9 @4 i% D& ?( m
    对SEO从业者来说,html是必须要会一点的,属于基本功* [6 s% _% w, x  y4 ?$ f* k* m% X. _/ Z9 i0 K

    评论 使用道具 举报

您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
七街事务:点击这里给我发消息
快速回复 返回顶部 返回列表