信息录入html模板HTML表单3下拉列表多行文字输入零基本自学网页制造

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

开始学习吧！

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

信息录入html模板HTML表单3下拉列表多行文字输入零基本自学网页制造 HTML

（图片来自网络侵删）

带有下拉列表的表单

我们在一些网站填写注册信息时，常常会碰着选择"生活所在地"的操作，由于中国的地名是固定的，因此页面会为我们供应一个下拉列表选项，我们直接点选即可，就不须要输入笔墨了，这样操作的好处在于不会涌现拼写缺点。
例如：

写这个功能我们须要先容一组新标签<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——零根本自学网页制作