input类型详解

AZFZC • 2025-04-13 11:45 • 编程

一、文本输入框

文本输入框是input类型中最基础也是最常用的一种类型。通过type属性设置为text即可创建一个文本输入框。

	<input type="text" placeholder="请输入文本">

其中placeholder属性可以设置文本框内默认提示文字。同时，还可以通过设置maxlength属性限制用户输入的字符数。

	<input type="text" maxlength="10" placeholder="最多输入10个字符">

此外，还可以在文本框中加入一些文本格式验证，比如验证用户输入是否为email地址，代码如下：

	<input type="email" placeholder="请输入您的邮箱地址">

输入框依据type的不同还可以实现验证用户输入的手机号、URL、日期等等，详见官方文档。

二、单选框和复选框

1、单选框

单选框通过type属性设置为radio实现。可以使用一个name属性对单选框进行分组，以确保用户只能选中其中一个选项。

	<input type="radio" name="gender" value="male" checked>男
	<input type="radio" name="gender" value="female">女

其中value属性可以用来在表单提交时传递给后端数据。checked属性用来设置默认选项。

2、复选框

复选框通过type属性设置为checkbox实现。也可以使用name属性对复选框进行分组，但是不同于单选框，复选框可以多选。

	<input type="checkbox" name="hobby" value="basketball">篮球
	<input type="checkbox" name="hobby" value="football">足球

和单选框一样，也可以利用checked属性设置默认选中。

三、下拉框

通过select标签和option标签可以创建下拉框。可以使用multiple属性开启多选功能。

	<select name="province">
		<option value="" selected>请选择省份</option>
		<option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="gd">广东</option>
	</select>

其中，selected属性用于设置默认选项。

四、文件上传

文件上传通过type属性设置为file实现。

	<input type="file">

用户点击该输入框后可以选择本地文件上传。需要注意，在form表单中一定要设置enctype属性为multipart/form-data才能正常提交文件。

五、按钮

通过type属性设置为button实现普通按钮，通过type属性为submit实现提交按钮，通过type属性为reset实现重置按钮。

	<input type="button" value="普通按钮">
	<input type="submit" value="提交">
	<input type="reset" value="重置">

如果需要自定义按钮样式，可以使用CSS样式表来实现。

六、隐藏域

隐藏域通过type属性设置为hidden实现。可以在表单中传递一些需要隐藏的数据，如id等。

	<input type="hidden" name="id" value="123">

用户看不到这个输入框，但是提交表单时所设置的值会被提交。

原创文章，作者：AZFZC，如若转载，请注明出处：https://www.506064.com/n/369607.html