有下拉列表的表单

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

载说明：原创不易，未经授权，谢绝任何形式的转载

在这篇文章中，我们将介绍一些最受欢迎的HTML、React、NextJS和Tailwind CSS模板。使用模板来进行项目开发的一个很大的优势是，你可以避免从头开始创建项目，而是使用模板并进行一些微小的调整以适应你的需求。这样可以节省时间，你可以利用这些时间来增强项目的功能。

此外，借助这些模板，你还可以更快地完成工作。让我们现在开始，不再拖延！

原生HTML、CSS 、JavaScript 模板

HTML5 UP

https://html5up.net/

提供了一系列免费的响应式HTML模板。这些模板都具有现代化的设计风格和优雅的布局，适用于各种类型的网站和项目。每个模板都提供了丰富的功能和定制选项，使你能够轻松地创建出令人印象深刻的网站。

你可以在网站上浏览不同的模板，每个模板都有预览图和详细的描述，展示了它的特色和用途。你可以选择一个你喜欢的模板，并下载相应的文件。下载后，你可以根据自己的需求进行修改和定制，以适应你的项目。

无论你是初学者还是有经验的开发者，这些模板都是一个很好的起点。它们提供了一个快速且可靠的方法，让你在项目中使用现成的设计和布局，并根据需要进行个性化调整。

Free HTML web themes

https://www.graphberry.com/category/free-html-web-templates

这个网站提供了一系列免费的HTML网页模板。这些模板经过精心设计，涵盖了各种不同类型的网页需求，包括企业网站、个人简历、博客、电子商务等。

在该网站上，你可以浏览不同的模板分类，并点击查看每个模板的详细信息和预览图。每个模板都提供了下载链接，你可以免费下载所需的文件。这些模板通常包括HTML、CSS和JavaScript等文件，你可以根据自己的需求进行修改和定制。

这些模板的设计风格各不相同，但都注重美观和用户体验。它们提供了一个快速启动网页项目的方式，让你节省时间和精力，无需从头开始构建网页。你可以根据模板进行一些微调和定制，以满足你的具体需求。

对于那些刚刚开始学习前端开发或者需要快速建立网页项目的人来说，这些免费HTML网页模板是一个很好的资源。它们为你提供了一个基础结构，使你能够快速创建出具有吸引力和功能性的网页。

React +Tailwind 模板

每个需求都有免费的现代化React和Tailwind模板

https://treact.owaiskhan.me/

这个合集真是令人惊叹。在这里，你可以找到用TailwindCSS构建的现代化React UI模板和组件，它们不仅轻量、安装迅速，而且易于适应。所有组件都完全响应式，品牌颜色也可以完全自定义。无论是商业用途还是个人使用，都可以免费使用。

React落地页

这是一个简单的落地页，使用Reactjs构建，包含了产品、特点、价格、关于等几个部分。

https://react-landing-page-template-2021.vercel.app/

Nextjs 模板

4+ 免费的 Nextjs 模板

https://www.creative-tim.com/templates/nextjs

36个免费的 Nextjs 模板

这也是一个不错的Next主题、起始模板和模板合集。

https://jamstackthemes.dev/ssg/next/

10个免费的Nextjs模板

https://www.wrappixel.com/templates/category/nextjs-templates/?product_orderby=freebies

Nextjs 模板集合

https://vercel.com/templates

在这些可用选项中搜索你的模板，以加快应用程序的开发速度。这是来自Vercel的一份精彩的Next.js模板合集。在这里，你可以从各种各样的分类中进行选择。

最佳的免费13+个Tailwind CSS模板

https://www.creative-tim.com/templates/tailwind-free

这个Tailwind CSS模板合集非常棒。它们提供了免费的Tailwind CSS UI套件和管理仪表板。你应该去看看。

免费响应式的Tailwind CSS模板

https://themewagon.com/theme-framework/tailwind-css/

这是一个令人惊叹的资源，你可以在这里找到免费的响应式Tailwind CSS组件。通过查看下载这些模板的人数统计，你可以发现它们拥有顶级的管理仪表板和落地页模板。如果你愿意付费，它们也提供付费选项。

20个以上的免费和付费Tailwind CSS模板

https://tailwindtemplates.co/templates

发现并下载2023年最佳的免费和付费Tailwind CSS模板！无论你需要一个落地页、管理仪表板还是一个完整的网页模板，我们都为你提供了高质量且易于使用的设计。Tailwind CSS是一个广受欢迎的基于实用主义的CSS框架，以其模块化和可伸缩的架构脱颖而出。通过遵循样式的自然顺序，它能够避免传统CSS中的混乱代码。使用Tailwind，你不再需要担心浏览器兼容性或错误，它为你简化了编码和设计过程。通过我们的Tailwind CSS模板，将你的网站提升到新的水平！

Tailwind组件

在你的项目或落地页中使用这些内置的开源Tailwind UI模板和组件，可以节省时间。现有超过600个免费的模板和组件可供使用。

https://tailwindcomponents.com/

tailwind Awesome | 免费的Tailwind模板

https://www.tailwindawesome.com/?price=free&type=template

这个网站真是令人难以置信。我相信如果你在那里搜索，你肯定会找到你所需的模板。无论你需要电子商务、个人作品集、创业落地页还是管理仪表板，他们都有大量可用的模板。

落地页模板

每周，你都会获得一个使用React、Next JS和Gatsby JS开发的免费落地页模板。他们的落地页非常出色。如果你正在寻找落地页，不妨去看一看。

https://startuplanding.redq.io/

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。