search

博客列表 >表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符，表单控件的form属性

表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符，表单控件的form属性

豌豆君
豌豆君原创
2020年12月16日 19:28:572294浏览

表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符</title>
  6.     </head>
  7.     <body>
  9.         <h3 class="title">用户注册</h3>
  10.         <!-- action: 处理表单的程序 -->
  11.         <!-- method: 表单提交类型
  12.         默认是GET：数据直接放在url地址中(适合少量和不敏感数据发送)
  13.         POST: 表单数据放在请求体中（大量和敏感数据发送） -->
  14.         <form action="" method="POST" class="register">
  16.             <!-- ---------- 1. --------- 单行文本框  -->
  17.             <!-- 账号加label标签是为了"账号"和文本框的焦点绑定提高体验
  18.             控件的绑定是通过 for 和 id 属性值绑定 -->
  20.             <label for="username">账号：</label>
  21.             <!-- type:控件类型 -->
  22.             <!-- name:控件中的name是程序读取的变量名。而class是css用来做读取的变量名 -->
  23.             <!-- value: 数据的值 -->
  24.             <!-- 控件的三个基本属性：type,name,value -->
  25.             <!-- required: 必选属性 -->
  26.             <!-- placeholder: 提示信息 -->
  28.             <!-- 通用文本框 -->
  29.             <input type="text" id="username" name="username" value="" placeholder="用户名" required> </input>
  31.             <label for="email">邮箱:</label>
  32.             <!-- 邮箱文本框 -->
  33.             <input type="text" id="email" name="email" value="" placeholder="demo@email.com" required> </input>
  35.             <label for="password">密码:</label>
  36.             <!-- 密明/非明文文本框 -->
  37.             <input type="password" id="password" name="password" value="" placeholder="不少于6个字符" required> </input>
  40.             <!-- ---------- 2. ---------  单选按钮与复选框按钮-->
  41.             <!-- 单选按钮 -->
  42.             <!-- label for="female" 表示点击性别会选中female 却焦点绑定 -->
  43.             <label for="female">性别:</label>
  44.             <div>
  45.                 <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性也就是可能变成多组单选按钮了 -->
  46.                 <!-- checked: 默选中 -->
  47.                 <input type="radio" name="gender" value="male" id="male" /> <label for="male">男</label>
  48.                 <input type="radio" name="gender" value="female" id="female" /> <label for="female">女</label>
  49.                 <input type="radio" name="gender" value="secret" id="secret" checked/> <label for="secret">保密</label>
  50.             </div>
  52.             <!-- 复选框按钮 -->
  53.             <label for="#">兴趣:</label>
  54.             <div>
  55.                 <!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接收到一组值 -->
  56.                 <!-- checked: 默选中 -->
  57.                 <input type="checkbox" name="hobby[]" value="game" id="game" /> <label for="game">游戏</label>
  58.                 <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
  59.                 <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
  60.                 <input type="checkbox" name="hobby[]" value="program" id="program" checked/> <label for="program">编程</label>
  61.             </div>
  63.             <!-- ---------- 3. ---------  下拉列表/下拉框-->
  64.             <!-- select 和 option 组合成 下拉列表 -->
  65.             <!-- selected 是默选中 -->
  66.             <label for="edu">学历:</label>
  67.             <!-- <select name="edu" id="edu" multiple size="2"> </select> -->
  68.             <select name="edu" id="edu">
  69.                 <option value="1">初中</option>
  70.                 <option value="2">高中</option>
  71.                 <option value="3" selected>本科</option>
  72.                 <option value="4">研究生</option>
  73.                 <!-- label 属性的优先级大于option内部的文本 -->
  74.                 <!-- <option value="5" label="老司机">自学成材</option> -->
  75.             </select>
  77.             <!-- ---------- 4. ---------  隐藏域-->
  78.             <!-- 隐藏域 -->
  79.             <!-- 上传文件要注意二点：
  80.                 1.请求类型必须是: POST
  81.                 2.将表单数据编码设置为：multipart/form-data 却二进制编码 -->
  82.             <label for="user-pic">头像:</label>
  83.             <!-- 隐藏域，在前端页面看不到的，它的值供后端处理用 -->
  84.             <input type="hidden" name="MAX_FILE_SIZE" value="10240">
  85.             <input type="file" name="user_pic" id="user-pic" />
  86.             <!-- 头像占位符 -->
  87.             <div class="user-pic" style="grid-column: span 2"></div>
  89.             <label for="user-resume">简历:</label>
  90.             <!-- 隐藏域，在前端页面看不到的，它的值供后端处理用 -->
  91.             <input type="hidden" name="MAX_FILE_SIZE" value="102400">
  92.             <input type="file" name="user_resume" id="user-resume" />
  93.             <!-- 简历占位符 -->
  94.             <div class="user-resume" style="grid-column: span 2"></div>
  96.             <!-- ---------- 5. ---------  文件域-->
  97.             <label for="comment">备注:</label>
  98.             <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  100.             <!-- --------------------------------- -->
  103.             <!-- 提交按钮 -->
  104.             <button>提交</button>
  105.         </form>
  106.     </body>
  107. </html>

