From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/fa/web/html/element/a/index.html | 490 +++++++ files/fa/web/html/element/abbr/index.html | 142 ++ files/fa/web/html/element/data/index.html | 94 ++ files/fa/web/html/element/em/index.html | 150 +++ .../web/html/element/heading_elements/index.html | 143 ++ files/fa/web/html/element/index.html | 203 +++ files/fa/web/html/element/input/index.html | 1376 ++++++++++++++++++++ files/fa/web/html/global_attributes/id/index.html | 67 + files/fa/web/html/global_attributes/index.html | 201 +++ files/fa/web/html/index.html | 64 + .../index.html | 127 ++ .../index.html" | 502 +++++++ 12 files changed, 3559 insertions(+) create mode 100644 files/fa/web/html/element/a/index.html create mode 100644 files/fa/web/html/element/abbr/index.html create mode 100644 files/fa/web/html/element/data/index.html create mode 100644 files/fa/web/html/element/em/index.html create mode 100644 files/fa/web/html/element/heading_elements/index.html create mode 100644 files/fa/web/html/element/index.html create mode 100644 files/fa/web/html/element/input/index.html create mode 100644 files/fa/web/html/global_attributes/id/index.html create mode 100644 files/fa/web/html/global_attributes/index.html create mode 100644 files/fa/web/html/index.html create mode 100644 files/fa/web/html/tips_for_authoring_fast-loading_html_pages/index.html create mode 100644 "files/fa/web/html/\330\247\331\201\330\262\331\210\330\257\331\206_\330\261\331\206\332\257/index.html" (limited to 'files/fa/web/html') diff --git a/files/fa/web/html/element/a/index.html b/files/fa/web/html/element/a/index.html new file mode 100644 index 0000000000..dc10c3f5be --- /dev/null +++ b/files/fa/web/html/element/a/index.html @@ -0,0 +1,490 @@ +--- +title: ': The Anchor element' +slug: Web/HTML/Element/a +tags: + - فارسی +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination.

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + +

Attributes

+ +

This element's attributes include the global attributes.

+ +
+
{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}
+
Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+
+
    +
  • Without a value, the browser will suggest a filename/extension, generated from various sources: +
      +
    • The {{HTTPHeader("Content-Disposition")}} HTTP header
      • +
    • The final segment in the URL path
      • +
    • The {{Glossary("MIME_type", "media type")}} (from the ({{HTTPHeader("Content-Type")}} header, the start of a data: URL, or {{domxref("Blob.type")}} for a blob: URL)
      • +
    +
    • +
  • Defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
    • +
+ +
Notes: + +
    +
  • download only works for same-origin URLs, or the blob: and data: schemes.
    • +
  • +

    Note: if the Content-Disposition header has different information from the download attribute, resulting behaviour may differ:

    + +
      +
    • +

      If the header specifies a filename, it takes priority over the attribute.

      +
      • +
    • +

      If the header specifies a disposition of inline but no filename, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content.

      +
      • +
    +
    • +
+
+
+
{{HTMLAttrDef("href")}}
+
+

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

+ +
    +
  • Sections of a page with fragment URLs
    • +
  • Pieces of media files with media fragments
    • +
  • Telephone numbers with tel: URLs
    • +
  • Email addresses with mailto: URLs
    • +
  • While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()
    • +
+
+
{{HTMLAttrDef("hreflang")}}
+
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
+
{{HTMLAttrDef("ping")}}
+
A space-separated list of URLs. When the link is followed, the browser will send {{HTTPMethod("POST")}} requests with the body PING to the URLs. Typically for tracking.
+
{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}
+
How much of the referrer to send when following the link. See Referrer-Policy for possible values and their effects.
+
{{HTMLAttrDef("rel")}}
+
The relationship of the linked URL as space-separated link types.
+
{{HTMLAttrDef("target")}}
+
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL: +
    +
  • _self: the current browsing context. (Default)
    • +
  • _blank: usually a new tab, but users can configure browsers to open a new window instead.
    • +
  • _parent: the parent browsing context of the current one. If no parent, behaves as _self.
    • +
  • _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.
    • +
+ +
+

Note: When using target, add rel="noreferrer noopener" to avoid exploitation of the window.opener API;

+
+ +
+

Note: In newer browser versions (e.g. Firefox 79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".

+
+
+
{{HTMLAttrDef("type")}}
+
Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.
+
+ +

Obsolete attributes

+ +
+
{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}
+
Hinted at the {{Glossary("character encoding")}} of the linked URL. +
+

Note: This attribute is obsolete and should not be used by authors. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.

+
+
+
{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}
+
Used with the shape attribute. A comma-separated list of coordinates.
+
{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}
+
Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values. +
+

Note: Use the global attribute {{HTMLAttrxRef("id")}} instead.

+
+
+
{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}
+
Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.
+
{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}
+
The shape of the hyperlink’s region in an image map. +
Note: Use the {{HTMLElement("area")}} element for image maps instead.
+
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, interactive content, palpable content.
Permitted contentTransparent, containing either flow content (excluding interactive content) or phrasing content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements.
Implicit ARIA role{{ARIARole("link")}} when href attribute is present, otherwise no corresponding role
Permitted ARIA roles +

When href attribute is present:

+ +
    +
  • {{ARIARole("button")}}
    • +
  • {{ARIARole("checkbox")}}
    • +
  • {{ARIARole("menuitem")}}
    • +
  • {{ARIARole("menuitemcheckbox")}}
    • +
  • {{ARIARole("menuitemradio")}}
    • +
  • {{ARIARole("option")}}
    • +
  • {{ARIARole("radio")}}
    • +
  • {{ARIARole("switch")}}
    • +
  • {{ARIARole("tab")}}
    • +
  • {{ARIARole("treeitem")}}
    • +
+ +

When href attribute is not present:

+ +
    +
  • any
    • +
+
DOM interface{{DOMxRef("HTMLAnchorElement")}}
+ +

Examples

+ +

Linking to an absolute URL

+ +

HTML

+ +
<a href="https://www.mozilla.com">
+  Mozilla
+</a>
+ +

Result

+ +

{{EmbedLiveSample('Linking_to_an_absolute_URL')}}

+ +

Linking to relative URLs

+ +

HTML

+ +
<a href="//example.com">Scheme-relative URL</a>
+<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
+<a href="./p">Directory-relative URL</a>
+
+ + + +

Result

+ +

{{EmbedLiveSample('Linking_to_relative_URLs')}}

+ +

Linking to an element on the same page

+ +
<!-- <a> element links to the section below -->
+<p><a href="#Section_further_down">
+  Jump to the heading below
+</a></p>
+
+<!-- Heading to link to -->
+<h2 id="Section_further_down">Section further down</h2>
+
+ +
+

Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

+
+ +

Linking to an email address

+ +

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+ +

For details about mailto: URLs, such as including a subject or body, see Email links or {{RFC(6068)}}.

+ +

Linking to telephone numbers

+ +
<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(555)5309">(555) 5309</a>
+ +

tel: link behavior varies with device capabilities:

+ + + +

See {{RFC(3966)}} for syntax, additional features, and other details about the tel: URL scheme.

+ +

Using the download attribute to save a <canvas> as a PNG

+ +

To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: URL:

+ + + +
HTML
+ +
<p>Paint by holding down the mouse button and moving it.
+  <a href="" download="my_painting.png">Download my painting</a>
+</p>
+
+<canvas width="300" height="300"></canvas>
+
+ +
CSS
+ +
html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}
+ +
JavaScript
+ +
var canvas = document.querySelector('canvas'),
+    c = canvas.getContext('2d');
+c.fillStyle = 'hotpink';
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI*2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener('mousemove', event =>
+  draw(event.offsetX, event.offsetY)
+);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+
+document.querySelector('a').addEventListener('click', event =>
+  event.target.href = canvas.toDataURL()
+);
+
+ +
Result
+ +

{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}

+ +

Security and privacy

+ +

<a> elements can have consequences for users’ security and privacy. See Referer header: privacy and security concerns for information.

+ +

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (vulnerability description), although note that, in newer browser versions (e.g. Firefox 79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener".

+ +

Accessibility

+ +

Strong link text

+ +

The content inside a link should indicate where the link goes, even out of context.

+ +

Inaccessible, weak link text

+ +

A sadly common mistake is to only link the words “click here” or “here”:

+ +
<p>
+  Learn more about our products <a href="/products">here</a>.
+</p>
+
+ +

Strong link text

+ +

Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!

+ +
<p>
+  Learn more <a href="/products">about our products</a>.
+</p>
+ +

Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.

+ +

onclick events

+ +

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

+ +

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

+ +

Use a {{HTMLElement("button")}} instead. In general, you should only use a hyperlink for navigation to a real URL.

+ + + +

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

+ +

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

+ + + +
<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia (opens in new tab)
+</a>
+
+ + + +
<a href="2017-annual-report.ppt">
+  2017 Annual Report (PowerPoint)
+</a>
+
+ +

If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:

+ +
<a  target="_blank" href="https://www.wikipedia.org">
+  Wikipedia
+  <img alt="(opens in new tab)" src="newtab.svg">
+</a>
+
+<a href="2017-annual-report.ppt">
+  2017 Annual Report
+  <img alt="(PowerPoint file)" src="ppt-icon.svg">
+</a>
+ + + + + +

A skip link is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

+ +
<body>
+  <a href="#content">Skip to main content</a>
+
+  <header>
+    …
+  </header>
+
+  <main id="content"> <!-- The skip link jumps to here -->
+
+ +
.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}
+ +

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

+ +

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

+ + + +

Size and proximity

+ +

Size

+ +

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

+ +

Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.

+ + + +

Proximity

+ +

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

+ +

Spacing may be created using CSS properties like {{CSSxRef("margin")}}.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}Added the referrerpolicy attribute.
{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML5 W3C")}}
{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}{{Spec2("HTML4.01")}}
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.a")}}

+ +

See also

+ + diff --git a/files/fa/web/html/element/abbr/index.html b/files/fa/web/html/element/abbr/index.html new file mode 100644 index 0000000000..b7a78b41f7 --- /dev/null +++ b/files/fa/web/html/element/abbr/index.html @@ -0,0 +1,142 @@ +--- +title: +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +

{{HTMLRef}}

+ +

عنصر <abbr> (یا عنصر مخفف) نشان دهننده مخفف و به صورت اختتیاری شرحی کامل برای آن است. درصورت وجود شرح ، باید آن را به طور کامل بدون چیز دیگری در در صفت title بنویسید.

+ +
<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>
+ +

See more in depth examples in the How to mark abbreviations and make them understandable article.

+ + + + + + + + + + + + + + + + + + + + +
DOM Interface{{domxref("HTMLElement")}}
Content categoriesFlow content, phrasing content, palpable content
Permitted contentPhrasing content
Permitted parent elementsAny element that accepts phrasing content
+ +

صفات

+ +

این عنصر تنها شامل صفات عمومی است.

+ +

برای تعریف شرح کامل مخفف از صفت {{htmlattrxref("title")}} استفده کنید.

+ +

مشخصات

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
مشخصهوضعیتتوضیح
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

سازگاری با مرورگر

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2.0{{CompatGeckoDesktop(1.0)}} [1]7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Up to Gecko 1.9.2 (Firefox 3.6), Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element instead of the {{domxref("HTMLElement")}} interface.

+ +

ظاهر پیش فرض

+ +

هدف از این عنصر صرفا راحتی نویسند است و همه مرورگر ها آن را به صورت خطی (inline) نمایش میدهند.

+ + + +

همچنین ببینید

+ + + +
 
+ +
 
diff --git a/files/fa/web/html/element/data/index.html b/files/fa/web/html/element/data/index.html new file mode 100644 index 0000000000..9d06506179 --- /dev/null +++ b/files/fa/web/html/element/data/index.html @@ -0,0 +1,94 @@ +--- +title: +slug: Web/HTML/Element/data +translation_of: Web/HTML/Element/data +--- +
{{HTMLRef}}
+ +

The HTML <data> element links a given content with a machine-readable translation. If the content is time- or date-related, the {{HTMLElement("time")}} element must be used.

+ +
{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, palpable content.
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content.
DOM interface{{domxref("HTMLDataElement")}}
+ +

Attributes

+ +

This element's attributes include the global attributes.

+ +
+
{{htmlattrdef("value")}}
+
This attribute specifies the machine-readable translation of the content of the element.
+
+ +

Example

+ +

The following example displays product names but also associates each name with a product number.

+ +
<p>New Products</p>
+<ul>
+ <li><data value="398">Mini Ketchup</data></li>
+ <li><data value="399">Jumbo Ketchup</data></li>
+ <li><data value="400">Mega Jumbo Ketchup</data></li>
+</ul>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-data-element', '<data>')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.data")}}

+ +

See also

+ +
    +
  • The HTML {{HTMLElement("time")}} element.
    • +
diff --git a/files/fa/web/html/element/em/index.html b/files/fa/web/html/element/em/index.html new file mode 100644 index 0000000000..527d56af2f --- /dev/null +++ b/files/fa/web/html/element/em/index.html @@ -0,0 +1,150 @@ +--- +title: +slug: Web/HTML/Element/em +translation_of: Web/HTML/Element/em +--- +

خلاصه

+ +

برچسب HTML تاکید <em> نشانه آن است که متن دارای تاکید و اهمیت بیشری می باشد. برچسب <em> میتواند به صورت تو در تو باشد و هر مرحله از تودرتویی به معنای درجه بیشتری از مهم بودن میباشد.

+ +

 

+ +
توجه داشته یاشید: به صورت معمول این عنصر به صورت مورب (کج) نمایش داده میشود ، با این حال، حقیقتا نباید برای اضافه کردن ظاهر مورب از این تگ استفاده نمود. برای مشخص کردن عنوان کاری (مانند: کتاب ، بازی ، آهنگ و ...) از  {{HTMLElement("cite")}} استفاده کنید. این عنصر نیز معمولا با ظاهر مورب نمایش داده میشود. همچنین از  {{HTMLElement("strong")}} برای متن هایی استفاده کنید که درجه اهمیت بیشتری نسبت به متن های اطراف دارند.
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, palpable content
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content.
DOM interface{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.
+ +

ویژگی ها

+ +

این عنصر تنها شامل ویژگی های همگانی می باشد.

+ +

مثال

+ +

عنصر <em> اغلب برای نمایش تضاد ضمنی یا صریح استفاده میشود.

+ +
<p>
+  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
+</p>
+ +

نتیجه

+ +

In HTML 5, what was previously called block-level content is now called flow content.

+ +

<i> در مقابل <em>

+ +

این اکثرا برای توسعه دهندگان جدید گیج کننده است ، که چرا تعداد بسیاری عنصر مختلف برای تاکید بر برخی از متن وجود دارد. اتفاقا <i> و <em> یکی از شاید ترین این موارد هستند ، چرا از <i> و <em> با هم استفاده کنیم؟ آنها دقیقا یک نتیجه را تولید میکنند ، درست است؟

+ +

نه دقیقا. نتیجه بصری اینگونه است، اما به صورت پیش فرض، این دو برچسب نتیجه خود را به صورت مورب نشان میدهند. اما از لحاظ معنایی این دو متفاوت اند. برچسب <em> نشان دهنده تاکید بر محتوای آن است درحای که <i> نشان دهنده یک متن معمولی است.  مانند نام یک فیلم یا کتاب یک لغت خارجی یا زمانی که متن مربوط به تعریف یک لغت بجای استفاده از معنای آن باشد میباشد.

+ +

مثالی برای <em> میتواند این باشد:«این را همین اکنون انجام بده!» یا «ما باید کاری برای آن میکردیم.» یک شخص یا نرم افزار که متن را میخواند متن های مورب را با تاکید بیشتری میخواند.

+ +

به عنوان مثالی برای <i> میتوان گفت:«ملکه مری دیشب با ناز و عشوه راه میرفت.» در اینجا هیچ تاکید خواص و یا اهمیت اضافه ای به "ملکه مری" وجود ندارد. این تنها نشان دهنده این است که شی ما در سوال ملکه ای به نام مری نیست. بلکه یک کشتی به نام ملکه مری است. مثال دیگری برای <i> میتواند این باشد:«این کلمه یک مقاله است»

+ +

مشخصات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
مشخصهوضعیتتوضیح
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}{{Spec2('HTML4.01')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

همچنین ببینید

+ +
    +
  • {{HTMLElement("i")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/fa/web/html/element/heading_elements/index.html b/files/fa/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..9caa97cd0b --- /dev/null +++ b/files/fa/web/html/element/heading_elements/index.html @@ -0,0 +1,143 @@ +--- +title: Heading elements +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +

خلاصه

+

عنصر سرفصل در شش سطح برای سر فصل گذاری پیاده سازی شده است , <h1> برای مهم ترین(برجسته ترین) و <h6> برای کم اهمیت ترین. عنصر سر فصل به طور خلاصه موضوع اصلی بخش را معرفی می کند.

+

Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

+
    +
  • Content categories Flow content, heading content, palpable content.
    • +
  • Permitted content Phrasing content.
    • +
  • Tag omission {{no_tag_omission}}
    • +
  • Permitted parent elements Any element that accepts flow content; or as a child of an {{HTMLElement("hgroup")}} element
    • +
  • DOM interface {{domxref("HTMLHeadingElement")}}
    • +
+

صفات

+

این عنصر ها شامل صفات سراسری میشوند. 

+

صفت align  یک صفت {{deprecated_inline}} در {{HTMLVersionInline(4.01)}} و {{obsolete_inline}} در {{HTMLVersionInline(5)}} است.

+

مثال ها

+

تمام سرفصل ها

+
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+

خروجی کد HTML بالا :

+

Image:HTML-headers2.png

+

 

+

 

+

 

+

 

+

 

+

مثال در صفحه :

+
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here...</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here...</p>
+
+<h3>Example 2</h3>
+<p>Some text here...</p>
+
+<h2>see also</h2>
+<p>Some text here...</p>
+
+

خروجی کد HTML بالا :

+

Image:HTML-headers1.png

+

 

+

 

+

 

+

 

+

 

+

 

+

 

+

 

+

توجه

+

از سطح های پایین برای کوچک کردن اندازه فونت سرفصل استفاده نکنید: به جای آن از ویژگی اندازه فونت در CSS font-size CSS استفاده کنید.

+

 از همه سطح ها استفاده کنید : همیشه از سطح ۱  <h1> شروع کنید، بعد سطح ۲ <h2> و به همین ترتیب تا آخر ... . همچنین سعی کنید در هر صفحه فقط یک بار از سطح ۱ <h1>  برای سر فصل استفاده کنید.

+

برای تعریف نمای کلی (outline) اسناد در {{HTMLVersionInline(5)}}, از {{HTMLElement("section")}} استفاده کنید . سرفصل ها برای بخش ها و زیر بخش ها عنوان را مشخص می کنند. شما همچنین می توانید محتوای سرفصل ها را گروه بندی کنید با استفاده از عنصر {{HTMLElement("div")}}.

+

مشخصات

+ + + + + + + + + + + + + + + + + + + + + + + + + +
مشخصاتوضعیتتوضیحات
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}} 
+

سازگاری در مرورگرها

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
ویژگیکرومفایرفاکس (Gecko)اینترنت اکسپلورراپراSafari
پشتیبانی اولیه{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
ویژگیاندرویدفایرفاکس موبایل (Gecko)اینترنت اکسپلورر موبایلاپرا موبایلSafari موبابل
پشتیبانی اولیه{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

همچنین ببینید

+
    +
  • {{HTMLElement("p")}}
    • +
  • {{HTMLElement("div")}}
    • +
  • {{HTMLElement("section")}}
    • +
+

{{HTML:Element_Navigation}}

diff --git a/files/fa/web/html/element/index.html b/files/fa/web/html/element/index.html new file mode 100644 index 0000000000..e7bd8d2984 --- /dev/null +++ b/files/fa/web/html/element/index.html @@ -0,0 +1,203 @@ +--- +title: عنصرهای HTML +slug: Web/HTML/Element +translation_of: Web/HTML/Element +--- +

فهرست پیش‌رو مرجعی است برای تمام عنصر‌های HTML، که دربرگیرنده‌ی عنصرهای جدید در HTML5 نیز می‌باشد.

+

عنصرهای HTML اجزایی هستند که مشخص می‌کنند اسناد HTML چگونه باید ساخته شوند، و چه نوع محتوایی در کدام قسمت از سند HTML باید قرار بگیرند. نام آن‌ها باید بین دو علامت ">" و "<" به صورت "<نام عنصر>" قرار می‌گیرد که به چنین ساختاری یک برچسب گفته می‌شود. اگر عنصر شامل محتوای دیگری باشد، با یک برچسب پایانی خاتمه می‌یابد، به صورتی که نام عنصر به همراه یک خط مورب آورده می‌شود: <نام عنصر/>. برخی از عنصرها به برچسب پایانی نیازی ندارند مانند عنصر <img> که به عنصرهای تهی معروف هستند. اسناد HTML شامل فهرستی درختواره از عنصرهای مختلف هستند، که نام هر یک مشخص کننده‌ی عملکردش است. برای نمونه عنصر <title> نشان‌دهنده‌ی عنوان یک سند است. در ادامه فهرستی الفبایی از عنصرهای HTML وجود دارد.

+

A

+
    +
  • {{ HTMLElement("a") }} (پیوند)
    • +
  • {{ HTMLElement("abbr") }} (مخفف - کوتاه‌سازی)
    • +
  • {{ HTMLElement("acronym") }} که {{ obsoleteGeneric("inline","HTML5") }} - در عوض از {{ HTMLElement("abbr") }} استفاده شود
    • +
  • {{ HTMLElement("address") }} (نشانی یا اطلاعات تماس)
    • +
  • {{ HTMLElement("applet") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }} - در عوض از {{ HTMLElement("object") }} استفاده شود.
    • +
  • {{ HTMLElement("area") }} (پیوند تصویر-نقشه)
    • +
  • {{ HTMLElement("article") }} (مقاله‌ی مجزا) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("aside") }} (محتوای مرتبط با موضوع اصلی) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("audio") }} (فایل صوتی ضمیمه‌شده) {{ HTMLVersionInline(5) }}
    • +
+

B

+
    +
  • {{ HTMLElement("b") }} (قبلا با نام Bold شناخته می‌شد)
    • +
  • {{ HTMLElement("base") }} (نشانی پایه)
    • +
  • {{ HTMLElement("basefont") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }}
    • +
  • {{ HTMLElement("bdi") }} (محتوای دوطرفه-دوجهت) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("bdo") }} ()
    • +
  • {{ HTMLElement("bgsound") }} (صدای پس‌زمینه) {{ Non-standard_inline() }}
    • +
  • {{ HTMLElement("big") }} که {{ obsolete_inline("html5") }}
    • +
  • {{ HTMLElement("blink") }} که {{ Non-standard_inline() }}
    • +
  • {{ HTMLElement("blockquote") }} (نقل‌قول صریح)
    • +
  • {{ HTMLElement("body") }} (بدنه‌ی اصلی سند)
    • +
  • {{ HTMLElement("br") }} (رفتن به خط بعد)
    • +
  • {{ HTMLElement("button") }} (دکمه‌)
    • +
