day06 - 表单

用户36668239157312025-08-15 10:03

1. 表单介绍

用在这里

什么是表单

表单用于收集用户输入的信息，并通过浏览器向服务器传送

表单元素

表单是有若干个表单控件组合而成的，也就是说若干个表单控件组合成了一个表单

表单的作用就是把表单控件收集到的数据提交给服务端

2. 表单

标签用于声明整个表单，定义数据收集范围，是双标签

表单控件来负责收集数据

语法

html 复制代码 
<form>控件写在这里</form>

2.1. 属性

action 属性，用于设置表单的提交地址（提交到哪里）

target 属性，用户设置表单的打开方式

  1. _self 原窗口打开（默认值）
  2. _blank 新窗口打开

语法

html 复制代码 
<form action="要提交到的地址" target="打开方式"></form>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
  </head>
  <body>
    <form action="https://www.baidu.com/" target="_blank">
      <h3>登陆</h3>
      <p>
        <input type="text" placeholder="请输入您的用户名" />
      </p>
      <p>
        <input type="password" placeholder="请输入您的密码"/>
      </p>
      <p>
        <input type="submit" />
      </p>
    </form>
  </body>
</html>

效果

3. 文本框

3.1. type

使用 type 属性控制输入框的类型，默认类型是text

语法

html 复制代码 
<input type="text" />
type="text"称之为：文本框

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="text" />
    </form>
  </body>
</html>

效果

3.2. value

用来定义文本框的初始值

语法

html 复制代码 
<input value="初始值" />
value取值：根据需求设置初始值

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="text"
        value="最编程"
        />
    </form>
  </body>
</html>

效果

3.3. size

文本框的宽度

语法

html 复制代码 
<input size="数值" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="text"
        value="最编程"
        size="30"
        />
    </form>
  </body>
</html>

效果

3.4. maxlength

文本框可输入的最多内容

语法

html 复制代码 
<input maxlength="数值" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="text"
        value="最编程"
        size="30"
        maxlength="10" 
        />
    </form>
  </body>
</html>

效果

3.5. placeholder

文本框提示语

语法

html 复制代码 
<input placeholder="提示语" />
提示语取值：根据需求
注意：当value属性和placeholder共存的时候，placeholder无效

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="text"
        size="30"
        maxlength="10" 
        placeholder="请输入内容..." 
        />
    </form>
  </body>
</html>

效果

3.6. name

给当前文本框取个名字，视觉效果没有变化

它的作用主要是和编程语言配合使用的，比如说我们的JavaScript

3.7. disabled

禁用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="text"
        size="30"
        maxlength="10" 
        placeholder="请输入内容..." 
        disabled 
        />
    </form>
  </body>
</html>

3.8. id

id是用来和label标签做关联使用的，在视觉上你看不出来有什么变化

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="text"
        size="30"
        maxlength="10" 
        placeholder="请输入内容..." 
        disabled 
        id="username"
        />
    </form>
  </body>
</html>

3.9. autofocus

当页面加载完毕让输入框自动获取焦点

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>登录</h1>
    <form action="https://search.jd.com/Search">
        <input type="text" autofocus>
        <button>提交数据</button>
    </form>
</body>

</html>

效果

课堂互动

  1. 以下属于<input />标签属性的是：

    • A：name
    • B：type
    • C：placeholder
    • D：cellspaceing
    • E：align

4. 密码框

用来输入密码，是个单标签

语法：

html 复制代码 
<input />

4.1.1. type

使用 type 属性控制输入框的类型

语法

html 复制代码 
<input type="password" />
type="password"称之为：密码框

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="password"
        />
    </form>
  </body>
</html>

效果

4.1.2. size

密码框的宽度

语法

html 复制代码 
<input type="password" size="数值" />
type="text"有的属性，password也有只是为了安全系数更高，我们不用！

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="password"
        size="100"
        />
    </form>
  </body>
</html>

效果

密码框同样具有value、placeholder、maxlength、name等text拥有的属性

教大家一招"盗取密码"：

有这样一个场景，我们的网站都有记住密码的功能，就是在登陆的时候无需手动输入密码

  1. 一打开网站就是登陆状态
  2. 要么就是用户名和密码已经自动填充了只需要我们点一下登陆