表单控件的form属性 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>表单控件的form属性</title>
  6.         <style>
  7.             .box {
  8.                 width: 18em;
  9.                 display: grid;
  10.                 grid-template-columns: 60px 180px;
  11.                 place-content: center;
  12.                 gap: 1em;
  13.                 border: 1px solid #000000;
  14.                 padding: 1em;
  15.                 margin: auto;
  16.             }
  17.             .title{
  18.                 text-align: center;
  19.             }
  20.             .box button {
  21.                 grid-column: span 2;
  22.             }
  23.         </style>
  24.     </head>
  25.     <body>
  26.        <h3 class="title">用户注册</h3>
  27.        <form action="check.php" method="GET" id="register">
  28.             <div class="box">
  29.                 <!-- 使用form属性，将控件与它所属的表单进行关联/绑定 -->
  30.                 <label for="username">账号：</label>
  31.                 <input type="text" form="register" name="username" id="username" placeholder="不能为空" />
  32.                 <label for="email">邮件：</label>
  33.                 <input type="text" form="register" name="email" id="email" placeholder="demo@email.com" form="register"/>
  34.                 <label for="password">账号：</label>
  35.                 <input type="password" form="register" name="password" id="password" placeholder="至少8位" form="register"/>
  36.                 <button>提交</button>
  37.             </div>
  38.        </form>
  40.        <!-- 尽管form属性可以实现将控件写到任何地方，仍然能够获取到值，但不要这样做
  41.        第一影布局，第二代码混乱，第三有的浏览器不支持
  42.        但是，用在js中，获取数据将会变得非常的方便（所以一般是绑定form属性并放在 form标签里面） -->
  43.     </body>
  44. </html>

总结：

表单标签form

  1. action: 处理表单的程序
  2. method: 表单提交类型； 默认是GET：数据直接放在url地址中(适合少量和不敏感数据发送)；POST: 表单数据放在请求体中（大量和敏感数据发送）

控件的三个基本属性：type,name,value

控件的绑定是通过 for 和 id 属性值进行焦点绑定提高体验

通用文本框,邮箱文本框,密明/非明文文本框,单选按钮, 复选框按钮,隐藏域,文件,下拉列表,占位符,form属性

  1. type=”text”通用文本框
  2. type=”mail”邮箱文本框
  3. type=”password”密明/非明文文本框
  4. type=”radio” 单选按钮 （一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性也就是可能变成多组单选按钮了；checked: 默选中）
  5. type=”checkbox” 复选框按钮 （复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接收到一组值；checked: 默选中）
  6. type=”hidden”” 隐藏域 (上传文件要注意二点：1.请求类型必须是: POST; 2.将表单数据编码设置为：multipart/form-data 却二进制编码 )
  7. type=”file”” 文件 (可以选取一个文件)
  8. select 和 option 组合成 下拉列表 (selected 是默选中; label 属性的优先级大于option内部的文本 )
  9. grid-column 占位符
  10. form属性 使用form属性，将控件与它所属的表单进行关联/绑定 (控件一般是绑定form属性并放在 form标签里面)
上一条：css的基本语法下一条：CSS的引入方式和选择器的实例演示总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多