theenglishway-utils
/
css-sandbox


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Include Choices CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
  <!-- Include Choices JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body class="body-- nodebug">
  <h1>Full-page form (flexbox fields)</h1>
  <form class="form form--full-page" action="#" method="post">
    <h1 class="form__title">Form title</h1>
    <div class="form__field field" id="input-text">
      <label class="field__label" for="text">Text</label>
      <input class="field__input input" type="text" name="text" label="Text">
      <p class="field__error-help-msg"></p>
    </div>
    <div class="form__field field" id="input-radio">
      <label class="field__label" for="radio">Radio</label>
      <div class="field__input radio radio--grid">
        <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
        <label class="radio__label" for="option-1">Option 1</label>
        <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
        <label class="radio__label" for="option-2">Option 2</label>
        <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
        <label class="radio__label" for="option-3">Option 3</label>
      </div>
      <p class="field__error-help-msg"></p>
      </div>
    </div>
    <div class="form__field 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 class="form__field field" id="input-textarea">
      <label class="field__label" for="textarea">Textarea</label>
      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
      <p class="field__error-help-msg"></p>
    </div>
    <div class="form__field field" id="input-multiple">
      <label class="field__label" for="multiple">Select multiple</label>
      <select class="select field__input" id="multiple" name="multiple" multiple="">
        <option class="select__option" value="option1">Option 1</option>
        <option class="select__option" value="option2">Option 2</option>
        <option class="select__option" value="option3">Option 3</option>
      </select>
      <p class="field__error-help-msg"></p>
    </div>
    <div class="form__field field">
      <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
    </div>
    <button class="form__submit button button-success" type="submit">Go</button>
  </form>

  <h1>Full-page form (grid fields)</h1>
  <form class="form form--full-page" action="#" method="post">
    <h1 class="form__title">Form title</h1>
    <div class="form__field field field--grid" id="input-text">
      <label class="field__label" for="text">Text</label>
      <input class="field__input input" type="text" name="text" label="Text">
    </div>
    <div class="form__field field field--grid" id="input-radio">
      <label class="field__label" for="radio">Radio</label>
      <div class="field__input radio radio--grid">
        <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
        <label class="radio__label" for="option-1">Option 1</label>
        <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
        <label class="radio__label" for="option-2">Option 2</label>
        <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
        <label class="radio__label" for="option-3">Option 3</label>
      </div>
    </div>
    <div class="form__field field field--grid" 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>
    </div>
    <div class="form__field field field--grid" id="input-textarea">
      <label class="field__label" for="textarea">Textarea</label>
      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
    </div>
    <div class="form__field field field--grid" id="input-multiple">
      <label class="field__label" for="multiple">Select multiple</label>
      <select class="select field__input" id="multiple" name="multiple" multiple="">
        <option class="select__option" value="option1">Option 1</option>
        <option class="select__option" value="option2">Option 2</option>
        <option class="select__option" value="option3">Option 3</option>
      </select>
    </div>
    <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
    <button class="form__submit button button-success" type="submit">Go</button>
  </form>

  <h1>Full-page form, with errors (grid fields)</h1>
  <form class="form form--full-page" action="#" method="post">
    <h1 class="form__title">Form title</h1>
    <p class="form__error">Please fix the errors</p>
    <div class="form__field field field--grid field--error" id="input-text">
      <label class="field__label" for="text">Text</label>
      <input class="field__input input" type="text" name="text" label="Text">
      <p class="field__error">This field is bad, and you should feel bad</p>
    </div>
    <div class="form__field field field--grid field--error" id="input-radio">
      <label class="field__label" for="radio">Radio</label>
      <div class="field__input radio radio--grid field--error">
        <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
        <label class="radio__label" for="option-1">Option 1</label>
        <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
        <label class="radio__label" for="option-2">Option 2</label>
        <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
        <label class="radio__label" for="option-3">Option 3</label>
      </div>
      <p class="field__error">This field is bad, and you should feel bad</p>
    </div>
    <div class="form__field field field--grid field--error" 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">This field is bad, and you should feel bad</p>
    </div>
    <div class="form__field field field--grid field--error" id="input-textarea">
      <label class="field__label" for="textarea">Textarea</label>
      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
      <p class="field__error">This field is bad, and you should feel bad</p>
    </div>
    <div class="form__field field field--grid" id="input-multiple">
      <label class="field__label" for="multiple">Select multiple</label>
      <select class="select field__input" id="multiple" name="multiple" multiple="">
        <option class="select__option" value="option1">Option 1</option>
        <option class="select__option" value="option2">Option 2</option>
        <option class="select__option" value="option3">Option 3</option>
      </select>
      <p class="field__error">This field is bad, and you should feel bad</p>
    </div>
    <div class="form__field">
      <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
    </div>
    <button class="form__submit button button-success" type="submit">Go</button>
  </form>

  <h1>Horizontal, one-line 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>

  <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 multiple</label>
        <select class="field__input select" id="select" name="select" multiple>
          <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>

  <div style="display: flex; align-items: flex-end;">
    <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>
  </div>

  <h1>Inline forms</h1>
  <form class="form form--inline" action="#" method="post">
    <h1 class="form__title">the tag</h1>
    <button class="form__submit button button--inline button--danger" type="submit">&times;</button>
  </form>
</body>

<script>
  const choices = new Choices('select', { classNames: { containerOuter: 'choices field__input' } })
</script>

</html>