如果说有一天你需要知道记住的密码是什么，但是由于之前一直是记住密码的状态因此很有可能已经忘记了自己的密码或者你想看看你女朋友/男朋友的密码是不是你的生日还是你闺蜜的/好兄弟的生日😀，那么该如何知道呢？

教大家两招：

  1. 在密码框鼠标右键点击 -> 检查（在mac Chrome下的操作流程），就会看到网页的源代码，这个时候找到密码框代码部分，把type类型改成type="text"或者直接把type类型删掉（因为input默认类型就是文本框类型），这样你就会看到记住的密码是什么了。
  1. 通过JavaScript代码找回，在网页上鼠标右键点击 -> 检查 -> 控制台

在这里输入JavaScript代码即可获取到密码，代码如下：

JavaScript 复制代码 
document.getElementById('fm-login-password').value // 获取密码

5. 隐藏域

语法

ini 复制代码 
<input type="hidden" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="hidden" value="张三" name="zhangsan">
      <input type="submit" />
    </form>
  </body>
</html>

效果

作用

  1. 存储临时数据：在表单中，隐藏域可以用于存储需要传递到服务器的数据，但不需要用户看到的数据
  2. 持久化数据：在不同页面间传递信息，尤其是在AJAX请求中，隐藏域可以用于存储必要的状态或标识符
  3. 配合服务器端逻辑：服务器可能需要接收一些在客户端不易直接处理的数据，这些数据可以放在隐藏域中提交到服务器
  4. 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼

6. 按钮

6.1. 普通按钮

用来点击没有默认行为

语法

html 复制代码 
<input />
注意：type类型为button的时候是没有maxlength、size、placeholder，name这些属性的

6.1.1. type

语法

html 复制代码 
<input type="button" />
type="button"称之为：普通按钮

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <input type="button">
    </form>
  </body>
</html>

效果

6.1.2. value

自定义按钮的值

语法

html 复制代码 
<input type="button" value="我是普通按钮" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <input type="button" value="这是一个普通按钮">
    </form>
  </body>
</html>

效果

6.2. 提交按钮

用来提交表单数据的

语法

html 复制代码 
<input />

6.2.1. type

语法

html 复制代码 
<input type="submit" />
type="submit"称之为：提交按钮

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <input type="submit">
    </form>
  </body>
</html>

效果

6.2.2. value

自定义按钮的值

语法

html 复制代码 
<input type="submit" value="我是提交按钮" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <input type="submit" value="这是一个提交按钮">
    </form>
  </body>
</html>

效果

6.3. 重置按钮

用来重置表单恢复到默认的状态

语法

html 复制代码 
<input />

6.3.1. type

语法

ini 复制代码 
<input type="reset" />
type="reset"称之为：重置按钮

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <input type="reset">
    </form>
  </body>
</html>

效果

6.3.2. value

自定义按钮的值

语法

html 复制代码 
<input type="reset" value="我是重置按钮" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      
      <input type="reset" value="我是重置按钮">
    </form>
  </body>
</html>

效果

6.4. 小结

学了三个按钮类型

  1. type = "button" :是一个普通按钮（使用的比较多）

  2. type = "submit" 是一个提交按钮

    1. 作用：提交数据到服务器
    2. 默认值：提交
    3. value：可以自定义按钮上面的文本

  3. type = "reset" 是一个重置按钮

    1. 作用：所有表单控件里面的内容恢复到默认状态或者是默认值
    2. 默认值：重置
    3. value：可以自定义按钮上面的文本

  4. 公共的属性（text、password、button、reset、submit）

    1. value
    2. id
    3. disabled
  1. 相对于input是可输入的类型的时候按钮上不具有的属性是（button、reset、submit没有）
    1. size
    2. maxlength
    3. placeholder
    4. name

7. button按钮

7.1. 普通按钮

语法

html 复制代码 
<button type="button">普通按钮</button>
<!-- button标签默认的type类型是submit -->

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <button type="button">普通按钮</button>
    </form>
  </body>
</html>

效果

点击不会提交也不会重置

7.2. 提交按钮

语法

html 复制代码 
<button type="submit">提交按钮</button>
<!-- button标签的默认值就是submit因此type属性写不写都可以 -->

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <button type="submit">提交按钮</button>
    </form>
  </body>
</html>

效果

7.3. 重置按钮

语法

