HTML表单常用标签和常用属性-前端开发-阁主学习小站

摘要：

简单记录一下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")

## 代码示例

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

```html
<!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="register.php" method="post">
      
      <fieldset style="display: inline-grid; gap: 1em">
        <legend>新用户注册</legend>
        <div class="username">
          
          <label for="uname">用户名:</label>
          
          
          
          
          <input type="text" id="uname" name="uname" value="" placeholder="不少于6位" autofocus required />

</div>

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

<div class="sex">
          
          <label for="male">性别:</label>
          
          
          
          
          
          <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>

<select name="edu" id="">
            
            
            <option value="1">中学</option>
            
            <option value="2" selected>大学</option>
            <option value="2">大学</option>
            <option value="3">博士</option>
          </select>
        </div>

</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
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。