HTML + CSS 连载 | 34 - input 与 label 元素

Riemann Hypothesis

于 2023-10-31 22:09:39 发布

阅读量340

点赞数

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134131325

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、input 元素实现表单按钮

通过给定 type 不同的值可以使得 input 元素实现表单按钮的效果，具体的 type 值及可实现的按钮的效果如下：

普通按钮(type=“button”)：使用 value 属性设置按钮所显示的文字
重置按钮(type=“reset”)：重置它所属的 form 的所有表单元素（包括 input、textarea、select）
提交按钮(type=“submit”)：提交它所属 form 的表单数据给服务器（包括 input、textarea、select）

创建一个 HTML 页面，使用 input 的 type 设置不同的按钮，具体代码如下：

<!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>
  <!-- 用 input 来实现按钮效果 -->
  <input type="button" value="普通按钮">
  <input type="reset" value="重置按钮">
  <input type="submit" value="提交按钮">
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

我们也可以在最外层添加上 form 元素，使之成为一个 form 表单：

<!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>
  <form action="">
    <input type="text">
    <!-- 用 input 来实现按钮效果 -->
    <input type="button" value="普通按钮">
    <input type="reset" value="重置按钮">
    <input type="submit" value="提交按钮">
  </form>
</body>
</html>

刷新页面，效果如下：

页面效果并不会发生明显变化，但是点击提交按钮会将数据提交到服务端

当然这些由 input 的不同的 type 实现的按钮也可以通过 button 按钮元素来实现，在当前 HTML 中的每个 input 下面增加一个 button 按钮，具体代码如下：

<!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>
  <form action="">
    <input type="text">
    <input type="date">

    <div>
      <input type="button" value="普通按钮">
      <button>普通按钮</button>
    </div>
    <div>
      <input type="reset" value="重置按钮">
      <button type="reset">重置按钮</button>
    </div>
    <div>
      <input type="submit" value="提交按钮">
      <button type="submit">提交按钮</button>
    </div>
  </form>
</body>
</html>

刷新页面，效果如下：

可以看到这些由 button 实现的按钮和与 input 元素的不同 type 实现的按钮的功能都是一致的。

二、input 元素与 lable 元素结合使用

在实际开发中，input 元素常常和 label 元素结合使用，label 元素可以表示标题，充当 input 元素的解释信息。

创建一个新的 HTML 页面，使用 input 元素实现用户名和密码输入框，具体代码如下所示：

<!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>
  <div>
    用户名：<input type="text">
  </div>
  <div>
    密码：<input type="password">
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下所示：

我们可以在每个 input 前面加上 label 元素，用作提示，具体 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>
  <div>
    <label for="username">
      用户名：
    </label>
    <input id="username" type="text">
  </div>
  <div>
    <label for="password">
      密码：
    </label>
    <input id="password" type="password">
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

label 元素中有一个 for 属性，通过这个属性 label 元素可以跟某个 input 绑定（通过 id），点击 label 就可以激活对应的 input 变成选中的状态，也就是说当使用鼠标点击用户这个文本的时候，就会激活对应的输入框。

input 元素也可以放在 label 元素中，像这样也是可以的：

<div>
  <label for="username">
    用户名：
    <input id="username" type="text">
  </label>
</div>
<div>
  <label for="password">
    密码：
    <input id="password" type="password">
  </label>
</div>

刷新页面，具体效果如下：

具体的显示效果与之前没有任何的区别，点击 lable 标题的时候同样也可以激活对应的 input 的输入框。

Riemann Hypothesis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 34 - input 与 label 元素

label 元素中有一个 for 属性，通过这个属性 label 元素可以跟某个 input 绑定（通过 id），点击 label 就可以激活对应的 input 变成选中的状态，也就是说当使用鼠标点击用户这个文本的时候，就会激活对应的输入框。在实际开发中，input 元素常常和 label 元素结合使用，label 元素可以表示标题，充当 input 元素的解释信息。具体的显示效果与之前没有任何的区别，点击 lable 标题的时候同样也可以激活对应的 input 的输入框。
复制链接

扫一扫