有下拉列表的表单

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

Excel中设置数据验证，可以规范数据的录入，提高数据录入效率。今天就和大家分享函数公式在数据验证中应用的一个示例：在单元格中输入一个字母，就可以出现以该字母作为首字母的单词列表。这种设置可以缩小数据验证的列表范围，避免从很长的列表中寻找需要录入的数据。

1

效果展示

如下图所示，在A2单元格输入“a”，下拉列表出现以“a”开头的英文单词。

输入“b”，下拉列表出现以“b”开头的英文单词。

如果什么都不输入，下拉列表为数据源中的全部单词。

2

操作步骤

1、如下图所示，“数据源”工作表的A2:A12为制作下拉列表的数据源。其中，首字母相同的单词必须排列在一起。

2、选中“制作下拉菜单”工作表中需要设置搜索式下拉菜单的单元格，单击【数据】-【数据验证】，打开数据验证对话框。

（1）【允许】选择“序列”；

（2）【来源】输入公式：=OFFSET(数据源!$A,MATCH($A2&"*",数据源!$A:$A,0),0,COUNTIF(数据源!$A:$A,$A2&"*"))

（3）【出错警告】选项卡中取消勾选“输入无效数据时显示出错警告”。如果不取消勾选此项，当输入首字母后，单击单元格右小角的三角符号，Excel会出现错误提示。

单击确定，即可完成操作。

公式解析：

（1）OFFSET函数可以返回一个引用。比如，OFFSET($A,4,0,1)指以A1单元格为起点，向下移动4行，来到A5单元格；像左移动0列，仍然在A5单元格；返回1行1列的单元格，仍然是A5单元格。所以该公式最终返回的结果是A5单元格的“back”。

（2）MATCH函数作为OFFSET函数的第二个参数，指从“数据源”工作表的A1单元格向下移动多少行。如果在“制作下拉菜单”工作表的A2单元格输入字母“b”，MATCH($A2&"*",数据源!$A:$A,0)返回“4”，也就是A2:A12中首字母为“b”的单词第一次出现的位置。

（3）COUNTIF函数作为OFFSET函数的第4个参数，指返回的单元格区域共有几行。如果在“制作下拉菜单”工作表的A2单元格输入字母“b”，则COUNTIF(数据源!$A:$A,$A2&"*")返回“2”，即A2:A12中首字母为“b”的单词数量为2。

（4）综上，当在“制作下拉菜单”工作表的A2单元格输入字母“b”，则OFFSET+MATCH＋COUNTIF函数组合返回的结果是A5:A6单元格区域。将该函数组合返回的结果作为数据验证对话框中“序列”的数据来源，当输入字母后，下拉列表就会出现首字母为该字母的英文单词。

TML 的 input 标签是构建网页表单的基石。它提供了多种多样的输入字段类型，使网页开发人员能够创建功能强大且用户友好的表单。从简单的文本输入到复杂的日期选择器，input 标签为表单交互提供了无限的可能性。在本文中，我们将全面探索 input 标签的各种应用，并揭秘一些提高用户体验的技巧。

input 标签的类型揭秘

input 标签提供了丰富的类型属性，使我们能够创建不同的输入字段。一些常见的类型包括：

• 文本输入：type="text" 创建一个单行文本输入字段。
• 密码输入：type="password" 创建一个隐藏用户输入的密码字段。
• 复选框：type="checkbox" 创建一个可以选择多个选项的复选框。
• 单选按钮：type="radio" 创建一个只能选择一个选项的单选按钮。
• 下拉列表：type="dropdown" 或 type="select" 创建一个下拉列表供用户选择。

自定义输入字段

input 标签的真正强大之处在于它的自定义能力。你可以利用各种属性来定制输入字段，满足特定的需求。例如：

• placeholder 属性为输入字段提供占位符文本，指导用户输入。
• required 属性确保输入字段在提交表单前必须填写。
• pattern 属性使用正则表达式来验证输入是否符合特定模式。
• min 和 max 属性可以指定输入字段的数值范围。

增强用户体验

除了基本的输入字段类型，input 标签还提供了多种功能来增强用户体验：

• 自动完成：autocomplete 属性可以启用浏览器自动完成功能，帮助用户快速填写表单。
• 输入提示：list 属性可以将输入字段与 datalist 元素关联，为用户提供输入提示。
• 日期和时间选择器：type="date" 和 type="time" 允许用户方便地选择日期和时间。
• 文件上传：type="file" 让用户可以上传文件。

样式化输入字段

使用 CSS，你可以完全控制输入字段的外观和感觉，使其与网页设计完美融合。你可以改变输入字段的背景颜色、边框、字体大小和圆角等。来看一个例子：

<style>
  input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

<input type="text" placeholder="输入你的名字">

在这个例子中，我们使用 CSS 为文本输入字段添加了内边距、边框和圆角。

结论：打造动态表单

HTML input 标签为网页开发人员提供了构建动态表单的强大工具。通过结合不同的输入类型、自定义属性和样式化技术，你可以创建出引人入胜且易于使用的表单。不断探索 input 标签的无限可能，让你的网页表单更加高效、直观和视觉吸引力！释放你的创造力，打造令人难忘的用户体验！