有下拉列表的表单

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

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 标签的无限可能，让你的网页表单更加高效、直观和视觉吸引力！释放你的创造力，打造令人难忘的用户体验！

们在开发项目时候经常会遇到这样的需求，提供一个可选择的下拉框，下拉列表中提供了常见的选项。当所提供选项选项无法满足用户需求时用户可以自行输入所需参数。为了满足大部分的用户需求我们可以封装一个通用组件来满足多种需求，当调用的组件的时候配置好参数就可以快速实现所需功能了。

​组件实现的功能：

1，可定义组件宽度，下拉宽度与组件宽度一致；类型number，默认值100；

2，可定义后缀，默认为空；

3，可定义是否只读，默认为false；

4，可定义下拉列表选项，类型数组，默认为空；

5，可定义输入框中值显示位置，分别为居左、居中、居右；分队对应的可输入值为left、center、right，默认居中即center。

6，可定义下拉按钮显示，类型布尔值，默认为true（显示）。

定义模板

这里利用了element中的popover弹出框组件中嵌套下拉列表来实现下拉选项，当选择下拉选项中的值时将该值赋值给input框中的绑定值。而input框主要使用了些动态样式并监听了鼠标获取焦点、键盘输入、键盘删除、鼠标失去焦点等触发事件 ，来实时改变输入框中显示的值。

定义CSS样式

这里我用的是scss预处理器，在修改popover组件样式时我们用到了深度作用选择器::v-deep，具体的可以参考文章Vue实战072：CSS样式中的各种深度作用选择器的使用，这里需要注意的是控制弹出框与input框的宽度一致，在popover组件上添加一个样式获取上级组件的宽度以达到控制弹出窗父级组件的宽度，这样popover中就可以获取到父级组件的宽度，再通过深度作用选择器来定位组件中的DOM元素并进行修改即可。

定义功能逻辑

props中是留给用户调用组件时配置的参数值，前面文章Vue实战071：Element实现WEB颜色选择器功能中有提到过prop传递过来的值都是单向下行绑定，子组件不能修改由父组件传递过来的值。所以这里我们同样定义一个变量来接受父级传递过来的值，然后通过计算属性拼接后缀显示。当选择下拉选项中的值时将该值在复制给变量,同时监听显示值的变化并通过this.$emit将该值传递给父级组件。

组件调用

组件中只有下拉列表必须提供数据的，其他参数都定义了默认值所以可选填。这样用户就可以非常灵活的使用该组件了，也大大提高了组件的可使用范围。这里没看到组件引入是因为我对组件进行了全局自动化注册，可以参考文章Vue实战070：组件的局部注册和全局注册（含自动化注册）功能实现。

总结：

以上内容是小编给大家分享的Vue实战073：可输入的下拉框组件功能实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！