HTML表单相关知识

表单的基本结构

标签名	标签语义	常用属性	单/双标签
form	表单	action：用于指定表单的提交地址（需与后端人员沟通确定） method：用于控制表单的提交方式 target：用于控制表单如何打开页面，常用值如下：_self：在本页签打开页面               _blank:在新页签打开页面	双
input	输入框	type：设置输入框类型 name：用于指定提交数据的名字（需与后端人员沟通确定）	单
button	按钮	type：用于设置按钮的属性	双

示例代码

    
        
        
    
    
        

            
            去百度搜索
        
        
        

        

            
            去京东搜索
        
    

表单常用控件

文本输入框

常用属性如下：

name属性：数据的名称

value属性：输入框的默认输入值

maxlength属性：输入的最大字数限制

密码框

常用属性如下：

name属性：数据的名称

value属性：输入框的默认输入值（一般不用，无意义）

maxlength属性：输入的最大字数限制 

单选框

男
女

常用属性如下：

name属性：数据的名称，但要注意：想要多个单选效果，多个radio的name属性值要保持一致 

value属性：提交的数据值

checked属性：让该单选按钮默认选中

复选框

抽烟
喝酒
烫头

常用属性如下：

name属性：数据的名称

value属性：提交的数据值

checked属性：复选按钮默认选中 

隐藏域

作用：用户不可见的输入区域，提交表单时可以携带一些固定数据。能够得知信息来源，从而判断是否存在恶意行为。

常用属性如下：

 name属性：指定数据的名称

value属性：指定的真正提交的数据 

提交按钮

确认

注意：

button标签的type属性的默认值为submit

button标签不需要指定name属性

input标签编写的按钮，使用value属性指定按钮文字

重置按钮

重置

注意：

button标签不需要指定name属性

input标签编写的按钮，使用value属性指定按钮文字 

普通按钮

检测账户是否被注册

注意：

普通按钮的type属性值为button，不写type属性则默认为submit  

 文本域

常用属性如下：

rows属性：指定默认显示的行数，影响文本域高度

cols属性：指定默认显示的列数，影响文本域宽度

不能编写type属性  

下拉框

    广东
    山东
    陕西
    广西

常用属性及注意事项：

name属性：指定数据名称

option标签设置value属性，如果没有value属性，提交的数据为option标签的标签体；如果设置了value属性，提交的数据为value属性的属性值

option标签设置了selected属性，表示默认选中

从以上标红加粗的字体可以看出，value属性的属性值不是固定的。

完整代码

    
    


    

        
        账户：

        
        密码：

        
        性别：男
        女

        
        爱好：
        抽烟
        喝酒
        烫头

        
        

        
        其他:
        

        
        
            广东
            山东
            陕西
            广西
        
        
        
        
        
        
        
        
        
        
        检测账户是否被注册

    

结果展示：

 表单禁用控件

给表单设置一个disabled即可禁用

input，textarea，button，select，option都可以设置disabled属性

结果展示 ：

此时账户一栏的输入框禁止输入任何字符

label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与label关联方式如下：

1、让label标签的for属性的值等于表单控件的id

2、把表单控件套在label标签里

图片展示

fieldset与legend的使用

直接上代码：

    
        
        
    
    
        

            

                
主要信息
                账户：

                
                    密码：
                
                

                性别：
                
                男
                
                    女
                
            
            

                

                    附属信息
                
                爱好：
                    抽烟
                    
                        喝酒
                    
                    
                        烫头
                    

                其他
                

                籍贯：
                
                    山东
                    陕西
                    广东
                    山西
                
            
            
            
            重置
            
        
    

 结果展示：

 可以看出经过fieldset与legend标签的修饰，表单更加明了清楚，当然，运用也很简单，只需要将相关内容嵌套到fiedset中去。ps：不能在legend标签中写表单的内容。

如有不足之处，欢迎大家指出，感谢支持！！！！