下拉列表、多行文字输入 HTML表单3——零基础自学网页制作 _生活知道

带有下拉列表的表单
题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三网页设计自己做的网页超链接，数据集表单。
开始学习吧！
前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在之间的元素。
带有下拉列表的表单
我们在一些网站填写注册信息时，经常会遇到选择”生活所在地”的操作，因为中国的地名是固定的，因此页面会为我们提供一个下拉列表选项，我们直接点选即可，就不需要输入文字了，这样操作的好处在于不会出现拼写错误。例如：
写这个功能我们需要介绍一组新标签。”select”（选择）。在这个标签中再添加。”option”（选项）。这样就可以写出带有下拉列表的表单了，示例代码如下：

这段代码我们继续在昨天的”表单.html”文件中添加即可，在
这段代码之前即可！与这个图片提交按钮共用一个标签！
下面我们为多选表单添加名称，示例代码如下：
请选择省份
下面我们添加不同选项网页设计自己做的网页超链接，示例代码如下：
请选择省份河北山东河南海南江苏安徽
为了规范起见，我们为表单信息添加name和value属性，示例代码如下：
请选择省份河北山东河南海南江苏安徽
大家要注意的是，在下拉列表表单中，name写在
之后，与其共同使用一个标签。
下面我们为这个多行输入框添加一些提示和限制。
首先，添加提示文字，和type=”text”的标签一样，都是使用placeholder属性。
第二，我们限制一下字数，使用maxlength（最大长度）属性。
第三，在页面加载完成后，直接让光标停留在输入框中，使用autofocus属性。
下面看看如何写吧，示例代码如下：（不要忘记写好name属性?。?
请简要描述您的剧本的情节
页面效果如图：
如果刷新页面不能正确显示，请尝试关闭后重新打开！
数据集表单
数据集表单实际上就是一个将不同选项或信息打包上传的设置。
当一组表单元素放到标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。（W3school）
这个数据集有三个部分组成，首先是,这个标签不会显示，只是告诉浏览器这里的数据要打包。
第二是,”legend”(说明)，这里添加数据集名称。

文章插图
第三就是我们之前学到的那些标签了。
示例代码如下：
信息打包
下面我们使用这段代码把form2打包一下吧。示例代码如下：

信息打包
兴趣爱好：
读书电影绘画音乐
最高学历：
高中本科硕士博士
请选择省份河北山东河南海南江苏安徽


请简要描述您的剧本的情节

页面效果如下：
今天的内容结束了！
如果您喜欢我的教程请关注我，点赞也能让我充满动力！
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中的
块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用标签实现文本内链接——零基础自学网页制作
【下拉列表、多行文字输入 HTML表单3——零基础自学网页制作】本文到此结束，希望对大家有所帮助！

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

猜你喜欢