HTML5表单Form属性怎么用

小编给大家分享一下HTML5表单Form属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

    下面让我们进入正题：

    将表单包含在页面中通常是开发人员最后做的事情——一些开发人员发现表单平淡乏味。好消息足，HTML5在对表单进行代码的过程中容入了一些乐趣。

    让我们看一下如下的表单Form案例：

<form id="register" method="post">

  <hgroup>

    <h2>Sign Me Up!</h2>

    <h3>I would like to receive your fine publication.</h3>

  </hgroup>

  <ul>

    <li>

      <label for="name">My name is:</label>

      <input type="text" id="name" name="name" required>

    </li>

    <li>

      <label for="email">My email address is:</label>

      <input type="email" id="email" name="email" required>

    </li>

        <li><label for="rememberme">Remember me on this computer</label>

          <input type="checkbox"  value="yes"  id="rememberme">

    </li>

    <li>

      <label for="url">My website is located at:</label>

      <input type="url" id="url" name="url" placeholder="http://example.com">

    </li>

    <li>

      <label for="password">I would like my password to be:</label>

      <p>(at least 6 characters, no spaces)</p>

      <input type="password" id="password" name="password" required pattern="\S{6,}">

    </li>

    <li>

      <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>

      <input min="1" max="10" id="rating" name="rating" type="range">

    </li>

    <li>

      <label for="startdate">Please start my subscription on:</label>

      <input type="date" id="startdate" name="startdate" min="1904-03-17" max="1904-05-17" required>

    </li>

    <li>

      <label for="quantity">I would like to receive <input type="number" name="quantity" id="quantity" min="1" max="10" value="1"> copies of <cite>The HTML5 Herald</cite>.</label>

    </li>

    <li>

      <label for="upsell">Also sign me up for <cite>The css3 Chronicle</cite></label>

      <input id="upsell" name="upsell" type="checkbox">

    </li>

  </ul>

  <input type="submit" id="register-submit" value="Send Post Haste"/>

</form>

 HTML5特别针对email地址、URL、数字和日期等提供了新的输入类型。除了这些新的输入类型，HTML5也引入了可以与新的和目前使刚的输入类型一起使用的属性。这些允许您提供所需的占位符文本、标记栏，以及声明可接受的数据类型&mdash;&mdash;这些都末用JavaScript。

HTML5表单属性

    HTML5为我们提供了一些属性，从而允许我们规定什么足可接受的值，并通知用户输入了错误信息等，这些都无需使用JavaScript。

    支持这些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。

<li>

   <label for="url">html5星空</label>

  <input  type="text"   id="url"   name= " url" placeholder= "http://www.html5star.com" >

</li>

pattem属性

    pattern属性使您能够提供一种正则表达式，使用户的输入与之匹配才能视为有效。对于任何input元素，用户可以输入自由格式的文本，您可以使用pattern

属性来界定可接受的语法。

    在模式中使用的正则表达式语言是与JavaScript -样的基于Perl的正则表达式语法，但pattern属性必须与整个值匹配，而不仅仅是一个子集。由于浏览器当前以类似于工具提示条的形式显示title属性的值，它包含比占位符文本更详细的模式指令，并形成了一个连贯的指令，所以在包含pattern属性时，您应向用户表明所期望的（要求的）模式。

    下面的示例，让我们在表单的密码字段添加一个pattern属性。我们的强制要求是密码至少是6位字符，并且小得有空格：

<li>

  <label for="password>l would like my password to be:</label>

  <p>(at least 6 characters, no spaces)</p>

  <input   type=password'   id= " password '   name= ' password   required

Npattern='\S{6,}'>

</li>

    \s指的是“任何非空白字符，”{6，}指的是“至少6次。”如果您想规定字符的最大数量，语法是\s{6，10)指的是6&mdash;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属性不同，该字段只能够接受焦点，其值与表单一起提交。

<label  for= " about ' >Article  Title</label>

<input  type= "text'   name= " about "   id= "about "   readonly>

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可与若干个输入宇段相关联。

如下示例：

<label  for-  favcolor " >Favorite  Color</label>

<input  type= 'text '   list=' colors "   id= "favcolor'   name='favcolor'>

<datalist id='colors'>

  <option value='Blue">

  <option value="Green'>

  <option value="Pink">

  <option  value=" Purple">

</datalist>

 autofocus属性

    布尔型autofocus属性指定在页面加载完成时，表单控件应被对准焦点。在一个指定页面只町以有一个表单元素具有autofocus属性。

以上是“HTML5表单Form属性怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！