66695


**フォームから受け取った日付を、MySQLのdatetime型カラムへINSERTすることを想定しています。**  
月日が分からない場合は、userに0を入力させたいです。

年月日が分かる場合

> 2020-05-15

年月のみ分かる場合

> 2020-05-00

年のみ分かる場合

> 2020-00-00

* * *

**上記要件を満たすよう、userに出来るだけわかりやすく入力させるにはどうすれば良いですか？**  
input type="date" は、あり得ない日付は入力不可ですか？


CC BY-SA 4.0
2020-05-15T11:47:52.803
66642
2020-05-17T01:38:53.953
7886
question
javascript html
(userが)フォーム入力欄で、「不明日付を出来るだけ簡単に0と入力する」には？


# ユーザビリティ

UI/ユーザビリティの質問なら、まずはあなた自身がユーザ目線で考える事から始めてください。

  * あなたは「2020-00-00という日付を入力するフォーム」が分かりやすいと感じますか。
  * 「範囲指定する場合は、未入力項目を0で埋めてください」と注意書きがあって、「00」の規則性にすぐに気がついて入力する事が出来ますか

一般には、ユーザにシステムの都合で決めた規則値を意識させるべきではありません。  
ユーザの立場ではシステム値を覚える必然性がなく、「人間ならば、誰でも分かるUI」であることが重要です。

# 実装

下記HTMLを用意して、

[code]

    <fieldset>
      <legend>日付タイプ</legend>
      <label><input type="radio"" name="date-type" value="YYYY">年</label>
      <label><input type="radio" name="date-type" value="YYYY-MM">年月</label>
      <label><input type="radio" name="date-type" value="YYYY-MM-DD">年月日</label>
    </fieldset>
    
    <fieldset>
      <legend>日付範囲</legend>
      <label><input type="number" name="year">年</label>
      <label><input type="number" name="month">月</label>
      <label>日付<input type="date" name="date"></label>
    </fieldset>
[/code]

下記機能をCSS/JavaScriptで実装すれば、見えているフォームを入力するだけですので、誰が見ても分かると思います。

  * 「日付タイプ = 年」なら「日付範囲 = 年」を表示
  * 「日付タイプ = 年月」なら「日付範囲 = 年,月」を表示
  * 「日付タイプ = 現月日」なら「日付範囲 = 日付」を表示

このサンプルでは、`<fieldset>`->`<label>`->`<input>`
で親子関係が形成されていますが、input要素同士を兄弟関係にすれば、`~` 結合子が使える為、JavaScriptが不要となります。

  * [14.4. 後続-同胞 結合子 ( ~ ) - Selectors Level 4 （日本語訳）](https://triple-underscore.github.io/selectors4-ja.html#general-sibling-combinators)

Re: re9 さん


CC BY-SA 4.0
2020-05-17T01:38:53.953
66695
2020-05-17T01:38:53.953
20262
66642
answer