有下拉列表的表单

题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三，数据集表单。

开始学习吧！

前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在<form></form>之间的元素。

带有下拉列表的表单

我们在一些网站填写注册信息时，经常会遇到选择"生活所在地"的操作，因为中国的地名是固定的，因此页面会为我们提供一个下拉列表选项，我们直接点选即可，就不需要输入文字了，这样操作的好处在于不会出现拼写错误。例如：

写这个功能我们需要介绍一组新标签<select></select>。"select"（选择）。在这个标签中再添加<option></option>。"option"（选项）。这样就可以写出带有下拉列表的表单了，示例代码如下：

<select><option></option></select>

这段代码我们继续在昨天的"表单.html"文件中添加即可，在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可！与这个图片提交按钮共用一个<form></form>标签！

下面我们为多选表单添加名称，示例代码如下：

请选择省份<select><option></option></select>

下面我们添加不同选项，示例代码如下：

请选择省份
  <select >
  <option >河北</option>
  <option >山东</option>
  <option >河南</option>
  <option >海南</option>
  <option >江苏</option>
  <option >安徽</option>
  </select>
  <br><br>

为了规范起见，我们为表单信息添加name和value属性，示例代码如下：

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是，在下拉列表表单中，name写在<select>中，value写在<option>中。

页面效果如下：

这里告诉大家一个规律，下拉列表表单默认显示第一个<option></option>中的文字内容。

如果您想改变这个默认显示，请在需要显示的<option>中添加selected属性，并赋值为"selected"。

示例代码如下：

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option>
 <!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>

页面效果如图：

多行文字输入表单

我们在西瓜视频上发布视频时会被要求填写视频描述，页面中的输入框不是像下图这么短的单行输入框。

而是多行输入框，如图：

使用<textarea></textarea>标签即可添加这样的输入框，不过要设置row（列）和cols（行）属性的数值。示例代码如下：

<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>

这段代码添加到</select><br><br>之后，与其共同使用一个<form></form>标签。

下面我们为这个多行输入框添加一些提示和限制。

首先，添加提示文字，和type="text"的<input/>标签一样，都是使用placeholder属性。

第二，我们限制一下字数，使用maxlength（最大长度）属性。

第三，在页面加载完成后，直接让光标停留在输入框中，使用autofocus属性。

下面看看如何写吧，示例代码如下：（不要忘记写好name属性！）

<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>

页面效果如图：

如果刷新页面不能正确显示，请尝试关闭后重新打开！

数据集表单

数据集表单实际上就是一个将不同选项或信息打包上传的设置。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。（W3school）

这个数据集有三个部分组成，首先是<fliedset></fliedset>,这个标签不会显示，只是告诉浏览器这里的数据要打包。

第二是<legend></legend>,"legend"(说明)，这里添加数据集名称。

第三就是我们之前学到的那些标签了。

示例代码如下：

<fliedset> <legend>信息打包</legend> </fliedset>

下面我们使用这段代码把form2打包一下吧。示例代码如下：

<form>
  <fieldset><!--开始-->
  <legend>信息打包</legend><br>
  <!--标题-->兴趣爱好：<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>
  最高学历：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>硕士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option><!--选中这个选项-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  请简要描述您的剧本的情节<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--结尾-->
  <input type = "image" src = "img/示例图片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

页面效果如下：

今天的内容结束了！

如果您喜欢我的教程请关注我，点赞也能让我充满动力！

HTML完整学习目录

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>标签实现文本内链接——零基础自学网页制作

前一直使用windows系统的电脑，创建文件很简单，改格式也非常的简单。但换了苹果电脑，如何创建一个HTML文件？却把我给整蒙了。

首先，为什么mac上不能直接新建文本文件？

因为mac一都是以应用的方式来管理文件。

我们在Windows上的习惯是:找到一个目录-->新建文件-->打开对应的应用-->记录-->保存。

mac的系统倾向是:打开应用程序-->记录-->找目录-->保存。

一对比，我们发现mac并不是不能建文本文件，只是建的过程有些麻烦。

下面我们来看一下详细的操作步骤:

一，在访达里找到文本编辑器并打开。就看到下图的样子。

二，找到左下角新建文稿，点击，会出现一个编辑文稿的窗口。

这时你就可以把你要写的东西写在这个文稿里边，比如我就写了一个简单的html代码。

三，找到电脑窗口左上角，文件-->移到...

这里就是把文件移入到你方便找的文件夹里，如下图，会出现一个位置下拉框

在这里我把这个文件存在了桌面上。

四，在访达里找到你的文件，右键点击，在菜单栏里找到重新命名。

这时候你就可以把文件改成html格式。

到这里改成HTML就完成了，然后选择打开方式，在浏览器中打开，这时候你可能出现了，另外一个问题。

为什么我的HTML文件在mac浏览器打开全是源码？

如下图所示:

解决方案如下:

一，打开文本编辑。找到窗口左上角:文本编辑-->偏好设置

二，设置两样东西，注意我红色圈圈区域。

新建文稿设置:把格式改为纯文本。

打开和存储设置:改成我圈住的勾选样子

再用浏览器打开html文件，就会出现下面的网页了。

如果有需要的，建议收藏呦！

面制作技术详解

演示视频在文章底部

1.页面内容居中显示方法

将这段代码<div style="width:50%;margin:auto;">放置在<body>标签之下。

将</div>放置在</body>之上。

将全部内容包裹在这个div中，就可以实现整个页面居中。

内容显示宽度为浏览器视窗宽度的50%。

margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。

2.导航栏悬停顶端方法

把四个a标签装到一个div中。

将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>之上。

将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>之下。

position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。

默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。

3.鼠标滑过导航标题或链接时改变背景色提示

这就要介绍关于css的写法了。

简单来说，就是在<head></head>标签中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>标签。

hover指的是：当鼠标悬停在a上面时的状态。

使用：连接。

这个状态下要执行的内容在{}中。

background-color:#ffff00;即背景色为黄色。

3.隐藏滚动条方法

首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。

如果要取消视窗最右侧滚动条，就要控制内容高度。

把<p></p>和<img/><map></map>全部装进<div></div>中，控制该div的高度可以实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

下面，为div规定尺寸，添加style="width:610px; height:530px;"。

这样，就不会超出视窗。但是代码写完后发现并不是，如图：

多出的文字内容超出div范围，右侧滚动条依然存在。

这就要在div的style中再增加一条语句"overflow-y:scroll;"

这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。

<div style="width:610px; height:530px; overflow-y:scroll;" >

如图：

因为图片宽度的问题，下方的x轴的scroll也出现了，我们不想看到它，影响美观。

添加“overflow-x：hidden”即可，hidden（隐藏）。

<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >

如图：hidden之后，将无法滚动或拖动画面。

最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。

从前面的例子可知，hidden是不行的，有没有别的办法？

那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：

这个div这样写即可

<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

</div>

同时还要给里面的div添加margin来让它们对齐

<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >

<!--省略了p img map 请自行脑补或参考源码-->

</div>

</div>

完整代码：用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作