VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • HTML5 教程之Foundation 表单

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

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

实例


	
  1. <form>
  2.   Input:
  3.   <input type="text" placeholder="Name">
  4.  
  5.   Textarea:
  6.   <textarea rows="4" placeholder="Address"></textarea>
  7.  
  8.   Select:
  9.   <select>
  10.     <option>1</option>
  11.     <option>2</option>
  12.     <option>3</option>
  13.     <option>4</option>
  14.   </select>
  15. </form>
复制
实例预览 »

标签

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

实例


	
  1.  <form>
  2.   <label for="name">Input
  3.     <input type="text" placeholder="Name" id="name">
  4.   </label>
  5.  
  6.   <label for="adr">Label
  7.     <textarea rows="4" placeholder="Address" id="adr"></textarea>
  8.   </label>
  9.  
  10.   <label for="num">Select
  11.     <select id="num">
  12.       <option>1</option>
  13.       <option>2</option>
  14.       <option>3</option>
  15.       <option>4</option>
  16.     </select>
  17.   </label>
  18. </form>
复制
实例预览 »

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

实例


	
  1. <label class="right">
复制
实例预览 »

Fieldset

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

实例


	
  1. <form>
  2.   <fieldset>
  3.     <legend>Fieldset Legend</legend>
  4.     <label>Name
  5.       <input type="text" placeholder="First Name..">
  6.     </label>
  7.     <label>Email
  8.       <input type="text" placeholder="Enter email..">
  9.     </label>
  10.   </fieldset>
  11. </form>
复制
实例预览 »

错误状态

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

实例


	
  1. <form>
  2.   <label class="error">Error
  3.     <input type="text" placeholder="Name..">
  4.   </label>
  5.   <small class="error">Wrong input</small>
  6.  
  7.   <textarea rows="4" placeholder="Address"></textarea>
  8.   <small class="error">Wrong input</small>
  9. </form>
复制
实例预览 »
你需要使用 JavaScript 来更新用户输入的错误状态。 


相关教程