theenglishway-utils
/
css-sandbox


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!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">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<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">
      <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">
        <p class="field__error-help-msg"></p>
      </div>
    </div>
    <div class="form__field">
      <div class="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">
      <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>
    <div class="form__field">
      <div class="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>
    <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>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>