微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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清除内容

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