9.交互标签

目录

1 表单标签

1.1 表单域

1.2  表单元素

1.2.1  输入表单元素 input

1.2.2  下拉表单元素 select

1.2.3  文本域元素 textarea

1.3  表单属性

1.3.1  表单不能为空 required

1.3.2  提示信息 placeholder

1.3.3  自动聚焦 autofocus

1.3.4  自动补全 autocomplete

1.3.5  允许提交多个文件 multiple

2  label标签

3  按钮标签

---

1 表单标签

表单一般应用与客户端向服务端提交数据，大多数网站的注册页面都是使用表单做的

表单一般有三个部分组成，表单域，表单控件和提示信息，上面的页面整体叫表单域，写内容的地方叫表单控件，手机号码与验证码叫做提示信息

1.1 表单域

表单域由form标签构成，它的语法是这样的

• 之前我用django做了一个简易的表单应用场景，感兴趣的话可以看一下 5.GET与POST_potato123232的博客-CSDN博客

我在这里先搭建一个简单的表单域

在这里面有form的常用属性 https://blog.csdn.net/potato123232/article/details/127684597 

1.2  表单元素

根据不同的应用场景我们放不同的元素，我们一个一个看

• 表单元素中涉及到的属性很多，我们这里只介绍常用的属性

1.2.1  输入表单元素 input

input的分支很多，为了之后好找一些，我把input的属性写到附录2 https://blog.csdn.net/potato123232/article/details/123471378 中

1.2.2  下拉表单元素 select

它的语法是这样的

• select中至少包含一个option

我们写一个看一下

我们可以使用selected = "selected" 设置默认选中项，如果没设置的话默认选中项为第一个

现在我们打开后默认项就变为了广州

1.2.3  文本域元素 textarea

input中的text只能输入单行内容，使用textarea可以输入多行内容，它的语法是这样的

这里的rows是指文本域只能显示几行，当我们设置为3的时候，文本域只能显示3行，但是我们也可以输入多行数据，cols指一行中最多字符长度(一个汉字占两个字符长度)

• 我们后续会用css改变大小，不会使用rows和cols

我们写一个看一下

我们可以在其中写字符

我们可以在这个地方写上默认的字符

这样我们打开后就是这个样子

1.3  表单属性

这几个是我们常用的表单属性

我们每个都试一下

1.3.1  表单不能为空 required

• input必须放在表单域中才能生效

我们现在什么都不输入，然后按下回车

1.3.2  提示信息 placeholder

当文本框中有内容时后面的提示信息消失

删除内容后，提示内容再次显示

如果你想修改提示文本的颜色，可以使用input::placeholder这个伪类

这样提示文本就是红色的了

并且它会影响你输入文本的颜色

1.3.3  自动聚焦 autofocus

我们打开页面之后就会自动聚焦

如果是我们对多个input都设置了autofocus，那么它会聚焦到最后设置的元素

1.3.4  自动补全 autocomplete

默认为on，必须在表单中加入属性name，不必须放在form中

• 一般是使用 autocomplete="off" 给这个功能关上，有些私密数据是不便再次展示出来的

我们输入1，然后提交，提交之后再次点击文本框，则会出现之前输入的内容

1.3.5  允许提交多个文件 multiple

这个是配合我们input中的file使用的，我们用一下

点击选择文件后，我们选择三个文件，之后点击打开

2  label标签

常配合表单中的checkbox与radio使用，我们先简单写一个表单

现在我想点一下这个男字，前面的单选框就被选上，这个时候我们就要用到标签了，它的语法是这样的

• id在name相同的一组按钮时，id值必须唯一
• id与for的值相同

我们用一下

我们发现现在点按钮旁边的字，按钮就可以选上了，网球我们没设置，所以网球点字按钮是没反应的

文本框同样适用

我们现在点击用户名，它就会自动聚焦到文本框上

label中不仅可以放文字，放图像或者别的什么元素也行，我们这里放一张图像

我们点击这个图像，文本框同样会获取到焦点

3  按钮标签

按钮标签用button表示，它是这样用的

一般来讲按钮上面都有个图，我们一般就使用css的background-image给图搞上去