input的type类型及描述、label的使用

本文详细介绍了HTML中input输入框的各种属性值,如readonly、disabled、required等,以及不同类型的输入框,如text、number、checkbox等。同时,文章探讨了<label>标签的使用,包括通过for属性自动聚焦和包裹文本的方式提高表单交互性。还提到了文件上传功能以及多选、颜色选择等特殊类型的input输入框。

input输入框属性值:

readonly="readonly":只读,不可以写入或修改数据;

disable="disable":禁用属性,表示用户不可使用此表单项,也不能提交此次大数据到后台。在显示时,默认添加灰色背景。

required="required":表示必填,不能为空值,提交表单数据时,就会验证是否为空值。required属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

type:(输入框类型)

value:(可以设置输入框默认值,value随着输入值改变,传给服务器的是输入框的value的值,即提交到后台的数据)

name:(表单名,一定要为input设置name,再对对应name传值)

单选框:(设置name相同则为同一组,一组只选择一个值)

 placeholder属性:设置帮助用户填写输入字段的提示。

size:输入框的宽度

max/min:输入框内容的最大值最小值,配合使用。

maxlength:输入字段的最大长度。

 在type属性值为reset时,点击后,会让表单中改变过的表单域的值,都重置为默认的值。value属性用来设置在浏览器中显示的按钮的名称。

 

<label> 标签:为 input 元素定义标注(标记)。(利用for属性自动聚焦),在表单中,文本元素一般用label标签。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与<input>标签的 id 属性相对应。

PS:另外,<label>也可以直接把文本和<input>包括起来,页面上的效果是相同的。

 

  多选:当type属性为checkbox时,name属性的值,可以取同一个值,也可以是不同的值,区别是后台处理数据的方式变化。一般建议采用相同的值。

 

颜色:当type属性取值为color时,表示这是一个表单的颜色控件,可以选择不同的颜色值。

数字:当type值为number时,表示这是一个数字输入的控件。

min:表示允许输入的最小有效数字;

max:表示允许输入的最大有效数字;

step:控制数字变化的步长,也就是用户选择数字时,数字增加或减少的数量。

文件上传:type值为file时,表示这是一个文件上传的功能,当有文件上的功能时,<form>标签的method必须设置为post。enctype属性必须设置为multipart/part-data。

下拉选择列表select属性值:

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值