HTML5 Form表单--提交信息

Form表单主要是允许用户在表单中输入信息，并最终将这些信息提交服务器的一个元素，重在收集信息方面。由于用户各种各样的信息，所以form可以嵌入的元素就有许多种， 与Form常搭配的有input、Select、TextArea元素等。

Form元素用于生成输入表单，但自己不会生成可视化部分，在使用Form时必须制定action、method和name属性。action指定提交服务器的Url； method指定提交服务器的方法（get或post）；name指定表单的唯一名称，作为参数一起提交到服务器。

• Input元素， input元素是表单控件元素中功能最丰富的，只需要设置不同的type就可以实现不同的功能。

    
    
    
    
    

        
        单行文本框:

        不能编辑的文本框:

        密码框:

        隐藏域: 

        第一组单选框:

        
        
        
        
        

        第二组单选框:

        
        
        


        两个复选框:

        
        
        
        
        


        
        文件上传域:
        


        图像域:
        


        下面四个是按钮:

        
        
        
        
    

运行效果图如下，可以看到Input元素非常丰富，只需要设置不同的type就能试下不同外观的控件。

Form--Input.png

• Select元素，实现下拉菜单和列表框

    


        下面是简单下拉菜单

        
        
            Java语言
            c语言
            ruby语言
        
        

        

        下面是多选的列表框


        
        
            Java语言
            c语言
            ruby语言
        
        


        下面是允许多选的列表框
        
            
            
                疯狂Java讲义
                疯狂Android讲义
                轻量java ee企业应用实战
            

            
                Struts 2.1权威指南
                ROR敏捷开发最佳实践
            
        
        

        提交
    

显示效果, 可以看到Select默认是下拉单选菜单，设置multiple属性后，就会将选择全部展示出来。

Form--Select.png

• Textarea元素，用于生成多行文本域，方便用户输入，类似于iOS中的UITextView。

    
    

        简单多行文本域:

        
        

        只读多行文本域:

                    疯狂Java讲义
            轻量级Java EE企业应用实战
        
        

        提交
    

效果图：

Form--TextArea.png