css技巧
最后更新于：2022-04-01 23:51:02
[TOC]
# input 系列
## --accept （规定上传文件类型）
> 规定通过文件上传来提交的文件的类型
~~~
~~~
~~~
如果不限制图像的格式，可以写为：accept="image/*"
~~~
**注**：accept 属性只能与 `` 配合使用。它规定能够通过文件上传进行提交的文件类型。
## --autocomplete （是否记录历史输入）
> 启用自动完成功能的表单（是否记录输入值）
~~~
~~~
效果：
**注**：autocomplete 属性适用于 `
~~~
效果：
## --checked （预选定）
> 带有一个预选定复选框的 HTML 表单
~~~
~~~
效果：
> checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 或 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
## --disabled （禁用）
> 禁用输入字段的 HTML 表单
~~~
~~~
效果：
## --form （表单之外的输入字段）
> 位于表单之外的输入字段
~~~
Last name:
~~~
效果：
> form 属性规定 input 元素所属的一个或多个表单。
form 属性的值必须是其所属表单的 id。
如需引用一个以上的表单，请使用空格分隔的列表。
## --formaction （覆盖表单的 action 属性）
> 覆盖表单的 action 属性 。 适用于 type="submit" 和 type="image"
~~~
~~~
效果：
## --formmethod （覆盖表单的 method 属性）
> 覆盖了表单的 HTTP 方法
~~~
~~~
效果：
## --formenctype （覆盖表单的 enctype 属性）
> 覆盖表单的 target 属性
带有两个提交按钮的表单（拥有有不同的编码方式）
~~~
~~~
效果：
**注：**该属性与 type="submit" 和 type="image" 配合使用。
## --formnovalidate （提交表单时不进行验证）
> 覆盖表单的 novalidate 属性，提交表单时不进行验证
带有两个提交按钮的表单（一个进行验证，另一个不验证）：
~~~
~~~
效果：
**注：**该属性适用于 `
~~~
效果：
## --height （定义 input 字段的高度）
> 用图片作为提交按钮的表单：
~~~
~~~
效果：
**提示：**为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。
## --list （带有 datalist 的表单）
> 带有 datalist 的表单
~~~
~~~
效果：
## --max （规定输入字段的最大值）
> 带有指定范围的数字输入字段
~~~
Points:
~~~
效果：
**注：**max 和 min 属性适用于以下 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
## --maxlength （规定输入字段中的字符的最大长度）
> 下面这个 HTML 表单带有最大长度分别是 85 和 55 个字符的两个输入字段
~~~
~~~
**用法：**maxlength 属性规定输入字段的最大长度，以字符个数计。
maxlength 属性与 `` 或 `` 配合使用。
## --multiple（允许一个以上的值）
> 可接受多个值的文件上传字段
~~~
~~~
> 上传图片的时候可以多选
**用法：**multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值。
注释：multiple 属性使用欧冠与以下 类型：email 和 file。
## --name （定义 input 元素的名称）
> 带有两个文本字段和一个提交按钮的 HTML 表单
~~~
~~~
**注：**name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
## --pattern（规定输入字段的值的模式或格式）
> 规定输入字段的值的模式或格式。
例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
只能包含三个字母的文本字段（数字或特殊字符）
~~~
Country code:
~~~
**用法：**pattern 属性规定用于验证输入字段的模式。
模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。
**注释**：pattern 属性适用于以下 `` 类型：text, search, url, telephone, email 以及 password 。
**提示**：请使用标准的 "title" 属性来描述模式。
## --placeholder （规定帮助用户填写输入字段的提示）
> 规定帮助用户填写输入字段的提示
~~~
~~~
效果：
**注：**placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。
## --readonly（只读）
~~~
~~~
**注：**readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
readonly 属性可与 `` 或 `` 配合使用。
## --required （指示输入字段的值是必需的）
> 带有必填字段的表单
~~~
~~~
效果：
**注：**required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
## --step （规定输入字的的合法数字间隔）
> 带有合法数字间隔的数字输入控件
~~~
~~~
效果：
**注：**step、max 以及 min 属性适用于以下 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
## --size（定义输入字段的宽度）
~~~
~~~
效果：
## --width（定义 input 字段的宽度）
> 定义 input 字段的宽度。（适用于 type="image"）
~~~
~~~
width 属性只适用于 ，它规定 image input 的宽度。
**提示：**为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。
';