整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图1
图2
图2
图3
我们在浏览网页时会经常遇到注册会员的界面，大概像这个样子：
或填写问卷的情况，大概像这个样子：
我们把这些内容称之为表单。
如何向自己的页面中添加表单呢？
添加表单的操作和添加表格类似。
首先我们要在页面中写入<form></form>标签，这是向浏览器声明这里是个表单，它本身并不会显示在页面中，但是可以全局控制表单元素的一些属性，就像表格中的<table></table>标签。
然后再在<form></form>中写入<input/>标签，这个标签的内容就会显示在页面中了，就像表格元素中的<tr><td>标签。不同的是<input/>没有结尾标签。
下面让我们写一写。
首先复制"第一个页面.html"文件。改名为"表单.html"，然后清空<body></body>中的内容，将<head></head>中间的<title></title>中间的内容改为"表单"，这样方便我们查看测试页面。
示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>表单 </title>
</head>
<body>
</body>
</html>下面我们要写入表单内容，示例代码如下：
<form> <input/></form>页面效果如下：
只有一个输入框。下面，我们为输入框添加名称"会员名称："，示例代码如下：
<form> 会员名称： <input/></form>效果如下：
这样我们就写出了一个简单的表单，如果为表单添加更多内容和设置，就要继续了解表单的属性。
表单元素属性1
<input/>标签通过改变type属性可以变换出不同功能，在页面制作中，我认为<input/>标签中的type属性最重要。
下面我们来看一下type属性不同的值。
图片来源W3School
输入文字：首先，先来看text值。说明很明确，这个属性值的<input>标签主要是用来输入文本，比如"会员名称。"
示例代码如下：
<form> 会员名称： <input type="text"/></form>页面效果如图所示：我胡乱输入了几个字母
如果不指定type的text值的话，表面看起来并不影响输入内容，但是表单的内容最终是要提交到服务器的，如果不注明type="text"，服务器就不能判断你输入的字符到底是一段代码还是一段字符串组成的文本，因此，我们为了让提的交数据在服务器端能被准确识别，一定要写好type的属性。
除此之外变换type值也能为<input/>变换不同功能。
制作提交按钮：例如"submit"（提交）。在我们输入完表单内容后，一般都有一个提交按钮，这个提交按钮也是由<input/>标签来完成的。
示例代码如下：
<form> 会员名称： <input type="text"/> <input type="submit"/></form>如图所示：
因为<input/>是内联元素，所以"submit"按钮会和之前的<input>显示在一行，换行的话很简单，可以使用<br>标签。
大家观察一下发现，我们并没有给"submit"按钮指定文字，在按钮上却出现了"提交查询"的字样，这是html默认的，如果我们要改变按钮文字就要使用value这个属性。示例代码如下：
<input type="submit" value="提交"/>页面效果如下：
其实我们在输入文字时，输入框里会经常有提示文字，当我们点击输入框时，提示文字消失了，这个功能怎么实现？
这又涉及到一个新属性，叫做"placeholder"（提示文字）。
示例代码如下：
<input type="text" placeholder="请输入英文或汉语拼音"/>页面效果如下：
下面我们来练习一下，示例代码如下：
<form>
会员名称：
<input type="text" placeholder="请输入英文或汉语拼音"/><br>
会员密码：<input type="text" placeholder="请输入英文字母、特殊符号、数字"/><br>
确认密码：<input type="text" /><br><input type="submit" value="提交"/><br>
</form>页面效果如下：（想把密码字符显示为小圆点的读者可以先去属性值列表中找找"password"看看，咱们后面会细致讲解）
制作多选表单：多选表单的type属性值是"checkbox"。
我猜大家也猜到该怎么写了，示例代码如下：
<form>
兴趣爱好：<br>
<input type="checkbox" name="hobby" value="reading"/>读书
<input type="checkbox" name="hobby" value="film"/>电影
<input type="checkbox" name="hobby" value="painting"/>绘画
<input type="checkbox" name="hobby" value="music"/>音乐
<br>
<input type="submit" value="submit"/>
</form>页面效果如下：
大家可以点点试试，可以多选了。如图：
这时小伙伴们会发现在这组示例中，出现了name和value两个属性。
先说value，在"submit"中，value的值也就是"提交"二字，是直接显示在按钮上的，而这里的value值却没有显示，显示出来的是我们在<input/>标签后面输入的"读书、电影、绘画、音乐"这样的字样。也就是说这里的value不会显示为选框的名字！
那value属性是干嘛的呢？实际上"checkbox"属性下的value属性值是写给后台的服务器看的。
我们向服务器提交选择后，服务器把name的名称作为数据的大类名称，把value值作为大类中的子类名称来存储或分析数据。
比如这个选择表单是有关兴趣爱好的，因此数据的大类属于"爱好"（hobby），即name="hobby"，hobby中又分为"reading"（读书），"film"（电影），"painting"（绘画），"music"（音乐），即value="reading"、value="film"等等。这样不同用户的不同选择就按照这个数据组织方式提交给了服务器。
大家明白了吗？
另外需要说明的是，name和value最好使用英文或拼音来书写！
虽然我们目前不涉及后端服务器上的操作，但是在学习时要养成规范书写的习惯。
其实，除了type="submit"的情况外，其他需要输入信息的type属性类型都是要写name属性的，不过不同type属性类型的value却不太一样。
下面我们来看看type="text"时的标准写法：当type="text"的时候，不必写value属性，因为value值为用户输入的内容
<form>
会员名称：
<input type="text" placeholder="请输入英文或汉语拼音" name="memberName"/><br>
会员密码：
<input type="text" placeholder="请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：<input type="text" name="confirmPassWord"/><br>
<input type="submit" value="提交"/><br>
</form>今天的内容先到这里，我们明天继续讲解"表单元素"。
喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
对调研对象的不同，对问卷页面进行个性化设置，让受访者得到更好的答题体验是所有调研者考虑的重要问题之一。
《易研问卷平台》为此提供了多种问卷页面设置的方式，本操作教程通过五个步骤简要介绍，让您轻松完成问卷背景页面的个性化设置，实现“始于页面颜值，敬于调研主题，终于研究者人品”。
页面设置入口，以下所有的页面属性设置均在以下页面设置
第一步 设置主题
在问卷设置之前，首先需要设置调查问卷的主题，在调查问卷的设置页面，点击【主题】，选择页面主题，目前《易研问卷平台》提供了学校主题、考试主题、节日主题等多种问卷主题。
①在调查问卷的设置页面，设置页面背景图。受访者可自行提供图片或者由由公司设计人员设计图片，将图片移交技术人员生成图片链接，将粘贴到【页面背景图】里。
②设置页面透明度，进入 json 编辑页面找到页面版心, 将原页面版心颜色代码 "typePageUnderpainting": "#000000", 替换为"typePageUnderpainting": "rgba(255,255,255,数字)"，数字设置区间为0-1，数字越接近1，版心透明度越低。
③在调查问卷的设置页面，设置版心背景色。点击【版心背景色】，在调色板中对版心颜色进行设置，并点击确定。
④在调查问卷的设置页面，设置页面背景色。点击【页面背景色】，在调色板中对版心颜色进行设置，并点击确定。
⑤在调查问卷的设置页面，设置版心宽度。受访者可根据需求设置【版心宽度】大小。
⑥在调查问卷的设置页面，设置版心背景图。（不常用）受访者可自行提供图片或者由由公司设计人员设计图片，将图片移交技术人员生成图片链接，将粘贴到【版心背景图】里。
①在调查问卷的设置页面，设置问卷标题。点击问卷调查右侧编辑按钮，进入编辑页面，点击【通用】，在空白面板上面写问卷标题，对问卷标题文字进行格式的设置（与Word类似）。
效果如下：
②在调查问卷的设置页面，设置完成后的文档（如果没有设置，系统默认原始文档）。点击问卷调查右侧编辑按钮，进入编辑页面，点击【完成后的Html】，在空白面板上面写问卷标题，对问卷标题文字进行格式的设置（与Word类似）。
效果如下：
③在调查问卷的设置页面，设置问卷题目边距及内容缩进。受访者根据需求可设置大小。注：上边距：与上一道题目之间的间距；下边距：与下一道题目之间的间距；左边距：与版心左侧边距；右边距：与版心右侧边距；内容左缩进：将题目选项从左向右缩进一定的距离（设置边距及缩进10个单位最佳）。
第四步 预览问卷并检查
进入【预览问卷】，查看整体效果，如有其它需求可进入编辑页面继续设置。
样本库导入并映射成功后，即可编辑其它主体题目。全部编辑完成后发布问卷，在问卷发布设置中点击【发布问卷】并确定。
*请认真填写需求信息，我们会在24小时内与您取得联系。
