用 HTML5 和CSS3 征服表单

最新推荐文章于 2023-03-20 23:28:36 发布

Mmzer

最新推荐文章于 2023-03-20 23:28:36 发布

阅读量509

点赞数

分类专栏：前端问题文章标签： html5 css3

本文链接：https://blog.csdn.net/chenzihan3417/article/details/44103167

版权

前端问题专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、placeholder:其属性值就会默认显示为占位符文字，输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时，占位符文字则会再次显示

required:布尔类型的属性(也就是说你可以选择追加或不追加该属性),则表明该表单域是否为必填项

如果表单提交时该必填项没有任何信息，浏览器则会显示警告信息

警告信息的显示方式（包括显示内容和样式）取决于浏览器与输入框类型。

建议追加个等价的WAI-ARIA 属性：aria-required="true"

range、color、 button 和hidden 类型的输入元素则不能使用required

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

使用时，需谨慎，因为，如果有多个表单域都被追加了autofocus 属性，则会造成跨浏览器混乱

例如有多个表单域追加了autofocus 属性时：

Chrome（v16）：聚焦到最后一个使用autofocus的表单域

Firefox（V9）：聚焦到最先使用autofocus的表单域

autocomplete：设置自动完成功能的的开关 (off、on)

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 与输入项关联起来

2、HTML5 的新输入类型

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

许多触摸屏设备（如Android、iPhone 等等）会根据输入类型改变键盘模式。

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

变数值。

<div>

<label for="yearOfCrime">Year Of Crime</label>

<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929"

max="2015" required aria-required="true" >

</div>

url：type="url" URL 输入类型用于输入URL 地址。触摸屏设备也会为URL 输入框修改键盘模式

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

触摸屏设备为这种类型贴心地提供了数字键盘以便完成输入。

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

pattern: type="pattern" 通过正则表达式来定义表单域的数据格式

<div>

<label for="name">Your Name (first and last)</label>

<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}"

placeholder="Dwight Schultz" required aria- required="true" >

</div>

color: 会在支持该特性的浏览器中生成一个颜色选择器，让用户可以选择十六进制的颜色值

3、日期和时间输入类型

date：大多数浏览器默认都将其渲染为标准的文本输入框，少数几个渲染层日历输入

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

week：使用week 类型时，选择器允许用户选择一年中的某一周

time：time 输入类型允许输入一个24 小时制的时间值，在支持该特性的浏览器中，会显示出加减控制按钮，且仅允许输入时间值

datetime 和datetime-local：日期时间选择器，其在iOS 设备上的显示效果更好

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

range : 输入类型会生成一个滑动条

type="range"

加入js获取当前值：

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

value="5" οnchange="showValue(this.value)">

<script>

function showValue(newValue)

{

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

}

</script>

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

JavaScript 框架叫做Modernizr（ http://www.modernizr.com），用于向缺少HTML5/CSS3 特性支持的浏览器打补丁。

由Alexander Farkas 编写的 “Webshims Lib”（ http://afarkas.github.com/webshim/demos/）就是构建于Moderniz 和无处不在的jQuery 之上的，它可用于插入表单补丁（也可以为其他HTML5 特性打补丁），从而使不支持新特性的浏览器可以处理HTML5 表单

首先下载 Webshims Lib（ http://github.com/aFarkas/webshim/downloads ）并解压。然后将其中的js-webshim 文件夹复制到相应的位置。为简便起见，本例中我将其拷贝到网站的根目录，然后在页面的<head>部分加入如下代码：

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

现在，浏览器缺失的新功能都会通过相关补丁脚本被自动追加进来

5、针对表单的 CSS3 伪类选择器

 input:required：选择必填表单域；

 input:focus:invalid：选择当前聚焦的且含有非法输入值的表单域；

 input:focus:valid：选择当前聚焦的且含有合法输入值的表单域。