HTML表单常用标签和常用属性

原创 阁主  2026-02-22 23:25:24  阅读 1055 次 评论 0 条
摘要：

简单记录一下Emmet语法、常用的form标签和常用的form搭配属性。

Emmet语法

  1. 结构: !
  2. 内容:{text}
  3. 属性:[attr],#id,.class
  4. 重复: *
  5. 父子: >
  6. 兄弟: +
  7. 父级: ^
  8. 分组: (emmet)
  9. 序号: $,$@,$@-n

常用标签

  1. <form>: 表单控件的容器
  2. <fieldset>: 表单控件分组容器
  3. <label>: 控件标签名称
  4. <input>: 输入控件,类型由 type 属性决定
  5. <select>+<option>: 下载列表框
  6. <input>+<datalist>+<option>: 预定义列表框
  7. <textarea>: 文本域(多行文本框)
  8. <button>: 按钮,默认同步提交(type=”submit”)

常用属性

  1. form.id: 表单引用
  2. form.action: 表单处理脚本
  3. form.method: 表单提交方式(GET/POST)
  4. form.enctype: 表单数据编码方式
  5. form.onsubmit: 表单提交事件
  6. input.type: 输入控件类型
  7. input.type="text": 单行文本框(默认)
  8. input.type="email": 邮箱控件
  9. input.type="password": 密码控件(密文)
  10. input.type="number": 数值控件
  11. input.type="date": 日期控件
  12. input.type="color": 拾色器
  13. input.type="url": URL 控件
  14. input.type="search": 搜索框控件
  15. input.type="hidden": 隐藏域控件
  16. input.type="file": 文本域控件
  17. input.type="radio": 单选按钮
  18. input.type="checkbox": 复选框
  19. select.name+option.value: 下拉列表框
  20. input.list+datalist.id: 预定义列表框
  21. textarea.cols/rows: 文本域(多行文本框)
  22. button.type: 按钮(默认提交:type=”submit”)

代码示例

下面代码是一些简单的常用经典方案。

<!DOCTYPE html>
<html lang="zh-CN">
  <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>表单元素-注册</title>
  </head>
  <body>
    <!-- form.action: 处理表单数据的脚本 -->
    <!-- form.method: 表单的提交方式, get(默认),post  -->
    <form action="register.php" method="post">
      <!-- fieldset: 表单控件的分组 -->
      <fieldset style="display: inline-grid; gap: 1em">
        <legend>新用户注册</legend>
        <div class="username">
          <!-- label+input -->
          <label for="uname">用户名:</label>
          <!-- input.type=text: 单行文本框 -->
          <!-- autofocus: 页面初始化/加载成功时,焦点自动落入 -->
          <!-- required: 必填项, 不写不能提交 -->
          <!-- 只有名称没有值的属性叫:布尔属性(只要写上就是true,不写就是false) -->
          <input type="text" id="uname" name="uname" value="" placeholder="不少于6位" autofocus required />

          <!-- <label>
            <input type="text" placeholder="请输入用户名(不少于6位)" />
          </label> -->
        </div>

        <div class="email">
          <label for="email">邮箱:</label>
          <input type="email" name="email" id="email" placeholder="username@email.com" required />
        </div>

        <div class="psw">
          <label for="psw">密码:</label>
          <input
            type="password"
            onkeydown="this.nextElementSibling.disabled=false"
            name="password"
            id="psw"
            required
            placeholder="不少于6位且不能全为数字"
          />
          <!-- disabled: 禁用 -->
          <button type="button" onclick="showPsw(this, this.form,true)" disabled>查看</button>
          <!-- 查看密码功能,就是修改input:type.password => input.type.text  -->
        </div>

        <div class="age">
          <label for="age">年龄:</label>
          <input type="number" id="age" name="age" min="18" max="80" />岁
        </div>

        <div class="birthday">
          <label for="birthday">生日:</label>
          <input type="date" id="birthday" value="2008-08-08" name="birthday" min="1949-10-01" />
        </div>

        <!-- 单选按钮: 只返回一个值 -->
        <div class="sex">
          <!-- 将默认值与总标签sex进行绑定 -->
          <label for="male">性别:</label>
          <!-- input.value === input.id === label.for  -->
          <!-- checked: 布尔属性, 默认选中 -->
          <!-- input.type.radio中的 input.name 必须全部相同,因为name是提交互服务器上的变量名 -->
          <!-- 只有全部相同,才能保证数据的唯一性 -->
          <!-- name=male,female, secret, male, 以最后你选择的那个值为准,只保留一个 -->
          <input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label>
          <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
          <input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label>
        </div>

        <div class="hobby">
          <label>爱好:</label>
          <!-- input.name全部相同,只会返回一个值,而复选框必须返回多个值,哪怕没有值,也是一个空集合 -->
          <!-- 将input.name的名称后面加上 [],写成数组的语法 -->
          <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
          <input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program"
            >编程</label
          >
          <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
          <input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戏</label>
        </div>

        <div class="edu">
          <label for="">学历:</label>
          <!-- 下拉列表: 从一组预置的值选择一个或多个返回 -->
          <!-- 所以,变量的名称与值不在同一个元素上 -->
          <!-- name=uname, value=admin
          uname = admin
          都声明在 input 一个元素上,名值必须绑定到一个元素上input  -->
          <!-- <input type="text" name="uname" value="admin" /> -->

          <!-- name 和 value 不在一个元素上 -->
          <!-- select.name  -->
          <!-- option.value -->
          <select name="edu" id="">
            <!-- 提示的制作方式 -->
            <!-- <option value="" selected disabled>--请选择--</option> -->
            <option value="1">中学</option>
            <!-- selected: 默认选中  -->
            <option value="2" selected>大学</option>
            <option value="2">大学</option>
            <option value="3">博士</option>
          </select>
        </div>

        <button>提交</button>
      </fieldset>

      <!-- 单行文本框:
      input.type = "text" 明文
      input.type = "password" 密文
      input.type = "email" 邮箱(验证) -->
    </form>
    <script>// 显示隐藏密码
        function showPsw(ele, form) {
            const psw = form.password
            if (psw.type === 'password') {
                psw.type = 'text'
                ele.textContent = '隐藏'
            } else if (psw.type === 'text') {
                psw.type = 'password'
                ele.textContent = '显示'
            } else {
                return false
            }
        }
    </script>
  </body>
</html>
本文地址：https://www.mainblog.cn/318.html
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。
NEXT:已经是最新一篇了

评论已关闭！