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

原创 阁主  2023-07-11 17:25:20  阅读 811 次 评论 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”)

代码示例

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单元素-注册</title>
  8.   </head>
  9.   <body>
  10.     <!-- form.action: 处理表单数据的脚本 -->
  11.     <!-- form.method: 表单的提交方式, get(默认),post  -->
  12.     <form action="register.php" method="post">
  13.       <!-- fieldset: 表单控件的分组 -->
  14.       <fieldset style="display: inline-grid; gap: 1em">
  15.         <legend>新用户注册</legend>
  16.         <div class="username">
  17.           <!-- label+input -->
  18.           <label for="uname">用户名:</label>
  19.           <!-- input.type=text: 单行文本框 -->
  20.           <!-- autofocus: 页面初始化/加载成功时,焦点自动落入 -->
  21.           <!-- required: 必填项, 不写不能提交 -->
  22.           <!-- 只有名称没有值的属性叫:布尔属性(只要写上就是true,不写就是false) -->
  23.           <input type="text" id="uname" name="uname" value="" placeholder="不少于6位" autofocus required />
  25.           <!-- <label>
  26.             <input type="text" placeholder="请输入用户名(不少于6位)" />
  27.           </label> -->
  28.         </div>
  30.         <div class="email">
  31.           <label for="email">邮箱:</label>
  32.           <input type="email" name="email" id="email" placeholder="username@email.com" required />
  33.         </div>
  35.         <div class="psw">
  36.           <label for="psw">密码:</label>
  37.           <input
  38.             type="password"
  39.             onkeydown="this.nextElementSibling.disabled=false"
  40.             name="password"
  41.             id="psw"
  42.             required
  43.             placeholder="不少于6位且不能全为数字"
  44.           />
  45.           <!-- disabled: 禁用 -->
  46.           <button type="button" onclick="showPsw(this, this.form,true)" disabled>查看</button>
  47.           <!-- 查看密码功能,就是修改input:type.password => input.type.text  -->
  48.         </div>
  50.         <div class="age">
  51.           <label for="age">年龄:</label>
  52.           <input type="number" id="age" name="age" min="18" max="80" />岁
  53.         </div>
  55.         <div class="birthday">
  56.           <label for="birthday">生日:</label>
  57.           <input type="date" id="birthday" value="2008-08-08" name="birthday" min="1949-10-01" />
  58.         </div>
  60.         <!-- 单选按钮: 只返回一个值 -->
  61.         <div class="sex">
  62.           <!-- 将默认值与总标签sex进行绑定 -->
  63.           <label for="male">性别:</label>
  64.           <!-- input.value === input.id === label.for  -->
  65.           <!-- checked: 布尔属性, 默认选中 -->
  66.           <!-- input.type.radio中的 input.name 必须全部相同,因为name是提交互服务器上的变量名 -->
  67.           <!-- 只有全部相同,才能保证数据的唯一性 -->
  68.           <!-- name=male,female, secret, male, 以最后你选择的那个值为准,只保留一个 -->
  69.           <input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label>
  70.           <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
  71.           <input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label>
  72.         </div>
  74.         <div class="hobby">
  75.           <label>爱好:</label>
  76.           <!-- input.name全部相同,只会返回一个值,而复选框必须返回多个值,哪怕没有值,也是一个空集合 -->
  77.           <!-- 将input.name的名称后面加上 [],写成数组的语法 -->
  78.           <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
  79.           <input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program"
  80.             >编程</label
  81.           >
  82.           <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  83.           <input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戏</label>
  84.         </div>
  86.         <div class="edu">
  87.           <label for="">学历:</label>
  88.           <!-- 下拉列表: 从一组预置的值选择一个或多个返回 -->
  89.           <!-- 所以,变量的名称与值不在同一个元素上 -->
  90.           <!-- name=uname, value=admin
  91.           uname = admin
  92.           都声明在 input 一个元素上,名值必须绑定到一个元素上input  -->
  93.           <!-- <input type="text" name="uname" value="admin" /> -->
  95.           <!-- name 和 value 不在一个元素上 -->
  96.           <!-- select.name  -->
  97.           <!-- option.value -->
  98.           <select name="edu" id="">
  99.             <!-- 提示的制作方式 -->
  100.             <!-- <option value="" selected disabled>--请选择--</option> -->
  101.             <option value="1">中学</option>
  102.             <!-- selected: 默认选中  -->
  103.             <option value="2" selected>大学</option>
  104.             <option value="2">大学</option>
  105.             <option value="3">博士</option>
  106.           </select>
  107.         </div>
  109.         <button>提交</button>
  110.       </fieldset>
  112.       <!-- 单行文本框:
  113.       input.type = "text" 明文
  114.       input.type = "password" 密文
  115.       input.type = "email" 邮箱(验证) -->
  116.     </form>
  117.     <script>// 显示隐藏密码
  118.         function showPsw(ele, form) {
  119.             const psw = form.password
  120.             if (psw.type === 'password') {
  121.                 psw.type = 'text'
  122.                 ele.textContent = '隐藏'
  123.             } else if (psw.type === 'text') {
  124.                 psw.type = 'password'
  125.                 ele.textContent = '显示'
  126.             } else {
  127.                 return false
  128.             }
  129.         }
  130.     </script>
  131.   </body>
  132. </html>
本文地址：https://www.mainblog.cn/318.html
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。

评论已关闭！