+

C

+
    +
  • {{ HTMLElement("canvas") }} (محیط رسم گرافیک‌های پویا) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("caption") }} (عنوان جدول)
    • +
  • {{ HTMLElement("center") }} که {{ Deprecated_inline("html4") }} و {{ obsoleteGeneric("inline","HTML5") }}
    • +
  • {{ HTMLElement("cite") }} (عنوان شغل)
    • +
  • {{ HTMLElement("code") }} (قطعه کد)
    • +
  • {{ HTMLElement("col") }} (ستون جدول)
    • +
  • {{ HTMLElement("colgroup") }} (گروه‌بندی ستون جدول)
    • +
  • {{ HTMLElement("command") }} (بررسی وضعیت کاربر) {{ HTMLVersionInline(5) }}
    • +
+

D

+
    +
  • {{ HTMLElement("datalist") }} (فهرستی از گزینه‌های از پیش تعریف شده) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("dd") }} (توصیف عبارت)
    • +
  • {{ HTMLElement("del") }} (متن حذف‌شده)
    • +
  • {{ HTMLElement("details") }} (فراهم آوردن جزییات بیشتر برای کاربر در قالب یک ویجت) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("dfn") }} (تعریف)
    • +
  • {{ HTMLElement("dir") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }}
    • +
  • {{ HTMLElement("dl") }} (فهرست تعریفی)
    • +
  • {{ HTMLElement("dt") }} (عبارت تعریفی)
    • +
+

E

+
    +
  • {{ HTMLElement("em") }} (تاکید)
    • +
  • {{ HTMLElement("embed") }} (جاسازی یا همان embed کردن) {{ HTMLVersionInline(5) }}
    • +
+

F

+
    +
  • {{ HTMLElement("fieldset") }} (مجموعه‌ای کنترل‌های یک فرم)
    • +
  • {{ HTMLElement("figcaption") }} (عنوان شکل) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("figure") }} (شکل) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("font") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }}
    • +
  • {{ HTMLElement("footer") }} (قسمت انتهایی صفحه) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("form") }} (فرم HTML - جهت جمع‌آوری اطلاعات از کاربر)
    • +
  • {{ HTMLElement("frame") }} که {{ obsoleteGeneric("inline","HTML5") }}
    • +
  • {{ HTMLElement("frameset") }} که {{ obsoleteGeneric("inline","HTML5") }}
    • +
+

G

+

H

+
    +
  • {{ HTMLElement("h1") }}، {{ HTMLElement("h2") }}، {{ HTMLElement("h3") }}، {{ HTMLElement("h4") }}، {{ HTMLElement("h5") }}، {{ HTMLElement("h6") }} (عنصرهای مورد نیاز برای عنوان‌گذاری)
    • +
  • {{ HTMLElement("head") }} (قسمت ابتدایی سند HTML که اطلاعات فراداده‌ای را شامل می‌شود)
    • +
  • {{ HTMLElement("header") }} (قسمت ابتدایی صفحه) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("hgroup") }} (گروهی از عناصر که در Heading به کار می‌روند) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("hr") }} (خط افقی برای جداسازی موضوع)
    • +
  • {{ HTMLElement("html") }} (ریشه‌ی سند HTML، جایی که همه چیز شروع می‌شود)
    • +
+

I

+
    +
  • {{ HTMLElement("i") }} (متن کج)
    • +
  • {{ HTMLElement("iframe") }} (قاب یا frame داخلی)
    • +
  • {{ HTMLElement("img") }} (تصویر)
    • +
  • {{ HTMLElement("input") }} (از اجزای فرم - دریافت ورودی از کاربر)
    • +
  • {{ HTMLElement("ins") }} (متن درج‌شده)
    • +
  • {{ HTMLElement("isindex") }} که {{ deprecatedGeneric("inline","HTML4") }}
    • +
+

J

+

K

+
    +
  • {{ HTMLElement("kbd") }} (ورودی صفحه‌کلید)
    • +
  • {{ HTMLElement("keygen") }} (تولید‌کننده‌ی زوج‌کلید - متنی تصادفی)
    • +
+

L

+
    +
  • {{ HTMLElement("label") }} (برچسب برای کنترل‌های فرم)
    • +
  • {{ HTMLElement("legend") }} (عبارتی که بالای مجموعه‌ای از فیلدها قرار می‌گیرد)
    • +
  • {{ HTMLElement("li") }} (گزینه(ها)ی فهرست)
    • +
  • {{ HTMLElement("link") }} (فراداده‌ای برای ارتباط‌های بین‌سندی)
    • +
  • {{ HTMLElement("listing") }} (فهرست‌سازی کد) {{ deprecatedGeneric("inline","HTML3.2") }}
    • +
+

M

+
    +
  • {{ HTMLElement("map") }} (نقشه‌ی تصویر)
    • +
  • {{ HTMLElement("mark") }} (متن علامت‌گذاری‌شده) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("marquee") }} که {{ Non-standard_inline() }}
    • +
  • {{ HTMLElement("menu") }} (فهرستی از فرمان‌ها) که در HTML4 کنارگذاشته شد اما در HTML5 دوباره استفاده می‌شود
    • +
  • {{ HTMLElement("meta") }} (فراداده - اطلاعاتی که در مرورگر قابل مشاهده نیستند اما معنای خاصی دارند)
    • +
  • {{ HTMLElement("meter") }} (مقیاس یا اندازه‌ی عددی) {{ HTMLVersionInline(5) }}
    • +
+

N

+
    +
  • {{ HTMLElement("nav") }} (پیمایش) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("nobr") }} (عدم درج فاصله) {{ Non-standard_inline() }}
    • +
  • {{ HTMLElement("noframes") }} که {{ obsoleteGeneric("inline","HTML4") }}
    • +
  • {{ HTMLElement("noscript") }} (محتوای اسکریپت بازگشتی)
    • +
+

O

+
    +
  • {{ HTMLElement("object") }} (آبجکت یا شی جاسازی‌شده)
    • +
  • {{ HTMLElement("ol") }} (فهرست مرتب یا شماره‌دار)
    • +
  • {{ HTMLElement("optgroup") }} (گروه‌بندی گزینه‌ها)
    • +
  • {{ HTMLElement("option") }} (گزینه‌ی انتخابی)
    • +
  • {{ HTMLElement("output") }} (نتیجه‌ی محاسبه‌شده) {{ HTMLVersionInline(5) }}
    • +
