From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../forms/basic_native_form_controls/index.html | 68 +++++++++++----------- 1 file changed, 34 insertions(+), 34 deletions(-) (limited to 'files/ru/learn/forms/basic_native_form_controls') diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html index 434004757c..539a45fdbb 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

Пример базового одностраничного текстового поля:

-
<input type="text" id="comment" name="comment" value="I'm a text field">
+
<input type="text" id="comment" name="comment" value="I'm a text field">

Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.

@@ -113,7 +113,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

Этот тип поля устанавливается со значением email для атрибута {{htmlattrxref("type","input")}}:

-
<input type="email" id="email" name="email" multiple>
+
<input type="email" id="email" name="email" multiple>

Когда используется этот type, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:

@@ -131,7 +131,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

This type of field is set using the value password for the {{htmlattrxref("type","input")}} attribute:

-
<input type="password" id="pwd" name="pwd">
+
<input type="password" id="pwd" name="pwd">

It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.

@@ -143,7 +143,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

This type of field is set by using the value search for the {{htmlattrxref("type","input")}} attribute:

-
<input type="search" id="search" name="search">
+
<input type="search" id="search" name="search">

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

@@ -153,7 +153,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

This type of field is set using tel as the value of the {{htmlattrxref("type","input")}} attribute:

-
<input type="tel" id="tel" name="tel">
+
<input type="tel" id="tel" name="tel">

Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.

@@ -161,7 +161,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

This type of field is set using the value url for the {{htmlattrxref("type","input")}} attribute:

-
<input type="url" id="url" name="url">
+
<input type="url" id="url" name="url">

It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.

@@ -175,7 +175,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.

-
<textarea cols="30" rows="10"></textarea>
+
<textarea cols="30" rows="10"></textarea>

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

@@ -236,7 +236,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.

-
<select id="simple" name="simple">
+
<select id="simple" name="simple">
   <option>Banana</option>
   <option>Cherry</option>
   <option>Lemon</option>
@@ -244,7 +244,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:

 
-
<select id="groups" name="groups">
+
<select id="groups" name="groups">
   <optgroup label="fruits">
     <option>Banana</option>
     <option selected>Cherry</option>
@@ -269,7 +269,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.

 
-
<select multiple id="multi" name="multi">
+
<select multiple id="multi" name="multi">
   <option>Banana</option>
   <option>Cherry</option>
   <option>Lemon</option>
@@ -287,7 +287,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.

 
-
<label for="myFruit">What's your favorite fruit?</label>
+
<label for="myFruit">What's your favorite fruit?</label>
 <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
 <datalist id="mySuggestion">
   <option>Apple</option>
@@ -312,7 +312,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
To handle this, here is a little trick to provide a nice fallback for those browsers:

 
-
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
+
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
 <input type="text" id="myFruit" name="fruit" list="fruitList">
 
 <datalist id="fruitList">
@@ -363,7 +363,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value checkbox.

 
-
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
 

 
 
Including the checked attribute makes the checkbox checked automatically when the page loads.

@@ -374,11 +374,11 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value radio.

 
-
<input type="radio" checked id="soup" name="meal">

+
<input type="radio" checked id="soup" name="meal">

 
 
Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.

 
-
<fieldset>
+
<fieldset>
   <legend>What is your favorite meal?</legend>
   <ul>
     <li>
@@ -419,7 +419,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
submit

 
-
<button type="submit">
+
<button type="submit">
     This a <br><strong>submit button</strong>
 </button>
 
@@ -427,7 +427,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
reset

 
-
<button type="reset">
+
<button type="reset">
     This a <br><strong>reset button</strong>
 </button>
 
@@ -435,7 +435,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
anonymous

 
-
<button type="button">
+
<button type="button">
     This an <br><strong>anonymous button</strong>
 </button>
 
@@ -473,7 +473,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
Example

 
-
<input type="number" name="age" id="age" min="1" max="10" step="2">

+
<input type="number" name="age" id="age" min="1" max="10" step="2">

 
 
This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.

 
@@ -487,19 +487,19 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 
 
Example

 
-
<input type="range" name="beans" id="beans" min="0" max="500" step="10">

+
<input type="range" name="beans" id="beans" min="0" max="500" step="10">

 
 
This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.

 
 
One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.

 
-
<label for="beans">How many beans can you eat?</label>
+
<label for="beans">How many beans can you eat?</label>
 <input type="range" name="beans" id="beans" min="0" max="500" step="10">
 <span class="beancount"></span>

 
 
This can be implemented using some simple JavaScript:

 
-
var beans = document.querySelector('#beans');
+
var beans = document.querySelector('#beans');
 var count = document.querySelector('.beancount');
 
 count.textContent = beans.value;
@@ -522,29 +522,29 @@ beans.oninput = function() {
 
 
This creates a widget to display and pick a date with time, but without any specific time zone information.

 
-
<input type="datetime-local" name="datetime" id="datetime">

+
<input type="datetime-local" name="datetime" id="datetime">

 
 
month

 
 
This creates a widget to display and pick a month with a year.

 
-
<input type="month" name="month" id="month">

+
<input type="month" name="month" id="month">

 
 
time

 
 
This creates a widget to display and pick a time value.

 
-
<input type="time" name="time" id="time">

+
<input type="time" name="time" id="time">

 
 
week

 
 
This creates a widget to display and pick a week number and its year.

 
-
<input type="week" name="week" id="week">

+
<input type="week" name="week" id="week">

 
 
All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.

 
-
<label for="myDate">When are you available this summer?</label>
+
<label for="myDate">When are you available this summer?</label>
 <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

 
 
Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.

@@ -555,7 +555,7 @@ beans.oninput = function() {
 
 
A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color.

 
-
<input type="color" name="color" id="color">

+
<input type="color" name="color" id="color">

 
 
Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.

 
@@ -577,7 +577,7 @@ beans.oninput = function() {
 
 
In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.

 
-
<input type="file" name="file" id="file" accept="image/*" multiple>

+
<input type="file" name="file" id="file" accept="image/*" multiple>

 
 
Hidden content

 
@@ -585,7 +585,7 @@ beans.oninput = function() {
 
 
If you create such an element, it's required to set its name and value attributes:

 
-
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

+
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

 
 
Image button

 
@@ -593,7 +593,7 @@ beans.oninput = function() {
 
 
An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value image. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.

 
-
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

+
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

 
 
If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:

 
@@ -604,7 +604,7 @@ beans.oninput = function() {
 
 
So for example when you click on the image of this widget, you are sent to a URL like the following:

 
-
http://foo.com?pos.x=123&pos.y=456

+
http://foo.com?pos.x=123&pos.y=456

 
 
This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

 
@@ -616,7 +616,7 @@ beans.oninput = function() {
 
 
A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.

 
-
<progress max="100" value="75">75/100</progress>

+
<progress max="100" value="75">75/100</progress>

 
 
This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

 
@@ -653,7 +653,7 @@ beans.oninput = function() {
 
 
Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

 
-
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

+
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

 
 
The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

 
-- 
cgit v1.2.3-54-g00ecf