フォーム - HTML

Sample

<form action="">
    <p><label for="txt1">text box：<input type="text" name="" id="txt1"></label></p>

    <textarea name="" id="" cols="30" rows="10"></textarea>

    <p>性別
      <label><input type="radio" name="gender" id="man" value="男" checked>男</label>
      <label><input type="radio" name="gender" id="woman" value="女">女</label>
    </p>

    <p>
      <label><input type="checkbox" name="os" value="iOS">iOS</label>
      <label><input type="checkbox" name="os" value="android">Android</label>
      <label><input type="checkbox" name="os" value="win">Windows</label>
      <label><input type="checkbox" name="os" value="mac">Mac</label>
    </p>

    <p>
      <select name="" id="">
        <option value="">選択してください</option>
        <option value="">select</option>
        <option value="">select</option>
        <option value="">select</option>
      </select>
    </p>

    <p><input type="range" min="0" max="100" id="bar"></p>

    <p><input type="date" name="" id=""></p>

    <p><input type="week" name="" id=""></p>

    <p><input type="color" name="" id=""></p>
  </form>

Sample の表示

性別

option で利用できる CSS のプロパティ

パソコンでは、次のように効くプロパティもありますが、スマホではプロパティはすべて効きません。

装飾したい場合は、ul と li などのタグを使って作成することになります。

option {
  /* パソコンで効く */
  color: white;
  font-weight: bold;
  background: black;
  font-size: 150%;
  font-family: "ＭＳ 明朝";

  /* 効かない */
  display: inline;
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
  width: 100px;
  height: 20px;
  cursor: pointer;
  letter-spacing: 2px;
  text-decoration: underline;
  line-height: 1.4;
}

フォーム関連のセレクタ

input[type="checkbox"]{}

/* チェック状態 */
input[type="checkbox"]:checked{}
input[type="radio"]{}

/* チェック状態 */
input[type="radio"]:checked{}
input[type="submit"]{}