+

P

+
    +
  • {{ HTMLElement("p") }} (پاراگراف)
    • +
  • {{ HTMLElement("param") }} (پارامتر یک شی)
    • +
  • {{ HTMLElement("plaintext") }} که {{ Deprecated_inline("html2") }}
    • +
  • {{ HTMLElement("pre") }} (متن قالب‌بندی‌شده)
    • +
  • {{ HTMLElement("progress") }} (نشانگر پیشرفت) {{ HTMLVersionInline(5) }}
    • +
+

Q

+
    +
  • {{ HTMLElement("q") }} (نقل‌قول)
    • +
+

R

+

(عنصرهای Ruby به برنامه‌های پشتیبانی نظیر XHTML Ruby Support یا HTML Ruby نیاز دارند که مورد آخر هنور در حال توسعه است)

+
    +
  • {{ HTMLElement("rp") }} (پرانتزگذاری در Ruby) که {{ HTMLVersionInline(5) }} و {{ unimplemented_inline() }}
    • +
  • {{ HTMLElement("rt") }} (متن Ruby) که {{ HTMLVersionInline(5) }} و {{ unimplemented_inline() }}
    • +
  • {{ HTMLElement("ruby") }} که {{ HTMLVersionInline(5) }} و {{ unimplemented_inline(33339) }}
    • +
+

S

+
    +
  • {{ HTMLElement("s") }} (خطی که از میان عبارت می‌گذرد) {{ deprecatedGeneric("inline","HTML4") }}
    • +
  • {{ HTMLElement("samp") }} (متن نمونه و پیشنهادی)
    • +
  • {{ HTMLElement("script") }} (اسکریپتی که در سند به کار می‌رود در این قسمت باید نوشته شود)
    • +
  • {{ HTMLElement("section") }} (بخش جداساز سند) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("select") }} (فهرست انتخابی)
    • +
  • {{ HTMLElement("small") }} (متن با اندازه‌ی کوچک)
    • +
  • {{ HTMLElement("source") }} (جایی که رسانه (فایل صوتی یا تصویری) در آن تعریف می‌شود) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("spacer") }} (فضای خالی) {{ Non-standard_inline() }}
    • +
  • {{ HTMLElement("span") }} (محدوده‌ی متن)
    • +
  • {{ HTMLElement("strike") }} مانند {{ HTMLElement("s") }} که {{ deprecatedGeneric("inline","HTML4") }}
    • +
  • {{ HTMLElement("strong") }} (نشان‌دهنده‌ی تاکید زیاد - تاکید قوی)
    • +
  • {{ HTMLElement("style") }} (شیوه نامه‌ی آبشاری یا مخزنی برای تعریف کدهای CSS موردنظر)
    • +
  • {{ HTMLElement("sub") }} (زیرنویس برای متن یا عبارتی خاص)
    • +
  • {{ HTMLElement("summary") }} (خلاصه‌ی جزییات) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("sup") }} (بالانویس برای متن یا عبارتی خاص)
    • +
+

T

+
    +
  • {{ HTMLElement("table") }} (جهت نمایش داده‌های جدولی)
    • +
  • {{ HTMLElement("tbody") }} (بدنه‌ی جدول)
    • +
  • {{ HTMLElement("td") }} (سلول یا خانه‌ی جدول)
    • +
  • {{ HTMLElement("textarea") }} (ورودی متنی چندخطی)
    • +
  • {{ HTMLElement("tfoot") }} (قسمت انتهایی جدول)
    • +
  • {{ HTMLElement("th") }} (سلول یا خانه‌ی عنوان جدول)
    • +
  • {{ HTMLElement("thead") }} (عنوان جدول)
    • +
  • {{ HTMLElement("time") }} (تاریخ یا زمان) {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("title") }} (عنوان سند)
    • +
  • {{ HTMLElement("tr") }} (سطر جدول)
    • +
  • {{ HTMLElement("track") }} که {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("tt") }} که {{ deprecatedGeneric("inline","HTML5") }}
    • +
+

U

+
    +
  • {{ HTMLElement("u") }} (استفاده به عنوان خط‌زیرین تا HTML4، تغییرشکل‌یافته در HTML5) که {{ deprecatedGeneric("inline","HTML4") }} و {{ HTMLVersionInline(5) }}
    • +
  • {{ HTMLElement("ul") }} (فهرست نامرتب یا نقطه‌دار)
    • +
+

V

+
    +
  • {{ HTMLElement("var") }} (متغیر)
    • +
  • {{ HTMLElement("video") }} (جهت نمایش ویدیو بدون نیاز به پلاگین‌های شخص‌ثالث مانند فلش) {{ HTMLVersionInline(5) }}
    • +
+

W

+
    +
  • {{ HTMLElement("wbr") }} (شکستن کلمه به اجزای کوچک‌تر) {{ HTMLVersionInline(5) }}
    • +
+

X

+
    +
  • {{ HTMLElement("xmp") }} (جهت نمایش مثال) {{ deprecatedGeneric("inline","HTML3.2") }} و {{ obsoleteGeneric("inline","HTML4") }}
    • +
+

Y

+

Z

+

{{ languages( { "de": "de/HTML/Element", "es": "es/HTML/Elemento", "fr": "fr/HTML/Element", "ja": "ja/HTML/Element", "pl": "pl/HTML/Element", "ko": "ko/HTML/Element", "nl": "nl/HTML/HTML_Tags", "ru": "Ru/HTML/Element", "zh-cn": "cn/HTML/Element", "zh-tw": "zh_tw/HTML/HTML_元素" } ) }}

+

{{ HTML:Element_Navigation() }}

diff --git a/files/fa/web/html/element/input/index.html b/files/fa/web/html/element/input/index.html new file mode 100644 index 0000000000..47a1d82d22 --- /dev/null +++ b/files/fa/web/html/element/input/index.html @@ -0,0 +1,1376 @@ +--- +title: +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +
+

HTML <ورودی> عنصر استفاده می شود برای ایجاد کنترل های تعاملی برای اشکال مبتنی بر وب به منظور شرایط داده ها از کاربر. معناشناسی <ورودی> بسته به ارزش آن نوع ویژگی.

+
+ +
    +
  • دسته بندی های مطالب جریان محتوا ، ذکر شده است، submittable، resettable، عنصر فرم ارتباط، محتوا جملهبندی .
    + اگر {{htmlattrxref ("input", "type")}} است نه پنهان ارزش، عنصر labellable، محتوای قابل لمس.
    • +
  • مجاز محتوای هیچ، آن است {{Glossary ("عنصر خالی", "empty element")}}.
    • +
  • حذف برچسب باید یک برچسب شروع کرده اند و باید یک تگ پایانی ندارد.
    • +
  • مجاز عناصر پدر و مادر هر عنصر است که می پذیرد محتوای جملهبندی .
    • +
  • DOM رابط {{domxref ("HTMLInputElement")}}
    • +
+ +

خواص

+ +

این عنصر شامل ویژگی های کلی .

+ +
+
{{htmlattrdef ("type")}}
+
نوع کنترل برای نمایش. نوع پیش فرض متن است، اگر این ویژگی مشخص نشده است. مقادیر ممکن عبارتند از: +
    +
  • دکمه : یک دکمه را فشار با هیچ رفتار پیش فرض.
    • +
  • چک باکس : جعبه چک. شما باید با استفاده از ارزش ویژگی برای تعریف ارزش ارائه شده توسط این آیتم استفاده کنید. استفاده از چک ویژگی برای نشان که آیا این آیتم انتخاب شده است. شما همچنین می توانید استفاده از نامشخص ویژگی به نشان می دهد که چک باکس است در حالت نامشخص (در اکثر سیستم عامل، این تساوی یک خط افقی در سراسر چک باکس).
    • +
  • رنگ : {{HTMLVersionInline ("5")}} کنترل برای تعیین رنگ. UI جمع کننده رنگ ندارد ویژگی های مورد نیاز دیگر از پذیرش رنگ ساده به عنوان متن ( اطلاعات بیشتر ).
    • +
  • تاریخ : {{HTMLVersionInline ("5")}} کنترل برای ورود به یک تاریخ (سال، ماه، روز و، با هیچ زمان).
    • +
  • تاریخ ساعت : {{HTMLVersionInline ("5")}} کنترل برای ورود به تاریخ و زمان (ساعت، دقیقه، دوم، و کسری از ثانیه) بر اساس منطقه محلی UTC تنظیم شده است.
    • +
  • تاریخ ساعت محلی : {{HTMLVersionInline ("5")}} کنترل برای ورود به تاریخ و زمان، با هیچ منطقه زمان.
    • +
  • ایمیل : {{HTMLVersionInline ("5")}} درست برای ویرایش یک آدرس ایمیل. مقدار ورودی دارای اعتبار است که شامل هر دو رشته خالی یا یک معتبر آدرس ایمیل تنها قبل از ارسال. {{cssxref (": معتبر")}} و {{cssxref (": نامعتبر")}} CSS شبه کلاس ها به عنوان مناسب استفاده شود.
    • +
  • فایل : کنترل که اجازه می دهد کاربر را انتخاب کنید یک فایل. با استفاده از شرایط ویژگی برای تعریف انواع فایل هایی که کنترل می توانید انتخاب کنید.
    • +
  • پنهان : کنترل است که نشان داده نمی شود، اما که مقدار آن به سرور را مشاهده کنید.
    • +
  • تصویر : گرافیکی دکمه ارسال. شما باید با استفاده SRC ویژگی برای تعریف منبع تصویر و ALT ویژگی برای تعریف متن جایگزین. شما می توانید با استفاده از ارتفاع و عرض ویژگی برای تعریف اندازه تصویر در پیکسل.
    • +
  • ماه : {{HTMLVersionInline ("5")}} کنترل برای ورود به یک ماه و سال، با هیچ منطقه زمان.
    • +
  • تعداد : {{HTMLVersionInline ("5")}} کنترل برای وارد کردن شماره ممیز شناور.
    • +
  • رمز عبور : درست متن تک خط که ارزش پنهان است. استفاده از MAXLENGTH ویژگی برای تعیین حداکثر طول ارزش است که می تواند وارد شود.
    • +
  • رادیو : یک دکمه رادیویی. شما باید با استفاده از ارزش ویژگی برای تعریف ارزش ارائه شده توسط این آیتم استفاده کنید. استفاده از چک ویژگی برای نشان که آیا این آیتم به صورت پیش فرض انتخاب شده است. دکمه های رادیویی که همان مقدار برای نام ویژگی در همان "گروه دکمه رادیویی" می باشد. تنها با یک دکمه رادیویی در یک گروه را می توان در یک زمان انتخاب شده است.
    • +
  • محدوده : {{HTMLVersionInline ("5")}} کنترل برای وارد کردن شماره که مقدار دقیق آن مهم نیست. این کنترل نوع استفاده از مقادیر پیش فرض زیر اگر صفات مربوطه مشخص نشده است: +
      +
    • دقیقه : 0
      • +
    • حداکثر : 100
      • +
    • ارزش : دقیقه + ( حداکثر - دقیقه ) / 2، یا دقیقه اگر حداکثر کمتر از است دقیقه
      • +
    • گام : 1
      • +
    +
    • +
  • تنظیم مجدد : یک دکمه که بازنشانی محتویات فرم به مقادیر پیش فرض.
    • +
  • جستجو : {{HTMLVersionInline ("5")}} فیلد متنی تک خط برای ورود به رشته جستجو. خط میشکند صورت خودکار از ارزش ورودی حذف شده است.
    • +
  • ارسال : یک دکمه که تسلیم فرم.
    • +
  • تلفن : {{HTMLVersionInline ("5")}} کنترل برای وارد کردن شماره تلفن. خط میشکند صورت خودکار از ارزش ورودی برداشته شود، اما هیچ نحو دیگر اجرا شده است. شما می توانید ویژگی های از قبیل استفاده از الگوی و MAXLENGTH برای محدود کردن مقادیر وارد شده در کنترل. {{cssxref (": معتبر")}} و {{cssxref (": نامعتبر")}} CSS شبه کلاس ها به عنوان مناسب استفاده شود.
    • +
  • متن : درست متن تک خط. خط میشکند صورت خودکار از ارزش ورودی حذف شده است.
    • +
  • زمان : {{HTMLVersionInline ("5")}} کنترل برای ورود به یک مقدار زمان با هیچ منطقه زمان.
    • +
  • آدرس : {{HTMLVersionInline ("5")}} زمینه برای ویرایش یک URL. مقدار ورودی دارای اعتبار است که شامل هر دو رشته خالی یا یک URL مطلق معتبر قبل از ارسال. خط میشکند و منجر و یا فرار فضای سفید به طور خودکار از ارزش ورودی حذف شده است. شما می توانید ویژگی های از قبیل استفاده از الگوی و MAXLENGTH برای محدود کردن مقادیر وارد شده در کنترل. {{cssxref (": معتبر")}} و {{cssxref (": نامعتبر")}} CSS شبه کلاس ها به عنوان مناسب استفاده شود.
    • +
  • هفته : {{HTMLVersionInline ("5")}} کنترل برای ورود به عضویت متشکل از تعداد هفته سال و تعداد هفته با هیچ منطقه زمان.
    • +
+
+
{{htmlattrdef ("accept")}}
+
اگر مقدار از نوع ویژگی است فایل ، این ویژگی را نشان می دهد نوع فایل که سرور می پذیرد. در غیر این صورت آن را نادیده گرفته است. مقدار باید یک لیست با کاما از هم جدا از منحصر به فرد specifiers نوع محتوا: +
    +
  • پسوند فایل با شروع با شخصیت STOP (U + 002E). (به عنوان مثال: ".JPG، فعلی، doc است")
    • +
  • نوع MIME پرونده معتبر بدون پسوند
    • +
  • صوتی / * نمایندگی فایل های صوتی {{HTMLVersionInline ("5")}}
    • +
  • ویدئو / * نمایندگی فایل های ویدئویی {{HTMLVersionInline ("5")}}
    • +
  • تصویر / * فایل های نمایندگی تصویر {{HTMLVersionInline ("5")}}
    • +
