经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
前端学习日记 (二)
来源:cnblogs  作者:Fantac  时间:2019/11/8 8:48:09  对本文有异议

form表单

使用时机当前后端有数据交互的时候用form表单

form表单提交数据的几个注意事项:

1.所有获取用户输入的标签都必须放在form表单里面

2.action控制着往哪提交

3.input\select\textarea都需要有name的属性,nane属性类似于字典中的键能方便在后端数据的找寻

4.提交按钮<input type="submit">

用form表单的语句制作一个简单的注册网页:

  1. <!DOCTYPE html>
  2. <html>     
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>网页表单示例</title>
  6. </head>
  7. <body>
  8. <!--注册示例-->
  9. <form action="" method="post" enctype="multipart/form-data"> <!--action后面一般写一个网址用于把数据反馈给后端-->
  10. <p>用户名:
  11. <input name="username" type="text">
  12. </p>
  13. <p>密码:
  14. <input name="password" type="password">
  15. </p>
  16.  
  17. <p>性别:
  18. <input name="gender" type="radio" value="1"><!--这里的性别作为一个提示性文字-->
  19. <input name="gender" type="radio" value="0">
  20. <input checked name="gender" type="radio" value="2">保密 <!--checked表示默认-->
  21. </p>
  22.  
  23. <p>爱好:
  24. <input checked name="hobby" type="checkbox" value="basketball">篮球
  25. <input name="hobby" type="checkbox" value="shotting">射击
  26. <input name="hobby" type="checkbox" value="parachute">跳伞
  27. <input name="hobby" type="checkbox" value="skiing">溜冰
  28. </p>
  29.  
  30. <p>
  31. <select name="region" id="s1">
  32. <option value="中国">中国</option>
  33. <option value="日本">日本</option>
  34. <option value="美国">美国</option>
  35. </select>
  36.  
  37. <select name="innerRegion" id="s2">
  38. <optgroup label="中国">
  39. <option value="fj">福建</option>
  40. <option value="sx">山西</option>
  41. <option value="gd">广东</option>
  42. <option value="hn">河南</option>
  43. <option value="sh">上海</option>
  44. </optgroup>
  45.  
  46. <optgroup label="日本">
  47. <option value="bhd">北海道</option>
  48. <option value="snc">神奈川</option>
  49. <option value="dj">东京</option>
  50. <option value="cs">冲绳</option>
  51. <option value="db">大阪</option>
  52. </optgroup>
  53.  
  54. <optgroup label="美国">
  55. <option value="fc">费城</option>
  56. <option value="ny">纽约</option>
  57. <option value="zjg">芝加哥</option>
  58. <option value="lsj">洛杉矶</option>
  59. <option value="xsd">休斯顿</option>
  60. </optgroup>
  61. </select>
  62. </p>
  63.  
  64. <p>
  65. 生日:<input name="birthday" type="date">
  66. </p>
  67.  
  68. <p>
  69. <textarea name="myInfo" id="t1" cols="30" rows="10"></textarea>
  70. </p>
  71.  
  72. <p><!--不可用栏目-->
  73. <input name="disableText" type="text" placeholder="Disable text!" disabled>
  74. </p>
  75.  
  76. <p><!--上传头像-->
  77. 头像:
  78. <input name="get_file" type="file">
  79. </p>
  80.  
  81. <p>邮箱地址:<!--邮箱-->
  82. <input name="email" type="email" placeholder="f123456@gmail.com"> <!--placeorder中的值不会去显示-->
  83. </p>
  84.  
  85. <p><!--隐藏不显示-->
  86. <input type="hidden" value="hidden">
  87. </p>
  88.  
  89. <p>只读文本:
  90. <input name="readOnlyText" type="text" readonly value="这是只读文本,无法修改!">
  91. </p>
  92.  
  93. <p><!--制作按钮-->
  94. <input type="button" value="点击按钮">
  95. </p>
  96.  
  97. <p><!--提交资料-->
  98. <input type="submit" value="提交资料!">
  99. </p>
  100.  
  101. <p><!--重置资料-->
  102. <input type="reset" value="点击重置" >
  103. </p>
  104. </form>
  105.  
  106. </body>
  107. </html>

