h5表单可视化设计工具_HTML5表单：工具箱中的可靠工具

墨蓝 2022-12-03 01:48 232阅读 0赞

h5表单可视化设计工具

![htmlcss2thumb][]

*The following is an extract from our book, [HTML5 & CSS3 for the Real World, 2nd Edition][HTML5 _ CSS3 for the Real World_ 2nd Edition], written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can [buy it in ebook form here][HTML5 _ CSS3 for the Real World_ 2nd Edition].*

*以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写[的《现实世界HTML5和CSS3，第二版][HTML5 _ CSS3 for the Real World_ 2nd Edition] 》一书。* *副本在世界各地的商店中都有出售，或者您可以[在此处以电子书形式购买][HTML5 _ CSS3 for the Real World_ 2nd Edition] 。*

We’ve coded most of the page, and you now know almost all of what there is to know about new HTML5 elements and their semantics. But before we start work on the *look* of the site—which we do in Chapter 7—we’ll take a quick detour away from *The HTML5 Herald*’s front page to look at the sign-up page. This will illustrate what HTML5 has to offer in terms of web forms.

我们已经对页面的大部分进行了编码，现在您几乎了解了有关新HTML5元素及其语义的所有知识。 但是，在我们开始在网站*外观上*进行工作(我们将在第7章中进行操作)之前，我们将绕过*HTML5先驱报*的首页，快速浏览注册页面。 这将说明HTML5必须提供的Web表单。

HTML5 web forms have introduced new form elements, input types, attributes, native validation, and other form features. Many of these features we’ve been using in our interfaces for years: form validation, combo boxes, placeholder text, and the like. The difference is that before we had to resort to JavaScript to create these behaviors; now they’re available directly in the browser. All you need to do is include attributes in your markup to make them available.

HTML5 Web表单引入了新的表单元素，输入类型，属性，本机验证和其他表单功能。 多年来，我们在界面中一直使用许多这些功能：表单验证，组合框，占位符文本等。 不同之处在于，在我们不得不诉诸JavaScript来创建这些行为之前； 现在它们可以直接在浏览器中使用。 您需要做的就是在标记中包含属性以使其可用。

HTML5 not only makes marking up forms easier on the developer, it’s also better for the user. With client-side validation being handled natively by the browser, there will be greater consistency across different sites, and many pages will load faster without all that redundant JavaScript.

HTML5不仅使开发人员可以更轻松地标记表单，而且对用户也更好。 由于客户端验证由浏览器本地处理，因此跨不同站点的一致性更高，并且许多页面的加载速度更快，而无需所有多余JavaScript。

Let’s dive in!

让我们潜入吧！

## 工具箱中的可靠工具 **(**Dependable Tools in Our Toolbox**)** ##

Forms are often the last thing developers include in their pages—many developers find forms just plain boring. The good news is HTML5 injects a little bit more joy into coding forms. By the end of this chapter, we hope you’ll look forward to employing form elements as appropriate in your markup.

表单通常是开发人员在其页面中添加的最后一件事-许多开发人员发现表单简直无聊。 好消息是HTML5为编码形式注入了更多乐趣。 在本章的最后，我们希望您期待在标记中使用适当的表单元素。

Let’s start off our sign-up form with plain old-fashioned HTML:

让我们从普通的老式HTML开始我们的注册表单：

<form id="register" method="post">
      <header>
        <h1>Sign Me Up!</h1>
        <p>I would like to receive your fine publication.</p>
      </header>
    
      <ul>
        <li>
          <label for="register-name">My name is:</label>
          <input type="text" id="register-name" name="name">
        </li>
        <li>
          <label for="address">My email address is:</label>
          <input type="text" id="address" name="address">
        </li>
        <li>
          <label for="url">My website is located at:</label>
          <input type="text" id="url" name="url">
        </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">
        </li>
        <li>
          <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
          <input type="text" name="rating" id="rating">
        </li>
        <li>
          <label for="startdate">Please start my subscription on:</label>
          <input type="text" id="startdate" name="startdate">
        </li>
        <li>
          <label for="quantity">I would like to receive <input type="text" name="quantity" id="quantity"> 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 type="checkbox" id="upsell" name="upsell" value="CSS Chronicle">
        </li>
        <li>
          <input type="submit" id="register-submit" value="Send Post Haste">
        </li>
      </ul>
    </form>

This sample registration form uses form elements that have been available since the earliest versions of HTML. This form provides clues to users about what type of data is expected in each field via the `label` and `p` elements, so even your users on Netscape 4.7 and IE5 (kidding!) can understand the form. It works, but it can certainly be improved upon.

此样本注册表单使用的表单元素自HTML最早版本以来就可用。 该表单通过`label`和`p`元素为用户提供了有关每个字段中期望的数据类型的线索，因此，即使您的Netscape 4.7和IE5用户(喜欢！)也可以理解该表单。 它有效，但是肯定可以改进。

In this chapter we’re going to enhance this form to include HTML5 form features. HTML5 provides new input types specific to email addresses, URLs, numbers, dates, and more. In addition to these, HTML5 introduces attributes that can be used with both new and existing input types. These allow you to provide placeholder text, mark fields as required, and declare what type of data is acceptable—all without JavaScript.

在本章中，我们将增强此表单，使其包含HTML5表单功能。 HTML5提供了特定于电子邮件地址，URL，数字，日期等的新输入类型。 除了这些之外，HTML5引入了可与新输入类型和现有输入类型一起使用的属性。 这些使您可以提供占位符文本，根据需要标记字段，并声明可接受的数据类型-所有这些都无需JavaScript。

We’ll cover all the newly added input types later in the chapter. Before we do that, let’s look at the new form attributes HTML5 provides.

我们将在本章后面介绍所有新添加的输入类型。 在此之前，让我们看一下HTML5提供的新表单属性。

> 翻译自: [https://www.sitepoint.com/html5-forms-dependable-tools/][https_www.sitepoint.com_html5-forms-dependable-tools]

h5表单可视化设计工具

[htmlcss2thumb]: /images/20221123/25d3dbc0710148d8bfc94d4fe35a0b45.png
[HTML5 _ CSS3 for the Real World_ 2nd Edition]: https://www.sitepoint.com/premium/books/html5-css3-for-the-real-world-2nd-edition
[https_www.sitepoint.com_html5-forms-dependable-tools]: https://www.sitepoint.com/html5-forms-dependable-tools/