Bootstrap 5-表单-必读篇2

本篇内容:表单输入类型和表单输入类型属性

阅读本篇前言:注意区分！一个是HTML的表单输入类型，一个是HTML5的表单输入类型。

 

---

HTML-所有的表单输入类型

文本输入框

• text

作用:用于输入文本，如:QQ帐号，用户名

代码图

 

密码输入框

 •  password

作用:用于输入密码，输入的文本会以掩码形式显示，如:QQ密码

代码图

 

单选按钮

 • radio

作用:单选，允许用户从一组预定义选项中选择一个。

代码图

 

多选，复选框

 •  checkbox

作用:允许用户选择多个选项。

代码图

 

按钮

 • button

作用:用于点击执行某些操作。

代码图

 

提交

 •  submit

作用:当用户点击时，将提交表单。

代码图

 

重置

 •  reset

作用:当用户点击时，将重置表单。

代码图

---

HTML5-表单-所有的表单输入类型

 

数字输入框

• number

作用:用于输入数字。

代码图

 

电子邮件输入框

•  email：电子邮件输入框

作用:具有特定的输入验证规则。

代码图

 

 

电话号码输入框

 • tel

作用:用于收集合用户输入的手机号码

代码图

 

颜色选择框

 • color

作用:用于选择颜色。

代码图

 

范围输入框

 • range

作用:用于输入一定范围内的数值。

代码图

 

文件选择框

 •  file

作用:允许用户从计算机上传文件。

代码图

 

隐藏输入框

 •  hidden

作用:用于存储不能向用户显示的信息。

代码图

 

网址输入框

 • url

作用:具有特定的输入验证规则。

代码图

 

搜索输入框

 • search

作用:具有特定的输入验证规则。

代码图

 

日期选择框

 • date

作用:用于选择日期。

代码图

 

 

年月选择框

 • month

作用:用于选择年月。

代码图

 

周年选择框

 • week

作用:用于选择周。

代码图

 

时间选择框

 • time：时间选择框

作用:用于选择时间。

代码图

 

日期年月日时间选择框

 • datetime-local

作用:用于选择本地日期和时间。

代码图

 

日期时间选择框

 • datetime

作用:用于选择日期和时间，包括时区信息。

代码图

 

 

---

所有的表单输入类型属性

 

输入类型

• type

作用:指定输入元素的类型。

代码图

 

输入名称

• name

作用:输入元素的名称，用于表单提交时收集数据。

代码图

 

字符默认值

 • value

作用:输入字段的默认值

代码图

 

字段预期值提示

• placeholder

作用:用于描述输入字段预期值的提示（样本值或有关格式的简短描述）。

代码图

 

禁用

 • disabled

作用:输入字段被禁用。

代码图

 

 

只读

 • readonly

作用:输入字段为只读（无法修改）。

代码图

 

 

最大值

 • max

作用:输入字段的最大值。

代码图

 

 

最大字符数

 • maxlength

作用:输入字段的最大字符数

代码图

 

 

 

最小值

 • min

作用:输入字段的最小值。

代码图

 

 

检查正则表达式

 • pattern

作用:检查输入值的正则表达式。

代码图

 

 

字段必填

 • required

作用:输入字段是必需的（必需填写）。

代码图

 

 

字段宽度

 • size（1～7）

作用:输入字段的宽度（以字符计）。

代码图

 

 

字段合法数字间隔

 • step

作用:输入字段的合法数字间隔。

代码图

 

 

字符自动完成

• autocomplete

作用:表单或输入字段是否应该自动完成，on/off

代码图

 

 

自动获得焦点

 • autofocus 

作用:当页面加载时 <input> 元素应该自动获得焦点，属性是布尔值

代码图

 

 

所属的表单单个/多个

 • form

作用:所属的单个还是多个表单，空格分隔，记得使用id关联。

代码图

 

 

输入控件的文件URL

 • formaction

作用:提交表单时处理该输入控件的文件URL。

代码图

 

表单提交编码

 • formenctype

作用:表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

代码图

 

发送数据的HTTP方法

 • formmethod

作用:用于向 action URL 发送表单数据的 HTTP 方法。

代码图

 

不验证

 • formnovalidate

作用:提交表单时不对元素进行验证，使用此属性代表不验证，默认是验证的。

代码图

 

 

提交表单何处响应

 • formtarget

作用:规定的名称或关键词指示提交表单后在何处显示接收到的响应。

代码图

 

 

高度和宽度

 • height

 • width

作用:规定元素的高度和宽度

代码图

 

 

预定义选项

• list

作用:list属性引用预定义选项datalist

代码图

 

 

多值

• multiple

作用:允许用户在 <input> 元素中输入一个以上的值。

代码图