《响应式Web设计：HTML5和CSS3实战(第2版)》09章 - 学习笔记

响应式Web设计:HTML5和CSS3实战(第2版)

第九章 表单

9.1-2 理解HTML5表单中的元素

• 每一个输入元素都有一个对应的label元素
• 然后一并被包裹在div元素中（我们也可以把用label把input包裹起来）。

  
About the offending film (part 1 of 3)
  

    The film in question?
    
  

9.2.1 placeholder

• 为占位符文本添加样式
  • 可以使用:placeholder-shown伪类选择器来为placeholder属性添加样式
  • 要用前缀添加工具来兼容各种版本

  input:placeholder-shown { 
      color: #333; 
  }

9.2.2 required

• 用于多种类型的输入元素来确保表单域中必须输入值
• range、color、button和hidden类型的输入元素不能使用required，
  • 这几种输入类型几乎都有默认值。

9.2.3 autofocus

• 可以让表单在加载完成时即有一个表单域被默认选中
• 如果多个表单域都添加了autofocus属性，在不同的浏览器上表现是不一致的
  • 在Safari上，最后一个添加autofocus的表单域会被选中，
  • 在Firefox和Chrome上会选中第一个添加autofocus属性的元素。
• 带有autofocus的表单域，则会阻止空格键的默认行为

9.2.4 autocomplete

• 禁用自动补全功能的表单项

    
 
        Telephone 
         
    

• 也可以给整个表单（不是fieldset）设置属性来禁用自动补全功能

9.2.5 list及对应的datalist元素

• 可以在用户开始在输入框中输入值的时候，显示一组备选值
• list属性中的值（awards）同时也是datalist元素的id
  • 这样就可以让datalist与输入框关联起来

  

    Award Won
    
    
  
 

9.3 HTML5的新输入类型

9.3.1 email

• 当与required组合使用时，如果提交一个不符合格式的地址，浏览器会生成警告信息

  

    Your Email address
    
  

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

9.3.2 number

• 如果你输入的不是数字
  • Chrome和Firefox会在表单提交的时候在表单域上弹出一个警告框
  • 而Safari则相反，它什么都不会做，并且让其顺利提交。
  • IE11则会在输入框失焦的时候快速清除其中的内容。

  
 
      Year Of Crime 
       
  
 

9.3.3 url

  
 
      Your Web address 
       
  

9.3.4 tel

• IE11、Chrome和Firefox等现代浏览器上，tel类型都设计为数字类型格式
• 它的表现和普通文本输入框一样。
• 当输入无效值，它们都 没有 在输入框失焦或表单提交时提供任何合理的警告信息。

  

    Telephone
    
  

9.3.5 search

• 移动设备上经常会提供一个更富有针对性的键盘

  

    Search the site...
    
  

9.3.6 pattern

• 让输入域只接受某种特定格式的输入

  

    Your Name (first and last)
    
  

9.3.7 color

• 让输入域接受颜色输入

  
 
      Your favorite color 
       
  

9.3.8 日期和时间输入类型

• date

• month

• week

• time

9.3.9 范围值

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

• 一大问题是它从来不给用户显示当前的输入值
  • 可以通过JavaScript实现。我们将上例中的代码稍作修改
  • 获取滑动条当前的输入值，将其显示在id为range的元素（span标签）中

    
    5

     

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

• 在一些老式浏览器或不支持的浏览器上使用这些新特性
  • 可以考虑使用Webshims Lib (http://afarkas.github.io/webshim/demos )
    • Webshims最便捷的地方就是按需打补丁
    • 如果在原生支持HTML5新特性的浏览器上查看网页，则仅会给网页加入一丁点儿的冗余代码。
    • 而对于老版本浏览器，虽然它们需要加载更多的代码

9.5使用CSS美化HTML5表单

9.5.1 显示必填项

• 仅通过CSS就告诉用户此输入域为必填项

    input:required { 
    /* 样式*/ 
    }

• 来标记被聚焦的必填项

    input:focus:required { 
    /* 样式*/ 
    }

• 当鼠标悬停于item上时，如果item-general-sibling是与其拥有共同父元素并且位于它后方的兄弟元素，那么样式会被应用到item-general-sibling上

    input:focus:required { 
    /* 样式*/ 
    }

• 当鼠标悬停于item上时，如果item-general-sibling是与其拥有共同父元素并且位于它后方的兄弟元素，那么样式会被应用到item-general-sibling上

    .item:hover ~ .item-general-sibling {} { 
    /* 样式*/ 
    }

• 当鼠标悬停在元素上时，如果item-adjacent-sibling是紧跟item的兄弟元素，那么样式会被应用到item-adjacent-sibling上。

    .item:hover + .item-adjacent-sibling {} { 
    /* 样式*/ 
    }

• 为相关的label元素添加样式（重要）

    

      The film in question?
      
    

    input: required + label: after {
      content: "*";
      font - size: 2.1em;
      position: relative;
      top: 6 px;
      display: inline - flex;
      margin-left: .2 ch;
      transition: color, 1s;
    }
    input: required: invalid + label: after {
      color: red;
    }
    input: required: valid + label: after {
      color: green;
    }

9.5.2 创造一个背景填充效果

• 我们不能在两个背景图片间添加过渡效果（因为浏览器要将声明光栅化为图片）
• 然而，我们可以在相关属性的值中间添加过渡效果
  • 如background-position和background-size
• 使用上面的办法来创造一个填充效果，告知用户input或者textarea被聚焦。

    input: not([type = "range"]), textarea {
        min-height: 30 px;
        padding: 2 px;
        font-size: 17 px;
        border: 1 px solid# ebebeb;
        outline: none;
        transition: transform .4s, box-shadow .4s, background-position .2s;
        background: radial-gradient(400 px circle, #fff 99 % , transparent 99 % ), #f1f1f1;
        background-position: -400 px 90 px, 0 0;
        background-repeat: no-repeat, no-repeat;
        border-radius: 0;
        position: relative;
      }
    input: not([type = "range"]): focus, textarea: focus {
        background-position: 0 0, 0 0;
      }

• 解析
  • 在第一个规则里，我们生成了一个白色径向渐变，但是它被放置在视线外。
  • 定义在其后侧的背景颜色（紧跟在radial-gradient后的HEX值）并没有被偏移，所以它能提供一个默认的颜色。
  • 当输入域被聚焦时，radial-gradient上的背景位置会设定为默认。
    • 因为我们给背景图片设置了过渡，所以可以在两者之间看到漂亮的过渡效果。
  • 最终我们实现了在用户输入时，输入域被填充为不同的颜色。