日记2

48 阅读3分钟

input标签
为了搜集用户信息,可以通过input标签来接收用户所填写的信息。但是对于用户的信息来说有多种类型,比如选择和填写等等,为了让input有各种功能,用input中的属性type来选择其类型,常用的有text单行输入框(输入什么就显示什么),password密码输入框(输出的字符被*代替显示),radio单选框,checkbox多选框,file文件选择器.

对于text和password来说,可以通过添加占位符来提示用户输入的信息,且不会影响用户的输入,用input中的属性placeholder来添加,将想要添加的提示输入””里

radio被叫做单选框,但是单纯添加几个radio是没办法实现单选的,因为是默认每一个radio是独立的一组,而单选则是建立在一组内的功能实现。因此可以通过添加属性name来进行分组,将想要一组的radio类型里的input添加属性name并输入相同的属性值,就实现单选功能了。除此之外,还可以通过在每组中某个单选框添加属性checked(可以不用属性值),这样就会默认选择这个单选框。(如果一组中有多个checked,则默认为最后一个带有属性checked的单选框)

想要多选文件时,可以添加属性multiple,这样便可以在文件选择时同时选择多个文件上传(不能多次分开选择上传文件,以最后一次上传的为准)

下拉表单

在选择某个选项但是选项太多对观感不好,所以说可以采用下拉表单来更方便使用,且可以清楚得看到自己选择了哪个选项。这个就是select标签,select标签里嵌套option作为选项,如果需要默认选中其中一个,可以往那个option里添加selected属性。如无则默认第一个。

textarea多行文本框
textarea的标签和input中的text相比有两个不同,1是textarea可以换行输入,2是textarea可以通过右下角来变化文本框大小(但是不推荐这么用)

button标签

这个标签顾名思义,就是关于按钮的标签。然而标签也是于input标签一样,具有多种种类,并同样用type属性来标记,与input不同的是,input没有结束标签,而button有,因此使用为X(type如果没有值则默认为button属性值,X为按钮中显示的文字)

比较常用的就是提交按钮submit、重置按钮reset和普通按钮button。

submit和reset多用于收集用户信息时使用,而button多用于JS使用。因此现在主要记录submit和reset与input的搭配使用。
button标签要和input一起使用的话,可以将两者嵌入form标签里去,由form来统一控制,这样便可以用button来控制input的信息。