initial commit

1 files changed, 113 insertions, 0 deletions

diff --git a/files/ja/learn/forms/your_first_form/example/index.html b/files/ja/learn/forms/your_first_form/example/index.html
new file mode 100644
index 0000000000..bddf242144
--- /dev/null
+++ b/files/ja/learn/forms/your_first_form/example/index.html
@@ -0,0 +1,113 @@
+---
+title: 例
+slug: Learn/Forms/Your_first_form/Example
+tags:
+  - CodingScripting
+  - HTML
+  - Web
+  - ガイド
+  - フォーム
+  - 例
+  - 初心者
+  - 学習
+translation_of: Learn/Forms/Your_first_form/Example
+---
+<p>これは<a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>の記事のサンプルコードです。</p>
+
+<h2 id="A_simple_form" name="A_simple_form">簡単なフォーム</h2>
+
+<h3 id="HTML_コンテンツ">HTML コンテンツ</h3>
+
+<pre class="brush: html notranslate">&lt;form action="<span class="pl-s">/my-handling-form-page</span>" method="post"&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Name:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email"&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="msg"&gt;Message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;div class="button"&gt;
+    &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS_コンテンツ">CSS コンテンツ</h3>
+
+<pre class="brush: css notranslate">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 &amp; 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 magin represent the same space as the space between
+     the labels and their text fields */
+  margin-left: .5em;
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{ EmbedLiveSample('A_simple_form', '100%', '280') }}</p>
+
+<p> </p>