+
+
{{htmlattrdef ("accesskey")}} {{HTMLVersionInline (4)}} تنها، {{obsoleteGeneric ("درون خطی"، "HTML5")}}
+
تک شخصیت است که کاربر می تواند فشار دهید برای تغییر تمرکز ورودی به کنترل. این ویژگی جهانی در HTML5 است.
+
{{htmlattrdef ("mozactionhint")}} {{غیر standard_inline}}
+
مشخص "اشاره عمل" مورد استفاده برای تعیین چگونگی برچسب کلید را وارد کنید در دستگاه های تلفن همراه با صفحه کلید مجازی. ارزش پشتیبانی می شوند به ، انجام ، بعدی ، جستجو ، و ارسال . این به طور خودکار دریافت به رشته مناسب نقشه برداری (و حروف حساس).
+
{{htmlattrdef ("autocapitalize")}} {{غیر standard_inline}}
+
این یک ویژگی غیر استاندارد استفاده شده توسط سیستم عامل iOS صفری موبایل که کنترل اینکه آیا و چگونه ارزش متن باید به طور خودکار با حروف بزرگ آن را به عنوان وارد / ویرایش توسط کاربر است. مقادیر غیر بد دانسته دسترس در iOS 5 و بعد می باشد. مقادیر ممکن عبارتند از: +
    +
  • هیچ : کاملا غیر فعال سرمایه اتوماتیک
    • +
  • جملات : به صورت خودکار اولین حرف از جملات.
    • +
  • کلمات : به صورت خودکار اولین حرف از کلمه است.
    • +
  • شخصیت : به صورت خودکار تمام شخصیت های سرمایه گذاری.
    • +
  • در : {{deprecated_inline ()}} توصیه از سیستم عامل iOS 5.
    • +
  • خاموش : {{deprecated_inline ()}} توصیه از سیستم عامل iOS 5.
    • +
+
+
{{htmlattrdef ("تکمیل خودکار")}} {{HTMLVersionInline ("5")}}
+
این ویژگی نشان می دهد که آیا ارزش کنترل می تواند به صورت خودکار توسط مرورگر به پایان رسید. این صفت نادیده گرفته اگر مقدار از نوع صفت پنهان، رمز عبور،  چک باکس ، رادیو ، فایل ، یا یک نوع دکمه ( دکمه ، ارائه ، تنظیم مجدد ، تصویر ). مقادیر ممکن عبارتند از: +
    +
  • خاموش : کاربر باید به صراحت ارزش به این زمینه برای هر استفاده را وارد کنید، و یا سند روش تکمیل خودکار خود را فراهم می کند. مرورگر به صورت خودکار تکمیل ورود نیست.
    • +
  • در : مرورگر به طور خودکار می تواند ارزش بر اساس ارزش است که کاربر در طول استفاده قبلی وارد تکمیل.
    • +
+ +

اگر تکمیل خودکار صفت در یک عنصر ورودی مشخص نشده است، پس از آن مرورگر با استفاده از تکمیل خودکار مقدار ویژگی از <ورودی> صاحب فرم عنصر. صاحب فرم یا است فرم عنصر که این <ورودی> عنصر از نوادگان یا عنصر فرم که است ID توسط مشخص فرم صفت عناصر ورودی. برای کسب اطلاعات بیشتر، نگاه کنید به {{htmlattrxref ("تکمیل خودکار"، "فرم")}} ویژگی در {{روی HTMLElement ("فرم")}}.

+ +

تکمیل خودکار ویژگی نیز تعیین می فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، اصرار دولت غیر فعال پویا و (در صورت وجود) checkedness پویا از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. ویژگی تداوم به طور پیش فرض فعال است. تنظیم مقدار از تکمیل خودکار ویژگی به فعال غیر فعال کردن این ویژگی. این کار حتی زمانی که تکمیل خودکار ویژگی به طور معمول به {{روی HTMLElement ("ورودی")}} به موجب آن صدق نمی کند نوع . مشاهده {{اشکال (654072)}}.

+
+
{{htmlattrdef ("رقم")}} {{غیر standard_inline}}
+
این یک ویژگی غیر استاندارد پشتیبانی شده توسط صفری است که مورد استفاده برای کنترل اینکه آیا autocorrection باید فعال زمانی که کاربر وارد شده است / ویرایش ارزش متن {{روی HTMLElement ("ورودی")}}. مقادیر ویژگی ممکن است: +
    +
  • در : فعال کردن autocorrection
    • +
  • خاموش : autocorrection غیر فعال کردن
    • +
+
+
{{htmlattrdef ("فوکوس خودکار")}} {{HTMLVersionInline ("5")}}
+
این ویژگی بولی شما اجازه می دهد مشخص است که یک کنترل فرم باید تمرکز ورودی هنگامی که بارهای صفحه، مگر اینکه کاربر را لغو، به عنوان مثال با تایپ کردن در یک کنترل متفاوت است. تنها یک عنصر فرم در یک سند می تواند داشته فوکوس خودکار ویژگی، که یک بولی. این را نمی توان اعمال اگر نوع صفت به راه پنهان (که شده است، شما نمی توانید به طور خودکار تمرکز به کنترل پنهان است).
+
{{htmlattrdef ("ذخیره خودکار")}} {{HTMLVersionInline ("5")}}
+
این ویژگی باید به عنوان یک ارزش منحصر به فرد تعریف شده است. اگر ارزش نوع ویژگی است جستجو ، ارزش عبارت جستجوی قبلی در کرکره در سراسر بار صفحه ادامه خواهد داشت.
+
{{htmlattrdef ("چک")}}
+
+

هنگامی که ارزش نوع ویژگی است رادیو یا چک باکس ، حضور این ویژگی بولی نشان می دهد که کنترل به طور پیش فرض انتخاب شده. در غیر این صورت آن را نادیده گرفته است.

+ +

فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، به طور پیش فرض، اصرار پویا بررسی دولت از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. با استفاده از {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} ویژگی برای کنترل این ویژگی.

+
+
{{htmlattrdef ("غیر فعال")}}
+
+

این ویژگی بولی نشان می دهد که کنترل فرم در دسترس است برای تعامل نیست. به طور خاص، کلیک رویداد خواهد شد اعزام نمی در کنترل غیر فعال است. همچنین، ارزش یک کنترل غیر فعال است با فرم ارسال نشده است.

+ +

فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، به طور پیش فرض، اصرار دولت معلول پویا از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. با استفاده از {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} ویژگی برای کنترل این ویژگی.

+
+
{{htmlattrdef ("فرم")}} {{HTMLVersionInline ("5")}}
+
عنصر فرم که عنصر ورودی با (آن همراه صاحب فرم ). ارزش ویژگی باید داشته باشد ID از {{روی HTMLElement ("فرم")}} عنصر در همان سند. اگر این ویژگی مشخص نشده است، این <ورودی> عنصر باید از نسل {{روی HTMLElement ("فرم")}} عنصر باشد. این ویژگی شما را قادر به قرار دادن <ورودی> عناصر در هر نقطه در یک سند، نه فقط به عنوان فرزندان عناصر فرم خود را. ورودی تنها می توان با یک فرم در ارتباط است.
+
{{htmlattrdef ("formaction")}} {{HTMLVersionInline ("5")}}
+
URI از برنامه ای است که پردازش اطلاعات ارائه شده توسط عنصر ورودی، اگر آن یک دکمه یا عکس ارسال کنید. اگر مشخص شده، آن را لغو می {{htmlattrxref ("عمل"، "فرم")}} ویژگی از صاحب فرم عنصر است.
+
{{htmlattrdef ("formenctype")}} {{HTMLVersionInline ("5")}}
+
اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی نوع محتوا است که برای ارائه به صورت به سرور مشخص می کند. مقادیر ممکن عبارتند از: +
    +
  • نرم افزار / X-WWW-فرم-urlencoded : مقدار پیش فرض اگر ویژگی مشخص نشده است.
    • +
  • چند / فرم داده : با استفاده از این ارزش اگر شما با استفاده از {{روی HTMLElement ("ورودی")}} عنصر با {{htmlattrxref ("نوع"، "ورودی")}} مجموعه نسبت به فایل .
    • +
  • متن / ساده
    • +
+ +

اگر این ویژگی مشخص است، آن را لغو می {{htmlattrxref ("Enctype فرم"، "فرم")}} ویژگی از صاحب فرم عنصر است.

+
+
{{htmlattrdef ("formmethod")}} {{HTMLVersionInline ("5")}}
+
اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی به روش HTTP که مرورگر استفاده می کند برای ارسال فرم مشخص می کند. مقادیر ممکن عبارتند از: +
    +
  • ارسال : داده ها از فرم در بدن از فرم شامل است و به سرور ارسال می شود.
    • +
  • دریافت ها: داده ها از فرم به اضافه فرم نسبت URI، با "؟" به عنوان یک جدا، و URI نتیجه به سرور ارسال می شود. با استفاده از این روش هنگامی که فرم هیچ عوارض جانبی و تنها حاوی کاراکترهای اسکی.
    • +
+ +

اگر مشخص شده، این ویژگی را لغو می {{htmlattrxref ("روش"، "فرم")}} ویژگی از صاحب فرم عنصر است.

+
+
{{htmlattrdef ("formnovalidate")}} {{HTMLVersionInline ("5")}}
+
اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی بولی مشخص می کند که به شکل نیست به اعتبار زمانی که آن را مشاهده کنید. اگر این ویژگی مشخص است، آن را لغو می {{htmlattrxref ("novalidate"، "فرم")}} ویژگی از صاحب فرم عنصر است.
+
{{htmlattrdef ("formtarget")}} {{HTMLVersionInline ("5")}}
+
اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی یک نام یا کلمه کلیدی نشان می دهد که در آن به نمایش پاسخ این است که پس از ارسال فرم دریافت است. این نام، و یا کلمه کلیدی برای، است زمینه مرور (به عنوان مثال، تب، پنجره، و یا فریم های درون خطی). اگر این ویژگی مشخص است، آن را لغو می {{htmlattrxref ("هدف"، "فرم")}} ویژگی از صاحب فرم عناصر است. کلمات کلیدی زیر دارای معانی خاص: +
    +
  • _ خود : بار پاسخ به زمینه مرور همان یک جریان. این مقدار به طور پیش فرض است اگر ویژگی مشخص نشده است.
    • +
  • _blank : بار پاسخ به یک محیط جدید مرور که نامش ذکر نشده.
    • +
  • _parent : بار پاسخ به زمینه مرور پدر و مادر از یک جریان. اگر هیچ پدر و مادر وجود دارد، این گزینه رفتار به همان شیوه به عنوان _self .
    • +
  • _top : بار پاسخ به زمینه مرور در سطح بالا (که شده است، زمینه مرور است که از اجداد یک جریان، و هیچ پدر و مادر). اگر هیچ پدر و مادر وجود دارد، این گزینه رفتار به همان شیوه به عنوان _self .
    • +
+
+
{{htmlattrdef ("ارتفاع")}} {{HTMLVersionInline ("5")}}
+
اگر مقدار از نوع ویژگی است تصویر ، این ویژگی ارتفاع تصویر نمایش داده شده برای دکمه تعریف می کند.
+
{{htmlattrdef ("تدریجی")}} {{غیر standard_inline}}
+
این یک ویژگی غیر استاندارد پشتیبانی شده توسط صفری که فقط شامل زمانی که است نوع است جستجو . اگر ویژگی حال حاضر، صرف نظر از آنچه ارزش خود را است، {{روی HTMLElement ("ورودی")}} آتش سوزی جستجو وقایع را به عنوان کاربر ویرایش ارزش متن. این رویداد تنها پس از ایست-اجرای تعریف کرده است از ضربه زدن به کلید جدید ترین سپری اخراج. کلید جدید تنظیم مجدد ایست. به عبارت دیگر، شلیک رویداد debounced است. اگر ویژگی وجود ندارد، جستجو رویداد تنها اخراج وقتی که کاربر به صراحت با دادن یک (مثلا با کلید Enter در حالی که در زمینه فشار دادن).
+
{{htmlattrdef ("inputmode")}} {{HTMLVersionInline ("5")}}
+
اشاره به مرورگر است که برای آن صفحه کلید برای نمایش. این ویژگی صدق زمانی که ارزش نوع متن، رمز عبور، ایمیل، و یا URL است. مقادیر ممکن عبارتند از: +
    +
  • کلمه به کلمه : عدد و الفبایی، محتوای غیر نثر مانند نام کاربری و کلمه عبور.
    • +
  • لاتین : ورودی لاتین اسکریپت در زبان مورد نظر کاربر با ایدز تایپ مانند پیش بینی متن را فعال کنید. برای ارتباط انسان-به-کامپیوتر مانند جعبه جستجو.
    • +
  • لاتین نام : عنوان لاتین ، اما برای نام انسان است.
    • +
  • لاتین نثر : به عنوان لاتین ، اما با ایدز تایپ تهاجمی تر. برای انسان به انسان ارتباطی مانند پیام های فوری برای ایمیل.
    • +
  • تمام عرض لاتین : عنوان لاتین نثر ، اما برای زبان دوم کاربر.
    • +
  • کانا : کانا یا ورودی romaji، به طور معمول ورودی هیراگانا، با استفاده از شخصیت های تمام عرض، با پشتیبانی از تبدیل به کانجی. در نظر گرفته شده برای ورودی متن ژاپنی.
    • +
  • کاتاکانا : ورودی کاتاکانا، با استفاده از شخصیت های تمام عرض، با پشتیبانی از تبدیل به کانجی. در نظر گرفته شده برای ورودی متن ژاپنی.
    • +
  • عددی : ورودی عددی، از جمله کلید برای رقم 0 تا 9، ترجیح شخصیت هزاران جدا کاربر، و شخصیت برای نشان اعداد منفی. در نظر گرفته شده برای کدهای عددی، به عنوان مثال شماره کارت اعتباری. برای اعداد واقعی، ترجیح می دهند با استفاده از <نوع ورودی = "تعداد">
    • +
  • تلفن : ورودی تلفن، از جمله ستاره و کلید پوند. استفاده از <ورودی نوع = "تلفن"> در ​​صورت امکان به جای.
    • +
  • ایمیل : ورودی ایمیل. استفاده از <ورودی نوع = "ایمیل"> در ​​صورت امکان به جای.
    • +
  • آدرس : URL ورودی. استفاده از <ورودی نوع = "URL"> در ​​صورت امکان به جای.
    • +
