表单应用与用户数据收集实践教程.pdfVIP

使用form表单，收集用户信息数据，表单中，使用正确的type类型包括、、邮箱、性

别、；页面效果如下：

训练目标：

熟练使用表单的各种类型收集不同的用户数据；

训练提示：

1：form表单中的不同属性值

2：input中的不同type类型代表的含义

参考方案：

用户登录表单

训练步骤：

1：在一个目录中创建index.html文件；

2：根据效果图分析布局，并编写HTML结构和CSS样式

3：使用form表单存放不同的用户数据信息

4：根据提交的数据类型及服务器地址，设置不同的form表单属性

举一反三

在表单中添加用户头像及用户简介，注意，当设置用户头像时，就有文件上传，form的属

性设置是不一样的；页面效果如下：

Usetheformformtocollectuserinformationdata.Intheform,usethecorrecttypeincluding

name,phonenumber,emailaddress,gender,andage;thepageeffectisasfollows:

Trainingobjectives:

Proficientinusingvarioustypesofformstocollectdifferentuser

data;

TrainingTips:

1:Differentattributevaluesinform2:The

meaningsofdifferenttypesininput

Referencen:

Userloginregistration

form

Trainingsteps:

1:Createtheindex.htmlfileinadirectory;2:Analyzethelayout

accordingtotherenderings,andwritetheHTMLstructureandCSS

style3:Usetheformtostoredifferentuserdatainformation4:Set

differentformattributesaccordingtothesubmitteddatatypeand

serveraddress

举一反三

Addtheuseravataranduserprofiletotheform.Notethatwhensettingtheuseravatar,afile

willbeuploaded,andtheattributesettingsoftheformaredifferent;thepageeffectisasfollows: