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

0494a75c64ba4c1e8b3d15a45362f21b.jpg

 

5  height和width属性

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

f93f30d92bcc479c9895818048ffff18.jpg

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

29107f619e9e4df386e175fc19f122ef.jpg

图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,代码如下:

df2c503becf84510a417d95891bdd202.jpg

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

fc614e0ea69744588ed91035ac2f8343.jpg

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

 

8  multiple

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

86d5b09d8c1a4685b89f5d9e4342ea41.jpg

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

501d5e7eeafe4bf78956425d2c907cc7.jpg

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

posted on 2019-10-21 09:33  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航