html 复制代码 
<button type="reset">重置按钮</button>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form action="https://search.jd.com/search">
      <input type="text" value="张三" name="zhangsan">
      <button type="reset">重置按钮</button>
    </form>
  </body>
</html>

效果

讲了两种按钮

  1. 使用[ ] 单标签来实现，type="button"就是普通按钮（默认值）；type="submit"提交按钮；type="reset"就是重置按钮
  2. 使用双标签实现，type="button"就是普通按钮；type="submit"提交按钮（默认值）；type="reset"就是重置按钮

在开发中使用哪一种按钮呢？都可以！推荐button因为语义化比较好，当我们看到button标签就知道这是一个按钮代码了

8. 案例应用

效果图

需求

  1. 按照效果图完成布局，在此基础上添加"重置"按钮
  2. 点击"登录"按钮提交数据到www.jd.com/search
  3. 点击"重置"按钮用户名、密码、验证码恢复到默认的状态

思路分析

html 复制代码 
思路分析：
1. 整个结构 - <form>标签
2. 标题 - <h3>标签
3. 输入框 - 文本框、密码框

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <h3>登陆</h3>
    <form action="https://search.jd.com/search">
      <p>
        <input 
          type="text"
          size="30"
          placeholder="用户名" 
          value=""
          name="username"
          />
      </p>
      <p>
        <input type="password" 
          size="30" 
          value=""
          name="password"
          placeholder="密码"  />
      </p>
      <p>
        <input type="text" value="" name="yzm" />
        <img
          width="60"
          src="https://img2.baidu.com/it/u=1315247139,3738593221&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=342">
        <font color="blue">看不清？换一张</font>
      </p>
      <p>
        <input 
          type="submit" 
          value="登录"
          />
        <input type="reset" />
      </p>
    </form>
  </body>
</html>

效果

9. 单选

多选一

用在这里

语法

html 复制代码 
<input />

9.1. type

使用 type 属性控制类型

语法

html 复制代码 
<input type="radio" />
type="radio"称之为：单选

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="radio" /> 我是男生
      <input type="radio" /> 我是女生
    </form>
  </body>
</html>

效果

9.2. name

取个名字，分个组

语法

html 复制代码 
<input type="radio" name="sex" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="radio"
        name="sex"
        /> 我是男生
      <input 
        type="radio"
        name="sex"
        /> 我是女生
    </form>
  </body>
</html>

效果

9.3. checked

默认选中

语法

html 复制代码 
<input type="radio" checked />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="radio"
        name="sex"
        checked
        /> 我是男生
      <input 
        type="radio"
        name="sex"
        /> 我是女生
    </form>
  </body>
</html>

效果

9.4. value

提交给服务器的值

语法

html 复制代码 
<input type="radio" value="提交给服务器的值要写在这里" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input 
        type="radio"
        name="sex"
        checked
        value="0"
        /> 我是男生
      <input 
        type="radio"
        name="sex"
        value="1" 
        /> 我是女生
      <p>
        <input type="submit" value="提交数据给服务器">
      </p>
    </form>
  </body>
</html>

效果

课堂互动

  1. 以下属于<input>标签属性的是：

    • A：name
    • B：type
    • C：checked
    • D：radio

10. 复选框

多选

用在这里

语法

html 复制代码 
<input />

10.1. type

复选框类型

语法

html 复制代码 
<input type="checkbox" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="checkbox" /> 胖子
      <input type="checkbox" /> 长的白
      <input type="checkbox" /> 吃货
      <input type="checkbox" />不会化妆
      <p>
        <input type="submit" value="提交数据给服务器">
      </p>
    </form>
  </body>
</html>

效果

10.2. checked

默认选中

语法

html 复制代码 
<input checked />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="checkbox" checked/> 胖子
      <input type="checkbox" /> 长的白
      <input type="checkbox" /> 吃货
      <input type="checkbox" />不会化妆
      <p>
        <input type="submit" value="提交数据给服务器">
      </p>
    </form>
  </body>
</html>

效果

10.3. value

提交给服务器的值

语法

html 复制代码 
<input value="提交给服务器的值就写在这里" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="checkbox" name="pangzi" value="weight" checked/> 胖子
      <input type="checkbox" name="bai" value="white"/> 长的白
      <input type="checkbox" name="xingbie" value="eat"/> 吃货
      <input type="checkbox" name="buhui" value="face"/>不会化妆
      <p>
        <input type="submit" value="提交数据给服务器">
      </p>
    </form>
  </body>
