Introduction to HTML5: Part 2مقدمة في HTML5: الجزء الثاني
مقدمة الفصل
ماذا ستتعلم في هذا الفصل
- Build a form using the new HTML5 input types.
- Specify an input element in a form as the one that should receive the focus by default.
- Use self-validating input elements.
- Specify temporary placeholder text in various input elements.
- Use autocomplete input elements that help users reenter text that they've previously entered in a form.
- Use a datalist to specify a list of values that can be entered in an input element and to autocomplete entries as the user types.
- Use HTML5's new page structure elements to delineate parts of a page, including headers, sections, figures, articles, footers and more.
أقسام الفصل
- 1New input types, color and autofocusأنواع الإدخال الجديدة واللون و autofocus
- 2Self-validating input typesالتحقق الذاتي
- 3Date and time input typesأنواع إدخال التاريخ والوقت
- 4email, placeholder and requiredemail و placeholder و required
- 5number and rangenumber و range
- 6search, tel and urlsearch و tel و url
- 7autocomplete and datalistالإكمال التلقائي و datalist
- 8Page-structure elements: header, time, nav, figure, articleعناصر بنية الصفحة (1)
- 9Page-structure elements: summary/details, section, aside, meter, footer, mark, wbrعناصر بنية الصفحة (2)
- 10Page-structure elements: header, time, nav, figure, articleعناصر بنية الصفحة (1)
تلميح: استخدم أسهم لوحة المفاتيح للتنقل بين الشرائح.
New input types: color and autofocusالنوع color و autofocus
Fig. 3.1 demonstrates HTML5's new form input types. These are not yet universally supported by all browsers.
Enables the user to enter a color. At the time of writing, most browsers render it as a text field for a hexadecimal code or a color name.
An optional attribute that can be used in only one input element on a form. It automatically gives the focus to that element, allowing the user to begin typing immediately.
Self-validating inputsالتحقق الذاتي
Self-validating input types
The new input types are self validating on the client side:
- No need to add complicated JavaScript code to validate user input.
- Reduces the amount of invalid data submitted.
- Consequently reduces Internet traffic between the server and the client to correct invalid input.
Added to the submit input to bypass validation: <input type = "submit" value = "Submit" formnovalidate />
سؤال سريع
Self-validating input types
Date and time input typesأنواع التاريخ والوقت
| Input typeالنوع | What the user entersما يُدخل | Format given on the slidesالصيغة في الشرائح |
|---|---|---|
| date | A date | yyyy-mm-dd (e.g., 2012-01-27) |
| datetime | Date, time and time zone set to UTC | Fig. 3.1 hint: yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15 |
| datetime-local | Date and time in a single control | Fig. 3.1 hint: yyyy-mm-ddThh:mm, such as 2012-01-27T03:15 |
| month | Year and month | yyyy-mm (e.g., 2012-01) |
| time | Hour, minute, seconds, fraction of a second | hh:mm, optionally :ss and .fraction |
| week | Year and week number | yyyy-Wnn, nn = 01–53 (e.g., 2012-W01) |
email, placeholder and requiredemail و placeholder و required
Enter an e-mail address (or a comma-separated list with the multiple attribute). HTML5 does not check whether the address actually exists — only that it is in the proper format.
Temporary text (generally light gray) showing an example of what to enter. It disappears when the focus is placed in the field and is not submitted.
- placeholder is supported for only six input types: text, search, url, tel, email and password.
Forces the user to enter a value before submitting the form. It can be added to any input type.
سؤال سريع
email, placeholder and required
number and rangenumber و range
Enter a numerical value (mobile browsers show a numeric keypad). min = minimum valid number, max = maximum, step = increment, value = initial value.
Appears as a slider control. You can set the minimum and maximum and specify a value.
- range is inherently self-validating as a slider: the user cannot move the slider outside the minimum or maximum.
سؤال سريع
number and range
search, tel and urlsearch و tel و url
A search field for a query; functionally equivalent to an input of type text.
Enter a telephone number. HTML5 does not self validate tel; the example adds a pattern attribute with a regular expression for the format (555) 555-5555.
Enter a URL; the proper format is http://www.deitel.com. www.deitel.com or www.deitelcom will not validate. Only the format is checked.
سؤال سريع
search, tel and url
autocomplete and datalistautocomplete و datalist
Automatically fills in the user's information based on previous input — such as name, address or e-mail. It can be enabled for an entire form or specific elements.
Provides input options for a text input element. The input's list attribute names the datalist's id.
سؤال سريع
autocomplete and datalist
Page-structure elements (1)عناصر البنية (1)
Page-structure elements: header, time, nav, figure, article
HTML5 introduces new page-structure elements that meaningfully identify areas of the page as headers, footers, articles, navigation areas, asides, figures and more.
A header for the page containing text and graphics; can be used multiple times and can include headings, navigation, images and logos.
Identifies a date, a time or both (need not be inside a header).
Groups navigation links.
figure describes a figure (image, chart or table) so it could be moved to the side or another page; figcaption gives its caption.
Standalone content that could be used or distributed elsewhere (news article, forum post, blog entry). Articles can be nested.
Page-structure elements (2)عناصر البنية (2)
Page-structure elements: summary/details, section, aside, meter, footer, mark, wbr
summary displays a right-pointing arrow next to a summary or caption; when clicked, the arrow points downward and reveals the content in details.
A section of a document, usually with a heading; sections can be nested, also inside an article.
Content related to the surrounding content but somewhat separate from the flow of the text (e.g., background history in a news story).
A visual representation of a measure within a range (e.g., min "0", max "54", value "14").
Content that usually appears at the bottom of the content or section (e.g., copyright notice and contact information).
Highlights the text enclosed in the element.
Indicates the appropriate place to break a word when text wraps to multiple lines.
سؤال سريع
Page-structure elements: summary/details, section, aside, meter, footer, mark, wbr
All page-structure elementsجدول عناصر البنية
Page-structure elements: summary/details, section, aside, meter, footer, mark, wbr
| Elementالعنصر | What it does (slides)وظيفته في الشرائح |
|---|---|
| header |
|
| time | Identifies a date, a time or both |
| nav | Groups navigation links |
| figure / figcaption | A figure that could be moved elsewhere / its caption |
| article |
|
| summary / details |
|
| section |
|
| aside | Related content somewhat separate from the flow of the text |
| meter | Visual representation of a measure within a range |
| footer | Content at the bottom of the content or section (e.g., copyright, contact) |
| mark | Highlights the enclosed text |
| wbr | Where to break a word when text wraps |
Fig. 3.18 — the whole example page (slides 51–63)
- a) A header element containing a nav element with an unordered list of links (the Recent Publications book list) — slides 52, 59.
- b) A section containing a figure (the Java How to Program cover) and a figcaption — slides 53, 60.
- c) An article containing a header, content with marked (highlighted) text, a collapsed details element with a summary ("Recent Edition Testimonials"), followed by an aside element ("The aside element is not formatted by the browsers.") — slides 53–56, 61.
- d) The end of the section that started in part (b): Deitel Developer Series Books and LiveLessons Videos — slides 57, 62.
- e) The last section containing a meter element (<meter min = "0" max = "54" value = "14"></meter> — of the 54 responders, 14 would prefer to learn Java in the context of Android app development), followed by a footer element with a wbr element (where to break a word when the text wraps) and an address element (a mailto link) — slides 57–58, 63.
سؤال سريع
Page-structure elements: header, time, nav, figure, article
الخلاصة
أنهيت الدرس
الخطوة التالية: ثبّت المعلومات بالبطاقات، ثم اختبر نفسك بالأسئلة.
ما راجعته في هذا الدرس
- New input types, color and autofocusأنواع الإدخال الجديدة واللون و autofocus
- Self-validating input typesالتحقق الذاتي
- Date and time input typesأنواع إدخال التاريخ والوقت
- email, placeholder and requiredemail و placeholder و required
- number and rangenumber و range
- search, tel and urlsearch و tel و url
- autocomplete and datalistالإكمال التلقائي و datalist
- Page-structure elements: header, time, nav, figure, articleعناصر بنية الصفحة (1)
- Page-structure elements: summary/details, section, aside, meter, footer, mark, wbrعناصر بنية الصفحة (2)
- Page-structure elements: header, time, nav, figure, articleعناصر بنية الصفحة (1)