htmlinput（HTMLinput属性）

1. HTMLInput概述

HTMLInput是HTML表单中的输入控件之一，通常用于让用户输入各种类型的数据，包括文本、数字、日期、时间、密码等。HTMLInput通常需要借助标签的属性来指定其类型、名称、值、是否必填等信息。在HTML中，我们可以使用如下代码来创建一个简单的文本输入框：

该代码中，type属性用来指定输入框的类型为文本，name属性用来指定输入框的名称为“username”，value属性用来指定输入框的初始值为空。

2. HTMLInput类型

HTMLInput有多种类型，每种类型通常用于特定的数据输入需求。下面是HTMLInput的常见类型以及其用途：

2.1 文本输入框（text）

文本输入框用于让用户输入文本内容，通常用于输入用户名、密码、地址、电话号码等信息，如下所示：

2.2 密码输入框（password）

密码输入框用于输入密码等敏感信息，其内容将以星号或其他遮蔽符号显示，如下所示：

2.3 单选框（radio）

单选框用于让用户从多个选项中选择一个，如下所示：

男

女

2.4 复选框（checkbox）

复选框用于让用户从多个选项中选择多个或全部选项，如下所示：

苹果

香蕉

橙子

2.5 下拉框（select）

下拉框用于让用户从多个选项中选择一个或多个选项，如下所示：

2.6 文件上传框（file）

文件上传框用于上传本地文件，如下所示：

2.7 数字输入框（number）

数字输入框用于输入数字类型的数据，如下所示：

2.8 日期输入框（date）

日期输入框用于输入日期类型的数据，如下所示：

2.9 时间输入框（time）

时间输入框用于输入时间类型的数据，如下所示：

2.10 隐藏输入框（hidden）

隐藏输入框用于储存内容，需要提交表单时才可使用，如下所示：

3. HTMLInput常见属性

HTMLInput具有多种属性，常见的属性包括：type、name、value、checked、disabled等。下面分别对这些属性进行介绍：

3.1 type属性

type属性用于指定输入框的类型，其值可以是text、password、radio、checkbox、select、file、number、date、time、hidden等。不同的值代表着不同的输入框类型。

3.2 name属性

name属性用于指定输入框的名称，其值将在提交表单时作为数据的键值。同一个表单中的所有输入框应该具有唯一的名称。

3.3 value属性

value属性用于指定输入框的初始值，其值可以是文本、数字、日期等类型的数据，不同的输入框类型可能需要的初始值不同。

3.4 checked属性

checked属性用于指定复选框或单选框是否被选中，其值可以是true或false。当checked属性的值为true时，表示该选项被选中；当checked属性的值为false时，表示该选项未被选中。

3.5 disabled属性

disabled属性用于指定输入框是否被禁用，其值可以是true或false。当disabled属性的值为true时，表示输入框被禁用，用户无法输入或更改输入框中的内容；当disabled属性的值为false时，表示输入框可用。

4. HTMLInput的事件处理

HTMLInput具有多种事件，可以通过JavaScript对这些事件进行处理。常见的事件有：onchange、onclick、onsubmit等。

4.1 onchange事件

onchange事件在输入框内容发生改变时触发，可以通过该事件来检测输入框中内容的变化。例如下面的代码可以在用户选择下拉框中的选项时弹出一个对话框：

4.2 onclick事件

onclick事件在用户单击输入框时触发，可以通过该事件来处理用户与输入框的交互。例如下面的代码可以在用户单击按钮时提交表单：

4.3 onsubmit事件

onsubmit事件在表单即将提交时触发，可以通过该事件来检测表单中的数据是否合法。例如下面的代码可以检测输入框中的数据是否为空：

<script>

function validate() {

var username = document.myform.username.value;

if (username == '') {

alert('请输入用户名！');

return false;

}

}

</script>

5. 总结

通过本文的介绍，我们可以了解到HTMLInput是HTML中的输入控件，包括文本输入框、密码输入框、单选框、复选框、下拉框、文件上传框、数字输入框、日期输入框、时间输入框、隐藏输入框等。HTMLInput具有多种属性和事件，可以通过这些属性和事件来指定输入框的类型、名称、初始值、是否选中、是否禁用，以及对输入框中数据进行验证等操作。在实际开发中，我们需要根据需求选择不同类型的HTMLInput，并结合相应的属性和事件来实现特定的功能。

HTML中的input元素是用来创建各种类型的表单，包括文本框、单选按钮、多选框、密码框等等。在实际开发中，我们需要通过input元素的各种属性来控制这些表单的行为和样式，这些属性被称作“HTMLinput属性”。

2. HTMLinput属性分类

HTMLinput属性根据其功能可以分为以下几类：

基本属性：包括type、name、value、checked、disabled、readonly等，用于控制input元素的基本行为和状态。

