HTML5表单

1.placeholder

　　placeholder="e.g. King Kong"

　　只需在input元素中加入placeholder属性，其属性值就会默认显示为占位符文字，输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时，占位符文字则会再次显示。

2.required

　　required aria-required="true"

　　在input元素中追加布尔类型的属性required(也就是说你可以选择追加或不追加该属性)，则表明该表单域为必填项。如果表单提交时该必填项没有任何信息，浏览器则会显示警告信息。警告信息的显示方式（包括显示的内容和样式）取决于浏览器与输入框类型。除了HTML5的required属性，我们的例子中还追加了一个等价的WAI-ARIA属性：aria-required="true"。如果没有特殊原因，建议为输入框追加WAI-ARIA版的必填属性以方便屏幕阅读器用户。

　　required属性可用于多种类型的输入元素，以确保表单域必须输入值。range、color、button和hidden类型的输入元素则不能使用required，因为这几种输入类型几乎都有默认值。

3.autofocus

　　HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦（或选中），以便用户输入。

　　使用该属性时要小心。如果有多个表单域都被追加了autofocus属性，则会造成浏览器混乱。例如有多个表单域追加了autofocus属性，在Chrome(v16)中会聚焦最后一个使用autofocus属性的表单域，而Firefox（v9）恰恰相反，会聚焦第一个使用autofocus的表单域。

　　还有一点需要注意，有些用户会使用空格键让网页内容向下滚动。如果网页的表单中含有带autofocus属性的表单域，则会阻止空格键的默认行为，这时敲击空格键会向已聚焦的输入框中输入空格。

4.autocomplete

　　很多浏览器默认提供自动完成功能以帮助用户输入。以往用户可以在浏览器设置中打开或关闭这项功能，现在我们还能告知浏览器我们不想在某个表单或表单域上使用自动完成功能。这不仅仅能保护敏感数据（例如银行账户），还可以让你确保用户用心填写表单，手工输入一些值。比如以前在填写表单时，如果需要填写手机号码，大部分都选择输入一个假号，但也能保证如果在相关的输入项上禁用自动完成功能，那用户肯定不会输入一个假号码。

　　<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true">

　　我们也可以通过给表单本身设置属性来禁用整个表单的自动完成功能。

　　<form id="redemption" method="post" autocomplete="off">

5.list(及对应的datalist元素)

　　list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候，显示一组备选值。如下示例代码:

　　 <div>
               <label for="awardWon">Award Won</label>
               <input id="awardWon" name="awardWon" type="text" list="awards">
               <datalist id="awards">
                    <select>
                    　　<option value="Best Picture"></option>
                   　　 <option value="Best Director"></option>
                          <option value="Best Adapted Screenplay"></option>
                          <option value="Best Original Screenplay"></option>
                     </select>
                </datalist>
        </div>　　

　　list属性中的值（awards）同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将opinion包裹在select中不是必需的，但这样做便于为老版本浏览器提供降级方案。

　　list输入框不会阻止用户输入自己想输入的内容，不过它为我们提供了一种便利的方式来添加输入提示功能，增强用户体验。

6.HTML5的新输入类型

　　HTML5新增了很多输入类型，它们最大的作用就是可以限制用户输入的类型，不需要引入额外的JavaScript代码。而且在那些不支持新特性的浏览器中，它们会降级显示为一个标准的文本输入框。此外还有很多的腻子脚本可以让那些老版本浏览器也跟上时代。

　　6.1 email

　　　　type="email"——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。

　　　　<input type="email">

　　　　当提交一个不符合格式的输入值时，浏览器会生成警告。此外，许多触摸屏设备会根据输入类型改编键盘模式。

　　6.2 number

　　　　type="number"——支持该特性的浏览器期望输入一个数字。这种输入类型默认还提供控制按钮，允许用户简单地点击向上或向下来改变数值。

　　　　<input type="number" min="1929" max="2015">

　　　　

　　6.3 url

　　　　type="url"——URL输入类型用于输入URL地址。与tel和email输入类型相似，他看起来和标准的文本输入框一样。不过有些浏览器会在提交不合法的URL时显示特定的警告信息。

