整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

有下拉列表的表单

题目只能有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简介

什么是HTML?

HTML代表超文本标记语言(Hypertext Markup Language)。它是一种用于构建网页的标记语言。HTML文件包含一组标签,这些标签用于定义网页的结构和内容。浏览器读取HTML文件,并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式,并提供交互元素,例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构:

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构:

  • <!DOCTYPE html>:这是文档类型声明,它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
  • <html>:HTML文档的根元素。所有其他元素都包含在<html>标签内。
  • <head>:包含与文档相关的元信息,如页面标题、字符集声明和外部样式表链接。
  • <title>:定义网页的标题,显示在浏览器标签页上。
  • <body>:包含网页的主要内容,如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称,例如<p>表示段落,<img>表示图像。标签通常成对出现,有一个开始标签和一个结束标签。例如:

<p>这是一个段落。</p>

<p>是开始标签,</p>是结束标签,文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的,不需要结束标签,例如<img>用于插入图像。

HTML注释

在HTML中,你可以使用注释来添加说明性文字,注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾,如下所示:

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分:HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素:

  • <p>:定义一个段落。
  • <h1><h6>:定义标题,<h1>是最高级别的标题,<h6>是最低级别的标题。
  • <strong>:定义强调文本,通常以粗体显示。
  • <em>:定义强调文本,通常以斜体显示。
  • <a>:定义超链接,允许用户点击跳转到其他页面。

示例:

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像,可以使用<img>标签。它是一个自封闭标签,需要指定图像的src属性来指定图像文件的路径。

示例:

htmlCopy code
<img src="image.jpg" alt="图像描述">
  • src:指定图像文件的路径。
  • alt:提供图像的替代文本,用于无法加载图像时的文字描述。

链接

通过使用<a>标签,可以在网页中创建链接。链接通常包含在文本或图像中,并使用href属性指定目标URL。

示例:

<a href="https://www.example.com">访问示例网站</a>
  • href:指定链接的目标URL。

列表

HTML支持有序列表(<ol>)、无序列表(<ul>)和定义列表(<dl>)。

无序列表

无序列表使用<ul>标签定义,每个列表项使用<li>标签。

示例:

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义,每个列表项使用<li>标签。

示例:

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义,每个定义项目使用<dt>标签定义术语,使用<dd>标签定义描述。

示例:

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分:HTML表单

HTML表单允许用户与网页进行交互,提交数据。以下是HTML表单的基本元素:

<form>元素

<form>元素用于创建表单,可以包含文本字段、复选框、单选按钮、下拉列表等。

示例:

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>
  • action:指定表单数据提交的目标URL。
  • method:指定提交方法,通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据,常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签,type属性设置为"text"。

示例:

<input type="text" name="username" placeholder="用户名">
  • type:指定字段类型。
  • name:指定字段的名称。
  • placeholder:设置文本框的占位符文本。

密码框

密码框使用<input>标签,type属性设置为"password"。

示例:

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签,type属性设置为"radio"。

示例:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
  • name:指定单选按钮组的名称。
  • value:指定每个选项的值。

复选框

复选框使用<input>标签,type属性设置为"checkbox"。

示例:

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select><option>标签创建。<select>定义下拉列表,而<option>定义选项。

示例:

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>
  • name:指定下拉列表的名称。
  • 每个<option>标签表示一个选项,使用value属性定义选项的值。

第四部分:HTML样式和CSS

HTML用于定义网页的结构和内容,但要使网页看起来更吸引人,需要使用CSS(层叠样式表)。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例:

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中,并通过<link>标签将其链接到HTML文档。

示例(style.css):

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表:

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素,你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单,HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识,但HTML是一个广泛的主题,还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助,让你能够开始创建自己的网页。继续学习和实践,你将成为一个熟练的网页开发者。

.使用选择器来插入内容

h2:before{

content:"前缀";

}

h2:after{

content:"后缀";

}

B.指定个别的元素不进行插入

h2.sample:before{

content:none;

}

2. 插入图像

A.在标题前插入图像文件

h2:before{

content:url(anwy.jpg);

}

B.将alt属性的值作为图像的标题来显示(用不了)

img:after{

content:attr(alt);

display:block;

text-align:center;

margin-top:5px;

font-size:11px;

font-weight:bold;

color:black;

}

3. 插入编号

A.多个标题前加入连续编号

div:before{

content:counter(divCounter);

}

div{

counter-increment:divCounter;

}

B.在项目符号中追加文字

div:before{

content:"第"counter(divCounter)"段";

}

C.指定编号样式、种类

div:before{

content:counter(divCounter,upper-alpha)'.';

color:blue;

font-size:16px;

}

D.编号嵌套

div:before{

content:counter(divCounter,upper-alpha)'.';

color:blue;

font-size:16px;

}

div{

counter-increment:divCounter;

counter-reset:subDivCounter;

}

p:before{

content:counter(subDivCounter)'.';

margin-left:15px;

font-size:12px;

}

p{

counter-increment:subDivCounter;

}

E.字符串两边添加文字嵌套符号

h3:before{

content: open-quote;

}

h3:after{

content: close-quote;

}

h3{

quotes:"【""】";

}

disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper-roman 大写罗马文字| lower-greek小写希腊字母 | lower-latin小写拉丁文 | upper-latin 大写拉丁文| armenian亚美尼亚数字 | georgian乔治亚数字 | lower-alpha小写英文字母 | upper-alpha大写英文字母 | none无 | inherit继承