博主信息
豌豆君
博文
22
粉丝
0
评论
0
访问量
5888
积分:0
P豆:46

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

2020年12月16日 19:28:57阅读数:1127博客 / 豌豆君/ html

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

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

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 是用来与用户做交流一个网页,良好设计能够让网页与用户更好沟通。中常见元素主要包括:输入等。
    在HTML中,一个完整通常由元素(也称为)、提示信息和3个部分构成。
    章给大家介绍一Bootstrap中常用输入等)。有一定参考价值,有需要朋友可以参考一,希望对大家有所帮助。
    电脑任务栏图标方法:首先右击“任务栏”,在弹出右键菜择“”项;然后择“任务栏”项卡,并点击“通知区自定义”;接着点击相应图标右侧;最后择“图标和通知”