HTML表单3（下拉列表、多行文字输入）-零基础自学

HTML表单3（下拉列表、多行文字输入）-零基础自学网页制作

有下拉列表的表单

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

序列表

经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。

学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。

列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。

首先介绍有序列表

要用<ol></ol>标签告诉浏览器这里是列表。

然后在里面添加<li></li>标签，在这个标签中添加内容即可。

示例代码如下

<p>我喜欢的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一个新的html框架中看看效果。

完整代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜欢的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>苹果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

页面效果如下：

通过修改<ol>标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的type值的不同效果吧！示例代码如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>

页面效果如下：

下面给大家介绍一下搜狗输入法中如何输入罗马数字。

step1.点击"输入方式"

step2.点击"特殊符号"后选择数字序号，找到罗马数字即可

除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值；"

示例代码如下：(使用日语中的片假名表示序号)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

页面效果如图所示：

是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。

如图：

资料来自w3school

无序列表

无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：<ul></ul>。

有一个记忆的小技巧，有序的英文是order，故有序列表为order list（列表），缩写为ol。

无序为unorder，无序列表为unorder list，缩写为ul。

无序列表<ul>标签的type属性用来控制列表前的标记显示演示。

示例代码如下：

<h>无序列表</h>
<p>我喜欢的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>

页面效果如下：

通过图片我们可知，无序列表默认的列表标识就是type="disc"。

style属性的话大家自己试试吧，这里就不啰嗦了。

定义列表

这个列表比较特殊，也比较不常见，主要就是显示名词定义的。

首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表，和<ol>或<ul>一样。

定义的英文是definition，定义列表就是definition list，缩写是dl。

下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title（标题）。

与定义名称标签并列的是定义描述<dd></dd>,即definition describe（描述）。

示例代码如下：

<dl> 
  <dt>计算机</dt> 
  <dd>用来计算的仪器 ... ...</dd> 
  <dt>显示器</dt> 
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

页面效果如下：

今天的内容结束了！

列表嵌套列表的测试大家自己试试吧，学到现在，相信你们都可以完成了！

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

如果您有任何疑问请给我留言，如有问题或错误请予以斧正！

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标签

4.1 常用的 html 标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签：-->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
   <img src="images/pic.jpg" alt="图片">
   <a href="http://www.baidu.com">百度网</a>
</div>

提示:

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签2.2 单标签是一个标签组成，没有标签内容，比如: img标签

4.2 小结

学习 html 语言就是学习标签的用法，常用的标签有20多个。
编写 html 标签建议使用小写
根据书写形式，html 标签分为双标签和单标签
单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

五、资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

5.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

5.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

5.3 小结

相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
相对路径是从当前操作的 html 文档所在目录算起的路径
绝对路径是从根目录算起的路径

六、列表标签

6.1 列表标签的种类

无序列表标签(ul标签)
有序列表标签(ol标签)

6.2 无序列表

<!-- ul标签定义无序列表 -->
<ul>
   <!-- li标签定义列表项目 -->
   <li>列表标题一</li>
   <li>列表标题二</li>
   <li>列表标题三</li>
</ul>

6.3 有序列表

<!-- ol标签定义有序列表 -->
<ol>
   <!-- li标签定义列表项目 -->
   <li><a href="#">列表标题一</a></li>
   <li><a href="#">列表标题二</a></li>
   <li><a href="#">列表标题三</a></li>
</ol>

6.4 小结

列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)
列表项目对顺序有要求的时候使用ol标签
列表项目对顺序无要求的时候使用ul标签

七、表格标签

7.1 表格的结构

表格是由行和列组成，好比一个excel文件

7.2 表格标签

<table>标签：表示一个表格
     <tr>标签：表示表格中的一行
         <td>标签：表示表格中的列
         <th>标签：表示表格中的表头

示例代码:

<table>
   <tr>
       <th>姓名</th>
       <th>年龄</th>
   </tr>
   <tr>
       <td>张三</td>
       <td>18</td>
   </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

在线咨询

上一篇：Web产品设计的适配方法
下一篇：HTML5性能跑分数据证实Moto G6系列采用全面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML表单3（下拉列表、多行文字输入）-零基础自学

有下拉列表的表单

HTML完整学习目录

HTML完整学习目录

、常用html标签

4.1 常用的 html 标签

4.2 小结

五、资源路径

5.1 相对路径

5.2 绝对路径

5.3 小结

六、列表标签

6.1 列表标签的种类

6.2 无序列表

6.3 有序列表

6.4 小结

七、表格标签

7.1 表格的结构

7.2 表格标签

您的项目需求