Blogger Information
Blog 6
fans 0
comment 0
visits 6206
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
from表单的基础控件
王硕的博客
Original
618 people have browsed it

from表单的基础控件


1.最简单的的一个注册表单结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>表单</title>
  7. </head>
  8. <body>
  9. <form action="b.html" method="POST">
  10. <label for="username">账号:</label>
  11. <input
  12. type="text"
  13. id="username"
  14. name="username"
  15. placeholder="至少6位"
  16. autofocus
  17. required
  18. />
  19. <label for="email">邮箱:</label>
  20. <input
  21. type="email"
  22. id="email"
  23. name="email"
  24. placeholder="admin@focus.com"
  25. required
  26. />
  27. <label for="pwd1">密码:</label>
  28. <input
  29. type="password"
  30. id="pwd1"
  31. name="pwd1"
  32. placeholder="至少输入6位,并且包含字母和数字"
  33. required
  34. />
  35. <label for="pwd2">确认:</label>
  36. <input
  37. type="password"
  38. id="pwd2"
  39. name="pwd2"
  40. placeholder="****"
  41. required
  42. />
  43. <button type="submit">提交</button>
  44. </form>
  45. </body>
  46. </html>

2.单选框和复选框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>单选按钮和复选框</title>
  7. </head>
  8. <body>
  9. <form action="b.html" method="GET">
  10. <!-- 单选框 -->
  11. <label for="male">性别:</label>
  12. <div>
  13. <input type="radio" name="gender" id="male" checked /><label for="male"
  14. ></label
  15. >
  16. <input type="radio" name="gender" id="female" /><label for="female"
  17. ></label
  18. >
  19. <input type="radio" name="gender" id="secret" /><label for="secret"
  20. >保密</label
  21. >
  22. </div>
  23. <!-- 复选框 -->
  24. <label for="">兴趣:</label>
  25. <div>
  26. <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  27. >游戏</label
  28. >
  29. <input type="checkbox" name="hobby[]" id="write" /><label for="write"
  30. >写字</label
  31. >
  32. <input type="checkbox" name="hobby[]" id="read" checked /><label
  33. for="read"
  34. >阅读</label
  35. >
  36. <input type="checkbox" name="hobby[]" id="car" /><label for="car"
  37. >开车</label
  38. >
  39. </div>
  40. <button type="submit">提交</button>
  41. </form>
  42. </body>
  43. </html>

3.下拉列表和下拉多选列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>下拉选择</title>
  7. </head>
  8. <body>
  9. <form action="b.html" method="GET">
  10. <!-- 单选框 -->
  11. <!-- <label for="edu">学历:</label> -->
  12. <!-- <div> -->
  13. <!-- 单选下拉列表 -->
  14. <!-- <select name="edu" id="edu">
  15. <option value="1">小学</option>
  16. <option value="2">初中</option>
  17. <option value="3">高中</option>
  18. <option value="4">专科</option>
  19. <option value="5" selected>本科</option>
  20. </select> -->
  21. <!-- </div> -->
  22. <!-- 多选列表 -->
  23. <label for="hobby">兴趣爱好:</label>
  24. <select name="hobby" id="hobby" size="6" multiple>
  25. <option value="1">look</option>
  26. <option value="2">write</option>
  27. <option value="3" selected>read</option>
  28. <option value="4">run</option>
  29. <option value="5" selected>go</option>
  30. </select>
  31. <button type="submit">提交</button>
  32. </form>
  33. </body>
  34. </html>

4.文件上传

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>文件上传</title>
  7. </head>
  8. <body>
  9. <!-- post提交 form-data二进制流传输 -->
  10. <form action="b.html" method="POST" enctype="multipart/form-data">
  11. <input type="hidden" name="MAX_FILE_SIZE" value="800" />
  12. <input type="file" name="head" id="head" /><label for="head">头像</label>
  13. <button type="submit">提交</button>
  14. </form>
  15. </body>
  16. </html>

5.文本域

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>文本域</title>
  7. </head>
  8. <body>
  9. <form action="b.html" method="POST">
  10. <textarea
  11. name="desc"
  12. id="desc"
  13. cols="30"
  14. rows="10"
  15. placeholder="请输入..."
  16. ></textarea>
  17. <button type="submit">提交</button>
  18. </form>
  19. </body>
  20. </html>

6.控件的 from 属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>控件的form属性</title>
  7. </head>
  8. <body>
  9. <form id="register"></form>
  10. <!-- form下的控件 不在from标签区域内,也可以实现from元素的填充 -->
  11. <input type="text" name="" id="" form="register" />
  12. <button form="register" formaction="b.html" formmethod="GET">提交</button>
  13. </body>
  14. </html>

7.iframe 案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>iframe案例</title>
  7. </head>
  8. <body>
  9. <header>xx后台</header>
  10. <aside>
  11. <a href="http://www.baidu.com" target="show">百度</a>
  12. <a href="http://www.qq.com" target="show">qq</a>
  13. <a href="http://www.taobao.com" target="show">taobao</a>
  14. <a href="http://www.360.com" target="show">360</a>
  15. </aside>
  16. <main>
  17. <iframe src="" name="show" width="600" height="500"></iframe>
  18. </main>
  19. </body>
  20. </html>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:内联框架有意思
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post