HTML创建用户反馈表单

章中，将使用一个表单内的各种元素来开发一个简单网站的用户意见反馈页面。

反馈表单非常简单，通常包含三个部分，需要在页面上方给出标题，标题下方是正文部分，即表单元素，最下方是表单元素提交按钮。在设计这个页面时，需要把“用户注册”标题设置成H1大小，正文使用p来限制表单元素。

具体操作步骤如下。

（1）构建HTML页面

构建HTML页面，实现表单内容，在<body>标签中加入以下代码，代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示，可以看到创建了一个用户反馈表单，包含一个标题“用户注册”、“姓名”、“性别”、“年龄”、“联系电话”、“电子邮件”、“联系地址”、“意见反馈” 等输入框和“提交”按钮等。

举一反三

通过表单的学习，可以实现各种简单表单的设计、制作。参考所学知识，完成下图所示表单的设计。

我办app是焦作市委、市政府推出的2020年十大民生幸福工程之一，是面向广大市民的一站式“互联网+”城市服务云平台。焦我办app集政务服务、公共服务、便民服务于一体，整合了该市大数据平台、政务服务业务中台、公共信用信息平台、“企业纾困360”平台和人口库、法人库、电子证照库等政务信息化建设方方面面的成果。首批整合接入19个市直部门的数据端口，在公积金、社保、不动产和大厅预约叫号、一键挪车等领域推出了5大亮点服务，涵盖在线城市服务123项。而且，焦我办app融合全市政务服务和公共服务事项，运用大数据技术提升网上政务服务能力，满足人民群众办事需求，为市民生活提供全方位的民生保障。并在多个领域推出便民利企服务，真正实现“数据多跑路，群众少跑腿”，有需要的朋友快来下载看看了。

软件功能

1、在线办事：政务大厅预约叫号、水气暖报装、公积金提取。
2、信息查询：公积金、不动产、驾驶证、违章记录等个人信息直查。
3、全新界面：界面简洁但是容易使用，重要信息可以清晰获得。
4、附近线路：精确查找附近线路，自由切换乘车站点，轻松选择乘车站点。
5、车辆信息：还有几辆车、还有几站到实时掌握，缓解您等车焦虑，避免错过车辆。

焦我办防疫报备功能

市政务服务和大数据管理局落实拓展“焦我办”平台功能这一市重点民生实事又有新举措——助力我市疫情防控，“焦我办”APP新增防疫报备功能。
为积极应对国内外区域疫情形势及元旦、春节人员流动频繁等情况，有效做到防线前移、关口内置，提升我市常态化疫情防控能力，市政务服务和大数据管理局按照市疫情防控指挥部要求，依托大数据平台和政务业务中台，以焦作城市门户APP“焦我办”为载体，近日正式上线“防疫报备”模块，以方便省外来（返）焦人员、省内涉疫地区来（返）焦人员和我市出省返回人员落实“五个报备”。
1、“五个报备”是什么
按照我市疫情防控相关要求，所有省外来（返）焦人员、省内涉疫地区来（返）焦人员和我市出省返回人员均要提前进行线上报备。“五个报备”中，因公来焦的省外人员或省内涉疫地区人员，由接待单位提前完成线上报备；个人来焦出差、旅游的省外人员或省内涉疫地区人员，由个人进行报备，所入住的酒店宾馆、游玩的景区负责指导监督其完成线上报备；从省内涉疫地区、省外回焦返乡或来焦探亲访友的人员，由个人或接待亲友进行报备，居住地所在社区（村）负责广泛宣传和指导、督促；团队来焦旅游的省外人员或省内涉疫地区人员，由个人进行报备，所入住酒店宾馆、旅行社和景区负责指导监督其完成线上报备；需离焦出省的本市人员，在出发前由个人进行报备，所在单位或社区（村）负责指导监督其提前完成线上报备。上述人员中，因身体或未配备智能手机等原因无法完成个人报备的，由履行报备指导监督责任的相关单位代为报备。
2、如何进行线上报备
据了解，线上报备需在“焦我办”APP进行。相关人员可通过手机应用市场搜索“焦我办”，下载安装“焦我办”APP，在“我的”进行注册登记和人脸识别实名认证，然后点选首页“防疫报备”模块，阅读报备类型后点击“立即报备”，再选择自身符合的报备类型并如实填写个人情况，提交后即报备成功。
据悉，为统筹疫情防控和服务企业群众办事，市政务服务和大数据管理局充分发挥大数据优势，通过整合更多服务资源、打通更多政务数据，在“焦我办”APP推出了市政务服务大厅预约叫号、一键挪车、居住证快速核发、契税缴纳全流程网办、青年人才落户补贴申报等一系列功能，实现了“让数据多跑路、让群众少跑腿”，减少了疫情防控期间的人员接触，有效助力我市疫情防控。

