html基础 表单标签 input系列 以及优化方法

场景：在网页中显示手机用户信息的表单效果。 如：登录页、注册页
标签名：input
    用法是通过改变type属性值，来展示不同效果

1.1 

html 代码
    
    昵称: "text" placeholder="用户名" > 


     
    密码: "password" placeholder='登录密码' > 


     
    性别: "radio" name="sex" checked>男 
          "radio" name="sex" > 女 

 
    爱好:  "checkbox" checked> 敲代码
           "checkbox" checked> 文案
           "checkbox" > 游戏 

    
    
     "file" multiple >
   
   
   

效果图

1.2input系列标签--按钮 ；要想使用重置和提交按钮需要用
 包裹所有标签内容

        
        昵称: "text" placeholder="用户名" > 


        
        密码: "password" placeholder='登录密码' > 


        
        性别: "radio" name="sex" checked>男 
            "radio" name="sex" > 女 

    
        爱好:  "checkbox" checked> 敲代码
            "checkbox" checked> 文案
            "checkbox" > 游戏 

        
        
        "file" multiple > 


        
        
        "submit" >
        
        
        "reset">

        
        "button"  value="普通按钮">
    

效果图

label的的使用方法
功能优化：
  当选择自己的爱好以及其他选择答案的时候，点击小方格范围比较小，优化后让其点击文字也可以选择中此项

使用方法一：
爱好:  "checkbox" checked id='one'> for='one'>敲代码/* 执行过程：当点击"敲代码"文字，label将会找id为one的标签，同时选中*/
            "checkbox" checked> 文案
            "checkbox" > 游戏 

使用方法二：
      

        爱好:    敲代码
                文案
                游戏