From e87401f97c68764ae7070f305199af2f529c1def Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 24 Oct 2021 17:07:46 +0300 Subject: [RU] Another live samples fixes (#2852) --- .../how_to_structure_a_web_form/example/index.md | 181 +++++++++++++++++++++ .../learn/forms/your_first_form/example/index.md | 114 +++++++++++++ files/ru/learn/forms/your_first_form/index.html | 2 +- 3 files changed, 296 insertions(+), 1 deletion(-) create mode 100644 files/ru/learn/forms/how_to_structure_a_web_form/example/index.md create mode 100644 files/ru/learn/forms/your_first_form/example/index.md (limited to 'files/ru/learn/forms') diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md b/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md new file mode 100644 index 0000000000..3e424e63be --- /dev/null +++ b/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md @@ -0,0 +1,181 @@ +--- +title: Example +slug: Learn/Forms/How_to_structure_a_web_form/Example +tags: + - Beginner + - CSS + - Example + - Guide + - HTML + - Intro + - Reference +--- +This the example for a basic payment form for the article [How to structure an HTML form](/en-US/docs/Learn/Forms/How_to_structure_a_web_form). + +## A payment form + +### HTML Content + +```html +
+

Payment form

+

Required fields are followed by *.

+
+

Contact information

+
+ Title +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+

+ + +

+

+ + +

+

+ + +

+
+
+

Payment information

+

+ + +

+

+ + +

+

+ + +

+
+
+

+
+
+``` + +### CSS Content + +```css +h1 { + margin-top: 0; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +form { + margin: 0 auto; + width: 400px; + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +div+div { + margin-top: 1em; +} + +label span { + display: inline-block; + width: 120px; + text-align: right; +} + +input, textarea { + font: 1em sans-serif; + width: 250px; + box-sizing: border-box; + border: 1px solid #999; +} + +input[type=checkbox], input[type=radio] { + width: auto; + border: none; +} + +input:focus, textarea:focus { + border-color: #000; +} + +textarea { + vertical-align: top; + height: 5em; + resize: vertical; +} + +fieldset { + width: 250px; + box-sizing: border-box; + margin-left: 136px; + border: 1px solid #999; +} + +button { + margin: 20px 0 0 124px; +} + +label { + position: relative; +} + +label em { + position: absolute; + right: 5px; + top: 20px; +} +``` + +### Result + +{{ EmbedLiveSample('A_payment_form', '100%', 620) }} diff --git a/files/ru/learn/forms/your_first_form/example/index.md b/files/ru/learn/forms/your_first_form/example/index.md new file mode 100644 index 0000000000..8066fc72d3 --- /dev/null +++ b/files/ru/learn/forms/your_first_form/example/index.md @@ -0,0 +1,114 @@ +--- +title: Example +slug: Learn/Forms/Your_first_form/Example +tags: + - Beginner + - CodingScripting + - Example + - Forms + - Guide + - HTML + - Learn + - Web +--- +This is the example code for the article [Your first HTML form](/en-US/docs/Learn/Forms/Your_first_form). + +## A simple form + +### HTML Content + +```html +
+ 
+    +    + 
+ + 
+    +    + 
+ + 
+    +    + 
+ + 
+    + 
+
+``` + +### CSS Content + +```css +form { +  /* Just to center the form on the page */ +  margin: 0 auto; +  width: 400px; + +  /* To see the limits of the form */ +  padding: 1em; +  border: 1px solid #CCC; +  border-radius: 1em; +} + +div + div { +  margin-top: 1em; +} + +label { +  /* To make sure that all label have the same size and are properly align */ +  display: inline-block; +  width: 90px; +  text-align: right; +} + +input, textarea { +  /* To make sure that all text field have the same font settings +     By default, textarea are set with a monospace font */ +  font: 1em sans-serif; + +  /* To give the same size to all text field */ +  width: 300px; + +  -moz-box-sizing: border-box; +  box-sizing: border-box; + +  /* To harmonize the look & feel of text field border */ +  border: 1px solid #999; +} + +input:focus, textarea:focus { +  /* To give a little highligh on active elements */ +  border-color: #000; +} + +textarea { +  /* To properly align multiline text field with their label */ +  vertical-align: top; + +  /* To give enough room to type some text */ +  height: 5em; + +  /* To allow users to resize any textarea vertically +     It works only on Chrome, Firefox and Safari */ +  resize: vertical; +} + +.button { +  /* To position the buttons to the same position of the text fields */ +  padding-left: 90px; /* same size as the label elements */ +} + +button { +  /* This extra margin represent the same space as the space between +     the labels and their text fields */ +  margin-left: .5em; +} +``` + +### Result + +{{ EmbedLiveSample('A_simple_form', '100%', '280') }} diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html index 96cf530884..1aaa49894e 100644 --- a/files/ru/learn/forms/your_first_form/index.html +++ b/files/ru/learn/forms/your_first_form/index.html @@ -276,7 +276,7 @@ button {

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: 

-

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}

+

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

-- cgit v1.2.3-54-g00ecf