HTML5是什么新的表单属性?

2020-05-14 09:39发布

4条回答
爱前端
2楼 · 2020-05-14 10:05

是想问HTML5新增的表单属性有哪些么?

新的 form 属性:

autocomplete

novalidate

新的 input 属性:

autocomplete

autofocus

form

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

height 和 width

list

min, max 和 step

multiple

pattern (regexp)

placeholder

required

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

autofocus 属性

autofocus 属性规定在页面加载时,域自动地获得焦点。

form 属性

form 属性规定输入域所属的一个或多个表单。

表单重写属性

表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。

表单重写属性有:

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。

multiple 属性

multiple 属性规定输入域中可选择多个值。

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

pattern 属性

pattern 属性规定用于验证 input 域的模式(pattern)。

模式(pattern) 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

required 属性

required 属性规定必须在提交之前填写输入域(不能为空)。


HUANG
3楼 · 2020-05-14 20:34

1、placeholder 在输入框无内容时显示灰色提示

2、autocomplete 部分输入框和form都可以设置自动提示 off关闭,on开启(默认是on)

3、autofocus 让input自动获取焦点

4、required 设置表单元素为必填

5、pattern 表单验证使用正则

6、novalidate 该属性使用在form标签上,让设置了验证的表单可以直接提交

7、formnovalidate 该属性使用在提交按钮上,让设置了验证的表单可以直接提交

8、for




澪筱
4楼 · 2020-05-15 00:39

新的 form 属性:

  • autocomplete

  • novalidate

新的 input 属性:

  • autocomplete

  • autofocus

  • form

  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

  • height 和 width

  • list

  • min, max 和 step

  • multiple

  • pattern (regexp)

  • placeholder

  • required


chai - 嘿咻嘿咻~
5楼 · 2020-05-15 14:23

新增表单元素

email:提交表单的时候验证输入值是否满足email的格式

 

url:提交表单的时候验证输入值是否满足url的格式

number:根据你的设置提供选择数字的功能,其中min为最小值,max为最大值,value为默认值,step为点击箭头时数字的变化量,max、min、step、value均可不写,目前某些浏览器还不支持。

range:会以一个滑块的形式表现包含一定范围内数字值的输入域,max为最大值,min为最小值,value为默认值,如果没有设置max和min,默认值是1-100

日期和时间类型:

date:选取日、月、年

month:选取月、年

week:选取周、年

 

time:选取小时、分钟

datetime:选取时间、日、月、年(UTC时间)(我这里浏览器显示不出效果)

datetime-local:选取时间、日、月、年(本地时间)

search:用于搜索域,若加上result="s"属性,则会在搜索框前面加一个搜索图标(我这里浏览器显示不出效果)

tel:验证输入的是否是电话号码的格式(我这里浏览器显示不出效果)

color:color类型会提供颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

新增input属性(部分容易理解的就不进行代码演示了),后面为支持该属性的元素

autofocus:在打开页面时使元素自动获取焦点                                             //input,button,select,textarea

placeholder: 在用户输入时进行提示                                                                // input,textarea

form:这篇文章的开头就有这个属性,它用于表明元素属于哪个表单,无论元素的位置在哪里,所属表单都能获取该元素的值                              //input,output,button,select,textarea,fieldset  

required:表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空          //input,textarea

max/min/step:限制值的输入范围,以及值的变化程度。上面的新增number元素有介绍。        //input

autocomplete:使form元素或者input元素拥有自动完成功能,既记录用户之前输入的值,关闭为off,默认为on。                            //form,input

表单重写属性:                      //input

formaction:重写表单的action属性     

formenctype:重写表单的enctype属性。

enctype属性管理的是表单的MIME编码,MIME就是一种电子邮件传输的互联网标准,表明传递的信息类型和编码,共有三个值可选:

1,application/x-www-form-urlencoded(默认),设置表单传输的编码。

2,multipart/form-data,指定传输数据的特殊类型,主要就是上传的非文本内容,比如文件、图片。

3,text/plain,纯文本传输。

formmethod: 重写表单的method属性

formnovalidate:重写表单的novalidate属性

formtarget:重写表单的target属性。

multiple:规定输入字段可选择多个值                    //input,select

list:list属性的值为datalist元素的id,datalist元素类似于选择框,在文本框获得焦点的时候以提示输入的方式显示

pattern:验证input输入域的格式,即正则表达式。


相关问题推荐

  • 回答 90

    现在有很多女生学习编程哦,尤其是前端,越来越多的女生学习,所以是合适的

  • 回答 13

    html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性...

  • 回答 17

    html添加图片的方法如下:1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。

  • 回答 2

    1、默认状态下,背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉实现半透明边框代码如下:body {         ...

  • 回答 9

    html图片对齐主要用text-align属性来控制:text-align的值主要又分为:left左对齐,center居中对齐,right靠右对齐。

  • 回答 8

    你没有设置好,具体解决方法如下。输入如下代码:width表示宽度height表示高度下图所示,我将图片的宽和高通通缩小,可以看到,图片的尺寸果然按照我的意愿进行了改变。

  • 回答 6

    设置表格单元格的外边距为0        css中设置border-collapse: collapse;       或者在table标签中写cellspacing=0px

  • 回答 5
    已采纳

    br是强制换行的,一般用在段落文字里边的换行。

  • 回答 6

    1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...

  • 回答 8

    常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。    提供硬件访问控...

  • 回答 6

      1. LungoJS  这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...

  • 回答 11

    应该是样式不一样造成的

  • 回答 5

    1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做视区。手机...

  • 回答 3

    就是标签上的一个属性,比如:js获取的时候是:obj.getAttribute(data-type);做一些逻辑操作或者唯一标示等,很方便的。

  • 回答 5

    src标签中放的是你的图片的路径,其中可以使用相对路径和绝对路径,相对路径就是你的图片在电脑中的存放位置,绝对路径就是指一些网站地址。alt标签中可以输入文本,当图片的路径错误时就会显示该文本内容。title标签中的值也是文本,当你鼠标悬停是所显示的...

没有解决我的问题,去提问