有下拉列表的表单

题目只能有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中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！

作用：如果说table标签是用来显示数据的，那么列表标签就是用来进行html页面布局的。

• 无序列表

语法：

<ul>
	<li></li>  
</ul>

<ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序，是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样，列表标签也自带样式属性，但为了代码统一，我们还是会使用css来设置。

代码示例：

<h2>无序列表：</h2>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

运行界面：

• 有序列表

语法：

<ol>
 	<li></li> 
 </ol>

<ol></ol>标签里面只能嵌套<li></li>标签，在这里li标签是有顺序的。

代码示例：

<h2>有序列表：</h2>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

运行界面：

• 自定义列表

语法：

<dl>
	<dt></dt>
	<dd></dd>
</dl>

<dl></dl>标签：定义列表

<dt></dt>标签：列表标题

<dd></dd>标签：列表内容

一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。

代码示例：

<h2>自定义列表：</h2>
    <!-- dl：外层标签  dt：项目标题  dd：项目内容 -->
    <dl>
        <dt>水果种类</dt>
        <dd>苹果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

运行界面：

表单标签

作用：收集用户信息。一般用在注册界面等。

组成：一个完整的表单中包含表单域（整个填写界面所有信息）、表单控件（表单元素）和提示信息（表单控件的提示作用）3个部分。

• 表单域

表单域：是一个包含表单元素的区域。

<form>标签用于定义表单域，实现用户信息的收集和传递。

作用：将其区域范围内的信息收集并传送给服务器。

语法：

<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单控件
</form>

注：action：url地址，指定接收并处理表单数据的服务器程序的url地址。

method：用于设置表单数据的提交方式。

method=”get”：提交数据时，地址栏可查看到数据。数据量少且安全级别不高时使用。

method=”post”：提交数据时，地址栏数据是加密的。

name：表单域的名称。用于区分同一页面下的不同表单域。

• 表单控件

1.input输入表单元素：

语法：<input type=””>，依据type属性值不同区分不同控件。

文本框：<input type=”text”>。单行输入字段，默认宽度20个字符。输入的文字可见。

密码框：<input type=”password”>。输入内容默认不可见。

单选框：<input type=”radio”>，默认情况下选中后无法取消。

注：为实现多选一状态，需要将所有的单选框控件具有同一个name名。

复选框：<input type=”checkbox”>，选中后可以更改可以取消。

提交按钮：<input type=”submit”>，默认按钮中的提示文字是提交，可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。

重置按钮：<input type=”reset”>，默认按钮中的提示文字是重置，可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

普通按钮：<input type=”button”>

文件域：<input type=”file”>，用来选择文件，一般适用于文件上传。

label标签：标注标签，配合input控件一起使用

作用：绑定表单控件，扩大点击范围。

当点击label标签的内容时，系统会自动选中该表单控件。

代码示例：

<h1>label标签</h1>
    <form>
        <label for="text">用户名：</label>
        <input type="text" name="用户名" id="text"><br>
        <label for="password">密码：</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>

运行界面：

Input控件属性：

name:用户自定义，提示input元素的名称。给后台工作人员的提示。

value：用户自定义，提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容，单选框和复选框则显示不出来。

checked：默认选中状态。主要用于单选按钮和复选按钮中。

maxlength：正整数，规定输入字段中的字符最大长度。

input代码示例：

<h2>表单标签</h2>
    <form>
        用户名：<input type="text" maxlength="15" value="请输入用户名"><br>
        密  码：<input type="password"><br>
        性  别：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        爱  好：<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注册">
        <input type="reset" value="清空"><br>
        <!-- 后期结合js搭配使用 -->
        <!-- 按钮选框在默认情况下是没有文字内容的，需要添加value值设置文字内容 -->
        <input type="button" value="获取短信验证码"><br>
        上传头像：<input type="file">
    </form>

运行界面：

2.select下拉表单元素：

使用场景：地址选择、职业分类、学校分类等。

select标签：定义下拉列表。

语法：

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

代码示例：

<h1>下拉表单</h1>
    <form>
        <label for="adress">籍贯：</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">广州</option>
            <option value="">深圳</option>
        </select>
    </form>

运行界面：

3.textrea文本域表单控件

使用场景：留言、介绍、评论等。

语法：

<textrea rows=”” cols=””>文本内容</textrea>

跟文本框控件不同，它是多行文本输入框，可以自行设定行数以及一行容纳多少字数。

rows=“每行可输入的字符数”，

cols=“显示的行数”。

这两个样式属性实际开发中大多使用css就可以改变操作。

代码示例：

<h1>文本域表单元素</h1>
    <form action="">
        <label for="textrea">今日反馈：</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反馈</textarea>
    </form>

运行界面：

关于HTML基础内容就学习到这里了，明天练习一个综合案例。对了，现在跟学的是黑马前端的pink老师发布的基础视频，明天做的案例按照老师讲解的案例去做。