+
+
{{htmlattrdef ("فهرست")}} {{HTMLVersionInline ("5")}}
+
شناسایی یک لیست از گزینه های از پیش تعریف شده به پیشنهاد به کاربر. مقدار باید باشد ID از {{روی HTMLElement ("کنترل DataList")}} عنصر در همان سند. مرورگر تنها گزینه هایی که مقادیر معتبر برای این عنصر ورودی می باشد. این صفت زمانی که نادیده گرفته نوع مقدار ویژگی است پنهان ، چک باکس ، رادیو ، فایل ، یا یک نوع فشار دهید.
+
{{htmlattrdef ("حداکثر")}} {{HTMLVersionInline ("5")}}
+
حداکثر ارزش (عددی یا تاریخ-زمان) را برای این آیتم، که نباید کمتر از حداقل (آن دقیقه ویژگی) ارزش.
+
{{htmlattrdef ("MAXLENGTH")}}
+
اگر مقدار از نوع ویژگی است متن ، ایمیل ، جستجو ، رمز عبور ، تلفن ، و یا URL ، این ویژگی به حداکثر تعداد کاراکتر (در نقاط کد یونیکد) که کاربر می تواند وارد مشخص. برای دیگر انواع کنترل، آن را نادیده گرفته است. این می تواند ارزش بیش از اندازه ویژگی. اگر آن مشخص نشده است، کاربر می تواند تعداد نامحدودی از حرف وارد نمایید. مشخص نتایج تعداد منفی در رفتار پیش فرض. که شده است، کاربر می تواند تعداد نامحدودی از حرف وارد نمایید. محدودیت ارزیابی شده است تنها زمانی که ارزش صفت تغییر کرده است.
+
{{htmlattrdef ("دقیقه")}} {{HTMLVersionInline ("5")}}
+
حداقل ارزش (عددی یا تاریخ-زمان) را برای این آیتم، که نباید بیشتر از حداکثر (آن حداکثر ویژگی) ارزش.
+
{{htmlattrdef ("minlength")}} {{HTMLVersionInline ("5")}}
+
اگر مقدار از نوع ویژگی است متن ، ایمیل ، جستجو ، رمز عبور ، تلفن ، و یا URL ، این ویژگی حداقل تعداد کاراکتر (در نقاط کد یونیکد) که کاربر می تواند وارد مشخص. برای دیگر انواع کنترل، آن را نادیده گرفته است.
+
{{htmlattrdef ("چند")}} {{HTMLVersionInline ("5")}}
+
این ویژگی بولی نشان می دهد که آیا کاربر می تواند بیش از یک مقدار را وارد کنید. این ویژگی صدق زمانی که نوع صفت قرار است به ایمیل و یا فایل . در غیر این صورت آن را نادیده گرفته است.
+
{{htmlattrdef ("نام")}}
+
نام کنترل، که با داده های فرم را مشاهده کنید.
+
{{htmlattrdef ("الگوی")}} {{HTMLVersionInline ("5")}}
+
یک عبارت منظم که ارزش کنترل است در برابر بررسی می شود. الگوی باید کل ارزش، نه فقط برخی از زیر مجموعه مطابقت. استفاده از عنوان ویژگی برای توصیف الگوی برای کمک به کاربر. این ویژگی صدق زمانی که ارزش نوع ویژگی است متن ، جستجو ، تلفن ، آدرس و یا ایمیل . در غیر این صورت آن را نادیده گرفته است. زبان عبارت منظم همان را جاوا اسکریپت است. الگوی توسط اسلش رو به جلو احاطه نیست.
+
{{htmlattrdef ("حفره یا سوراخ")}} {{HTMLVersionInline ("5")}}
+
اشاره به کاربر از آنچه می تواند در کنترل وارد شده است. متن حفره یا سوراخ باید بازده حمل و یا خط تغذیه نیست. این ویژگی صدق زمانی که ارزش نوع ویژگی است متن ، جستجو ، تلفن ، آدرس و یا ایمیل . در غیر این صورت آن را نادیده گرفته است. +
توجه: آیا استفاده نمی حفره یا سوراخ نسبت به جای {{روی HTMLElement ("برچسب")}} عنصر. اهداف خود متفاوت است: {{روی HTMLElement ("برچسب")}} ویژگی را توصیف نقش عنصر فرم. که است، آن را نشان می دهد که چه نوع از اطلاعات است انتظار می رود، حفره یا سوراخ ویژگی یک اشاره در مورد فرمت محتوای باید باشد. موارد که در آن وجود دارد حفره یا سوراخ صفت هرگز به کاربر نمایش داده، به طوری که فرم باید بدون آن قابل فهم باشد.
+
+
{{htmlattrdef ("فقط خواندنی")}}
+
این ویژگی بولی نشان می دهد که کاربر می تواند ارزش های کنترل را تغییر دهید. +

{{HTMLVersionInline ("5")}} این صفت اگر مقدار از نادیده گرفته نوع صفت پنهان ، محدوده ، رنگ ، چک باکس ، رادیو ، فایل ، یا یک نوع فشار دهید.

+
+
{{htmlattrdef ("نیاز")}} {{HTMLVersionInline ("5")}}
+
این ویژگی مشخص می کند که کاربر باید در یک مقدار قبل از ارسال فرم را پر کنید. این می تواند مورد استفاده قرار گیرد که نوع صفت پنهان ، تصویر ، و یا یک نوع دکمه ( ارسال ، تنظیم مجدد ، و یا دکمه ). {{cssxref (": اختیاری")}} و {{cssxref (": نیاز")}} CSS شبه کلاس خواهد شد به میدان به عنوان مناسب استفاده شود.
+
{{htmlattrdef ("selectionDirection")}} {{HTMLVersionInline ("5")}}
+
جهت است که در آن انتخاب رخ داده است. این است "رو به جلو" اگر انتخاب از ساخته شده بود به سمت چپ به راست در محل LTR و یا راست به چپ در محلی RTL، و یا "عقب مانده" اگر انتخاب در جهت مخالف ساخته شده است. این می تواند "هیچ" اگر جهت انتخاب ناشناخته است.
+
{{htmlattrdef ("اندازه")}}
+
اندازه اولیه از کنترل. این مقدار است در پیکسل مگر اینکه ارزش نوع ویژگی است متن یا رمز عبور ، که در این صورت، آن را یک عدد صحیح از شخصیت است. شروع در HTML5، این ویژگی فقط زمانی که نوع صفت به راه متن ، جستجو ، تلفن ، آدرس ، ایمیل ، و یا رمز عبور . در غیر این صورت آن را نادیده گرفته است. علاوه بر این، اندازه باید بزرگتر از صفر باشد. اگر شما یک اندازه مشخص نیست، یک مقدار به طور پیش فرض از 20 استفاده شده است.
+
{{htmlattrdef ("چک کردن غلط املایی")}} {{HTMLVersionInline ("5")}}
+
تنظیم مقدار این ویژگی به درست نشان می دهد که عنصر نیاز به املا و دستور زبان آن بررسی می شود. ارزش به طور پیش فرض نشان می دهد که عنصر است با توجه به رفتار پیش فرض، احتمالا در عنصر پدر و مادر خود را بر اساس به عمل چک کردن غلط املایی ارزش. ارزش نادرست نشان می دهد که عنصر باید بررسی شود.
+
{{htmlattrdef ("SRC")}}
+
اگر مقدار از نوع ویژگی است تصویر ، این ویژگی URI برای محل از یک تصویر به روی گرافیکی نمایش دکمه ارسال را مشخص. در غیر این صورت آن را نادیده گرفته است.
+
{{htmlattrdef ("گام")}} {{HTMLVersionInline ("5")}}
+
با این نسخهها کار میکند دقیقه و حداکثر نسبت به محدود کردن افزایش که در آن یک مقدار عددی یا تاریخ-زمان می تواند مجموعه ای. این می تواند رشته هر و یا تعداد ممیز شناور مثبت است. اگر این ویژگی است به تنظیم نشده هر ، کنترل تنها ارزش می پذیرد در تقسیم عددی بر مضرب ارزش گام بیشتر از حداقل.
+
{{htmlattrdef ("tabindex")}}-عنصر خاص در {{HTMLVersionInline (4)}}، جهانی در {{HTMLVersionInline ("5")}}
+
موقعیت عنصر در tabbing منظور ناوبری برای سند جاری.
+
{{htmlattrdef ("usemap")}} {{HTMLVersionInline (4)}} تنها، {{obsoleteGeneric ("درون خطی"، "HTML5")}}
+
نام {{روی HTMLElement ("نقشه")}} عنصر به عنوان یک تصویر نقشه.
+
{{htmlattrdef ("مقدار")}}
+
مقدار اولیه از کنترل. این ویژگی اختیاری به جز زمانی که ارزش است نوع ویژگی است رادیو یا چک باکس .
+ توجه داشته باشید که زمانی که بارگیری مجدد صفحه، مارمولک خانگی و اینترنت اکسپلورر خواهد شد مقدار مشخص شده در کد HTML فوق به چشم پوشی ، اگر مقدار قبل از بازنگری تغییر یافت.
+
{{htmlattrdef ("عرض")}} {{HTMLVersionInline ("5")}}
+
اگر مقدار از نوع ویژگی است تصویر ، این ویژگی عرض تصویر نمایش داده شده برای دکمه تعریف می کند.
+
{{htmlattrdef ("X-moz-errormessage")}} {{غیر standard_inline}}
+
این فرمت موزیلا اجازه می دهد تا شما را به مشخص پیغام خطا برای نمایش زمانی که یک میدان می کند با موفقیت اعتبار نیست.
+
+ +

یادداشت

+ +

ورودی فایل

+ +
+

توجه داشته باشید: شروع در {{مارمولک خانگی ("2.0")}}، خواستار کلیک () روش در {{روی HTMLElement ("ورودی")}} عنصر از نوع "فایل" باز می شود جمع کننده فایل و کاربر فایل را انتخاب کنید اجازه می دهد. مشاهده با استفاده از فایل ها از برنامه های کاربردی وب برای مثال و جزئیات بیشتر.

+
+ +

شما می توانید مقدار یک جمع کننده فایل از یک اسکریپت تنظیم نشده. انجام کاری مانند زیر اثر ندارد:

+ +
ور E = getElementById ("someFileInputElement")؛
+e.value = "غذ"؛
+
+ +

پیام های خطا

+ +

اگر می خواهید فایرفاکس به ارائه یک پیام خطای سفارشی در زمانی که یک میدان قادر به اعتبارسنجی، شما می توانید با استفاده از X-moz-errormessage ویژگی به انجام این کار:

+ +
<نوع ورودی = "ایمیل" X-moz-errormessage = "لطفا یک آدرس ایمیل معتبر را مشخص کنید.">
+
+ +

توجه داشته باشید، با این حال، که این استاندارد نیست و یک اثر در مرورگرهای دیگر ندارد.

+ +

نمونه

+ +

جعبه ورودی ساده

+ +
<! - ورودی عمومی ->
+<نوع ورودی = "متن" نام = "ورودی" مقدار = "در اینجا تایپ کنید">
+
+ +

+ +

سناریو مورد استفاده مشترک

+ +
<! - فرم مشترک است که شامل تگ های ورودی ->
+<اقدام فرم = روش "getform.php" = "دریافت">
+    نام: <نوع ورودی = "متن" نام = "FIRST_NAME" /> <br />
+     تاریخ و زمان آخرین نام: <نوع ورودی = "متن" نام = "LAST_NAME" /> <br />
+        فرستادن به ایمیل: <ورودی نوع = "ایمیل" نام = "USER_EMAIL" /> <br />
+<نوع ورودی = "ارسال" مقدار = "ارسال" />
+</ FORM>
+
+ +

با استفاده از mozactionhint در فایرفاکس موبایل

+ +

شما می توانید {{htmlattrxref ("mozactionhint"، "ورودی")}} نسبت به تعیین متن برای برچسب کلید وارد کنید بر روی صفحه کلید مجازی هنگامی که فرم شما در فایرفاکس موبایل ارائه استفاده کنید. به عنوان مثال، به یک "بعدی" برچسب، شما می توانید این کار:

+ +
<نوع ورودی = "متن" mozactionhint = "بعدی" نام = "sometext" />
+
+ +

نتیجه این است:

+ +

mozactionhint.png

+ +

مشخصات

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
مشخصاتوضعیتتوضیح
{{SpecName ('HTML WHATWG'، 'ورودی-element.html #-ورودی-عنصر'، '<ورودی>')}}{{Spec2 ('HTML WHATWG')}} 
{{SpecName ('HTML5 W3C'، 'forms.html #-ورودی-عنصر'، '<ورودی>')}}{{Spec2 ('HTML5 W3C')}} 
{{SpecName ('HTML4.01'، 'تعامل / # forms.html H-17.4'، '<FORM>')}}{{Spec2 ('HTML4.01')}} 
+ +

سازگاری مرورگر

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
خصوصیاتکرومفایرفاکس (مارمولک خانگی)اینترنت اکسپلورراپراسیاحت اکتشافی در افریقا
حمایت عمومی1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}2 یا قبل از آن1.01.0
نوع1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
نوع = دکمه1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}31.01.0
نوع = چک باکس1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}
+ {{CompatGeckoDesktop ("1.9.2")}} برای رشد نامحدود ارزش		21.01.0
نوع = رنگ21.0 +

{{CompatGeckoDesktop ("29.0")}} (نه برای ویندوز لمسی نشده)

+ 		{{CompatNo}}11.01{{CompatNo}}
نوع = تاریخ5.0{{CompatNo}}
+ {{unimplemented_inline ("825294")}}		{{CompatNo}}10.62{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)
نوع = تاریخ ساعت +

{{CompatNo}}
+ (به رسمیت شناخته شده اما هیچ UI)

+ 		{{CompatNo}}
+ {{unimplemented_inline ("825294")}}		{{CompatNo}}10.62{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)
نوع = تاریخ ساعت محلی5.0{{CompatNo}}
+ {{unimplemented_inline ("825294")}}		{{CompatNo}}10.62{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)
نوع = ایمیل5.0{{CompatGeckoDesktop ("2.0")}}1010.62{{CompatUnknown}}
نوع = فایل1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}3.021.01.0
نوع = پنهان1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
نوع = تصویر1.0مارمولک خانگی 2.0 تنها x و y می فرستد مختصات زمانی که کلیک، دیگر نمی به نام / مقدار این عنصر21.01.0
نوع = ماه5.0{{CompatNo}}
+ {{unimplemented_inline ("446510")}}		{{CompatNo}}10.62{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)
نوع = تعداد6.0 (محلی سازی در کروم 11){{CompatGeckoDesktop ("29.0")}}10
+ (به رسمیت شناخته شده اما هیچ UI)		10.62{{CompatVersionUnknown}}
نوع = رمز عبور1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
نوع = رادیو1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}
+ {{CompatGeckoDesktop ("1.9.2")}} برای رشد نامحدود ارزش		21.01.0
نوع = دامنه5.0{{CompatGeckoDesktop ("23.0")}}1010.62 (11.01 اضافه شده پشتیبانی از مقدار پیش فرض){{CompatVersionUnknown}}
نوع = تنظیم مجدد1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
نوع = جستجو5.0{{CompatGeckoDesktop ("2.0")}}1011.01{{CompatVersionUnknown}}
نوع = ارسال1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
نوع = تلفن5.0{{CompatGeckoDesktop ("2.0")}}1011.01{{CompatUnknown}}
نوع = متن1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
نوع = زمان5.0{{CompatNo}}
+ {{unimplemented_inline ("825294")}}		{{CompatNo}}10.62{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)
نوع = URL5.0{{CompatGeckoDesktop ("2.0")}}1010.62{{CompatUnknown}}
نوع = هفته5.0{{CompatNo}}
+ {{unimplemented_inline ("825294")}}		{{CompatNo}}10.62{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)
+

