form 标签
form标签用于为用户输入数据创建html表单。
常用属性:
-
action:表单提交的地址,将搜集完成的数据进行提交
-
method:表单提交数据的http方式,通常是 GET 或 POST
-
namename:指定表单的名称,这个名称可以用于在服务器端引用表单。
input 标签
input标签是最重要的表单元素,一般用于搜集用户信息。
type属性的不同,决定了当前input的类型。
类型:
-
text:文本输入框,为单行文本输入框
-
maxlength:文本区域最大字符
-
minlength:文本区域最小字符
-
placeholder:未输入之前的提示文本(在输入框不占字符)
-
value:没有输入之前的默认文本(在输入框占字符)
-
autofocus:页面加载之后文本区域自动获取焦点
-
disabled 禁用 不能输入 背景会自动变为灰色
-
readonly:只读,背景不会变色,但是你无法进行任何操作
-
-
password:密码框,输入框会自动显示小圆点,可以选择是否可视
-
radio:单选框
-
name:名称,用于分组。name名一样时,表示为一组
-
checked:表示选中状态
-
-
checkbox:复选框
-
checked:表示选中状态
-
-
number:数字输入框,只能输入数字(但是会自带数字加减按钮)
-
file:用于上传文件,文件类型包含视频、音频、图片、文档等等
-
hidden:隐藏域,用于悄悄的收集和发送一些数据到服务器
-
image:图片提交按钮
textarea 标签
textarea标签用于创建文本域/多行文本输入框。
应用场景:一般用于发表评论或发表文章时候使用。
常用属性:
-
rows:属性值是数字,是正整数,表示有多少行
-
cols:属性值是数字 正整数 表示宽度
-
placeholder:文本提示信息
-
disabled:禁用输入框
-
readonly:只读模式,不能修改内容
注意:
默认情况下输入框的宽高是可以手动拉伸的;
如果想要对尺寸进行控制 需要编写样式 resize: none; ;
如果给textarea添加宽度和高度 你所设定的rows和cols将不起作用。
select标签 & option标签
select 和 option成对出现
select标签定义了下拉列表
option标签为下拉列表选项
应用场景: 省市区三级联动
常用属性:
-
value:表单提交时,会提交option的value属性
-
selected 默认选项