在HTML5中,<input>元素拥有多个type属性值,用于定义不同的控件类型。
1.单行文本输入框<inpit type="text"/>
单行文本输入框用来输入简短的信息,如用户名、账号、证件号码等,常见的属性有name、value、maxlenght。
2.密码输入框<input type="password">
密码输入框用来输入密码,其内容将以圆点的形式显示
3.单选按钮<input type="radio">
单选按钮用于单项选择,如选择性别、是否操作等。需要注意的是,在定义单选按钮时,必须为同一组中的选项指定相同的name值,这样单选才会生效,也可以对单选按钮应用checked属性,指定默认选中项
4.复选框<input type="checkbox">
复选框多用于多项选择,如选择兴趣、爱好等,可对其应用checked属性,指定默认选中项
5.普通按钮<input type="button">
普通按钮常常配合javascript脚本语言使用
6.提交按钮<input type="submit">
提交按钮是表单中的核心控件,用户完成信息输入后,一般都需要单机点击提交按钮才能完成表单数据的提交。可以对其应用value属性,改变提交按钮上的默认文本
7.重置按钮<input type="reset">
当用户输入的信息有错误时,可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性,改变重置按钮上的默认文本
8.图像形式的提交按钮<input type="image">
图像形式的提交按钮与普通按钮的功能上基本相同,只是它用图像代替了默认的按钮,外观上更加美观。需要注意的是,必须为其定义src属性指定图像的url地址
9.隐藏域<input type="hidden">
隐藏域对于用户是不可见的,通常用于后台的程序
10.文件域<input type="file">
当定义文件域时,页面中将出现一个文本框和一个浏览 按钮用户可以通过填写文件路径或直接选择文件的方式,将文件提交给后台服务器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="#"method=""post></form> 用户名: <input type="text"value="张三"maxlenght="6"><br> 密码: <input type="password"size="40"><br> 性别: <input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex" />女 兴趣: <input type="checkbox">唱歌 <input type="checkbox">跳舞 <input type="checkbox">游泳<br> 上传头像: <input type="file"><br> <input type="submit"> <input type="reset"> <input type="button" value="普通按钮"> <input type="image"src="images/login.gif"> <input type="hidden"> </body> </html>