焦我办app登录帮助

1、收不到验证码？
由于各运营商网络环境的问题，可能会造成延迟发送，因此请耐心等待即可，无需多次点击获取哦！如3分钟内未收到短信验证码，可通过意见反馈联系我们。
2、获取验证码时，提示“验证码次数已到上限”
点击一次验证码时，由于各运营商网络环境的问题可能会造成延迟，而实际已发送多次验证码！如确实多次点击已达上限的，可以联系我们重置发送次数。
3、密码提示规则不符？
目前账号密码长度需在8-16位，且必须包含数字、大写字母、小写字母、常用符号中的三个条件。
4、账号密码忘记了怎么办？
您可以点击登录页面中的“忘记密码”，根据您的实际情况选择找回密码的方式进行找回。
5、忘记手势密码如何找回？
您可在登录界面需输入手势密码的下方，点击“重新登录”通过账号密码登录即可，登录成功后，可直接重新设置新的手势密码/指纹密码；如果不记得账号密码的话，也可通过登录界面右下角的“忘记密码”进行找回。

转载下载地址：http://www.32r.com/app/116700.html

1-HTML基础

第1章基础语法

html是超文本标记语言
<head>,<title>标签里的内容不会在网页文档中显示
<hr/>标签是水平线，不需要成对出现
注释代码：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

第2章文章段落

2.1 文档声明和META标签

<html>,<body>,<head>标签是html文档结构标签，<!DOCTYPE HTML>不属于html标签，它用于定义文档类型

网页中不能正常显示中文，出现乱码现象，使用meta标签设置编码格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一个网页</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起来学习html标记语言
</body>
</html>

3.如果想在html页面中显示空格，使用

标题标签：<h1></h1>~<h6></h6>

段落标签：

align对齐属性值：

left:左对齐内容

right:右对齐内容

center:居中对齐内容

justify:对行进行延申，这样每行都可以有相等的长度

换行标签

5.一个标签代表一个段落，两个标签中的文本内容不在同一行，在标签中，使用 文本内容的位置只是换行，其实还是一个段落

6.<pre></pre>标签用于预定义格式显示文本，即文本在浏览器中显示时遵循在HTML原文档中定义的格式

<!DOCTYPE html>
<html>
<head>
	<title>练习1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早发白帝城》</h3>
	<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
	<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>练习2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     阴山下，<br/>
	     天似穹庐，<br/>
	</p>
	<pre>
  笼盖四野，
   天苍苍，
   野茫茫，
风吹草低见牛羊。
	</pre>
</body>
</html>

2.2 文字和段落标签

文字斜体：和
加粗：和
下标：
上标：

特殊符号

任务

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">关于我们  |  招聘信息  |  联系我们  |  意见反馈</p>
	<hr/>
	<p align="center">Copyright © 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表标签

3.1 列表标签-无序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
	<ul type="square">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
</body>
</html>

3.2 列表标签-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
	<ol type="i">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
</body>
</html>

3.3 列表标签-定义列表

<dt><dd>是同级标签

第四章图像和超链接

4.1 图像

图像标签

绝对路径：

相对路径：

效果图

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅图像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅动画图像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超链接

超链接标签

空链接：<a href="#"> </a>

4.3 锚链接

定义锚（同一页面）

任务：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">这里是顶部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">运动</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>苹果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>樱桃</li>
		<li>菠萝</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回顶部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西红柿</li>
		<li>黄瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫芦</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回顶部</a></p>
</body>
</html>

定义锚（不同页面）

4.3 链接扩展功能

1. 电子邮件链接

2.文件下载

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">邮箱链接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下载</a>
</body>
</html>

原文链接：https://blog.csdn.net/qq_43405634/article/details/103789819

在线咨询

上一篇：HTML培训：如何在HTML中更改文本大小
下一篇：EmEditor注册密钥/中文版WINDOWS文本编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商