HTML基本理解day4 | 青训营笔记

155 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

1.4 < input>表单元素

在英文单词中,input是输入的意思,而在表单元素中< input>标签用于收集用户信息。 在< input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

< input type="属性值" /> < input/>标签为单标签

type属性设置不同的属性值用来指定不同的控件类型

image.png 1.name和value是每个表单元素都有的属性值主要给后台人员使用 < label>标签为input元素定义标注(标签)。 < label>标签用于绑定一个表单元素当点击< label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验语法:

1.5 标签

< label for="sex">男< /label>

< input type="radio" name="sex" id="sex" />

核心:< label> 标签的for 属性应当与相关元素的id属性相同

  1. name 表单元素的名字,要求单选按钮和复选框要有相同的name值

  2. checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素

  3. maxlength是用户可以在表单元素输入的最大字符数,一般较少使用.

1.6 < select>表单元素

在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用< select>标签控件定义下拉列表。 语法:

    < select>
< option>选项1< /option>< option>选项2< /option>< option>选项3< /option>

...
</select>

1.< select>中至少包含一对< option>。 2.在< option>中定义selected=“selected"时,当前项即为默认选中项

1.7< textarea>表单元素

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用< textarea> 标签。

在表单元素中 标签是用于定义多行文本输入的控件

使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论

image.png