带有下拉列表的表单

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

题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三，数据集表单。

开始学习吧！

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

前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在<form></form>之间的元素。

带有下拉列表的表单

我们在一些网站填写注册信息时，经常会遇到选择"生活所在地"的操作，因为中国的地名是固定的，因此页面会为我们提供一个下拉列表选项，我们直接点选即可，就不需要输入文字了，这样操作的好处在于不会出现拼写错误。例如：

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

写这个功能我们需要介绍一组新标签<select></select>。"select"（选择）。在这个标签中再添加<option></option>。"option"（选项）。这样就可以写出带有下拉列表的表单了，示例代码如下：

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

这段代码我们继续在昨天的"表单.html"文件中添加即可，在<input type = "image" src = "img/示例图片/submit.jpg"/>
这段代码之前即可！与这个图片提交按钮共用一个<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>中。

页面效果如下：

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

这里告诉大家一个规律，下拉列表表单默认显示第一个<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>

页面效果如图：

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

多行文字输入表单

我们在西瓜视频上发布视频时会被要求填写视频描述，页面中的输入框不是像下图这么短的单行输入框。

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

而是多行输入框，如图：

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

使用<textarea></textarea>标签即可添加这样的输入框，不过要设置row（列）和cols（行）属性的数值。示例代码如下：

<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>

这段代码添加到</select>

之后，与其共同使用一个<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>

页面效果如图：

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

如果刷新页面不能正确显示，请尝试关闭后重新打开！

数据集表单

数据集表单实际上就是一个将不同选项或信息打包上传的设置。

当一组表单元素放到 <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表单3（下拉列表、多行文字输入）——零基础自学网页制作

今天的内容结束了！

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

export1573713002867.jpg