html表单属性设置默认值,HTML5表单Form之属性
html表单属性设置默认值,HTML5表单Form之属性
HTML5 Web表单引⼊了新的表单元素、输⼊类型、属性和其他功能。有些功能已经使⽤了多年：表单验证、组合框和占位符⽂本等。之前我们必须求助于JavaScript创建这些功能，现在可以在浏览器中直接使⽤它们；您需要做的就是在标记中将属性设置为可⽤。
HTML5不仅使开发⼈员更容易制作表单，同时也为⽤户带来了许多⽅便。由浏览器处理客户端的验证，这样使不同的⽹站具有了更⼤的⼀致性，许多⽹页⽆需
加载多余的JavaScript，从⽽使速度更快。
下⾯让我们进⼊正题：
将表单包含在页⾯中通常是开发⼈员最后做的事情——⼀些开发⼈员发现表单平淡乏味。好消息⾜，HTML5在对表单进⾏代码的过程中容⼊了⼀些乐趣。
社交礼仪常识让我们看⼀下如下的表单Form案例：
Sign Me Up!
I would like to receive your fine publication.
My name is:
My email address is:
15个天然指南针Remember me on this computer
My website is located at:
I would like my password to be:
(at least 6 characters, no spaces)
On a scale of 1 to 10, my knowledge of HTML5 is:
Please start my subscription on:
2021年头伏第一天是哪一天I would like to receive copies of The HTML5 Herald.
Also sign me up for The css3 Chronicle
HTML5特别针对email地址、URL、数字和⽇期等提供了新的输⼊类型。除了这些新的输⼊类型，HT
ML5也引⼊了可以与新的和⽬前使刚的输⼊类型⼀起使⽤的属性。这些允许您提供所需的占位符⽂本、标记栏，以及声明可接受的数据类型——这些都末⽤JavaScript。
HTML5表单属性
HTML5为我们提供了⼀些属性，从⽽允许我们规定什么⾜可接受的值，并通知⽤户输⼊了错误信息等，这些都⽆需使⽤JavaScript。
dnf账号金库⽀持这些HTML5属性的浏览器会将⽤户输⼊的数据与开发⼈员提供的常规表达模式进⾏⽐较。然后检查是否确实填写了所有所需栏⽇，如果允许，可使⽤多个值等。更好的⾜，包含这些属性将不会影响到旧版浏览器：旧版浏览器将会忽略所有不兼容的属性。实际上，您可以使⽤这些属性和值改进脚本运⾏效率，⽽不需要将验证模式硬编码到您的JavaScript代码中，或在标记中添加多余的类。
required属性
布尔型required属性告诉浏览器只有⽌确填写了问题字段，才提交表单。显然，这意味着问题字段⼩能是窄的，但也意味着根据其他属性或字段类型，J s接受某些类型的值。
混动车如果所需字段为空或⽆效，表单将⽆法提交，⽽凡光标将移到第⼀个⽆效表单元素。
让我们快速复习⼀下：当⽤户使⽤⿏标单击字段或在键盘上敲击tab键时，焦点就对准了表单元素，对于input元素，使⽤键盘打字使会将数据输⼊到那个元素中。
在JavaScript术语中，当focus事件接收到焦点时，它会触发表单元素；当失去焦点时，就会触发blur事件。在CSS中，focus伪类可⽤于设置⽬前处于焦点的元素的样式。除了红通常已有默认值的button、range、color和hidden元素required属件可以设胃任何输⼊类型。正如其他有尔型属性⼀样，如果您使⽤XHTML，其语法可以⾜简单的required或required=”required”。
让我们在注册表单中添加required属性。我们将姓名、email地址、密码以及订购起始⽇期中段设置为必需的。
placeholder属性
placeholder属性允许显⽰简短的提⽰，如果空间允许，将告诉⽤户在字段中应输⼊什么数据。在字段获得焦点时，占位符⽂本消失，如果处在模糊状态没有数据输⼊时，那会占位符⽂本会再次出现。开发⼈员多年来⼀直采⽤JavaScript来提供此功能，在HTML5中．占位符属性是⾃带的，⽽不再需要JavaScript。
html5星空
pattem属性
pattern属性使您能够提供⼀种正则表达式，使⽤户的输⼊与之匹配才能视为有效。对于任何input元素，⽤户可以输⼊⾃由格式的⽂本，您可以使⽤pattern
属性来界定可接受的语法。
在模式中使⽤的正则表达式语⾔是与JavaScript -样的基于Perl的正则表达式语法，但pattern属性必须与整个值匹配，⽽不仅仅是⼀个⼦集。由于浏览器当前以类似于⼯具提⽰条的形式显⽰title属性的值，它包含⽐占位符⽂本更详细的模式指令，并形成了⼀个连贯的指令，所以在包含pattern属性时，您应向⽤户表明所期望的(要求的)模式。
下⾯的⽰例，让我们在表单的密码字段添加⼀个pattern属性。我们的强制要求是密码⾄少是6位字符，并且⼩得有空格：
Npattern='\S{6,}'>
\s指的是“任何⾮空⽩字符，”{6，}指的是“⾄少6次。”如果您想规定字符的最⼤数量，语法是\s{6，10)指的是6—10个字符。与required属性⼀样，如果模式4；匹配．pattern属性将拒绝提交，并提供错误信息。
如果您使⽤的模式不是有效的正则表达式，将不会被验证。还要注意到，与placeholder和required属性类似，对于4i⽀持该属性的浏览器，您可以使⽤此属性的值为JavaScript验证代码提供⼀个依据。
disabled属性
布尔型disabled属性存在的时间要⽐HTML5还要长，但在某种程度已经对它进⾏了扩展。它应⽤于除新的output元素外的任何表单控制元素，并不
像HTML的早期版本，HTML5允许您在fieldset上设置disabled属性，并将其应⽤于包含在fieldset的所有表单元素。
通常情况下，表单元素的disabled属性使在浏览器中的内容变灰。使⽤disabled属性的表单控件并⽙i随表单提交，所以它们的值对服务器端的表单处理代码不可⽤。如果您想使该值不被⽤户编辑，但是能够看到并提交它，可使⽤readonly属性。
readonly属性
readonly属性类似于disable属性：它使⽤户不能够编辑表单字段。但是，与disabled属性不同，该字段只能够接受焦点，其值与表单⼀起提交。
multiple属性
如果使⽤multiple属性，就表明在表单控件中可以输⼊多个值。虽然在HTML以前的版本中已经有此属性，但它仅应⽤jt：select元素。在HTML5中，它也可以被添加到email和file输⼊类型中。如果使⽤它，⽤户可以选择多个⽂件，或包含多个逗号分隔的电⼦邮件地址。
form属性
为了不与form元素混淆，在HTML5中的form属性允许您使表单元素与没有被嵌套的表单相关联。这意味着您现在可以使-⼀个表单元件的组或表单控件与⽂档中的任何其他表单相关联。form属性将form元素的id作为其值，与表单元件的组或控件相关联。
如果属性被省略，那么控件将与其嵌套的form⼀起提交。
autocomplete属性
autocomplete属性指定不管是表单还是表单控件，都应有⼀个⾃动完成的功能。对于⼈多数表单字段，当⽤户开始输⼊时，将出现⼀个下拉列表。对于密码字段，它具有在浏览器中保存密码的功能。在浏览器中⽀持这种功能已经多年，尽管直到HTML5才将它写⼊规范中。
在默认状态下，autocomplete属性是开的状态。在您意识到这是最后⼀次所填的表单时，为了禁⽤它，可以使⽤autocomplete=" off”。这是处理敏感信息的好⽅法，⽐如信⽤卡号码或⼻i需要最新使⽤
的信息，如CAPTCHA。
⾃动完成也由浏览器控制。⽤户可以在他们的浏览器中打开⾃动完成的功能。然⽽，如果您想覆盖这个优先选择设置，可将autocomplete 属性设置
为off。
datalist元素和list属性
它们能够满⾜⼀个普通的要求：具有⼀组预定义⾃动完成选项的⽂本字段。和select元素不⼀样，⽤户可输⼊⾃⼰喜欢的任何数据，但当输⼊时，在下拉列表中会有⼀组建议选项旱现存⽤户⾯前。
datalist元索，与select元素⾮常相似，是⼀个选项列表，每⼀个选项都放置在option元素中。然后您可以使⽤input元素的list属性将datalist与⼀个输⼊相关联。list属性将与输⼊相关联的datalist的id属性作为其值。⼀个datalist可与若⼲个输⼊宇段相关联。
如下⽰例：
世界稀有动物
Favorite  Color
autofocus属性
布尔型autofocus属性指定在页⾯加载完成时，表单控件应被对准焦点。在⼀个指定页⾯只町以有⼀个表单元素具有autofocus属性。9819

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。