　　<input id="web" name="web" type="url" placeholder="www.mysite.com">

　　　　和type="email"一样，触摸屏设备也会为URL输入框修改键盘模式。

　　6.4 tel

　　　　type="tel"——是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码。

　　6.5 search

　　　　type="search"——和普通文本输入框的表现基本一样，仅在个别浏览器中渲染得有点细微差别。

　　6.6 pattern

　　　　pattern=""——这句话用来描述正则表达式。可以用pattern属性通过正则表达式来定义表单域的数据格式。示例代码如下：

　　　　<input id="name" name="name" pattern="([a-zA-Z]{3,30}\S*) + [a-zA-Z]{3,30}" placeholder="Dwight Schultz" required aria-required="true">

　　　　在patter属性中放置一个正则表达式，支持该特性的浏览器就会按照指定格式验证输入值。当和required属性组合使用时，一旦输入不符合格式的值，浏览器就会有相应的警告信息。

　　6.7 color

　　　　type="color"——会在支持该特性的浏览器中生成一个颜色选择器，让用户可以选择十六进制的颜色值。示例代码如下；

　　　　<input id="color" name="color" type="color">

　　　　目前很少有浏览器支持该特性，好像只有Opera(v11)支持。如果浏览器默认的颜色选择器中没有所需的颜色，点击下面的Other...按钮就会打开操作系统默认的颜色选择器。

7.日期和时间输入类型

　　7.1 date

　　　　示例代码如下：

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

　　和color类型一样，目前对date提供原生支持的浏览器寥寥无几，大多数浏览器默认都将其渲染为标准的文本输入框。Opera已经实现了这个功能。

　　7.2 month

　　　　示例代码如下：

　　　　<input id="month" name="month" type="month">

　　　　选择器界面允许用户选择某个月，输入框中会被填充为年和月组成的值，如2015-07.

　　7.3 week

　　　　示例代码如下：

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

　　　　使用week类型时，选择器允许用户选择一年中的某一周，输入框中会被填充格式如2015-W47这样的数据。

　　7.4 time

　　　　示例代码如下：

　　　　<input id="time" name="time" type="time">

　　　　time输入类型允许输入一个24小时制的时间值，如23:50.

　　7.5 datatime 和 datatime-local

　　　　示例代码如下：

　　　　<input id="datatime" name="datatime" type="datatime">

　　　　日期选择器在IOS设备上的显示效果更好。

　　　　日期选择器会生成一个由日期、时间和时区组成的值，日期与时间之间用I分割，使用z表示协调世界时，使用正负值表示时区偏移。协调世界时的2009年10月25日显示如下：

　　　　2009-10-25T05:05:00z

　　　　datatime-local输入类型和datatime几乎完全一样，只是省略了时区信息。

　　7.6 range

　　　　range输入类型会生成一个滑动条。示例代码如下：

　　　　　　<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5">

　　　　range输入类型最大的一个问题是它从来不给用户显示当前的输入值。虽然滑动条仅被设计用来选择模糊的数值，但我还是经常想看看它的当前值。使用HTML5目前无法解决这个问题，但是如果你确实需要显示滑动条的当前输入值，可以通过JavaScript来实现。将上面的代码稍作修改：

　　　　<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" οnchange="showValue(this.value)"><span id="range">5</span>

　　　　接下来再将下面这段JavaScript代码加入页面：

　　　　<script>

　　　　　　function showValue(newValue)

　　　　　　{

　　　　　　　　document.getElementById("range").innerHTHML=newValue;

　　　　　　}

　　　　</script>

8.如何给不支持新特性的浏览器打补丁

　　首先下载Webshims Lib(https://github.com/aFarkas/webshim/downloads)并解压。然后将其中的js-webshim文件夹复制到相应的位置。代码如下：

　　　<script src="__PUBLIC__/jquery.min.js"></script>

　　　<script src="__PUBLIC__/js-webshim/minified/extras/modernizr-custom.js"></script>
        <script src="__PUBLIC__/js-webshim/minified/polyfiller.js"></script>
        <script>
            //加载补丁
            $.webshims.polyfill();
        </script>

　　

 

　　

转载于:https://www.cnblogs.com/xuying/p/4661017.html