博客列表 >表单与内联框架

表单与内联框架

Wu.Ang
Wu.Ang原创
2022年08月03日 20:56:20399浏览

表单与内联框架

表单

<form action="form.php" method="get"> </form>

action:数据传输接收的页面,method:传输方式get/post

get:数据以”?查询字符串,键值对方式发送到后端

<label for=""></label>

实现点击用户名,焦点跳转到对应的输入框 for对应input的id值

<input type="text" id="name" placeholder="用户名不能为空">

placeholder 输入框中的提示符

<input type="password">

password属性:输入内容加密,可以用js代码实现明文与密文切换

<input type="radio" name="" value="" id="" checked>

radio:单选按钮,name值必须一致,value为向后台传输的数据

checked默认选项

<input type="checkbox" name="value[]" value="" id="">

checkbox:复选框,name值加[]代表数组

  1. <select name="edu" id="">
  2. <option value="0" selected disabled>选择学历</option>
  3. <option value="1" >中专</option>
  4. <option value="2">大专</option>
  5. <option value="3">本科</option>
  6. </select>

select+option 下拉列表格式

selected是预选框 disabled禁止选中

表单图片示例

表单图片

原代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10. <div>
  11. <h2>form表单</h2>
  12. <form action="form.php" method="get">
  13. <div>
  14. <!-- 用户名 -->
  15. <!-- <label for=""></label> 实现点击用户名,焦点跳转到对应的输入框 for对应input的id值-->
  16. <!-- placeholder 输入框中的提示符 也可以用value默认值,不美观-->
  17. <label for="name">用户名:</label>
  18. <input type="text" id="name" placeholder="用户名不能为空">
  19. </div>
  20. <div>
  21. <!-- 密码 -->
  22. <!-- password属性:输入内容加密,可以用js代码实现明文与密文切换 -->
  23. <label for="pwd">密码:</label>
  24. <input type="password" id="pwd" placeholder="密码不能为空">
  25. <button>查看密码</button>
  26. </div>
  27. <div>
  28. <!-- 性别单选按钮 -->
  29. <!-- radio:单选框,name值必须是一致的,value值是像后台传输的数据 -->
  30. <!-- checked默认选项 -->
  31. <label for="nan">性别:</label>
  32. <input type="radio" name="sex" value="nan" id="nan" checked><label for="nan"></label>
  33. <input type="radio" name="sex" value="nv" id="nv"><label for="nv"></label>
  34. </div>
  35. <div>
  36. <!-- 复选框 -->
  37. <!-- checkbox:复选框,name值加[]代表数组 -->
  38. <label for="">城市:</label>
  39. <input type="checkbox" name="citys[]" value="beijing" id="beijing"><label for="beijing">北京</label>
  40. <input type="checkbox" name="citys[]" value="shanghai" id="shanghai"><label for="shanghai">上海</label>
  41. <input type="checkbox" name="citys[]" value="hebei" id="hebei"><label for="hebei">河北</label>
  42. <input type="checkbox" name="citys[]" value="tianjin" id="tianjin"><label for="tianjin">天津</label>
  43. </div>
  44. <div>
  45. <!-- 下拉列表 -->
  46. <!-- select+option 下拉列表格式 -->
  47. <!-- selected是预选框 disabled禁止选中-->
  48. <label for="">学历:</label>
  49. <select name="edu" id="">
  50. <option value="0" selected disabled>选择学历</option>
  51. <option value="1" >中专</option>
  52. <option value="2">大专</option>
  53. <option value="3">本科</option>
  54. </select>
  55. </div>
  56. <div>
  57. <button>提交</button>
  58. </div>
  59. </form>
  60. </div>
  61. </body>
  62. </html>

内联框架

  1. <a href="../0704/demo1.html" target="content"></a>
  2. <iframe src="" frameborder="0" name="content"></iframe>

a标签的target属性对应iframe标签的name属性,为本地跳转

  1. css样式
  2. /* 居中对齐 */
  3. text-align: center;
  4. /* 去除无序列表的点 */
  5. list-style: none;

内联框架示例

内联框架

原代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. <style>
  9. .top{
  10. width: 1000px;
  11. height: 100px;
  12. /* border: 1px solid red; */
  13. /* 居中对齐 */
  14. text-align: center;
  15. }
  16. ul{
  17. /* 去除无序列表的点 */
  18. list-style: none;
  19. /* border: 1px solid black; */
  20. text-align: center;
  21. display: flex;
  22. }
  23. li{
  24. border: 1px solid gray;
  25. width: 20%;
  26. }
  27. a{
  28. width: 200px;
  29. height: 30px;
  30. display: flex;
  31. margin-top: 10%;
  32. margin-left: 30%;
  33. }
  34. iframe{
  35. width: 1000px;
  36. height: 500px;
  37. border: 1px solid black;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <!-- 导航 -->
  43. <div class="top">
  44. <ul>
  45. <li><a href="../0704/demo1.html" target="content">元素属性</a></li>
  46. <li><a href="../0704/demo2.html" target="content">布局元素</a></li>
  47. <li><a href="../0704/demo3.html" target="content">链接与列表</a></li>
  48. <li><a href="../0704/demo4.html" target="content">表格元素</a></li>
  49. <li><a href="https://j.map.baidu.com/aa/5NJ" target="content">地图</a></li>
  50. </ul>
  51. </div>
  52. <!-- 内容 -->
  53. <div class="bottom">
  54. <iframe src="" frameborder="0" name="content"></iframe>
  55. </div>
  56. </body>
  57. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议