使表单结构化

引言

在学习过第一个HTML表单后，我们将详细讲述构成一个表单的不同部分。
HTML表单的灵活性使它成为HTML文档中最复杂的结构之一。你可以使用专用的(dedicated)表单元素和属性构建任意一种基本的表单。正确的结构保证了表单的易用性和易连接性(accessibility)

元素

元素正式地定义了表单的属性和行为。许多辅助技术和浏览器插件也可以发现 元素，提供许多易于使用的特殊方法。

表单的嵌套是不允许的，如果发生嵌套，表单的行为将是未定义的。

在表单外使用widgets是允许的，但这些widgets因为没有和任何表单相关联，你需要使用javascript自定义它们的行为。

和

元素

元素用于包裹具有相同样式和语义的一组widgets。

元素放置于与

元素紧邻的正下方，用于描述

元素的用意。
下面是一个例子：

    

        
Fruit juice size
        

            
            samll
        
        

            
            medium
        
        

            
            large
        
    

目前为止我们可以知道

元素的两种基本的使用场景

• 包裹radio buttons
• 将form表单分块(section)

元素

元素正式地定义了一个HTML表单中widgets的标签。

姓名

widgets也可以内嵌进

姓名：

Label 标签是可以点击的

在checkbox与radio button中，使用label可以增加点击范围。
点击label等同于点击checkbox或radio button

多个标签

Required fields are followed by *.



  Name:
  
  *




  
    Name:
    
    *
  




  Name: *
  

自己动手写一个表单

我们现在来搭建一个付款表单。也许这个表单中有你不熟悉的widgets，不要担心，你将在以后的博客中认识它们。目前你在项目中复习我们已经学过的知识，并且思考为什么要使用它们。

1. 写出一对

   元素

   
       ...
   
   

2. 在

   元素对内，添加付款表单的标题和指示段落

   付款
   *为必填
   

3. 接下来我们将添加付款人信息

   • 联系方式
   • 称呼
   • 电子邮箱，密码

   
       
   联系方式
       
   
           
   标题
           
   
               
   
                   
                       
                       先生
                   
               
               
   
                   
                       
                       女士
                   
               
           
       
       
   
            
               姓名:
               
           
       
       
   
            
               E-mail:
               
           
       
       
   
            
               密码:
               
           
       
   
   

4. 接下来添加付款信息

   
       
   付款信息
       
   
           
               信用卡信息：
           
           
               工行
               商行
               农行
           
       
       
   
           
               信用卡号：
               
           
       
       
   
   

5. 最后，添加一个提交按钮

   提交
   
   

最终效果如下：

最终效果

这样会比较丑，下载这个css，效果如下

美化后

学习自：mozilla mdn