数据库表设计必需元素
Today we will look into some HTML5 features that will help us in removing a lot of boilerplate code.
今天，我们将研究一些HTML5功能，这些功能将帮助我们删除许多样板代码。
HTML5 Specs are out and all the leading browsers are supporting these tags.
HTML5规范已经发布，所有领先的浏览器都支持这些标签。
As a web developer, we always need a lot of javascript for HTML form validation. I like some of these features that will reduce the javascript functions on the web page and make our page load faster.
作为网络开发人员，我们始终需要大量JavaScript来进行HTML表单验证。 我喜欢其中的一些功能，这些功能会减少网页上的javascript功能，并使我们的页面加载速度更快。
HTML5功能 (HTML5 Features)
HTML5 has brought a lot of improvements to help programmers. We will look into some HTML5 features that you should use in the HTML code.
HTML5带来了许多改进以帮助程序员。 我们将研究您应该在HTML代码中使用的一些HTML5功能。
1.输入 (1. input)
Let’s look at some new input type introduced in HTML5.
让我们看一下HTML5中引入的一些新输入类型。
<input type="number"> <input type="tel">Most of the web forms these days have a zip code and mobile numbers field and to avoid user entering wrong values, javascript is required to either validate the field value on form submit or restrict the users to enter only numbers in the text field. Use of this input type will make sure that only numbers can be entered in the field. Input type tel is for telephone numbers validation and currently not implemented by any of the leading browsers.<input type="number"> <input type="tel">如今，大多数Web表单都有邮政编码和手机号码字段，为避免用户输入错误的值，需要JavaScript来验证表单上的字段值提交或限制用户在文本字段中仅输入数字。 使用此输入类型将确保只能在该字段中输入数字。 输入类型tel用于电话号码验证，当前尚未由任何领先的浏览器实现。<input type="date"> and <input type="time">Whether you are buying a flight ticket or setting your date of birth, most of the web page uses third-party JavaScript APIs to create Calendar but in HTML5 it will be very easy with date and time input types. There are some other input types related to date i.e datetime, month and week.<input type="date"> and <input type="time">无论您是购买机票还是设置生日，大多数网页都使用第三方JavaScript API创建日历，但是在HTML5中，它将日期和时间输入类型非常简单。 还有其他一些与日期有关的输入类型，即日期时间，月份和星期。<input type="color">This will also save a lot of javascript code where we need to pick any color.<input type="color">这还将在需要选择任何颜色的地方保存很多JavaScript代码。<input type="email"> and <input type="url">No need to validate email and urls as these input types will automatically take care of it for you.<input type="email"> and <input type="url">无需验证电子邮件和url，因为这些输入类型将自动为您处理。
2.数据清单 (2. datalist)
We use <select> and <option> to provide a drop-down list of options to choose from BUT if we want to provide the user a list of suggested options as well as he is able to type his own, it requires a lot of javascript code. Using HTML5 datalist element will remove that part of JS from our code.
如果要向用户提供建议的选项列表以及他能够键入自己的信息，我们使用<select>和<option>提供一个下拉菜单以供选择，但需要很多JavaScript代码。 使用HTML5 datalist元素将从我们的代码中删除JS的那部分。
3.占位符属性 (3. placeholder attribute)
For user convenience, it’s not a bad idea to have placeholder content in the text field to tell the user what is expected in that field. This feature requires javascript onfocus and onblur (resetting to default if empty). Use of placeholder attribute will automatically take care of all these.
为了方便用户，在文本字段中使用占位符内容来告诉用户在该字段中期望什么是不错的主意。 此功能需要javascript onfocus和onblur （如果为空，则重置为默认值）。 使用占位符属性将自动处理所有这些问题。
4.自动对焦属性 (4. autofocus attribute)
Using this attribute, we can automatically focus on the form field when the page is loaded. There should be only one autofocus attribute used in the complete page.
使用此属性，当页面加载时，我们可以自动关注表单字段。 整个页面中只能使用一个自动对焦属性。
5.必填属性 (5. required attribute)
HTML5 required attribute make sure that the field value is entered before the form gets submitted.
HTML5必填属性确保在提交表单之前输入字段值。
6.模式属性 (6. pattern attribute)
Using html5 pattern attribute make sure that the particular field value matches the given regular expression format.
使用html5模式属性，请确保特定的字段值与给定的正则表达式格式匹配。
HTML5功能示例 (HTML5 Features Example)
Let’s look at a simple HTML5 features example page.
让我们看一个简单HTML5功能示例页面。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>JournalDev - HTML5 Test</title> </head>
<body>
<form action="" method="post">
1. Number: <input name="num" type="number" /> <br/>
2. Telephone: <input name="telephone" type="tel" /> <br/>
3. Date: <input name="dt" type="date" /> <br/>
4. Time: <input name="time" type="time" /> <br/>
5. Color: <input name="color" type="color" /> <br/>
6. Datalist:<input type="text" list="testdata" /> <datalist id="testdata"> <option label="Mr" value="Mister"> <option label="Mrs" value="Mistress"> <option label="Ms" value="Miss"> </datalist> <br/>
7. Email: <input id="email" name="email" type="email" /> <br/>
8. URL: <input id="url" name="url" type="url" /> <br/>
9. Placeholder: <input name="firstname" type="text" placeholder="Pankaj"/> <br/>
10. Autofocus: <input name="lastname" type="text" autofocus/> <br/>
11. Required: <input name="userid" type="text" required/> <br/>
12. Pattern: <input type="text" name="username" id="username" placeholder="5 <> 10" pattern="[A-Za-z]{5,10}"/> <br/>
<button type="submit"> Submit Form </button>
</form>
</body>
</html>You can test these html5 features with different inputs and see if it works or not.
您可以使用不同的输入来测试这些html5功能，并查看其是否有效。
翻译自: https://www.journaldev.com/251/html5-input-required-pattern-datalist
数据库表设计必需元素
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
