非零基础自学前端最后一遍一 HTML+CSS 12 HTML高级元素 12.8 表单元素-input元素的基本使用

╰+攻爆jí腚メ 2024-03-24 08:23 30阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  12 HTML高级元素
         *   *  12.8 表单元素-input元素的基本使用
             *   *  12.8.1 认识表单
                 *  12.8.2 常见的表单元素
                 *  12.8.3 input元素的使用
                 *  12.8.4 布尔属性（boolean attributes）

![在这里插入图片描述][ff753ebce48e4e4fb8fd050368f7b901.png_pic_center]

#### 一 HTML+CSS ####

#### 12 HTML高级元素 ####

##### 12.8 表单元素-input元素的基本使用 #####

###### 12.8.1 认识表单 ######

HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单:

![在这里插入图片描述][85bcd393f41a4f3fa710cd3e4adff790.png_pic_center]

###### 12.8.2 常见的表单元素 ######

*  form
    
     *  表单, 一般情况下，其他表单相关元素都是它的后代元素
 *  input
    
     *  单行文本输入框、单选框、复选框、按钮等元素
 *  textarea
    
     *  多行文本框
 *  select、option
    
     *  下拉选择框
 *  button
    
     *  按钮
 *  label
    
     *  表单元素的标题

###### 12.8.3 input元素的使用 ######

*  表单元素使用最多的是input元素
 *  input元素有如下常见的属性:
 *  type：input的类型
    
     *  text：文本输入框（明文输入）
     *  password：文本输入框（密文输入）
     *  radio：单选框
     *  checkbox：复选框
     *  button：按钮
     *  reset：重置
     *  submit：提交表单数据给服务器
     *  file：文件上传
 *  readonly：只读
 *  disabled：禁用
 *  checked：默认被选中
    
     *  只有当type为radio或checkbox时可用
 *  autofocus：当页面加载时，自动聚焦
 *  name：名字
    
     *  在提交数据给服务器时，可用于区分数据类型
 *  value：取值
 *  type类型的其他取值和input的其他属性, 查看文档:
    
     *  https://developer.mozilla.org/zhCN/docs/Web/HTML/Element/Input
        
        ![在这里插入图片描述][8a72a5a8839440ceb8b7f3996e5aab7d.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      
      <div>
        <input type="text">
      </div>
      <div>
        <input type="password">
      </div>
      <div>
        <input type="time">
      </div>
      <div>
        <input type="date">
      </div>
      <div>
        <input type="file">
      </div>
    
      <input type="text" readonly>
      <input type="text" readonly="readonly">
      <input type="text" disabled>
    
      <input type="text" autofocus>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][fc7ac616a1204c07a6f1281652ac00cb.png_pic_center]

###### 12.8.4 布尔属性（boolean attributes） ######

*  常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
 *  布尔属性可以没有属性值，写上属性名就代表使用这个属性
    
     *  如果要给布尔属性设值，值就是属性名本身

![在这里插入图片描述][5ca3b41ad88d451fbf8265f2a61d2e06.png_pic_center]

[ff753ebce48e4e4fb8fd050368f7b901.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7c238b2bf43a49319a2c3bb1bad1343b.png
[85bcd393f41a4f3fa710cd3e4adff790.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0999657bbe7543d8a8e814c6e95b28e9.png
[8a72a5a8839440ceb8b7f3996e5aab7d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/538b5c92149141c39786b8743a618123.png
[fc7ac616a1204c07a6f1281652ac00cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5d0173f002f543af84ea71db561cb118.png
[5ca3b41ad88d451fbf8265f2a61d2e06.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/97902b33360b418f82c4ceaebaf2926f.png