24虚拟、数科、智科实验课作业

注意

点击代码块，可使用方向键左右移动查看代码
注释部分不需要敲
推荐在电脑上分屏敲，一半浏览器、一半Hbuilder~
此为演示代码，如果想进一步锻炼代码能力，可以根据代码内注释自己设计页面
提交运行后截图

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!--
  表单设计要点：
  （1）表单制作涉及的标签
        form：定义表单
        input：定义表单包含的元素，包括文本框、单选按钮、复选框、列表框、下拉框、文件上传域、日期选择、电子邮箱、提交按钮、重置按钮等
        fieldset+legend：在表单元素需要分组时使用
        form标签可以内嵌按钮标签 button
  （2）form标签的主要属性有：
        action（用于指定处理本表单的程序，单击 提交 按钮会向服务器提交表单数据）
        method（提交表单所采用的方式，取值为get或post）
        enctype（当表单含有文件上传域时使用，此时 enctype="multipart/form-data"，method="post"）
  1）使用form, fieldset, 不同类型的输入框，
     其中 日期选择，电子邮箱 是html5新增输入类型
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>form表单的使用</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend align="center">个人资料</legend>
        <p>姓名：<input type="text" name="username" required/></p>
        <p>电子邮箱：<input type="email" id="email" required/></p>
        <p>性别：<input type="radio" name="sex" value="男"  checked/>男
               <input type="radio" name="sex" value="女"/>女
        </p>
        <p>出生日期：<input type="date" name="birth"/></p>
        <p>主要经历：<textarea name="experience" rows="3" cols="20"></textarea></p>
        <p>兴趣爱好：
            <input type="checkbox" name="fans" value="01"/>唱歌
            <input type="checkbox" name="fans" value="02"/>打球
            <input type="checkbox" name="fans" value="03"/>下棋
            <input type="checkbox" name="fans" value="04"/>上网
            <input type="checkbox" name="fans" value="05"/>购物
        </p>
    </fieldset>
    <fieldset>
        <legend align="center">专业与课程</legend>
        课程名：<select name="course">
            <option>软件工程</option>
            <option selected>计算机应用</option>
            <option>办公软件</option>
            <option>数据库应用基础</option>
            <option>C语言</option>
            <option>网页设计</option>
        </select>
        &nbsp;&nbsp;工具软件：<input list="software">
        <datalist id="software">
            <option value="1">Kingsoft WPS</option>
            <option value="2">MS Office</option>
            <option value="3">Visio</option>
            <option value="4">ToDesk</option>
            <option value="5">腾讯会议</option>
        </datalist>
    </fieldset>
    <p>文件上传：
        <input type="file" name="fileUpload" id="fileUpload"/>
    </p>
    <p>
        <input type="submit" value="提交"/> <!--<button type="submit">提交</button>-->
        <input type="reset" value="重填"/>
        <button onclick=alert("用于执行客户端脚本。")>执行客户端脚本</button>
    </p>
</form>
</body>
</html>