表单中由多个控件组成,例如文本框,下拉列表,复选框和单选按钮,使用户能够输入信息。可以使用<input>
标记创建这些控件。需要将<input>
标记的type
属性设置为控件的名称。 例如,<input type="text">
创建一个文本框类型的控件。
1.INPUT标签的类型
以下是HTML中的<input>
标签类型如下:
- text
- tel
- url
- password
- datetime-local
- datetime, date, month, week 和 time
- number and range
- file
- hidden
- checkbox
- radio
- submit
- reset
现在,让我们逐一讨论上述所有类型的<INPUT>
标签。
2.HTML文字和搜索类型
文本框(或文本字段)是便于用户输入信息的矩形框。它用于从用户收集单行信息,例如姓名,生日,电话号码或电子邮件。
可以通过将<input>
标记的type
属性设置为text
来在表单内创建一个文本框。 例如<INPUT type="text">
。 另外,指定文本框功能的输入标签的属性如下:
name
- 文本输入框的名称,以便处理表单中提供的信息的程序可以识别文本框。 例如:<INPUT type="text" name="username">
size
- 定义文本输入框的大小。它定义了在文本框中可以看到的可见字符数。 例如:<INPUT type="text" name="username" size="30">
maxlength
- 指定用户可以在文本框中输入的最大字符数。value
- 指定首次加载表单时要在文本框中显示的默认文本。
文本输入框示例:
<INPUT type="text" name="username" size="30" maxlength="20" value="maxsu">`
3.HTML tel类型
输入控件的电话类型用于输入电话号码。 在此类型中只能输入数字,因为它不接受字母。 由于存在多种有效电话号码,因此在输入控件中没有指定语法的特定语法。
还可以使用<input>
标签的pattern
属性指定特定的模式来输入电话号码。
4.HTML网址类型
输入控件的url
类型用于输入网页的有效路径。 网站的有效url
由协议,域名和路径名组成。 使用最广泛的协议是超文本传输协议(HTTP)和文件传输协议(FTP)。
提交表单时,将自动验证url
字段的值。
5.HTML电子邮件类型
输入控件的电子邮件类型用于输入有效的电子邮件地址,该地址应包含@
符号和点(.
)。 提交表单时,将自动验证电子邮件字段的值。
也可以通过使用Multiple
属性在电子邮件字段中输入多个电子邮件地址,该属性指定可以在输入控件中输入多个电子邮件地址。
6.HTML密码类型
密码用于保护用户不想与他人共享的秘密信息。可以使用INPUT标记并将其type
属性设置为password
来创建密码字段。 密码字段与文本框相似,但是在密码字段中输入的文本格式不可读,因为在字符位置显示了星号或点。
因此,它也称为蒙版文本框。 指定密码字段功能的<input>
标记的属性如下:
name
- 为密码字段提供内部名称,以便处理表单的程序识别该字段。名称属性是通过<input>
标记设置的。size
- 定义密码字段的长度。如果未指定大小,则浏览器采用默认大小,即20
。maxlength
- 指定用户可以在密码字段中输入的最大字符数。value
- 指定要在密码字段中显示的值为带掩码形式,该值将显示为点或星号。
密码输入框示例:
<INPUT type="password" name="username" size="30" maxlength="20" value="">`
7.HTML datetime-local类型
输入控件的datetime-local
类型用于在输入控件中输入日期和时间。当日期和时间定义为输入控件的类型时,表单上会提供一个日期时间选择器,以选择日期,月份,年份和时间。
可以根据自己的时区选择日期和时间。 此外可以使用min
和max
属性设置最小和最大日期和时间值。 如果要将秒转换为毫秒,可以使用step
属性。
8.HTML日期时间,日期,月,周和时间类型
还可以将输入控件的类型分别设置为日期时间,日期,月,周和时间。datetime
类型允许您在协调世界时(UTC)中输入年,月,日,小时,分钟,秒和秒的分数。
通过日期类型,可以使用日期时间选择器输入日期,月份和年份。
月份类型允许在输入控件中输入月份。还可以通过分别指定月份类型的min
和max
属性来设置最小和最大月份。
周类型用于输入一个月中的一周。时间类型用于仅在输入控件中输入时间。
9.HTML数字和范围类型
数字类型用于在输入控件中仅输入数字。不能输入任何字母,因为数字类型不接受它,并提示您在提交表单时仅输入数字。min
和max
值属性可用于指定要在输入控件中输入的最小值和最大值。 输入控件的范围类型允许输入特定范围内的值。
10.HTML文件类型
文件类型允许用户选择存储在本地计算机中的文件,并在提交表单时将其发送到服务器。 需要将文件的type
属性设置为创建文件选择字段。 用户可以直接在文件选择字段中输入文件的路径名,也可以使用浏览选项从系统特定的对话框中选择文件的路径名。
如果使用浏览选项,即使路径名超过指定的最大长度,浏览器也会接受完整的路径名。 文件选择字段的属性如下:
size
- 定义文件选择字段上可见文本的宽度。maxlength
- 指定可以在文件选择字段中输入的最大字符数。accept
- 指定可以通过文件上传提交的文件类型。
11.HTML隐藏类型
隐藏字段用于将变量和值从一种形式传递到另一种形式,而不会强迫用户重新输入信息。
此外,浏览器不会显示它。 可以使用<input>
标记并将其type
属性设置为hidden
来创建隐藏字段。指定隐藏字段功能的<input>
标记的属性如下:
name
- 指定隐藏字段的名称;value
- 指定默认情况下在隐藏字段中显示的值;
12.HTML复选框类型
复选框用于从表单上显示的一组给定项目中选择或取消选择一个或多个项目。 通过提供选项,它可以帮助用户快速轻松地选择项目。
可以通过将<input>
标记的type
属性设置为checkbox
来创建复选框。 指定复选框字段功能的<input>
标记的属性如下:
name
- 复选框字段的名称。以下示例显示了name
属性的用户:<input type="checkbox" name="fruits">
value
- 在选择复选框上的相应选项后,确定应传输到服务器的值。以下示例显示了value
属性的用户:<input type="checkbox" name="cars" value="audi">
checked
- 提供默认项目,该项目必须与用户选择的项目一起发送到服务器。 另外,用户可以根据需要清除选中的项目。以下示例显示了checked
属性的用户:<input type="checkbox" name="cars" value="audi" checked="yes">
13.HTML单选类型
单选按钮的用法几乎与复选框类似,不同之处在于,在一个复选框中可以选择多个项目,但是在单选按钮中,只能选择一个项目。
因此,单选按钮可以被描述为具有用户必须从中选择单个项目的项目列表的字段。 通过将<input>
标签的type
属性设置为radio
可以创建单选按钮字段。 指定单选按钮字段功能的<input>
标记的属性如下:
name
- 单选按钮字段的名称。 与复选框(其中不同项目的名称可以不同)不同,组中的每个单选按钮具有相同的名称。以下示例显示了name
属性的用法:<input type="radio" name="cars">
value
- 指的是当选择单选按钮的相应选项时应传输到服务器的值。以下示例显示了value属性的用户:<input type="radio" name="cars" value="audi">
checked
- 提供默认项目,如果用户未选择任何项目,则默认项目将被选择并发送到服务器。 如果用户从列表中选择其他任何项目,则会自动取消选择默认项目。 以下示例显示了checked
属性的用法:<input type="radio" name="cars" value="audi" checked="yes">
14.HTML提交类型
当用户单击“提交”按钮时,表单将发送到URL指定的地址。可以通过设置要提交的<input>
标记的type
属性的值来创建提交按钮。 指定提交按钮功能的<input>
标记的属性如下:
name
- 指定提交按钮的名称。value
- 指定在“提交”按钮上显示的标签。
15.HTML重置类型
当用户单击“重置”按钮时,表格中所有字段的信息都将被擦除并设置为默认值。 通过将<input>
标记的type
属性设置为reset
来创建重置按钮。 指定重置按钮功能的<input>
标记的属性如下:
name
- 指定重置按钮的名称。value
- 指定在“重置”按钮上显示的标签。