CSS表单标签(上)

229 阅读1分钟

表单标签

1,什么是表单?

表单就是专门用来收集用户信息的;

2,表单元素?

元素也就是标签,浏览器中的表单标签都有特殊的外观和默认的功能;

3,格式:

4,input标签,里面有一个type属性,这个属性有多种取值类型,

不同的取值就决定了input的功能和外观。

一,input系列表单标签:

1647001997757.png


场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页

标签名:input input标签可以通过type属性值的不同,展示不同效果

注意点:1,默认会在同一行显示;

1,文本框:type="text"

用于输入单行文本

占位符placeholder 提示用户输入的内容文本

<input type="text" placeholder="请输入姓名">

2,密码框:type="password"

用于输入密码,默认隐藏显示;

<input type="password" name="" id="" placeholder="请输入密码">

3,单选框:type="radio"

用于多选一

​ 1,默认情况下.默认情况下单选框不会互斥,是可以同时选择多个选项,所以需要添加name属性,

name属性对于单选框有分组功能,而且name属性必须设置相同的值,可以任意但必须相同,

​ 有相同name属性值的单选框为一组,一组中只能同时有一个被选中;

​ 2,checked作用添加默认选中,因为在默认情况下标签是不会默认选择

<input type="radio" name="gender"><input type="radio" name="gender" checked>

4,多选框:type="checkbox"

用于多选多

常用属性(同单选框):checked

<input type="checkbox" name="" id="">敲代码
<input type="checkbox" name="" id="">熬夜
<input type="checkbox" name="" id="">掉头发

5,上传文件:type="file"

文件选择,用于之后文件上传

multiple属性: 多文件选择

file默认情况下只能选择一个文件上传,multiple可以一次性上传多个文件;