专栏首页老码农的一亩三分地IT兄弟连 HTML5教程 HTML5表单 新增的表单属性2

IT兄弟连 HTML5教程 HTML5表单 新增的表单属性2

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102657423

5 height和width属性

height和width属性规定用于image类型和input标签的图像高度和宽度。图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间在加载页面时会被保留。如果没有这些属性,浏览器不知道图像的大小,并不能预留适当的空间。图片在加载过程中会使页面布局效果改变。用法如下:

这段代码中,我们为image类型的<input>标签的高度height属性为193,宽度width属性设置为258。展示效果如图1所示:

图1 为image类型的<input>标签设置height和width

6 list

在本章内容中的新增的<datalist>元素里已经讲述过了。list属性规定输入域的datalist,datalist是输入域的选项列表。List属性适用于的<input>标签有:text,search,url,email,date Picker,number,range和color。详细用法可以参考本章的“<datelist>元素”小结里的内容。

7 min,max and step

min、max和step属性用于为包含数字和日期的input类型规定限定(约束)。max属性规定输入域所允许的最大值;min属性规定输入域所允许的最小值;step属性为输入域规定合法的数字间隔。min、max和step属性适用的<input>标签有:date pickers、number及range。下面我们给类型为range的<input>标签调整它的数字域,该域接受0到100的值,且step为3,代码如下:

这段代码中,我们为number类型的<input>标签设置最小值为1,最大值为100,且步长为3。在输入域中我们允许用户输入3的倍数的1~100的值,若值不符合该要求,会被得到图2中的提示:

图2 设置输入域的min、max及step属性

8 multiple

multiple是属性一个boolean属性,它规定<input>元素中可选择多个值。Multiple属性适用于以下的类型有email和file。用法如下:

这段代码中,我们为file类型的<input>标签设置multiple属性,之后我们就可以选择多个文件,效果如图3所示:

图3 为file文本域设置multiple属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java之BigDecimal详解

    ​ Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算。双精度浮点型变量double可以处理16位有效...

    用户1195962
  • 学Linux到底学什么?

    我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么?

    编程珠玑
  • 代码美化的艺术

    原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”...

    叙帝利
  • Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置

    之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作。之前的内容中也有提到wire注解,今天就详细的介绍一下对数...

    用户1169343
  • 30 段极简 Python 代码:这些小技巧你都 Get 了么

    学 Python 怎样才最快,当然是实战各种小项目,只有自己去想与写,才记得住规则。本文是 30 个极简任务,初学者可以尝试着自己实现;本文同样也是 30 段代...

    用户2769421
  • 读Python数据分析基础之Excel读写与处理

    对于业务型数据分析来说,Excel可以说是打交道最多的软件了,可以说没有之一。之前有比较系统地读过《Python数据分析基础》(Foundations for ...

    蛰虫始航
  • Python一键拼出你的微信好友图片墙

    上午发了张微信近 2000 位好友的头像拼图,让大伙儿看能不能快速找到自己的头像,没想到反响很强烈,引得阵阵惊呼与膜拜,没有料到。

    数据森麟
  • map的实现和柯里化(Currying)

      对于函数式编程来说,map/reduce/filter这几个算子非常重要,其中有的语言不是reduce而是fold,但功能基本一样,不过reduce的迭代一...

    窗户
  • “夸夸群”5分钟20块?!手把手教你定制一款专属夸夸机器人

    为了给女友惊喜,男友把她拉进一个百人群,结果整整夸了她三分钟。简直就是一个大型彩虹屁现场了。

    数据森麟
  • iOS学习——(转)解决iOS App打包后dSYM文件找不到的问题

    针对这种情况,通常是因为Project -> Build Settings下的Debug Information Format的值被设置为DWARF。需修改为D...

    mukekeheart

扫码关注云+社区

领取腾讯云代金券