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

  • HTML5 教程之Foundation 表单

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

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

实例


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

	

		复制

	实例预览 »



	标签



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



	

		实例

	

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

	

		复制

	实例预览 »



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



	

		实例

	

	
    
		
  1. 
			<label class="right">
    2. 
	

	

		复制

	实例预览 »



	Fieldset



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



	

		实例

	

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

	

		复制

	实例预览 »



	错误状态



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



	

		实例

	

	
    
		
  1. 
			<form>
    2. 
		
  2. 
			  <label class="error">Error
    3. 
		
  3. 
			    <input type="text" placeholder="Name..">
    4. 
		
  4. 
			  </label>
    5. 
		
  5. 
			  <small class="error">Wrong input</small>
    6. 
		
  6. 
			 
    7. 
		
  7. 
			  <textarea rows="4" placeholder="Address"></textarea>
    8. 
		
  8. 
			  <small class="error">Wrong input</small>
    9. 
		
  9. 
			</form>
    10. 
	

	

		复制

	实例预览 »



	
		

			
				你需要使用 JavaScript 来更新用户输入的错误状态。 
		

	





      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程