网页效果:

归纳:

常用类型的功能有:text(文本)、password(密码)、radio(单选框)、checkbox(多选框)、date(日期)、datatime(时间)、file(文件)、button(按钮,一般使用JS给它绑定)、sumbit(提交)、textarea(大文本)、select(下拉菜单)、option(具体的下拉菜单)、optgroup(分组的下拉框)

表单属性:

属性

描述

accept

MIME_type

HTML5不支持,规定服务器接收到的文件的类型。(文件是通过文件上传提交的)

accept-charset

character_set

规定服务器可处理的表单数据字符集。

action

url

规定当提交表单时向何处发送表单数据

autocomplete

on/off

规定是否启用表单的自动补全的功能,比如第二次输入用户名,HTML5会帮你自动填补信息。

enctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

 

规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)

method

get/post

规定用于发送表单数据的 HTTP 方法。

name

text

规定表单的名称。

novalidate

novalidate

如果使用该属性,则提交表单时不进行验证。

target

_blank/_self/_parent/_top

规定在何处打开 action URL。

 

select的一些补充

①multiple 可进行多选

  1. <form action="" method="post" enctype="multipart/form-data">
  2. <p>
  3. <select name="color" id="c" multiple>      <!--表示可以进行多选-->
  4. <option value="yellow">黄色</option>
  5. <option value="blue">蓝色</option>
  6. <option value="red">红色</option>
  7. <option value="orange">橘色</option>
  8. </select>
  9. </p>
  10. </form>

网页效果:

②disabled 不可用

③selected 默认选中某一项

  1. <form action="" method="post" enctype="multipart/form-data">
  2. <p>
  3. <select name="color" id="c" >
  4. <option value="yellow">黄色</option>
  5. <option value="blue">蓝色</option>
  6. <option value="red">红色</option>
  7. <option value="orange">橘色</option>
  8. <option value="null" selected>null</option>
  9. </select>
  10. </p>
  11. </form>

网页效果:

 ④value 定义提交的选项值

 

label的一些补充

label标签就是input元素的一个定义,这样写会更加规范

  1. <form action="" method="post" enctype="multipart/form-data">
  2. <p>
  3. <label for="l1">用户名</label>
  4. <input id="l1" name="username" type="text" placeholder="请输入用户名!">
  5. </p>
  6.  
  7. <p>
  8. <label for="l2">密码</label>
  9. <input id="l2" name="password" type="text" placeholder="请输入密码!">
  10. </p>
  11. </form>

通过点击label标签名也可以对radio去选中

  1. <!DOCTYPE html>
  2. <html>     
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>网页表单示例</title>
  6. </head>
  7. <body>
  8. <form action="" method="post" enctype="multipart/form-data">
  9. <p>性别1:
  10. <input name="gender" type="radio" value="1">
  11. <input name="gender" type="radio" value="0">
  12. <input checked name="gender" type="radio" value="2">保密
  13. </p>
  14.  
  15. <p>性别2:
  16. <label for="s1"></label>
  17. <input id="s1" name="gender" type="radio" value="1">
  18. <label for="s2"></label>
  19. <input id="s2" name="gender" type="radio" value="0">
  20. <label for="s3">保密</label>
  21. <input id="s3" checked name="gender" type="radio" value="2">
  22. </p>
  23. </form>
  24. </body>
  25. </html>

另外一种写法(推荐):

  1. <!DOCTYPE html>
  2. <html>     
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>网页表单示例</title>
  6. </head>
  7. <body>
  8. <form action="" method="post" enctype="multipart/form-data">
  9. <p>
  10. <label for="">性别
  11. <label>
  12. <input name="gender" type="radio" value="1">
  13. </label>
  14. <label>
  15. <input name="gender" type="radio" value="0">
  16. </label>
  17. <label>保密
  18. <input checked name="gender" type="radio" value="2">
  19. </label>
  20. </label>
  21. </p>
  22. </form>
  23. </body>
  24. </html>

 

原文链接:http://www.cnblogs.com/Fantac/p/11809722.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号