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

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

1.1 

html 代码
    <!--placeholder 提示符又叫占位符-->
    昵称: <input type="text" placeholder="用户名" > <br>

     <!-- 密码框注意事项：type属性值不能拼错或者加空格，否则按普通文本框处理 -->
    密码: <input type="password" placeholder='登录密码' > <br>

     <!-- radio属性里的name是将单选框分组; checked是设置默认选项  -->
    性别: <input type="radio" name="sex" checked>男 
          <input type="radio" name="sex" > 女 <br>
 
    爱好:  <input type="checkbox" checked> 敲代码
           <input type="checkbox" checked> 文案
           <input type="checkbox" > 游戏 <br>
    
    <!-- multiple 可以一次选择多个文件上传 -->
     <input type="file" multiple >
   
   <!--选择日期，类似日历-->
   <input type='date'>

效果图

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

 

<form >
        <!--placeholder 提示符又叫占位符-->
        昵称: <input type="text" placeholder="用户名" > <br>

        <!-- 密码框注意事项：type属性值不能拼错或者加空格，否则按普通文本框处理 -->
        密码: <input type="password" placeholder='登录密码' > <br>

        <!-- radio属性里的name是将单选框分组; checked是设置默认选项  -->
        性别: <input type="radio" name="sex" checked>男 
            <input type="radio" name="sex" > 女 <br>
    
        爱好:  <input type="checkbox" checked> 敲代码
            <input type="checkbox" checked> 文案
            <input type="checkbox" > 游戏 <br>
        
        <!-- multiple 可以一次选择多个文件上传 -->
        <input type="file" multiple > <br>

        <!-- 按钮 -->
        <!-- 提交按钮 -->
        <input type="submit" >
        
        <!-- 重置按钮 -->
        <input type="reset">

        <!-- 普通按钮 -->
        <input type="button"  value="普通按钮">
    </form>

效果图

 

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

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

使用方法二：
      <label>

        爱好:   <input type="checkbox" checked> 敲代码
               <input type="checkbox" checked> 文案
               <input type="checkbox" > 游戏 

      </label>