شرایط = [فرمت فایل]

+ 		{{CompatVersionUnknown}}{{CompatNo}}10{{CompatUnknown}}{{CompatNo}}
+

شرایط = [نوع MIME پرونده]

+ 		هشت{{CompatGeckoDesktop ("16.0")}}1010{{CompatNo}}
شرایط = صوتی / *{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}
+ فیلترها برای پسوند فایل های صوتی زیر: .aac، .aif، .flac، .iff، .m4a، .m4b، .mid، .midi، MP3، .mpa، .mpc ، .oga، .ogg، .ra، .ram، .snd، پنل های ال، .WMA		10{{CompatNo}}{{CompatNo}}
شرایط = ویدیو / *{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}
+ فیلترها برای پسوند فایل تصویری زیر: .AVI، دیویکس،. FLV، .m4v، .mkv، ویدئویی، .mp4، .mpeg، .MPG، .ogm، .ogv ، .ogx، .rm، .rmvb، .smil، .webm، WMV، .xvid		10{{CompatNo}}{{CompatNo}}
شرایط = تصویر / *{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}
+ فیلترها برای پسوند فایل تصویر زیر: .jpe، .JPG، .jpeg، با فرمت .gif فعلی، bmp و، .ico، .svg، .svgz، .tif، .tiff ، .ai، .drw، .pct، .psp، .xcf، فایل PSD، .raw		10{{CompatNo}}{{CompatNo}}
= [شرایط. + EXT]{{CompatUnknown}}{{CompatGeckoDesktop ("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ویژه accesskey1.0{{CompatVersionUnknown}}61.0{{CompatUnknown}}
mozactionhint{{CompatNo}}{{CompatGeckoDesktop ("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
تکمیل خودکار17.0{{CompatGeckoDesktop ("2.0")}}59.65.2
فوکوس خودکار5.0{{CompatGeckoDesktop ("2.0")}}109.65.0
بررسی1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
غیر فعال1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}61.01.0
فرم9.0{{CompatGeckoDesktop ("2.0")}}{{CompatUnknown}}10.62{{CompatUnknown}}
formaction9.0{{CompatGeckoDesktop ("2.0")}}1010.625.2
formenctype9.0{{CompatGeckoDesktop ("2.0")}}1010.62{{CompatUnknown}}
formmethod9.0{{CompatGeckoDesktop ("2.0")}}1010.625.2
formnovalidate5.0 (در 6.0 تنها با DOCTYPE HTML5 کار، پشتیبانی اعتبار در 7.0 غیر فعال و دوباره فعال در 10.0 بود){{CompatGeckoDesktop ("2.0")}}1010.62{{CompatUnknown}}
formtarget9.0{{CompatGeckoDesktop ("2.0")}}1010.625.2
ارتفاع1.0{{CompatGeckoDesktop ("16.0")}}{{CompatUnknown}}1.0{{CompatUnknown}}
افزایشی{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
inputmode{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
فهرست20.0{{CompatGeckoDesktop ("2.0")}}109.6{{CompatNo}}
حداکثر5.0{{CompatGeckoDesktop ("16.0")}}{{CompatUnknown}}10.62{{CompatUnknown}}
MAXLENGTH1.0{{CompatGeckoDesktop ("1.7")}}21.01.0
دقیقه5.0{{CompatGeckoDesktop ("16.0")}}{{CompatUnknown}}10.62{{CompatUnknown}}
minlength40.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
چندین1.0 (پشتیبانی برای نوع = فایل و نوع = ایمیل از 5.0){{CompatGeckoDesktop ("1.9.2")}} برای نوع = فایل
+ {{CompatVersionUnknown}} برای نوع = ایمیل		101.0 (پشتیبانی 10.62 برای نوع = فایل و به عنوان از 11.01 نوع = ایمیل){{CompatUnknown}}
نام1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
الگو5.0{{CompatGeckoDesktop ("2.0")}}109.6{{CompatNo}}
حفره یا سوراخ10.0{{CompatGeckoDesktop ("2.0")}}1011.005.0
فقط خواندنی1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}6 (از دست رفته برای نوع از چک باکس ، رادیو )1.01.0
ضروری5.0 (پشتیبانی از عنصر انتخاب به عنوان 10){{CompatGeckoDesktop ("2.0")}}109.6{{CompatNo}}
اندازه1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
چک کردن غلط املایی10.0{{CompatGeckoDesktop ("1.9.2")}}1011.0چهار
SRC1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}21.01.0
گام6.0{{CompatGeckoDesktop ("16.0")}}1010.625.0
tabindex1.0{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}6 (عناصر با tabindex> 0 می پیمایش نمی شود){{CompatVersionUnknown}}{{CompatUnknown}}
عرض1.0{{CompatGeckoDesktop ("16.0")}}{{CompatUnknown}}1.0{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
خصوصیاتآندرویدفایرفاکس موبایل (مارمولک خانگی)اینترنت اکسپلورر موبایلاپرا موبایلصفری موبایل
حمایت عمومی{{CompatVersionUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = دکمه{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = چک باکس{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = رنگ{{CompatUnknown}}{{CompatGeckoDesktop ("27.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
نوع = تاریخ{{CompatNo}}{{CompatNo}}{{CompatNo}}10.625.0
نوع = تاریخ ساعت{{CompatNo}}{{CompatNo}}{{CompatNo}}10.62{{CompatVersionUnknown}}
نوع = تاریخ ساعت محلی{{CompatNo}}{{CompatNo}}{{CompatNo}}10.62{{CompatVersionUnknown}}
نوع = ایمیل{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}3.1 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)
نوع = فایل{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
نوع = پنهان{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = تصویر{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = ماه{{CompatNo}}{{CompatNo}}{{CompatNo}}10.62{{CompatVersionUnknown}}
نوع = تعداد2.3 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص){{CompatGeckoMobile ("29.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}4.0 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)
نوع = رمز عبور{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = رادیو{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = دامنه{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}5.0
نوع = تنظیم مجدد{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = جستجو{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.62چهار
نوع = ارسال{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = تلفن2.3{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.623.1
نوع = متن{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
نوع = زمان{{CompatNo}}{{CompatNo}}{{CompatNo}}10.62{{CompatVersionUnknown}}
نوع = URL{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.623.1 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)
نوع = هفته{{CompatNo}}{{CompatNo}}{{CompatNo}}10.62{{CompatVersionUnknown}}
شرایط = [نوع MIME پرونده]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
شرایط = صوتی / *{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
شرایط = تصویر / *{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
شرایط = ویدیو / *{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
= [شرایط. + EXT]{{CompatUnknown}}{{CompatGeckoMobile ("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ویژه accesskey{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
تکمیل خودکار{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
فوکوس خودکار3.2{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
بررسی{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
غیر فعال{{CompatVersionUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
فرم{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formaction{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.625.0
formenctype{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formmethod{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.625.0
formnovalidate{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.62{{CompatUnknown}}
formtarget{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}10.625.0
ارتفاع{{CompatUnknown}}{{CompatGeckoMobile ("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
فهرست{{CompatNo}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
حداکثر{{CompatUnknown}}{{CompatGeckoMobile ("16.0")}} (UI ممکن unimplemented باقی می ماند){{CompatUnknown}}10.62{{CompatUnknown}}
MAXLENGTH{{CompatVersionUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
دقیقه{{CompatUnknown}}{{CompatGeckoMobile ("16.0")}} (UI ممکن unimplemented باقی می ماند){{CompatUnknown}}10.62{{CompatUnknown}}
minlength{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
چندین{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
نام{{CompatVersionUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
الگو{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
حفره یا سوراخ2.3{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}11.104
فقط خواندنی{{CompatVersionUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ضروری{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
اندازه{{CompatVersionUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
چک کردن غلط املایی{{CompatUnknown}}{{CompatGeckoMobile ("2.0")}}{{CompatUnknown}}11.0{{CompatUnknown}}
SRC{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
گام{{CompatUnknown}}{{CompatGeckoMobile ("16.0")}} (UI ممکن unimplemented باقی می ماند){{CompatUnknown}}10.62{{CompatUnknown}}
tabindex{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
عرض{{CompatUnknown}}{{CompatGeckoMobile ("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1]: ارسال فایل شکسته شد برای IOS 8.0 و 8.0.1 در موبایل صفری. اشکال در IOS 8.0.2 ثابت شد.

+ +

صفری موبایل برای IOS اعمال سبک به طور پیش فرض از {{cssxref ("کدورت")}}: 0.4 به متن غیر فعال {{روی HTMLElement ("ورودی")}} عناصر. سایر مرورگرهای اصلی در حال حاضر نمی اشتراک این سبک به طور پیش فرض خاص است.

+ +

در Safari موبایل برای IOS، تنظیم {{cssxref ("صفحه نمایش")}}: بلوک در {{روی HTMLElement ("ورودی")}} از نوع = "تاریخ" ، نوع = "زمان" ، نوع = "تاریخ ساعت محلی " ، و یا نوع = "ماه" باعث می شود که متن درون {{روی HTMLElement ("ورودی")}} برای تبدیل شدن به صورت عمودی به misaligned.

+ +

به عنوان Chrome v39، <ورودی نوع = "تاریخ"> مدل دهید با {{cssxref ("صفحه نمایش")}}: جدول سلول. {{cssxref ("عرض")}}: 100٪؛ . یک دارای {{cssxref ("دقیقه عرض")}} اعمال شده توسط کروم و نمی توان آن را باریک تر از این حداقل عرض تبدیل ببینید کروم اشکال # 346051.

+ +

یادداشت مارمولک خانگی

+ +

فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، به طور پیش فرض، اصرار دولت غیر فعال پویا و (در صورت وجود) checkedness پویا از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. تنظیم مقدار از {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} نسبت به فعال غیر فعال کردن این ویژگی. این کار حتی زمانی که {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} ویژگی به طور معمول به {{روی HTMLElement ("ورودی")}} به موجب آن {{htmlattrxref ("نوع"، "ورودی صدق نمی کند ")}}. مشاهده {{اشکال (654072)}}.

+ +

شروع در مارمولک خانگی 9.0 {{geckoRelease ("9.0")}}، فایرفاکس برای آندروید کاربران امکان می دهد ضبط تصاویر با استفاده از دوربین خود و ارسال آنها، بدون نیاز به مرورگر را ترک کنند. توسعه دهندگان وب می توانید این ویژگی را به سادگی مشخص تنظیم اجرای شرایط مقدار ویژگی به "تصویر / *" در خود فایل ورودی، مثل این:

+ +

<ورودی نوع = "فایل" شرایط = "تصویر / *">

+ +

فایرفاکس برای آندروید مجموعه به طور پیش فرض {{cssxref ("تصویر پس زمینه")}} شیب در همه نوع = "متن" ، نوع = "فایل" ، نوع = "را فشار دهید" ، و نوع = "ارسال" ورودی. این را می توان با استفاده از غیرفعال تصویر پس زمینه: هیچ کدام .

+ +

فایرفاکس برای آندروید همچنین مجموعه به طور پیش فرض {{cssxref ("مرز")}} در تمام <ورودی نوع = "فایل"> عناصر.

+ +

محلی کردن

+ +

ورودی مجاز برای برخی از <ورودی> انواع در منطقه بستگی دارد. در برخی از مناطق، 1،000.00 یک شماره تلفن معتبر است، در حالی که در دیگر مناطق راه معتبر برای ورود به این تعداد 1.000،00 است.

+ +

فایرفاکس با استفاده از فن آوری هوشمند زیر برای تعیین مکان به اعتبار ورودی کاربر (حداقل برای نوع = "تعداد"):

+ +
    +
  • سعی کنید به زبان مشخص شده توسط 'زبان' / 'XML: زبان' ویژگی در عنصر یا هر یک از پدر و مادر خود را.
    • +
  • سعی کنید به زبان مشخص شده توسط هر هدر HTTP Content-زبان و یا
    • +
  • اگر هیچ موردی مشخص، استفاده از زبان مرورگر.
    • +
+ +

همچنین ببینید

+ +
    +
  • دیگر عناصر مرتبط با فرم: {{روی HTMLElement ("فرم")}}، {{روی HTMLElement ("را فشار دهید")}}، {{روی HTMLElement ("کنترل DataList")}}، {{روی HTMLElement ("افسانه")}}، {{روی HTMLElement ("برچسب")}}، {{روی HTMLElement ("انتخاب کنید")}}، {{روی HTMLElement ("optgroup")}}، {{روی HTMLElement ("گزینه")}}، {{روی HTMLElement ("ناحیه ی متن ")}}، {{روی HTMLElement (" کرک ")}}، {{روی HTMLElement (" از فیلدها ")}}، {{روی HTMLElement (" خروجی ")}}، {{روی HTMLElement (" پیشرفت ")}} و { {روی HTMLElement ("متر")}}.
    • +
  • صلیب مرورگر متن حفره یا سوراخ HTML5
    • +
+ +

{{HTMLRef}}

diff --git a/files/fa/web/html/global_attributes/id/index.html b/files/fa/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..c57e277c10 --- /dev/null +++ b/files/fa/web/html/global_attributes/id/index.html @@ -0,0 +1,67 @@ +--- +title: شناسه +slug: Web/HTML/Global_attributes/id +translation_of: Web/HTML/Global_attributes/id +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
id {{glossary("global attribute")}} (صفت سراسری id) شناسه (ID) ایست که باید در تمام سند بی‌همتا باشد. هدف آن شناسایی عنصری خاص به هنگام پیوند دادن (با استفاده از شناسه‌ی تکه)، اسکریپت‌نویسی، یا طراحی ( با {{glossary("CSS")}}) است.
+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
+ + + +
+

مقدار این صفت یک رشته‌ی مبهم است، به این معنی که نویسندگان وب نباید از آن برای رساندن اطلاعاتی که برای انسان قابل خواندن است استفاده کنند.

+
+ +

مقدار id نباید حاوی {{glossary("whitespace")}} (فاصله‌ها، تب‌ها و مانند آن) باشد. در شناسه هایی که حاوی فاصله‌ی سفید (whitespace) هستند، مرورگرها فاصله‌ی سفید را بخشی از شناسه در نظر می‌گیرند. برخلاف صفت {{htmlattrxref("class")}}، که مقادیر جداشده با فاصله را مجاز میداند، عنصرها تنها میتوانند یک مقدار شناسه داشته باشند. 

+ +
+

پانویس: استفاده از کاراکترهایی بجز حروف {{glossary("ASCII")}} (اسکی)، ارقام، '_'، '-' و '.' ممکن است موجب مشکلات سازگاری شود؛ چون در HTML 4 مجاز نبودند. اگرچه این محدودیت در{{glossary("HTML5")}} برداشته شده‌است؛ برای سازگاری، شناسه باید با حرف آغاز شود.

+
+ +

مشخصات

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
مشخصهوضعیتتوضیح
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}, now accept '_', '-' and '.' if not at the beginning of the id. It is also a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ +

سازگاری مرورگر

+ + + +

{{Compat("html.global_attributes.id")}}

+ +

همچنین ببینید

+ + diff --git a/files/fa/web/html/global_attributes/index.html b/files/fa/web/html/global_attributes/index.html new file mode 100644 index 0000000000..067b89b21c --- /dev/null +++ b/files/fa/web/html/global_attributes/index.html @@ -0,0 +1,201 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

+ +

Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...</foo>, even though <foo> is not a valid HTML element.

+ +

In addition to the basic HTML global attributes, the following global attributes also exist:

+ +
    +
  • {{HTMLAttrDef("xml:lang")}} and {{HTMLAttrDef("xml:base")}} — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.
    • +
  • The multiple aria-* attributes, used for improving accessibility.
    • +
  • The event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

List of global attributes

+ +
+
{{HTMLAttrDef("accesskey")}}
+
Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
+
{{HTMLAttrDef("autocapitalize")}}
+
Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values: +
    +
  • off or none, no autocapitalization is applied (all letters default to lowercase)
    • +
  • on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase
    • +
  • words, the first letter of each word defaults to a capital letter; all other letters default to lowercase
    • +
  • characters, all letters should default to uppercase
    • +
+
+
{{HTMLAttrDef("class")}}
+
A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method {{DOMxRef("Document.getElementsByClassName()")}}.
+
{{HTMLAttrDef("contenteditable")}}
+
An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: +
    +
  • true or the empty string, which indicates that the element must be editable;
    • +
  • false, which indicates that the element must not be editable.
    • +
+
+
{{HTMLAttrDef("contextmenu")}}{{Obsolete_Inline}}
+
The id of a {{HTMLElement("menu")}} to use as the contextual menu for this element.
+
{{HTMLAttrDef("data-*")}}
+
Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its {{glossary("DOM")}} representation that may be used by scripts. All such custom data are available via the {{DOMxRef("HTMLElement")}} interface of the element the attribute is set on. The {{DOMxRef("HTMLElement.dataset")}} property gives access to them.
+
{{HTMLAttrDef("dir")}}
+
An enumerated attribute indicating the directionality of the element's text. It can have the following values: +
    +
  • ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
    • +
  • rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
    • +
  • auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element.
    • +
+
+
{{HTMLAttrDef("draggable")}}
+
An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values: +
    +
  • true, which indicates that the element may be dragged
    • +
  • false, which indicates that the element may not be dragged.
    • +
+
+
{{HTMLAttrDef("dropzone")}} {{deprecated_inline}}
+
An enumerated attribute indicating what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values: +
    +
  • copy, which indicates that dropping will create a copy of the element that was dragged
    • +
  • move, which indicates that the element that was dragged will be moved to this new location.
    • +
  • link, will create a link to the dragged data.
    • +
+
+
{{HTMLAttrDef("exportparts")}} {{Experimental_Inline}}
+
Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
+
{{HTMLAttrDef("hidden")}}
+
A Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
+
{{HTMLAttrDef("id")}}
+
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
+
{{HTMLAttrDef("inputmode")}}
+
Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.
+
{{HTMLAttrDef("is")}}
+
Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see Using custom elements for more details).
+
+ +
+

Note: The item* attributes are part of the WHATWG HTML Microdata feature.

+
+ +
+
{{HTMLAttrDef("itemid")}}
+
The unique, global identifier of an item.
+
{{HTMLAttrDef("itemprop")}}
+
Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.
+
{{HTMLAttrDef("itemref")}}
+
Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. It provides a list of element ids (not itemids) with additional properties elsewhere in the document.
+
{{HTMLAttrDef("itemscope")}}
+
itemscope (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
+
{{HTMLAttrDef("itemtype")}}
+
Specifies the URL of the vocabulary that will be used to define itemprops (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.
+
{{HTMLAttrDef("lang")}}
+
Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in Tags for Identifying Languages (BCP47). xml:lang has priority over it.
+
{{HTMLAttrDef("part")}}
+
A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part")}} pseudo-element.
+
{{HTMLAttrDef("slot")}}
+
Assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that slot attribute's value.
+
{{HTMLAttrDef("spellcheck")}}
+
An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: +
    +
  • true, which indicates that the element should be, if possible, checked for spelling errors;
    • +
  • false, which indicates that the element should not be checked for spelling errors.
    • +
+
+
{{HTMLAttrDef("style")}}
+
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
+
{{HTMLAttrDef("tabindex")}}
+
An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values: +
    +
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
    • +
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
    • +
  • a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. If several elements share the same tabindex, their relative order follows their relative positions in the document.
    • +
+
+
{{HTMLAttrDef("title")}}
+
Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
+
{{HTMLAttrDef("translate")}} {{Experimental_Inline}}
+
An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: +
    +
  • empty string and yes, which indicates that the element will be translated.
    • +
  • no, which indicates that the element will not be translated.
    • +
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow Parts")}}Added the part and exportparts global attributes.
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.1")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, contextmenu, draggable, dropzone, and spellcheck have been added.
{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5 W3C")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
+ xml:lang which was initially part of XHTML, is now also part of HTML.
+ hidden, data-*, contenteditable, and translate have been added.
{{SpecName("HTML4.01")}}{{Spec2("HTML4.01")}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
+ class and style are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ dir is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ lang is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ accesskey is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.
+ title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

Browser compatibility

+ + + +

{{Compat("html.global_attributes")}}

+ +

See also

+ +
    +
  • {{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.
    • +
diff --git a/files/fa/web/html/index.html b/files/fa/web/html/index.html new file mode 100644 index 0000000000..5d9c861feb --- /dev/null +++ b/files/fa/web/html/index.html @@ -0,0 +1,64 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/HTML +--- +
{{HTMLSidebar}}
+ +

HTML (زبان نشانه گذاری  متنی مضاعف یا Hyper Text Markup Languge) بوده و نخستین زبانی است که برای ساخت بخش های مختلف وب استفاده می شود.. آن برای معنادادن و ساختاربندی کردن محتوای وب به کار می رود. فناوریهایی دیگری در صفحات وب در کنار HTML به کار گرفته می شوند تا  ظاهر یا نحوه نمایش یک صفحه وب (مانند CSS) یا عملکرد/رفتار آن (مانندJavaScript) را ایجاد و کنترل کنند.

+ +

"متن مضاعف یا همان Hyper text" به اتصال صفحات وب به هم، اتصال بخش های یک صفحه وب به یکدیگر و یا در نگاه بالاتر اتصال چندین وب سایت به یکدیگر اشاره دارد. لینک ها یکی از بنیادی ترین بخش های وبسایت ها هستند. با با بارگذاری محتواهایتان بر روی وب و سپس اضافه کردن لینک های معنادار بین آن ها شما یکی از اصول اساسی در مشارکت فعال دنیای وب را به اجرا درآورده اید.  

+ +

زبان HTML از «نشانه گذاری یا Markup» برای تعریف نوشته، تصویر و یا دیگر محتواها در یک مرورگر وب استفاده می کند. نشانه گذاریی که در زبان HTML به کار می رود از «عناصر یا ELement ها ویژه ای مانند:

+ +

 {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}

+ +

و موارد بسیار دیگر استفاده می کند..

+ +

عناصر HTML  با استفاده از «تگ ها Tage» از متن های ساده نوشتاری جدا می شوند، این عناصر با یک جفت علامت شکسته «<» و «>» احاطه می شوند. نام عناصر در میان این تگ ها وارد می شوند و مهم نیست که با حروف بزرگ و یا کوچک نوشته شوند. به همین خاطر می توان آن ها را به صورت با حروف کوچک و یا حروف بزرگ نوشت. برای مثال تگ  <title> می تواند به صورت <Title> ، <TITLE> و یا هر شکل دیگری نوشته شود.

+ +

در مقالات زیر می تواند مطالب بیشتری را درباره HTML بخوانید و بیاموزید.

+ +
    +
  • +

    معرفی HTML

    + +

    اگر به تازگی برنامه نویسی وب را شروع کرده این بخش می تواند به شما کمک کند که بهتر با اصول HTML آشنا شوید.

    +
    • +
  • +

    آموزش HTM

    + +

    در این قسمت مقالاتی ارائه شده است که به شما استفاده کردن از HTML و تگ های آن را یاد می دهد همچنین در کنار آن ها آموزش ها و مثال هایی نیز آمده شده است که می تواند به شناخت زمینه HTML  کمک شایانی برایتان فراهم آورد.

    +
    • +
  • منابع HTML +

    در مراجع متعدد  می توانید انبوهی از مطالب مفید درباره عناصر را بیابید که هر کدام از این مقالات نیز دارای زیرمجموعه های مفصلی هستند. در کنار آن لینک هایی قرار داشته است که شما را به مطالب مرتبط راهنمایی می کند.

    +
    • +
+ +
+
+

منابع

+ +

{{SubpagesWithSummaries}}

+ +

نمایش همه...

+
+ +
+

راهنمایی ها و آموزش‌ها

+ +
+
راهنمای توسعه‌ دهنده‌ی HTML
+
مقاله‌های MDN تکنیک‌های خاصی که در هنگام ساخت محتوی وب با HTML می‌توانید استفاده کنید، همچنین آموزش‌ها و اصولی که ممکن است برای شما مفید باشند را نمایش می‌دهند.
+
+
+
+ +

diff --git a/files/fa/web/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/fa/web/html/tips_for_authoring_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..94048c4ba7 --- /dev/null +++ b/files/fa/web/html/tips_for_authoring_fast-loading_html_pages/index.html @@ -0,0 +1,127 @@ +--- +title: نکاتی درباره‌ی ایجاد صفحات HTML سریع +slug: Web/HTML/Tips_for_authoring_fast-loading_HTML_pages +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

نکات زیر بر اساس دانش و تجربه به دست آمده‌اند.

+

یک صفحه‌ی وب بهینه نه تنها برای مخاطب‌های شما تعاملی‌تر است، بلکه روی وب‌سرور و اتصال اینترنت شما نیز تاثیرگذار است. این امر می‌تواند برای سایت‌هایی که ترافیک بالایی دارند مانند سایت‌های خبری، مساله‌ای اساسی باشد.

+

بهینه‌سازی عملکرد یک صفحه فقط برای کاربران با اینترنت کم سرعت مطرح نیست. بلکه برای آن دسته از کاربران با اینترنت پرسرعت نیز تاثیر به سزایی دارد.

+

نکته‌ها

+

کاهش دادن وزن صفحه

+

وزن صفحه، یکی از مهم‌ترین فاکتورهای بارگیری یک صفحه است.

+

کاهش وزن صفحه به این معنا است که با حذف کردن جاهای خالی و خطوط کمکی (comment) و با انتقال اسکریپت‌ها و برگه‌های سبک سلسله‌مراتبی به فایل‌های خارجی، سرعت بارگیری صفحه را تا حد امکان افزایش دهیم.

+

ابزاری مانند HTML Tidy می‌توانند به صورت خودکار جاهای خالی اضافی را از یک سند HTML حذف کنند. ابزار دیگری نیز وجود دارند که فایل‌های جاوااسکریپت را با تکنیک‌های فشرده‌سازی، فشرده کرده و با کاهش حجم آن‌ها باعث افزایش سرعت بارگیری صفحه می‌شوند.

+

کاهش تعداد فایل‌ها

+

با کاهش یافتن تعداد فایل‌های مورد نیاز یک صفحه، تعداد درخواست‌های HTTP جهت بارگیری صفحه نیز کاهش می‌یابد.

+

بسته به تنظیمات حافظه‌ی نهان مرورگر، ممکن است درخواست If-Modified-Since به وب‌سرور برای هر فایل CSS، جاوااسکریپت یا تصویر فرستاده شود که در آن مشخص می‌شود آیا فایل نسبت به آخرین باری که دانلود شده، تغییر کرده است یا خیر.

+

با کاهش تعداد فایل‌هایی که در یک صفحه به آن‌ها ارجاع داده می‌شود، تعداد درخواست‌ها به سرور و پاسخ‌هایی که از سرور ارسال می‌شود نیز کاهش می‌یابد.

+

اگر از تصاویر پس‌زمینه در فایل CSS خود به نسبت زیادی استفاده می‌کنید می‌توانید با استفاده از تکینیکی به نام image sprite این تصاویر را با هم ترکیب کنید تا تعداد درخواست‌های ارسالی به سرور کاهش یابد. تنها کافی است با تغییر موقعیت تصویر در صفحه نحوه‌ی نمایش آن را در حالت‌های مختلف تنظیم کنید. این تکنیک برای عنصرهایی که ابعاد محدودی در صفحه دارند به خوبی کار می‌کند. اگرچه تعداد درخواست‌های http کمتر و cache کردن هر تصویر نیز می‌تواند به عنوان راه حل جایگزین مطرح باشد.

+

زمان زیادی که صرف می‌شود تا آخرین تاریخ تغییر یک فایل مشخص شود، می‌تواند منجر به تاخیر در نمایش اولیه از یک صفحه شود، چرا که مرورگر قبل از اینکه صفحه را پردازش کند باید زمان تغییر یا modification هر فایل  CSS یا جاوااسکریپت را بررسی کند.

+

کاهش تعداد ارجاع‌ها به دامنه‌های مختلف

+

از آن‌جایی که هر دامنه‌ی منحصر به فرد در فرآیند DNS Lookup هزینه‌ی زمانی دارد، زمان بارگذاری صفحه با توجه به تعداد دامنه‌های مختلف در فایل‌های CSS ،جاوااسکریپت و تصویرها افزایش می‌یابد.

+

با این حال همیشه به یاد داشته باشید تا آن‌جا که ممکن است از حداقل تعداد دامنه‌های مختلف در صفحات سایت استفاده کنید.

+

محتوای کاربردی را Cache کنید

+

اطمینان یابید هر محتوایی که قابل cache شدن است، این اتفاق برایش افتاده باشد و زمان پایانی cache نیز دارا باشد.

+

در حقیقت باید به فایل سرآیند (header) با نام Last-Modified توجه خاصی داشت. کار این فایل ذخیره‌سازی آخرین زمانی است که به صفحات ثابت (html و css و ...) از طریق user agent یا همان مرورگر بر اساس زمان موجود در وب سرور، ارجاع شده است. البته این موضوع در رابطه با صفحات پویا (php و aspx و ...) اتفاق نمی‌افتد، یعنی این فایل سرآیند ارسال نمی‌شود.

+

درباره‌ی صفحاتی که به صورت پویا ایجاد می‌شوند، اندکی تحقیق در این باره می‌تواند بسیار مفید باشد. با استفاده از پیوندهای زیر اطلاعات بیشتری درباره‌ی cache کردن صفحات پویا کسب کنید:

+
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+

ترتیب بهینه‌ی اجزای تشکیل دهنده‌ی صفحه

+

ابتدا محتوای صفحه بارگذاری شود، همراه با هرفایل CSS یا JavaScript که در نمایش اولیه‌ی آن تاثیر دارد، تا کاربر بتواند در کوتاه‌ترین زمان ممکن به محتوای صفحه دسترسی داشته باشد. این محتوا معمولا از متن تشکیل می‌شود که در زمان کوتاهی می‌تواند در اختیار کاربر قرار گیرد.

+

هرگونه ویژگی پویا که پس از بارگذاری کامل صفحه مورد نیاز هستند، در مرحله‌ی اول باید غیرفعال گردد و تنها زمانی فعال شود که تمام محتوای صفحه بارگذاری شده باشد. از جمله‌ی این ویژگی‌ها می‌توان به فایل‌های JavaScript اشاره کرد که در انتهای سند قرار می‌گیرند که این امر موجب بارگذاری سریع صفحات می‌شود.

+

کاهش تعداد اسکریپت‌های برخط (inline)

+

این نوع اسکریپت‌ها می‌توانند زمان زیادی را به خود اختصاص دهند، چرا که parser باید در نظر بگیرد که یک اسکریپت برخط می‌تواند ساختار صفحه را هنگامی که خود صفحه در حال parse شدن است، تغییر دهد. کاهش تعداد این اسکریپت‌ها به صورت عمومی، و کاهش استفاده از document.write به صورت اختصاصی، می‌تواند منجر به افزایش سرعت در بارگذاری صفحات شود. همچنین استفاده از روش‌های پیشرفته در AJAX جهت تغییر در محتوای صفحه به جای استفاده از document.write توصیه می‌شود.

+

استفاده از CSS پیشرفته و عنصرهای معتبر

+

استفاده از CSS به صورت صحیح می‌تواند تعداد عنصرهای مورد نیاز در صفحه را به شکل قابل ملاحظه‌ای کاهش دهد. از جمله این تکنیک‌ها می‌توان به جایگزین کردن برخی تصاویر (که به spacer معروف هستند) با معادل CSS آن‌ها جهت قالب‌بندی صفحه اشاره کرد.

+

استفاده از عنصرهای معتبر نیز مزایای خود را دارد. اول از همه، مرورگرها دیگر نیازی ندارند تا فرآیند بررسی خطا در کد HTML را انجام دهند. ((البته این موضوع با بحث فلسفی آن که ابتدا کاربر محتوای خود را وارد می‌کند سپس به صورت منطقی فرآیند بررسی آن محتوا آغار می‌شود، متفاوت است)).

+

به علاوه، استفاده از عنصرهای معتبر این امکان را در اختیار سایر ابزار می‌گذارد تا صفحات سایت شما را بررسی (pre-process) کنند. برای نمونه، HTML Tidy می‌تواند فضای خالی در صفحات و تگ‌های پایانی اختیاری را حذف کند; اگرچه این ابزار در صفحاتی که دارای خطاهای بسیار در عنصرها باشند، اجرا نمی‌شود.

+

محتوا را طبقه‌بندی کنید

+

استفاده از جدول‌ها در قالب‌بندی صفحات یک روش منسوخ است که دیگر نباید استفاده شود. در عوض از عنصر {{ HTMLElement("div") }} و در آینده‌ی نزدیک از ساختار چند ستونی CSS3 یا ساختار منعطف جعبه‌ای CSS3 باید استفاده شود.

+

جدول‌ها هنوز هم به عنوان عنصرهای معتبر در صفحه شناخته می‌شوند اما تنها باید برای نمایش داده‌های جدولی استفاده گردند. برای این که مرورگرها صفحه‌ی شما را سریع‌تر پردازش کنند باید از جدول‌های تودرتو خودداری کنید.

+

به جای این‌که از ساختاری مانند این استفاده کنید:

+
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+

در عوض از جدول‌هایی که جداگانه هستند یا divها استفاده کنید.

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+

همچنین می‌توانید مستندات CSS3 Multi-column Layout یا CSS3 Flexible Box Layout را مشاهده کنید.

+

مشخص کردن اندازه‌ی تصویرها و جدول‌ها

+

اگر مرورگر به محض دریافت تصویر یا جدول بتواند اندازه‌ی آن را تشخیص دهد، این امر موجب نمایش هر چه بهتر محتوای صفحه در زمان بارگذاری خواهد شد. به همین منظور استفاده از height و width برای تصویرها در هر جایی که ممکن است باید استفاده گردند.

+

برای جدول‌ها نیز می‌توان از قطعه کد CSS زیر استفاده کرد:

+
  table-layout: fixed;
+
+

همچنین باید از تگ‌های COL و COLGROUP برای مشخص کردن عرض جدول‌های استفاده کرد.

+

حداقل محدودیت‌های مرورگر را در نظر بگیرید

+

برای این‌که صفحه‌ی شما در مرورگرهای مختلف با کمترین اختلاف ممکن نمایش داده شود، اطمینان یابید که حداقل استانداردهای مورد نیاز مرورگرها در پروژه‌هایتان رعایت شده باشند. این بدان معنا نیست که محتوای شما باید در تمامی مرورگرها دقیقا به یک شکل نمایش یابد، به خصوص مرورگرهای قدیمی.

+

در حقیقت، حداقل پیش‌نیازهای شما باید منطبق با مرورگرهای پیشرفته‌ای باشند که استانداردهای وب را رعایت می‌کنند که این مرورگرها شامل Firefox 3.6 به بالا برای تمامی پلتفرم‌ها، Internet Explorer 8 به بالا در ویندوز، Opera 10 به بالا در ویندوز و Safari 4 به بالا در Mac OS X هستند.

+

اگرچه، بسیاری از نکاتی که در این مقاله فهرست شده‌اند، تکنیک‌های عمومی هستند که می‌توان برای هر مرورگری و برای هر صفحه‌ی وب به کار برد، جدا از پشتیبانی مرورگرها.

+

ساختار صفحه‌ی مورد نظر ما

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+
+ فایل‌های CSS که جهت نمایش صفحه مورد نیاز هستند. تعداد این فایل‌ها را پایین نگه دارید تا عملکرد صفحه افزایش یابد. همچنین می‌توان سایر فایل‌های CSS نامربتط با این صفحه را در فایل‌های دیگر قرار داد.
+
+
+
+
+
+
+
+ · SCRIPT ...
+
+ فایل‌های JavaScript که موردنیاز توابعی هستند که در زمان بارگذاری صفحه فراخوانی می‌شوند. تعداد این فایل‌ها را جهت عملکرد بهتر صفحه، پایین نگه دارید.
+
+
+
+
+
+ · BODY
+
+ محتوای مورد نظر صفحه که در قالب جدول‌ها یا divها گردآوری شده‌اند. این محتوا می‌تواند جدا از سایر اجزای صفحه نمایش یابد.
+
+
+
+
+
+ · SCRIPT ...
+
+ هر اسکریپتی که در ساختار صفحه (DHTML) تغییر ایجاد می‌کند. این اسکریپت‌ها می‌توانند پس از بارگذاری تمام صفحه و نمایش محتوا به کاربر، اجرا شوند. بنابراین دلیلی ندارد که بارگذاری آن‌ها قبل از محتوا صورت گیرد که در این صورت نمایش محتوا به کاربر با تاخیر همراه می‌شود.
+
+ اگر تصویری جهت حرکت‌های rollover در نظر گرفته‌اید، باید در این قسمت از صفحه preload یا پیش‌بارگذاری شوند، جایی که محتوای صفحه قبل از آن نمایش داده شده است.
+
+
+
+ + +
+

Original Document Information

+
    +
  • Author(s): Bob Clary, Technology Evangelist, Netscape Communications
    • +
  • Last Updated Date: Published 04 Apr 2003
    • +
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • Note: This reprinted article was originally part of the DevEdge site.
    • +
+
+

 

diff --git "a/files/fa/web/html/\330\247\331\201\330\262\331\210\330\257\331\206_\330\261\331\206\332\257/index.html" "b/files/fa/web/html/\330\247\331\201\330\262\331\210\330\257\331\206_\330\261\331\206\332\257/index.html" new file mode 100644 index 0000000000..99f2d980cf --- /dev/null +++ "b/files/fa/web/html/\330\247\331\201\330\262\331\210\330\257\331\206_\330\261\331\206\332\257/index.html" @@ -0,0 +1,502 @@ +--- +title: اضافه کردن رنگ به عناصر با استفاده از سی اس اس +slug: Web/HTML/افزودن_رنگ +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop web sites. With CSS, there are lots of ways to add color to your HTML elements to create just the look you want. This article is a primer introducing each of the ways CSS color can be used in HTML.

+ +

Fortunately, adding color to your HTML is actually really easy to do, and you can add color to nearly anything.

+ +

We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.

+ +

Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.

+ +

Things that can have color

+ +

At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.

+ +

At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.

+ +

Text

+ +

Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

+ +
+
{{cssxref("color")}}
+
The color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth.
+
{{cssxref("background-color")}}
+
The text's background color.
+
{{cssxref("text-shadow")}}
+
Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.
+
{{cssxref("text-decoration-color")}}
+
By default, text decorations (such as underlines, strikethroughs, etc) use the color property as their colors. However, you can override that behavior and use a different color for them with the text-decoration-color property.
+
{{cssxref("text-emphasis-color")}}
+
The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.
+
{{cssxref("caret-color")}}
+
The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.
+
+ +

Boxes

+ +

Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

+ +
+
{{anch("Borders")}}
+
See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.
+
{{cssxref("background-color")}}
+
The background color to use in areas of the element that have no foreground content.
+
{{cssxref("column-rule-color")}}
+
The color to use when drawing the line separating columns of text.
+
{{cssxref("outline-color")}}
+
The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.
+
+ +

Borders

+ +

Any element can have a border drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

+ +

You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

+ +
+
{{cssxref("border-color")}}
+
Specifies a single color to use for every side of the element's border.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
+
Lets you set the color of the corresponding side of the element's border.
+
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
+
With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).
+
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
+
These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border.
+
+ +

Other ways to use color

+ +

CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.

+ +
+
The HTML Canvas API
+
Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our Canvas tutorial to learn more.
+
SVG (Scalable Vector Graphics)
+
Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.
+
WebGL
+
The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See Learn WebGL for 2D and 3D graphics to find out more.
+
+ +

How to describe a color

+ +

In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

+ +

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

+ +

Keywords

+ +

A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

+ +

See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

+ +

RGB values

+ +

There are three ways to represent an RGB color in CSS.

+ +

Hexadecimal string notation

+ +

Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#D" becomes "#DD" when drawing.

+ +

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

+ +
+
"#rrggbb"
+
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rrggbbaa"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
"#rgb"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rgba"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
+ +

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

+ +

RGB functional notation

+ +

RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

+ +

Legal values for each of these parameters are:

+ +
+
red, green, and blue
+
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
+
alpha
+
The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
+
+ +

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

+ +

HSL functional notation

+ +

Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The hsl() CSS function is very similar to the rgb() function in usage otherwise.

+ +
+
HSL color cylinder +
Figure 1. An HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
+
+
+ +

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

+ +

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

+ +

Think of it like creating the perfect paint color:

+ +
    +
  1. You start with base paint that's the maximum intensity possible for a given color, such as  the most intense blue that can be represented by the user's screen. This is the hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. +
  2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.
    3. +
  3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.
    4. +
+ +

You can also optionally include an alpha channel, to make the color less than 100% opaque.

+ +

Here are some sample colors in HSL notation:

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

Note that when you omit the hue's unit, it's assumed to be in degrees (deg).

+
+ +

Using color

+ +

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.

+ +

Specifying colors in stylesheets

+ +

The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

+ +

Let's take a look at an example, starting by looking at the results we're trying to achieve:

+ +
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+ +

HTML

+ +

The HTML responsible for creating the above example is shown here:

+ +
<div class="wrapper">
+  <div class="box boxLeft">
+    <p>
+      This is the first box.
+    </p>
+  </div>
+  <div class="box boxRight">
+    <p>
+      This is the second box.
+    </p>
+  </div>
+</div>
+ +

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

+ +

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

+ +

CSS

+ +

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

+ +
.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

The .wrapper class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.

+ +

Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise.

+ +

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

+ +
.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.

+ +
.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

+ +
    +
  • The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to rgb(245, 130, 130).
    • +
  • An outline is defined for the box. Unlike the more commonly used border, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as border does. This outline is a solid, dark red line that's two pixels thick. Note the use of the darkred keyword when specifying the color.
    • +
  • Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.
    • +
+ +
.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Finally, the .boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

+ +
    +
  • The background-color is set using the HSL value specified using hsl(270deg, 50%, 75%). This is a medium purple color.
    • +
  • The box's outline is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (rgb(110, 20, 120)).
    • +
  • The foreground (text) color is specified by setting the {{cssxref("color")}} property to hsl(0deg, 100%, 100%). This is one of many ways to specify the color white.
    • +
  • We add a green wavy line under the text with {{cssxref("text-decoration")}}.
    • +
  • Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its color parameter is set to black.
    • +
+ +

Letting the user pick a color

+ +

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

+ +

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

+ +

Example: Picking a color

+ +

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

+ +

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+ +
+

On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

+
+ +

HTML

+ +

The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.

+ +
<div id="box">
+  <label for="colorPicker">Border color:</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <input type="color"> element.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);
+ +

The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

+ +

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

+ +

Using color wisely

+ +

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

+ +

Finding the right colors

+ +

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

+ +

Base color

+ +

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

+ +
    +
  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
    • +
  • A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.
    • +
  • Browse web sites that let you look at lots of existing color palettes and images to find inspiration.
    • +
+ +

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

+ +
+

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

+
+ +

Fleshing out the palette

+ +

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.

+ +

A few examples (all free to use as of the time this list was last revised):

+ + + +

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

+ +
+

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

+
+ +

Color theory resources

+ +

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

+ +
+
Color Science (Khan Academy in association with Pixar)
+
An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
+
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
+
Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.
+
+ +

Color and accessibility

+ +

There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

+ +

You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

+ +
+

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

+
+ +

For more information about color blindness, see the following articles:

+ + + +

Palette design example

+ +

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

+ +

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

+ +

Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

+ +

Right after loading Paletton.

+ +

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

+ +

After entering base color

+ +

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

+ +

Now with complementary colors included.

+ +

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

+ +

Triad color scheme selected

+ +

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

+ +

Triad color scheme selected

+ +

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

+ +

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

+ +

Color, backgrounds, contrast, and printing

+ +

What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.

+ +

If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.

+ +

The default value of color-adjust, economy, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.

+ +

You can set color-adjust to exact to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.

+ +
+

Note: There is no guarantee, though, that color-adjust: exact will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of color-adjust.

+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf