带有下拉列表的表单

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(1)

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

开始学习吧!

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(2)

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

带有下拉列表的表单

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

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(3)

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(4)

写这个功能我们需要介绍一组新标签<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>中。

页面效果如下:

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(5)

这里告诉大家一个规律,下拉列表表单默认显示第一个<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制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(6)

多行文字输入表单

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

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(7)

而是多行输入框,如图:

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(8)

使用<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>

页面效果如图:

html制作表单时如何输入单选(HTML表单3下拉列表多行文字输入)(9)

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

数据集表单

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

当一组表单元素放到 <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表单3下拉列表多行文字输入)(10)

今天的内容结束了!

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

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

,