form # 表单元素

最新推荐文章于 2024-02-16 18:32:49 发布

十友九

最新推荐文章于 2024-02-16 18:32:49 发布

阅读量178

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/116705368

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

input元素

在这里插入图片描述
输入框

type属性：输入框类型

type: text，普通文本输入框
type：password，密码框
type: date, 日期选择框，兼容性问题
type: search, 搜索框，兼容性问题
type: number，数字输入框
type: checkbox，多选框
type: radio，单选框

value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示

input元素可以制作按钮

当type值为reset、button、submit时，input表示按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 500px;
        }
    </style>
</head>
<body>
    <p>
        <!-- 普通文本输入框 -->
        <input type="text" placeholder="请输入账号">
    </p>
    <p>
        <!-- 密码框 -->
        <input type="password" placeholder="请输入密码">
    </p>
    <p>
        <!-- 日期选择框 -->
        <input type="date">
    </p>
    <p>
        <!-- 搜索框 -->
        <input type="search">
    </p>
    <p>
        <!-- 滑块 -->
        <input type="range" min="0" max="5">
    </p>
    <p>
        <!-- 颜色选择 -->
        <input type="color">
    </p>
    <p>
        <!-- 数字输入框 -->
        <input type="number" min="0" max="100" step="20">
    </p>
    <p>
        <!-- 多选框 -->
        爱好：
        <input name="loves" type="checkbox">
        音乐
        <input checked name="loves" type="checkbox">
        电影
        <input name="loves" type="checkbox">
        阅读
        <input name="loves" type="checkbox">
        其他
    </p>
    <p>
        <!-- 单选框 -->
        性别：
        <input name="gender" type="radio">
        男
        <input checked name="gender" type="radio">
        女
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="submit" value="这是一个提交按钮">
    </p>
</body>
</html>

select元素

在这里插入图片描述

下拉列表选择框

通常和option元素配合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
        请选择城市：
        <select>
            <option>成都</option>
            <option>北京</option>
            <option selected>哈尔滨</option>
        </select>
    </p>
    <p>
        请选择你最喜欢的主播：
        <select>
            <optgroup label="才艺表演">
                <option>冯提莫</option>
            </optgroup>
            <optgroup label="游戏主播">
                <option>WETed</option>
                <option>infi</option>
                <option>th000</option>
            </optgroup>
        </select>
    </p>
    <p>
        请选择你喜欢的主播：
        <select multiple>
            <optgroup label="才艺表演">
                <option>冯提莫</option>
            </optgroup>
            <optgroup label="游戏主播">
                <option>WETed</option>
                <option>infi</option>
                <option>th000</option>
            </optgroup>
        </select>
    </p>
</body>
</html>

label

普通元素，通常配合单选和多选框使用

显示关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

隐式关联

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  <body>
      <p>
          请选择性别：
          <label>
              <input name="gender" type="radio">
              男
          </label>
          <label>
              <input name="gender" type="radio">
              女
          </label>
      </p>
  </body>
  </html>

datalist

在这里插入图片描述

数据列表

该元素本身不会显示到页面，通常用于和普通文本框配合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
        请输入你常用的浏览器：
        <input list="userAgent" type="text">
    </p>
    <datalist id="userAgent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="IE">IE浏览器</option>
        <option value="Opera">欧鹏浏览器</option>
        <option value="Safari">苹果浏览器</option>
        <option value="Fire fox">火狐浏览器</option>
    </datalist>
</body>
</html>

fieldset元素

在这里插入图片描述

表单分组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <h1>修改用户信息</h1>
        <fieldset>
            <legend>账号信息</legend>
            <p>
                用户账号：
                <input type="text" value="aaaaa" readonly>
            </p>
            <p>
                用户密码：
                <input type="password">
            </p>
        </fieldset>

        <fieldset>
            <legend>基本信息</legend>
            <p>
                用户姓名：
                <input disabled value="袁进" type="text">
            </p>
            <p>
                城市：
                <select disabled name="" id="">
                    <option value="">Lorem.</option>
                    <option value="">Vel!</option>
                    <option value="">Dolore?</option>
                    <option value="">Autem?</option>
                    <option value="">Nulla?</option>
                    <option value="">Aliquam?</option>
                    <option value="">Obcaecati!</option>
                    <option value="">Nulla!</option>
                    <option value="">Totam.</option>
                    <option value="">Ipsum.</option>
                </select>
            </p>
        </fieldset>


        <p>
            <button disabled>提交修改</button>
        </p>
    </div>
</body>

</html>

十友九

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form # 表单元素

input元素输入框type属性：输入框类型type: text，普通文本输入框type：password，密码框type: date, 日期选择框，兼容性问题type: search, 搜索框，兼容性问题type: number，数字输入框type: checkbox，多选框type: radio，单选框value属性：输入框的值placeholder属性：显示提示的文本，文本框没有内容时显示input元素可以制作按钮当type值为reset、button、submi
复制链接

扫一扫