表单属性：包括form、formaction、formenctype、formmethod、formnovalidate、formtarget等，用于控制input元素所在表单的提交行为。

自动完成功能 (autocomplete)：包括autocomplete、autofocus、list等，用于控制用户在输入框中输入时的联想和提示功能。

输入类型 (input types)：这是HTML中最重要的一类属性，它们定义了input元素的具体类型，包括text、password、radio、checkbox、submit等等。

输入限制 (input limits)：包括min、max、step等，用于控制输入框的输入值范围和间隔。

输入验证 (input validation)：包括required、pattern等，用于控制用户输入数据的合法性。

其他：还包括多个较为特殊的属性，比如size、maxlength、accept、multiple等。

下面将详细介绍各种HTMLinput属性的具体用法和效果。

3. 基本属性

3.1 type

input元素最基本的属性就是type属性，它决定了input元素的具体类型，可选值如下：

text：文本框

password：密码框，用于输入敏感信息

checkbox：多选框，可以选择多个选项

radio：单选按钮，只能选择一个选项

submit：提交按钮，用于提交表单

reset：重置按钮，用于清空表单数据

file：文件上传框，用于用户上传文件

hidden：隐藏域，用于存储不需要显示的数据

image：图形按钮，同样用于提交表单，但显示为图标或图片

button：普通按钮，不具有提交或重置功能

color：颜色选择器

date：日期选择器

datetime-local：日期时间选择器

email：电子邮件地址输入框

month：月份选择器

number：数字输入框

range：滑动条

search：搜索框

tel：电话号码输入框

time：时间选择器

url：URL地址输入框

week：周选择器

3.2 name

name属性用于指定input元素在表单中的标识符，可以用于后台程序处理数据时的标识。name属性的值必须是唯一的，不允许重复。

3.3 value

value属性用于指定input元素的默认值。对于文本框和密码框，value属性会显示默认的文本或密码；对于单选按钮和复选框，value属性表示选中时的值。

例如，对于文本框和密码框，可以这样定义默认值：

对于单选按钮和复选框，可以这样定义选项：

男性

女性

阅读

音乐

体育

3.4 checked

checked属性用于指定单选按钮和复选框是否被选中。对于单选按钮，只能有一个选项被选中；对于复选框，可以有多个选项被选中。

例如，对于单选按钮和复选框，可以这样定义选中状态：

男性

阅读

3.5 disabled

disabled属性用于禁用input元素，使之无法被用户操作。被禁用的input元素将无法接收用户输入或被选中。

例如，可以这样禁用文本框和复选框：

3.6 readonly

readonly属性用于将input元素设置为只读状态，使之无法被编辑。只读的input元素仍然能接收用户输入，但不能被修改。

例如，可以这样设置只读的文本框和密码框：

4. 表单属性

4.1 form

form属性用于指定input元素所在的表单。如果没有指定form属性，则该input元素默认属于其最近的包含元素、

4.2 formaction

formaction属性用于指定input元素所在表单的提交地址。如果指定了formaction属性，则该input元素提交表单时将使用formaction属性所指定的URL地址，而不是表单的默认提交地址。

例如，可以这样指定表单提交地址：

4.3 formenctype

formenctype属性用于指定input元素所在表单的提交方式。默认情况下，表单数据将以“application/x-www-form-urlencoded”的格式提交。如果需要提交复杂的数据格式，可以使用其他方式，比如“multipart/form-data”。

例如，可以这样指定表单提交方式：

4.4 formmethod

formmethod属性用于指定input元素所在表单的提交方式。默认情况下，表单将使用“GET”方法提交。如果需要使用“POST”方法，可以设置formmethod属性的值为“post”。

例如，可以这样指定表单提交方式：

4.5 formnovalidate

formnovalidate属性用于指定，当用户点击input元素提交表单时，是否要对表单进行验证。如果设置了formnovalidate属性，则表单不会被验证。

例如，可以这样指定表单不进行验证：

4.6 formtarget

formtarget属性用于指定input元素提交表单后，表单数据的展示方式。默认情况下，表单数据将被展示在当前窗口中。如果需要在新的窗口或框架中显示表单数据，可以设置formtarget属性的值。

例如，可以这样指定表单数据在新窗口中展示：

5. 自动完成功能 (autocomplete)

5.1 autocomplete

autocomplete属性用于指定input元素在用户输入时是否自动联想输入。默认情况下，autocomplete属性的值为“on”，表示启用自动完成功能。如果设置autocomplete属性的值为“off”，则关闭自动完成功能。

例如，可以这样关闭自动完成：

5.2 autofocus

autofocus属性用于指定input元素加载页面时是否自动获取焦点，即光标默认停留在input元素上。每个表单只能有一个autofocus属性设置为true。

