H5学习input新增类型和contenteditable

一、Input 类型type

并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域

1.date

从一个日期选择器选择一个日期，Chrome支持，Safari、IE不支持

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

2.time

选择时分的时间，Chrome支持，Safari、IE不支持

<form action="">
    <input type="time" name="" id="">
</form>

3.week

选择第几年的第几周，Chrome支持，Safari、IE不支持

4.datetime-local

选择一个日期和时间，Chrome、Safari支持，IE不支持

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

5.number

包含数值的输入域，Chrome支持，Safari、IE不支持

<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

6.email

包含 e-mail 地址的输入域，Chrome、火狐支持，Safari、IE不支持

<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

7.color

在input字段主要用于选取颜色，Chrome支持，Safari、IE不支持

<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

8.range

定范围内数字值的输入域，显示为滑动条，Chrome、Safari支持，IE不支持

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

9.search

用于搜索域，比如站点搜索或 Google 搜索，Chrome、Safari（一点）支持，IE不支持

<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

10.url

用于应该包含 URL 地址的输入域，Chrome、火狐支持，Safari、IE不支持

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

二、placeholder

提示字段

<input type="text" placeholder="请输入">

三、contenteditable

值为true时，可继承，为false时不能继承。或者单独给子元素设置false

<div contenteditable='true'>
    我想要这一句话可读可修改
    <p>我可以继承父元素可读可写的属性</p>
</div>
<div contenteditable='true'>
    我想要这一句话可读可修改
    <p contenteditable='false'>我可以继承父元素可读可写的属性</p>
</div>