html---input控件的使用以及美化扩展部分

原创

夕陌 2022-07-19 11:20:45 ©著作权

©著作权归作者所有：来自51CTO博客作者夕陌的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      label .checkbox_input{
        display: none; 
      }
      label .checkbox_div{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      label .checkbox_input:checked + .checkbox_div{
        background-color: #0000FF;;
      }
      
      .file{
        width: 100px;
        height: 100px;
        position: relative;
      }
      .file_input{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
      }
      .file_div{
        width: 100%;
        height: 100%;
        background-color: #0000FF;
        
      }
    </style>
  </head>
  <body>
    <!-- 美化复选框 -->
    <label>
      <input type="checkbox" class="checkbox_input"/>
      <div class="checkbox_div">复选框</div>
    </label>
    <br><!-- 换行 -->
    <!-- 美化上传按钮 -->
    <div class="file">
      <input type="file" class="file_input"/>
      <div class="file_div" style="color: #FF0000;">上传</div>
    </div>
    
    <!-- <form action="https://www.baidu.com"> -->
      <!-- <input type="email"> -->
      <!-- <input type="url"> -->
      <!-- <input type="number"> -->
      <!-- <input type="date"> -->
      <!-- <input type="month" /> -->
      <!-- <input type="week"> -->
      <!-- <input type="search"> -->
      <!-- <input type="color"> -->
      <!-- <input type="tel"> -->
<!--       <input type="time" />
      <input type="submit">
    </form> -->
    
    <form action="http://baidu.com">
      <input type="text" name="username" autocomplete="off" autofocus required pattern="/d"/>
      <input type="submit" src="" />
    </form>
  </body>
</html>

input控件
email:电子邮件地址输入框
url:网址输入框
number:数值输入框(只能输入数字)
date (年月日)/month(年月) / week (年周):日期控件
searck 搜索框（可删除内容）
color 颜色控件
tel：电话号码输入框(移动端默认调用数字键盘)
time:时间控件

<!-- <form action="https://www.baidu.com"> -->
      <!-- <input type="email"> -->
      <!-- <input type="url"> -->
      <!-- <input type="number"> -->
      <!-- <input type="date"> -->
      <!-- <input type="month" /> -->
      <!-- <input type="week"> -->
      <!-- <input type="search"> -->
      <!-- <input type="color"> -->
      <!-- <input type="tel"> -->
<!--       <input type="time" />
      <input type="submit">
    </form> -->

美化扩展
1.label+:checked 可点击切换(如：label .input:checked+.dianji)
2.postion+opacity 点击透明层

css内： <style>
      label .checkbox_input{
        display: none; 
      }
      label .checkbox_div{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      label .checkbox_input:checked + .checkbox_div{
        background-color: #0000FF;;
      }
      
      .file{
        width: 100px;
        height: 100px;
        position: relative;
      }
      .file_input{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
      }
      .file_div{
        width: 100%;
        height: 100%;
        background-color: #0000FF;
        
      }
    </style>

body内：

<!-- 美化复选框 -->
    <label>
      <input type="checkbox" class="checkbox_input"/>
      <div class="checkbox_div">复选框</div>
    </label>
    <br><!-- 换行 -->
    <!-- 美化上传按钮 -->
    <div class="file">
      <input type="file" class="file_input"/>
      <div class="file_div" style="color: #FF0000;">上传</div>
    </div>

表单属性：
autocomplete:输入框下方是否回显密码值 off 不在显示数据 / on 默认值
autofocus 光标自动聚集
required 不能为空
pattern 正则验证

<form action="http://baidu.com">
      <input type="text" name="username" autocomplete="off" autofocus required pattern="/d"/>
      <input type="submit" src="" />