addig new form examples

SurnameX · Sep 27, 2017 · a9a983f · a9a983f
1 parent 73ec3ad
commit a9a983f
Show file tree

Hide file tree

Showing 18 changed files with 1,932 additions and 0 deletions.
diff --git a/html/forms/form-validation/fruit-length.html b/html/forms/form-validation/fruit-length.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Favorite fruit length constraint</title>
+    <style>
+      input:invalid {
+        border: 2px dashed red;
+      }
+
+      input:valid {
+        border: 2px solid black;
+      }
+
+      div {
+        margin-bottom: 10px;
+      }
+    </style>
+</head>
+
+<body>
+    <form>
+      <div>
+        <label for="choose">Would you prefer a banana or a cherry?</label>
+        <input id="choose" name="i_like" required minlength="6" maxlength="6">
+      </div>
+      <div>
+        <label for="number">How many would you like?</label>
+        <input type="number" id="number" name="amount" value="1" min="1" max="10">
+      </div>
+      <div>
+        <button>Submit</button>
+      </div>
+    </form>
+</body>
+
+</html>
diff --git a/html/forms/postcard-example/background.jpg b/html/forms/postcard-example/background.jpg
diff --git a/html/forms/postcard-example/fonts/journal-webfont.woff b/html/forms/postcard-example/fonts/journal-webfont.woff
diff --git a/html/forms/postcard-example/fonts/journal-webfont.woff2 b/html/forms/postcard-example/fonts/journal-webfont.woff2
diff --git a/html/forms/postcard-example/fonts/veteran_typewriter-webfont.woff b/html/forms/postcard-example/fonts/veteran_typewriter-webfont.woff
diff --git a/html/forms/postcard-example/fonts/veteran_typewriter-webfont.woff2 b/html/forms/postcard-example/fonts/veteran_typewriter-webfont.woff2
diff --git a/html/forms/postcard-example/index.html b/html/forms/postcard-example/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Postcard example</title>
+    <style>
+
+    @font-face {
+        font-family: 'handwriting';
+        src: url('fonts/journal-webfont.woff2') format('woff2'),
+             url('fonts/journal-webfont.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'typewriter';
+        src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+             url('fonts/veteran_typewriter-webfont.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    body {
+      font  : 21px sans-serif;
+
+      padding : 2em;
+      margin  : 0;
+
+      background : #222;
+    }
+
+    form {
+      position: relative;
+
+      width  : 740px;
+      height : 498px;
+      margin : 0 auto;
+
+      background: #FFF url(background.jpg);
+    }
+
+    h1 {
+      position : absolute;
+      left : 415px;
+      top  : 185px;
+
+      font : 1em "typewriter", sans-serif;
+    }
+
+    #from {
+      position: absolute;
+      left : 398px;
+      top  : 235px;
+    }
+
+    #reply {
+      position: absolute;
+      left : 390px;
+      top  : 285px;
+    }
+
+    #message {
+      position: absolute;
+      left : 20px;
+      top  : 70px;
+    }
+
+    label {
+      font : .8em "typewriter", sans-serif;
+    }
+
+    input, textarea {
+      font    : .9em/1.5em "handwriting", sans-serif;
+
+      border  : none;
+      padding : 0 10px;
+      margin  : 0;
+      width   : 240px;
+
+      background: none;
+    }
+
+    input:focus, textarea:focus {
+      background   : rgba(0,0,0,.1);
+      border-radius: 5px;
+      outline      : none;
+    }
+
+    input {
+        height: 2.5em; /* for IE */
+        vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+    }
+
+    textarea {
+      display : block;
+
+      padding : 10px;
+      margin  : 10px 0 0 -10px;
+      width   : 340px;
+      height  : 360px;
+
+      resize  : none;
+      overflow: auto;
+    }
+
+    button {
+      position     : absolute;
+      left         : 440px;
+      top          : 360px;
+
+      padding      : 5px;
+
+      font         : bold .6em sans-serif;
+      border       : 2px solid #333;
+      border-radius: 5px;
+      background   : none;
+
+      cursor       : pointer;
+
+    -webkit-transform: rotate(-1.5deg);
+       -moz-transform: rotate(-1.5deg);
+        -ms-transform: rotate(-1.5deg);
+         -o-transform: rotate(-1.5deg);
+            transform: rotate(-1.5deg);
+    }
+
+    button:after {
+      content: " >>>";
+    }
+
+    button:hover,
+    button:focus {
+      outline   : none;
+      background: #000;
+      color   : #FFF;
+    }
+
+    </style>
+</head>
+
+<body>
+
+  <form>
+    <h1>to: Mozilla</h1>
+
+    <div id="from">
+      <label for="name">from:</label>
+      <input type="text" id="name" name="user_name">
+    </div>
+
+    <div id="reply">
+      <label for="mail">reply:</label>
+      <input type="email" id="mail" name="user_email">
+    </div>
+
+    <div id="message">
+      <label for="msg">Your message:</label>
+      <textarea id="msg" name="user_message"></textarea>
+    </div>
+
+    <div class="button">
+      <button type="submit">Send your message</button>
+    </div>
+  </form>
+
+</body>
+
+</html>
diff --git a/html/forms/postcard-example/journal.ttf b/html/forms/postcard-example/journal.ttf
diff --git a/html/forms/postcard-example/postcard-start.html b/html/forms/postcard-example/postcard-start.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Postcard example</title>
+    <style>
+
+    </style>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/html/forms/postcard-example/veteran_typewriter.ttf b/html/forms/postcard-example/veteran_typewriter.ttf
diff --git a/html/forms/postcard-example/webfontkit-20170927-060236.zip b/html/forms/postcard-example/webfontkit-20170927-060236.zip
diff --git a/html/forms/postcard-example/webfontkit-20170927-060236/generator_config.txt b/html/forms/postcard-example/webfontkit-20170927-060236/generator_config.txt
@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}