一、文本输入框
文本输入框是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">
用户看不到这个输入框,但是提交表单时所设置的值会被提交。