例如，可以这样设置自动获取焦点：

5.3 list

list属性用于指定input元素下拉列表的数据源。只有当input元素的type属性设置为“text”时，list属性才会生效。

例如，可以这样指定下拉列表的数据源：

6. 输入类型 (input types)

6.1 text

text类型是input元素默认的类型，用于输入普通文本。

例如，可以这样定义文本框：

6.2 password

password类型用于输入密码或其他敏感信息，输入的字符将被隐藏。

例如，可以这样定义密码框：

6.3 radio

radio类型用于创建单选按钮。每组单选按钮应该使用相同的name属性。

例如，可以这样定义单选按钮：

男性

女性

6.4 checkbox

checkbox类型用于创建复选框。每个复选框应该使用不同的name属性。

例如，可以这样定义复选框：

阅读

音乐

体育

6.5 submit

submit类型用于创建提交按钮，用于提交表单数据。

例如，可以这样定义提交按钮：

6.6 reset

reset类型用于创建重置按钮，用于清空表单数据。

例如，可以这样定义重置按钮：

6.7 file

file类型用于上传文件，用户选择文件后，服务器将保存该文件。

例如，可以这样定义上传框：

6.8 hidden

hidden类型用于创建隐藏域，用于存储不需要显示的数据。

例如，可以这样定义隐藏域：

6.9 image

image类型用于创建图形按钮，该按钮通常用于提交表单。

例如，可以这样定义图形按钮：

6.10 button

button类型用于创建普通按钮，可以用于添加自定义脚本或事件处理程序。

例如，可以这样定义普通按钮：

6.11 color

color类型用于选择颜色。

例如，可以这样定义颜色选择器：

6.12 date

date类型用于选择日期。

例如，可以这样定义日期控件：

6.13 datetime-local

datetime-local类型用于选择日期和时间。

例如，可以这样定义日期时间控件：

6.14 email

email类型用于输入电子邮件地址。

例如，可以这样定义电子邮件输入框：

6.15 month

month类型用于选择月份。

例如，可以这样定义月份选择器：

6.16 number

number类型用于输入数字，可以指定最小值、最大值和步长。

例如，可以这样定义数字输入框：

6.17 range

range类型用于创建滑动条，用户可以用滑动条选择一个值。

例如，可以这样定义滑动条：

6.18 search

search类型用于创建搜索框。

例如，可以这样定义搜索框：

6.19 tel

tel类型用于输入电话号码。

例如，可以这样定义电话号码输入框：

6.20 time

time类型用于选择时间。

例如，可以这样定义时间选择器：

6.21 url

url类型用于输入URL地址。

例如，可以这样定义URL输入框：

6.22 week

week类型用于选择周数。

例如，可以这样定义周选择器：

7. 输入限制 (input limits)

7.1 min

min属性用于指定输入框的最小值。

例如，可以这样限制数字输入框的最小值：

7.2 max

max属性用于指定输入框的最大值。

例如，可以这样限制数字输入框的最大值：

7.3 step

step属性用于指定输入框的步长。例如，如果输入框的类型是“number”，则step属性指定每次调整的步长；如果输入框的类型是“range”，则step属性指定每次滑动的步长。

例如，可以这样设置数字和滑动条的步长：

8. 输入验证 (input validation)

8.1 required

required属性用于指定输入框必须填写内容。

例如，可以这样限制文本框必须填写内容：

8.2 pattern

pattern属性用于指定输入框的正则表达式，该正则表达式用于验证输入的内容是否合法。

例如，可以这样使用正则表达式验证邮箱地址的合法性：

9. 其他

9.1 size

size属性用于指定输入框的大小，即可以容纳多少个字符。对于文本框和密码框，size属性指定显示的字符数；对于选择框和多选框，size属性指定选项的可见行数。

例如，可以这样设置文本框和选择框的大小：

9.2 maxlength

maxlength属性用于限制输入框能输入的字符数。对于文本框和密码框，maxlength属性指定能输入的最大字符数；对于选择框和多选框，maxlength属性无效。

例如，可以这样限制文本框和密码框的最大字符数：

9.3 accept

accept属性用于限制文件上传框只能上传某些类型的文件。accept属性的值可以是MIME类型或扩展名。

例如，可以这样限制上传框只能上传图像和PDF文件：

9.4 multiple

multiple属性用于指定文件上传框是否支持上传多个文件。如果设置了multiple属性，则用户可以选择多个文件进行上传。

例如，可以这样定义支持上传多个文件的上传框：

10. 总结

HTMLinput属性是表单开发中的重要部分，它们控制了输入框的行为和样式，帮助我们创建出多样化的表单。在实际开发中，了解这些input属性的具体用法和效果，才能更好地开发出高质量的表单应用。