# 表單設定form validation 日期選單 先顯示placeholder 再顯示日期選單

###### tags: `form validation` `前端切版技巧` `表單設計`

#### 一般表單日期設定是先顯示數字欄位不顯示placeholder如下,

` <input type="date" id="birthday" name="birthday">`

#### 但如果不想要讓數字先跑出來,先顯示placeholder,告示是輸入生日還是其他重要日期等等,作法如下(ps:class="form-control"是boostrap的class不影響程式碼)

` <input placeholder="Your Birthday" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">`

<iframe height="265" style="width: 100%;" scrolling="no" title="LYNLWqZ" src="https://codepen.io/corly74/embed/LYNLWqZ?height=265&theme-id=light&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/LYNLWqZ'>LYNLWqZ</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>