</html>

效果

课堂互动

  1. 复选框默认选中属性是哪一个？
  • A：name
  • B：type
  • C：checked
  • D：radio

11. 文件域

上传文件

用在这里

语法

css 复制代码 
<input />

11.1. type

语法

html 复制代码 
<input type="file" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="file" />
    </form>
  </body>
</html>

效果

11.2. value

语法

html 复制代码 
<input type="file" value="这里是要提交给后台的数据" />

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <!-- form来定义数据收集的范围 -->
    <form>
        <input type="file" name="wenjian" value="要把数据提交给后台的内容" />
        <p>
            <input type="submit" value="提交数据给服务器">
        </p>
    </form>
</body>

</html>

效果

12. 日期

定义日期

语法

html 复制代码 
<input />

12.1. type

语法

html 复制代码 
<input type="date" />

type="date":定义日期控件

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <input type="date" 	
        />
    </form>
  </body>
</html>

效果

12.2. type 类型扩展

值 描述
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 "浏览..." 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

developer.mozilla.org/zh-CN/docs/...

13. 下拉菜单

用在这里

语法

html 复制代码 
<select>
  <option>选择项</option>
  <option>......</option>
</select>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <select>
        <option>HTML5</option>
        <option>CSS3</option>
        <option>JavaScript</option>
        <option>NodeJS</option>
        <option>Vue</option>
        <option>微信生态</option>
        <option>JavaScript生态</option>
      </select>
    </form>
  </body>
</html>

效果

13.1. select标签属性

设置列表中可见的选择项

语法

html 复制代码 
<select size="3">...</select>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <select size="3">
        <option>HTML5</option>
        <option>CSS3</option>
        <option>JavaScript</option>
        <option>NodeJS</option>
        <option>Vue</option>
        <option>微信生态</option>
        <option>JavaScript生态</option>
      </select>
    </form>
  </body>
</html>

效果

13.2. option标签属性

默认选中

语法

html 复制代码 
<option selected>...</option>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <select>
        <option>HTML5</option>
        <option>CSS3</option>
        <option selected>JavaScript</option>
        <option>NodeJS</option>
        <option>Vue</option>
        <option>微信生态</option>
        <option>JavaScript生态</option>
      </select>
    </form>
  </body>
</html>

效果

13.3. optgroup分组

分组

语法

html 复制代码 
<select name="lesson">
  <option value="">标题</option>
  <optgroup>
    <option value="">内容</option>
    <option value="">内容</option>
    <option value="">内容</option>
  </optgroup>
  <optgroup label="">
    <option value="">内容</option>
    <option value="">内容</option>
    <option value="">内容</option>
  </optgroup>
</select>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>

  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <select>
        <option>标题</option>
        <optgroup>
          <option>html5</option>
          <option>CSS3</option>
          <option>JavaScript</option>
        </optgroup>
        <optgroup>
          <option>NodeJS</option>
          <option>Vue</option>
          <option>微信生态</option>
          <option>JavaScript生态</option>
        </optgroup>
      </select>
    </form>
  </body>

</html>

效果

课堂互动

  1. 单选框的选中状态是（ ），下拉列表的选中状态是（ ）
    • A：checkbox selected
    • B：checked selected
    • C：radio selected
    • D：radio select

14. 多行文本域

用在这里

语法

html 复制代码 
<textarea>内容</textarea>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>

  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <textarea>
        最编程，创未来！
        你好，程序员！
      </textarea>
    </form>
  </body>

</html>

效果

14.1. 属性

14.1.1. cols - 列数

语法

html 复制代码 
<textarea cols="数值"></textarea>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>

  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <textarea cols="50">
        最编程，创未来！
        你好，程序员！
      </textarea>
    </form>
  </body>

</html>

效果

14.1.2. rows - 行数

语法

html 复制代码 
<textarea rows="数值"></textarea>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>

  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <textarea rows="10" cols="50">
        最编程，创未来！
        你好，程序员！
      </textarea>
    </form>
  </body>

</html>

效果

也支持maxlength、placeholder、disabled、autofocus、readonly

6.13.3 扩展属性

developer.mozilla.org/zh-CN/docs/...

课堂互动

  1. 代码创建的是几行几列的文本域？
    • A：30行10列
    • B：10行30列
    • C：30行30列
    • D：10行10列

