小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
 

Foundation 表单


Foundation 表单控制会自动设置为全局样式:

所有 <textarea>, <select><input> 元素宽度都为 100%,且带有外边距、内边距、阴影喝鼠标移动效果。

实例

< form >
  Input:
  < input type= "text" placeholder= "Name" >

  Textarea:
  < textarea rows= "4" placeholder= "Address" > < /textarea >

  Select:
  < select >
    < option >1 < /option >
    < option >2 < /option >
    < option >3 < /option >
    < option >4 < /option >
  < /select >
< /form >

尝试一下 »

标签

在表单中使用 <label> 元素来设置标签,标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点:

实例

< form >
  < label for= "name" >Input
    < input type= "text" placeholder= "Name" id= "name" >
  < /label >

  < label for= "adr" >Label
    < textarea rows= "4" placeholder= "Address" id= "adr" > < /textarea >
  < /label >

  < label for= "num" >Select
    < select id= "num" >
      < option >1 < /option >
      < option >2 < /option >
      < option >3 < /option >
      < option >4 < /option >
    < /select >
  < /label >
< /form >

尝试一下 »

如果需要设置标签右对齐,可以使用 .right 类:

实例

< label class= "right" >

尝试一下 »

Fieldset

Foundation 渲染 <fieldset> 元素的样式如下:

实例

< form >
  < fieldset >
    < legend >Fieldset Legend < /legend >
    < label >Name
      < input type= "text" placeholder= "First Name.." >
    < /label >
    < label >Email
      < input type= "text" placeholder= "Enter email.." >
    < /label >
  < /fieldset >
< /form >

尝试一下 »

错误状态

使用 .error 类来设置错误的标签、输入框、文本框样式:

实例

< form >
  < label class= "error" >Error
    < input type= "text" placeholder= "Name.." >
  < /label >
  < small class= "error" >Wrong input < /small >

  < textarea rows= "4" placeholder= "Address" > < /textarea >
  < small class= "error" >Wrong input < /small >
< /form >

尝试一下 »
Note 你需要使用 JavaScript 来更新用户输入的错误状态。