html基础之input属性

清疚 2023-06-18 02:56 37阅读 0赞

无论在php还是javascript中，发现input属性相当关键，现在整理一下，因为添加了不少新属性，我也一并写上去了

### 1、清除 input 标签默认样式 ###

input { 
        /* 去除边框 */
        border: none;
        /* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 */
        /* 即点击输入框时出现的蓝色边框 */
        outline: none;
    
    }

### 2、input type属性值 ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>图片</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>默认。定义一个单行的文本字段（默认宽度为 20 个字符）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200552359.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>定义用于输入 URL 的字段。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200415249.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>定义密码字段（字段中的字符会被遮蔽）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200129967.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129195029500.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>定义提交按钮。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200318661.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>定义重置按钮（重置所有的表单值为默认值）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200245360.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>定义单选按钮。</td> 
   <td><img src="https://img-blog.csdnimg.cn/2019112920015827.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>定义复选框。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200622744.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>定义拾色器。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129195218111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70" alt="Alt" width="30%" height="20%"></td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>定义 date 控件（包括年、月、日，不包括时间）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129195434339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>datetime</td> 
   <td>定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200852315.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>datetime-local</td> 
   <td>定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/2019112919562035.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>定义 month 和 year 控件（不带时区）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200012250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>week</td> 
   <td>定义 week 和 year 控件（不带时区）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/201911292004367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>time</td> 
   <td>定义用于输入时间的控件（不带时区）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200356880.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>定义用于 e-mail 地址的字段。</td> 
   <td>在这里插入图片描述</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>定义文件选择字段和 “浏览…” 按钮，供文件上传。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129195758437.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>定义隐藏输入字段。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>定义图像作为提交按钮。</td> 
   <td><img src="https://img-blog.csdnimg.cn/2019112919582419.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>定义用于输入数字的字段。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200057956.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>range</td> 
   <td>定义用于精确值不重要的输入数字的控件（比如 slider 控件）。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200221276.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>定义用于输入搜索字符串的文本字段。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200301683.png" alt="在这里插入图片描述"></td> 
  </tr> 
  <tr> 
   <td>telNew</td> 
   <td>定义用于输入电话号码的字段。</td> 
   <td><img src="https://img-blog.csdnimg.cn/20191129200341526.png" alt="在这里插入图片描述"></td> 
  </tr> 
 </tbody> 
</table>