Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
theenglishway-utils
/
css-sandbox
Xem 2
Star 0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

Horizontal form

theenglishway (time) 6 năm trước cách đây
mục cha
789f2149da
commit
4c394158c5
7 tập tin đã thay đổi với 116 bổ sung và 68 xóa
Split View Hiển thị tình trạng sai khác
  1. 16 0
      form/field.css
  2. 23 0
      form/form.css
  3. 28 1
      form/form.html
  4. 4 0
      form/notes.md
  5. 30 0
      form/radio.css
  6. 8 0
      form/select.css
  7. 7 67
      form/style.css

+ 16 - 0
form/field.css
Xem Tập Tin 

@@ -0,0 +1,16 @@
 
+.field {
 
+  display: flex;
 
+  align-items: center;
 
+  background-color: var(--color-field);
 
+  margin: 0.2em 0px;
 
+}
 
+
 
+.field__label {
 
+  flex: 1;
 
+  background-color: var(--color-label);
 
+}
 
+
 
+.field__input {
 
+  flex: 2;
 
+  background-color: var(--color-input);
 
+}

+ 23 - 0
form/form.css
Xem Tập Tin 

@@ -0,0 +1,23 @@
 
+.form {
 
+  display: flex;
 
+  flex-direction: column;
 
+  background-color: var(--color-form);
 
+}
 
+
 
+.form__submit {
 
+  align-self: flex-end;
 
+}
 
+
 
+.form--horizontal {
 
+  flex-direction: row;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.form--horizontal .form__field {
 
+  flex-grow: 1;
 
+}
 
+
 
+.form--inline .form__submit {
 
+  flex: none;
 
+  align-self: center;
 
+}

+ 28 - 1
form/form.html
Xem Tập Tin 

@@ -10,7 +10,8 @@
 
   <title>Document</title>
 
 </head>
 
 
-<body class="body--">
 
+<body class="body-- debug">
 
+  <h1>Full-page form</h1>
 
   <form class="form form--full-page" action="#" method="post">
 
     <h1 class="form__title">Ajouter un nouveau lien</h1>
 
     <div class="form__field">
 
@@ -57,6 +58,32 @@
 
     </div>
 
     <button class="form__submit button button-success" type="submit">Go</button>
 
   </form>
 
+
 
+  <h1>Inline forms</h1>
 
+  <form class="form form--horizontal" action="#" method="post">
 
+    <div class="form__field">
 
+      <div class="field" id="input-text">
 
+        <label class="field__label" for="text">Text</label>
 
+        <input class="field__input input" type="text" name="text" label="Text">
 
+      </div>
 
+    </div>
 
+    <button class="form__submit button button-success" type="submit">Go</button>
 
+  </form>
 
+
 
+  <form class="form form--horizontal" action="#" method="post">
 
+    <div class="form__field">
 
+      <div class="field" id="input-select">
 
+        <label class="field__label" for="select">Select</label>
 
+        <select class="field__input select" id="select" name="select">
 
+          <option class="select__option" value="option-1">Option 1</option>
 
+          <option class="select__option" value="option-2">Option 2</option>
 
+          <option class="select__option" value="option-3">Option 3</option>
 
+        </select>
 
+        <p class="field__error-help-msg"></p>
 
+      </div>
 
+    </div>
 
+    <button class="form__submit button button-success" type="submit">Go</button>
 
+  </form>
 
 </body>
 
 
 </html>

+ 4 - 0
form/notes.md
Xem Tập Tin 

@@ -9,3 +9,7 @@
 
 which looks bad with radio / textarea inputs. The solution could be to either
 
 add modifiers to `field__label` class or use sibling selectors
 
 [see here](https://www.sitepoint.com/make-forms-fun-with-flexbox/).
 
+
 
+* With an inline form, `form__submit` class requires `align-self` set to
 
+`center` for vertical alignment, and any combination of `align-items` /
 
+`justify-items` on the parent does nothing.

+ 30 - 0
form/radio.css
Xem Tập Tin 

@@ -0,0 +1,30 @@
 
+.radio {
 
+
 
+}
 
+
 
+/* With this setting all the options are lined horizontally */
 
+.radio--inline {
 
+  display: flex;
 
+}
 
+
 
+.radio--inline .radio__option {
 
+  flex: none;
 
+}
 
+
 
+.radio--inline .radio__label {
 
+  flex: 1;
 
+}
 
+
 
+.radio--grid {
 
+  display: grid;
 
+  grid-template-columns: auto auto;
 
+  justify-content: start;
 
+}
 
+
 
+.radio--grid .radio__option {
 
+  grid-column: 1;
 
+}
 
+
 
+.radio--grid .radio__label {
 
+  grid-column: 2;
 
+}

+ 8 - 0
form/select.css
Xem Tập Tin 

@@ -0,0 +1,8 @@
 
+
 
+.select {
 
+
 
+}
 
+
 
+.select__option {
 
+
 
+}

+ 7 - 67
form/style.css
Xem Tập Tin 

@@ -1,3 +1,7 @@
 
+@import 'form.css';
 
+@import 'field.css';
 
+@import 'select.css';
 
+@import 'radio.css';
 
 
 :root {
 
   --color-form: rgb(203, 222, 228);
 
@@ -6,80 +10,16 @@
 
   --color-input: rgba(0, 4, 255, 0.123);
 
 }
 
 
-/* Remove the code below to restore colors */
 
-:root { --color-form: transparent; --color-field: transparent; --color-label: transparent; --color-input: transparent; }
 
+/* Add nodebug class to any parent field (e.g. body) to turn off coloring */
 
+.nodebug { --color-form: transparent; --color-field: transparent; --color-label: transparent; --color-input: transparent; }
 
 
 body {
 
   display: flex;
 
   flex-direction: column;
 
+  align-items: flex-start;
 
 }
 
 
 .body--centered {
 
   align-items: center;
 
 }
 
 
-.form {
 
-  display: flex;
 
-  flex-direction: column;
 
-  background-color: var(--color-form);
 
-}
 
-
 
-.form__submit {
 
-  align-self: flex-end;
 
-}
 
-
 
-.field {
 
-  display: flex;
 
-  align-items: center;
 
-  background-color: var(--color-field);
 
-  margin: 0.2em 0px;
 
-}
 
-
 
-.field__label {
 
-  flex: 1;
 
-  background-color: var(--color-label);
 
-}
 
-
 
-.field__input {
 
-  flex: 2;
 
-  background-color: var(--color-input);
 
-}
 
-
 
-.select {
 
-
 
-}
 
-
 
-.select__option {
 
-
 
-}
 
-
 
-.radio {
 
-
 
-}
 
-
 
-/* With this setting all the options are lined horizontally */
 
-.radio--inline {
 
-  display: flex;
 
-}
 
-
 
-.radio--inline .radio__option {
 
-  flex: none;
 
-}
 
-
 
-.radio--inline .radio__label {
 
-  flex: 1;
 
-}
 
-
 
-.radio--grid {
 
-  display: grid;
 
-  grid-template-columns: auto auto;
 
-  justify-content: start;
 
-}
 
-
 
-.radio--grid .radio__option {
 
-  grid-column: 1;
 
-}
 
-
 
-.radio--grid .radio__label {
 
-  grid-column: 2;
 
-}