15. label

15.1. 获取焦点

获取焦点，简称获焦，当我们点击可输入文本框的时候，会有光标闪烁，这就叫做获焦

我们现在有个需求点击文本框前面文本也就是"用户名"需要获取焦点，该怎么做呢？需要使用到label标签

15.2. 使用

语法

html 复制代码 
<label for="">用户名</label><input type="text" />
<!-- for属性需要和input中的id属性一样，才能把label和input关联起来-->

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <label for="username">用户名</label>
      <input 
        id="username"
        type="text"
        placeholder="请输入内容..."  
        />
    </form>
  </body>
</html>

效果

还有一种实现方法就是使用label把"用户名和input"直接全部包起来就可以了，而且不用for和id做关联了

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
  </head>
  <body>
    <!-- form来定义数据收集的范围 -->
    <form>
      <label>用户名
      <input 
        type="text"
        placeholder="请输入内容..."  
        />
        </label>
    </form>
  </body>
</html>

效果

16. fieldset和legend（了解）

当表单空间比较多的时候我们可以使用fieldset和legend对表单控件进行分类

语法

html 复制代码 
<form>
  <fieldset>
    <legend>主要信息</legend> 
    这里放你的表单控件
  </fieldset>
</form>

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <!-- form来定义数据收集的范围 -->
    <form>
        <fieldset>
            <legend>主要信息</legend>
            <label for="username">用户名</label>
            <input id="username" type="text" placeholder="请输入内容..." />
            <label for="password">密码</label>
            <input id="password" type="text" placeholder="请输入内容..." />
        </fieldset>
    </form>
</body>

</html>

效果

17. 作业

17.1. 作业1

两种实现思路：

  1. 采用表格的方式去实现
  2. div > p > label和input

增加两个需求：

  1. 点击立即注册按钮提交数据到search.jd.com/Search
  2. 点击重置按钮让所有表单控件数据恢复到初始的状态

注意：把input的name命名为keyword才能在京东搜索

17.2. 作业2

www.xnbeast.com/website-for...

17.3. 作业3

17.4. 作业4

  1. 百度logo使用图片自行从百度保存一下图片
  2. input搜索框最多属于20个文本
  3. 点击百度一下按钮跳转到 百度并且是新窗口打开
  4. 百度热搜和换一换左右布局
  5. 有序列表按照效果图排列，不要求123变色

17.4.1. 思路分析

17.4.2. 代码实现

17.4.3. 效果

17.5. 作业5

17.6. 作业6

17.6.1. 思路分析

17.6.2. 代码实现

17.6.3. 效果

17.7. 作业7

相关推荐
Danny_FD15 分钟前
Vue2 + Node.js 快速实现带心跳检测与自动重连的 WebSocket 案例
前端
uhakadotcom16 分钟前
将next.js的分享到twitter.com之中时，如何更新分享卡片上的图片？
前端·javascript·面试
韦小勇17 分钟前
el-table 父子数据层级嵌套表格
前端
奔赴_向往19 分钟前
为什么 PWA 至今没能「掘进」主流？
前端
小小愿望19 分钟前
微信小程序开发实战：图片转 Base64 全解析
前端·微信小程序
掘金安东尼22 分钟前
2分钟创建一个“不依赖任何外部库”的粒子动画背景
前端·面试·canvas
电商API大数据接口开发Cris22 分钟前
基于 Flink 的淘宝实时数据管道设计：商品详情流式处理与异构存储
前端·数据挖掘·api
小小愿望23 分钟前
解锁前端新技能：让JavaScript与CSS变量共舞
前端·javascript·css
程序员鱼皮26 分钟前
爆肝2月，我的 AI 代码生成平台上线了！
java·前端·编程·软件开发·项目
天生我材必有用_吴用39 分钟前
一文搞懂 useDark：Vue 项目中实现深色模式的正确姿势
前端·vue.js
热门推荐
01UV安装并设置国内源022025最新国内服务器可用docker源仓库地址大全（2025年8月更新）03全球最强模型Grok4，国内已可免费使用！（附教程）04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05TRAE Rules 实践：为项目配置 6A 工作流06KGG转MP3工具|非KGM文件|解密音频07GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】08Cursor 终端“卡死/无响应”问题的解法09【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）10[已解决]VSCode右键菜单消失恢复