6-注册页面案例

6.1 案例需求

6.2 技术分析

1.表单标签【重点】

  • 通过form来定义
1
2
3
<form action="http://www.baidu.com" method="post">
    ...
</form>

常用属性

​ action:提交路径,默认是当前页面,#

​ method:提交方式,常用的是get和post. 默认就是get

get和post区别

1
2
3
1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
2. get方式相对不安全, post方式相当安全一些
3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的

2.form的常见子标签

​ input:输入域, 通过type属性来指定类型

​ select :选择列表

​ textarea：文本域

2.1input输入类型
1
<input type="xxx"/>

type属性,类型是由属性（type）定义的

  • text:文本输入框
  • password:密码域
  • submit：提交按钮
  • reset：重置按钮
  • button:空白按钮
  • radio:单选框
  • checkbox:复选框
  • hidden:隐藏字段
  • file:文件
2.2select :选择菜单
1
2
3
<select name="">
    <option value="">显示的内容</option>
</select>
  • option：选择菜单的选项

注意：

  • name在select里面指定
  • value在option里面指定
  • option定义在select里面
2.3 textarea:文本域
1
<textarea rows="20" cols="30" name="introduce"></textarea>

属性：

  • cols列
  • rows:行

3.通用属性

1.name

  • 作为单选和多选框的分组
  • 作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性

2.value

  • 给按钮起名字
  • 设置提交到服务器的值 name=value

4.设置默认值

  • text,password:通过value属性
1
用户名: <input type="text" name="username" value="zs"/>
  • radio checkbox:通过checked属性
1
2
性别: <input type="radio" name="sex" value="1"/>男
      <input type="radio" name="sex" value="0" checked="checked" />女
  • select :在option上通过selected属性
1
2
3
4
5
籍贯: <select name="address">
        <option value="sz">深圳</option>
        <option value="bj">北京</option>
        <option value="sh" selected="selected">上海</option>
    </select><br/>
  • textarea:直接在标签体中写 
1
自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>

3.思路分析

4.代码实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--一, 表单标签: 作用提交用户输入的数据的(收集用户输入的信息)
            action属性: 提交的路径(写远程的,也可以写本地的页面)

            method属性: 指定的提交的方式  get(get方式提交,默认) post(post方式提交)
                get和post方式区别:
                        1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
                        2. get方式相对不安全, post方式相当安全一些
                        3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的


            name属性作用: 1. 作为单选,复选的分组
                          2. 作为key把数据提交(如果你想把数据提交, name一定要设置)
            value属性作用: 1,给按钮取名字
                          2.作为值提交到服务器


    -->

    <form action="#" method="get">
        用户名: <input type="text" name="username"> <br>
        密  码: <input type="password" name="pwd"> <br>
        性  别: <input type="radio" name="sex" value="0" >男 <input type="radio" name="sex" value="1"> 女 <br>
        爱  好: <input type="checkbox" name="hobby" value="抽烟">抽烟
                <input type="checkbox" name="hobby" value="喝酒">喝酒
                <input type="checkbox" name="hobby" value="烫头">烫头 <br>
        头  像: <input type="file" name="head_img"> <br>
        籍  贯: <select name="province" id="">
                    <option value="1">广东省</option>
                    <option value="1">广西省</option>
                    <option value="1">湖北省</option>
                    <option value="1">湖南省</option>
                </select><br>

        自我介绍: <br>
            <textarea name="introduce" cols="30" rows="5"></textarea> <br>

        <input type="submit" value="注册按钮">
    </form>
</body>
</html>