最小限のCSSフレームワーク pico css -フォーム-


前回の続きです。

blog1.mammb.com

入力フォーム

<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"/>
    <title>pico css</title>
  </head>
  <body>
    <main class="container">
      <form>
        <label for="email">Email</label>
        <input
          type="email"
          id="email"
          placeholder="Email"
          autocomplete="email"
        />
        <input
          type="submit"
          value="Subscribe"
        />
      </form>
    </main>
  </body>
</html>


グリッド

<form>
  <fieldset class="grid">
    <input
      type="email"
      name="email"
      placeholder="Enter your email"
      autocomplete="email"
    />
    <input type="submit" value="Subscribe" />
  </fieldset>
</form>


グループ

<form>
  <fieldset role="group">
    <input
      type="email"
      name="email"
      placeholder="Enter your email"
      autocomplete="email"
    />
    <input type="submit" value="Subscribe" />
  </fieldset>
</form>


ヘルパーテキスト

<input
  type="email"
  name="email"
  placeholder="Email"
  autoComplete="email"
  aria-label="Email"
  aria-describedby="email-helper"
/>
<small id="email-helper">
  We'll never share your email with anyone else.
</small>


検索入力

<form>
  <input
    type="search"
    name="search"
    placeholder="Search"
    aria-label="Search"
  />
</form>


ファイル入力

<form>
  <input type="file" />
</form>


非活性・リードオンリー

<form>
  <input
    type="text"
    name="text"
    placeholder="Disabled"
    aria-label="Disabled input"
    disabled
  />
  <input
    type="text"
    name="text"
    value="Read-only"
    aria-label="Read-only input"
    readonly
  />
</form>


Valid・Invalid

<form>
  <input
    type="text"
    name="valid"
    value="Valid"
    aria-invalid="false"
  />
  <input
    type="text"
    name="invalid"
    value="Invalid"
    aria-invalid="true"
  />
</form>


テキストエリア

<form>
  <textarea
    name="bio"
    placeholder="Write a professional short bio..."
    aria-label="Professional short bio"
    aria-describedby="email-helper"
  >
  </textarea>
  <small id="valid-helper">Looks good!</small>
</form>


セレクト

<form>
  <select name="favorite-cuisine" aria-label="Select your favorite cuisine..." required>
    <option selected disabled value="">
      Select your favorite cuisine...
    </option>
    <option>Italian</option>
    <option>Japanese</option>
    <option>Indian</option>
    <option>Thai</option>
    <option>French</option>
  </select>
  <select name="meal-type" aria-label="Select a meal type..." disabled>
    <option>Select a meal type...</option>
    <option>...</option>
  </select>
</form>


<form>
  <select name="favorite-cuisine" aria-label="Select your favorite cuisine..."
    required required aria-invalid="true">
    <option selected disabled value="">
      Select your favorite cuisine...
    </option>
    <option>Italian</option>
    <option>Japanese</option>
    <option>Indian</option>
    <option>Thai</option>
    <option>French</option>
  </select>
  <small>
    Please select!
  </small>
</form>


チェックボックス

<form>
  <fieldset>
    <legend>Language preferences:</legend>
    <label>
      <input type="checkbox" name="english" checked />
      English
    </label>
    <label>
      <input type="checkbox" name="french" />
      French
    </label>
  </fieldset>
</form>


<form>
  <fieldset>
    <legend>Language preferences:</legend>
    <input type="checkbox" id="hindi" name="hindi" checked />
    <label htmlFor="hindi">Hindi</label>
    <input type="checkbox" id="swahili" name="swahili" />
    <label htmlFor="swahili">Swahili</label>
    <input type="checkbox" id="navi" name="navi" disabled />
    <label htmlFor="navi" aria-disabled="true">Na'vi</label>
  </fieldset>
</form>


<form>
  <label>
    <input type="checkbox" id="indeterminate" name="indeterminate" />
    Indeterminate
  </label>

  <script>
    const checkbox = document.querySelector('#indeterminate');
    checkbox.indeterminate = true;
  </script>
</form>


ラジオ

<form>
  <fieldset>
    <legend>Language preference:</legend>
    <label>
      <input type="radio" name="language" checked />
      English
    </label>
    <label>
      <input type="radio" name="language" />
      French
    </label>
  </fieldset>
</form>


<form>
  <fieldset>
    <legend>Second language:</legend>
    <input type="radio" id="hindi" name="second-language" checked />
    <label htmlFor="hindi">Hindi</label>
    <input type="radio" id="swahili" name="second-language" />
    <label htmlFor="swahili">Swahili</label>
    <input type="radio" id="navi" name="second-language" disabled />
    <label htmlFor="navi" aria-disabled="true">Na'vi</label>
  </fieldset>
</form>


スイッチ

<form>
  <fieldset>
    <label>
      <input name="terms" type="checkbox" role="switch" />
      I agree to the Terms
    </label>
    <label>
      <input name="opt-in" type="checkbox" role="switch" checked />
      Receive news and offers
    </label>
  </fieldset>
</form>


<form>
  <fieldset>
    <label>
      <input name="publish" type="checkbox" role="switch" disabled />
      Publish on my profile
    </label>
    <label>
      <input name="change-password" type="checkbox" role="switch" checked disabled />
      Change my password at next login
    </label>
  </fieldset>
</form>


レンジ

<form>
  <label>
    Brightness
    <input type="range" />
  </label>

  <label>
    Contrast
    <input type="range" value="40" />
  </label>
</form>