文章目录
- 二、学习开始
- 3.6、form元素
- 示例：添加form元素
- 示例：action属性添加到form属性中
- 3.7、input元素
- 示例：在input属性中添加参数
- 3.8、button元素
- 示例：在button中添加type元素
- 示例：定义单选按钮radio
- 3.9、id属性
- 示例：将值为 indoor 的 id 属性添加到单选按钮
- 示例：添加value属性
- 4.1、fieldset 元素
- 示例：将 Indoor 和 Outdoor 单选按钮嵌套在 fieldset 元素中
- 示例：在fieldest元素中添加legend元素
- 示例：通过仅给 label 元素添加文本 Loving，并给它添加适当的 for 属性值，将文本 Loving 与复选框相关联
- 示例：完善复选框与单选框
- 4.2、footer元素
- 示例：在main后添加footer元素
- 三、最终代码
二、学习开始
3.6、form元素
form元素在HTML中的作用主要是负责数据采集，它定义了一个包含表单元素的区域，用户输入的信息都需要包含在form标签中。当用户点击提交按钮后，form标签内的数据将被发送到服务器或电子邮件地址。服务器上的处理程序（如ASP或PHP）会处理这些数据，然后将用户所需的信息返回到客户端的浏览器上，从而实现网页的交互性。
使用form元素的一般方式如下：
定义表单：使用form标签来定义一个表单的开始和结束。例如，form表示表单的开始，/form表示表单的结束。
指定表单提交的目的地：通过action属性指定表单数据提交到的URL地址。例如，form action=“url地址”。
指定表单数据的提交方式：通过method属性指定数据提交的方式，通常有GET和POST两种方式。例如，form method=“提交方式”。
添加表单域：表单域是用户输入信息的地方，可以通过各种input元素来实现，如文本框、复选框、单选按钮等。每个input元素都有一个type属性，用于指定输入字段的形式。
添加提示信息：为了提高用户体验，可以在表单中添加提示信息，帮助用户理解每个字段的含义和填写要求。
示例：添加form元素
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
示例：action属性添加到form属性中
action属性定义了当用户提交表单时，数据将被发送到的URL
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
3.7、input元素
input元素是创建交互式表单的基石，它有多种类型（type属性），每种类型决定了输入控件的外观和行为。以下是一些常见的input类型：
input type=“text”：用于单行文本输入，用户可以输入文字、数字或字符。
input type=“password”：用于密码输入，输入内容会以圆点或星号显示，以隐藏实际输入的字符。
input type=“button”：定义一个按钮，通常与JavaScript一起使用来执行某些操作。
input type=“checkbox”：定义复选框，允许用户从一组选项中选择多个。
input type=“radio”：定义单选按钮，通常用于提供互斥的选项。
input type=“file”：让用户能够上传文件。
input type=“submit”：定义提交按钮，用户点击后会提交表单
示例：在input属性中添加参数
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
3.8、button元素
button标签用于创建可点击的按钮，通常用于表单提交或执行某些JavaScript函数
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
注：即使你在文本输入下方添加了按钮，它们也会在页面上彼此相邻。 这是因为 input 和 button 元素都是内联元素，它们不会出现在新的行上。
示例：在button中添加type元素
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
示例：定义单选按钮radio
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
3.9、id属性
id 属性用于标识特定的 HTML 元素。 每个 id 属性的值必须不同于整个页面的所有其他 id 值
示例：将值为 indoor 的 id 属性添加到单选按钮
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
示例：添加value属性
value属性用于定义元素的具体值，其具体作用依赖于它所属的元素类型。
以下是不同场景下value属性的作用：
按钮类型：当input标签的type属性为"button"、"reset"或"submit"时，value属性定义了按钮上显示的文本。
文本输入类型：对于"text"、"password"和"hidden"类型的input元素，value属性设置了输入字段的初始（默认）值。
选择类型：在"checkbox"、"radio"和"image"类型的input元素中，value属性定义了与输入相关联的值，这个值会在表单提交时发送到服务器。
提交数据：当表单被提交到服务器时，服务器获取的是各个控件的value值，而不是用户在界面上看到的内容。
其他元素：value属性还可以与其他元素一起使用，如button、meter、li、option、progress和param，在这些元素中，它也是用来指定元素的值。
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
4.1、fieldset 元素
fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。
fieldset 元素是块级元素，这意味着它们出现在新的一行上。
示例：将 Indoor 和 Outdoor 单选按钮嵌套在 fieldset 元素中
fieldset 元素在HTML中起到了组织和描述表单控件的作用，使得表单更加结构化、易用和可访问。
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
示例：在fieldest元素中添加legend元素
legend元素一般用于描述该组控件的用途或相关信息。当用户将鼠标悬停在 fieldset元素上时，浏览器通常会显示 legend元素的内容作为提示。
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
示例：通过仅给 label 元素添加文本 Loving，并给它添加适当的 for 属性值，将文本 Loving 与复选框相关联
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
示例：完善复选框与单选框
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
4.2、footer元素
footer元素在HTML中用于表示一个页面或者一个区域的页脚。它通常包含版权信息、作者信息、链接列表或者其他关于文档的信息。
示例：在main后添加footer元素
Document CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
三、最终代码
CatPhotoApp CatPhotoApp
Cat Photos
See more cat photos in our gallery.
Cat Lists
Things cats love:
- cat nip
- laser pointers
- lasagna
Cats love lasagna. Top 3 things cats hate:
- flea treatment
- thunder
- other cats
Cats hate other cats. Cat Form
![[工业自动化-1]：PLC架构与工作原理](https://img-blog.csdnimg.cn/ce10a1471ed14382bc58364cf8bd5209.png)
还没有评论，来说两句吧...