HTML之表单实战

目录

前言

一、总览图

 二、实现

三、完整代码


前言

看着好玩自学的,学了还没几天,这个实战样例自我感觉很丑,但是相信未来在我学习CSS 和JS之后我能做出好看的网页!

一、总览图

HTML之表单实战_第1张图片

提交之后:

HTML之表单实战_第2张图片 

 

 二、实现

第一部分

HTML之表单实战_第3张图片

1.首先就是一个h1的大标题,属性为居中然后就是一句名言

带学生生活质量调查表

  “在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。-----鲁迅


2.用fieldset设置一个表单领域,用来存储基本信息

用 legend双标签,写上基本信息

基本信息有账号密码,用input text 和 password实现

紧接着就是两个文本的输入,后面添加了重置按钮 input type设置为reset

再接着就是性别和出生日期

HTML之表单实战_第4张图片

单选输入,input radio 但男女只能选择一个,所以要在同一name下

而中性我设置了不可选择,也就是给 input加入 disabled属性

下拉选择出生日期,使用 select 双标签内部加上选择option,当然要多选的话可以在 select中加入multiple属性

    
只因本信息 账号
密码
1、您的姓名
2、您的联系方式(电话号码+86/邮箱)
3、您的性别
中性
4、您的出生日期

这就是第一个表格区域的内容


第二部分

HTML之表单实战_第5张图片

第二个区域我设置成了爱好调查第一步依然是下拉选择

接着是多行文本输入用textarea双标签

下面是一个多项选择,input type类型为 checkbox

旁边附图片用img双标签,在其中的src设置为图片路径,大小我设置的是50x50

接下来就是文件提交按钮input type类型为 file

和提交按钮 input type类型为submit

表单就完成了!

最后点击提交实现跳转到另一个网页

要在form里面修改属性

三、完整代码




    
    
    
    form_text


    

带学生生活质量调查表

  “在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。-----鲁迅


只因本信息 账号
密码
1、您的姓名
2、您的联系方式(电话号码+86/邮箱)
3、您的性别
中性
4、您的出生日期

爱好调查
1、您经常使用的App:
2、您对这个(些)App的建议是:
以下人物您更喜欢:
雷姆 艾米利亚 怠惰大罪司教

可恶!我就知道你要选那个!

以防万一请您提供能够证明此的材料

以上就是调查表的所有内容!
您可能需要以下帮助
联系我们 商务合作 加入我们

submit




    
    
    
    您已提交表单
    

您已提交表单

 

你可能感兴趣的:(HTML,html,前端)