diff --git a/html/html基础.md b/html/html基础.md index 88279e2..007a5cf 100644 --- a/html/html基础.md +++ b/html/html基础.md @@ -448,7 +448,7 @@ - col - rowgroup - colgroup -- Web表单 +- ## Web表单 - <form>标签 - form标签一般会有两个属性,action和method - action:用来指定表单数据提交的目标url @@ -720,14 +720,78 @@ 255GB/256GB ``` + - 表单的伪类 + - :required和:optional + - 关于<input>、<select>、<textarea>等标签的required属性: + - 一旦上述标签指定了required属性,那么在提交表单时,上述标签必须已经手动填写了相关信息或是通过value睡醒那个有默认值,不能为空 + - 可以通过:optional和:required伪类来为不同的input组件采用不同样式 + - checkbox,如果该checkbox未被选中则表单提交时不会被添加到数据中,若checkbox被指定为required,那么在提交表单时该checkbox必须被勾选 + ```html + + + + ``` + - :invalid和:valid + - :invalid和:valid判断通常如下: + - 如果input元素没有约束,那么都是valid的 + - 如果input元素标记为required,但是值为空,那么为invalid + - 如果input元素type为email或者number但是不满足条件,那么也为invalid + - :in-range和:out-of-range + - 对于input类型为数字的输入框,如果输入位于min和max属性之外,那么该input元素会匹配:out-of-range伪类,否则会匹配:in-range伪类 + - 匹配:in-range的元素同样会匹配:valid,匹配:out-of-range的伪类同样会匹配:invalid,但是:in-range/:out-of-range指定的范围比:valid/:invalid更精确,可以用来指定更为复杂的样式 + - :enabled和:disabled + - :enabled和:disabled判断如下 + - 可以通过disabled属性来指定组件是否为enabled或者disabled + - :read-only和:read-write + - 类似与:enabled和:disabled,:read-only和:read-write通常可以用来选择那些是否可以编辑的组件,但是readonly标记的组件内容会随着表单被提交,而disabled组件标记的内容则不会随着表单提交 + - 可以通过readonly属性来标记input是否可以被修改 + - 针对radio和checkbox组件的伪类 + - :checked、:default、:indeterminate + - :checked + - :checked伪类用来选择该input是否被选中 + - :default + - :default伪类用来选中那些在导入页面时默认被选中的input组件 + - 即使后来该组件被取消选中状态,:default依然会选中该组件 + - :indeterminate + - :indeterminate用来选中那些没有确定状态的组件,既不是选中状态,也不是非选中状态 + - :indeterminate状态如下: + - 多个具有相同name属性的radio,但是没有选中任何一个 + - 通过js将checkbox的indeterminate属性设置为true + - progress元素没有value属性 + - 浏览器端的表单数据验证 + - 对于表单控件,有如下两种方式进行数据验证 + - html5组件内置的验证方式 + - 通过js来进行自定义的验证 + - 内置验证方式 + - 内置验证方式通常通过html5表单控件的属性来完成对输入数据的约束,该方法验证客户端数据并不需要通过js语言即可完成 + - 内置属性如下: + - required:设置该空间内容是否需要填充且不为空 + - maxlength/minlength:指定输入字符串数据的最长长度和最短长度约束 + - min/max:对于数值类型,指定输入值的最大/最小值 + - type:指定输入值是否为email类型、number类型或是其他类型 + - pattern:通过正则表达式来指定输入数据的类型 + ```html + + - - - - - - + + ```