HTML表单标签 input

表单标签

表单目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

例如：

 

表单组成部分

表单控件：input select textarea button

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：label

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域： form

他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件 (最常用)

在上面的语法中，<input> 标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input >标签还可以定义很多其他的属性，其常用属性如下表所示。

常用属性	属性值	描述
type	见下表	控制input的类型
name	自定义	控件名称 作为提交数据时的 key
value	自定义或输入	input控件中的默认或用户输入的文本
size	正整数	input在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	规定控件容许输入的最大字符数
required	required	必填
readonly	readonly	内容只读
placeholder	文本	用户输入提示文本
multiple	multiple	文件上传可选多文件

type属性分类

常用类型属性	描述	补充
text	单行文本输入框	明文
password	密码输入框	密文
radio	单选按钮	单选
file	输入字段和 "浏览"按钮，供文件上传。	multiple 属性可以开启多文件选择
checkbox	复选框	多选
submit	提交按钮	提交按钮会把表单数据发送到服务器
button	普通按钮	多数情况下，用于通过js联动
reset	重置按钮	重置按钮会清除表单中的所有数据
image	图像形式的提交按钮。	自定义按钮 用的少
hidden	隐藏的输入文本	输入不显示 防止窥屏
number 新增	仅限数字	只能输入数字
date 新增	日期选择	年/月/日
tel 新增	电话号码	非有效限制
time 新增	时间选择	00:00
email 新增	电子邮件	非有效限制
search 新增	查询框	可点击x清除内容