表单中的标签的最好都设置name属性，因为表单中的数据一般是提交给后台的。、

表单简述

表单的标签是form，它可以设置很多个属性，其中必须要填的属性是method和action
image.png
action属性：表单提交数据的位置，可以是网站、也可以是一个请求处理地址；
method属性：设置ger请求还是post请求；
get方式提交：url中可以看到用户提交的数据，不安全但是高效；
post方式提交：url中看不到用户提交的数据，安全性高，可以传输大文件；

文本框、密码框、提交按钮、重置按钮

input标签中的type属性设置为text（也是input标签的默认值）是就是一个文本框；type属性设置为password属性就是一个密码框。文本框和密码框必须要设置name属性，因为提交的数据就存在name中。

input标签中的type属性设置为submit就是提交按钮，点击就会提交表单中的数据；type属性设置为reset就是重置按钮，点击就会重置表单内容。提交类型和重置按钮中的value就是其名字，其默认的值是“提交”和“重置”。

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5. </head>
  6. <body>
  8. <h1>登录</h1>
  10. <form action="HTML01.html" >
  11.     <p>账号：<input name="username" type="text"></p>
  12.     <p>密码：<input name="password" type="password"></p>
  13.     <p>
  14.         <input type="submit" value="登录">
  15.         <input type="reset">
  16.     </p>
  17. </form>
  19. </body>
  20. </html>

运行结果：
image.png

单选框和多选框

input标签中type设置为radio就是单选框，设置为checkbox就是多选框；其中value属性和name属性必须具有，value用于保存选择的选项的值，name如果没有的话单选框会出现可以多选的情况（多个选项的name要设置成一样的，这样才能单选；多选框其实可以不设置name，但是为了配合单选框和规范，最好设置那么属性）。

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5. </head>
  6. <body>
  8. <h1>登录</h1>
  10. <form action="HTML01.html" method="post">
  11.     <p>账号：<input name="username" type="text"></p>
  12.     <p>密码：<input name="password" type="password"></p>
  13.     <p>性别：
  14.         <input type="radio" value="boy" name="sex">男
  15.         <input type="radio" value="girl" name="sex">女
  16.     </p>
  17.     <p>爱好
  18.         <input type="checkbox" value="sleep" name="hobby">睡觉
  19.         <input type="checkbox" value="eat" name="hobby">吃
  20.         <input type="checkbox" value="play" name="hobby">玩
  21.         <input type="checkbox" value="girl" name="hobby">女孩
  22.     </p>
  23.     <p>
  24.         <input type="submit" value="登录">
  25.         <input type="reset">
  26.     </p>
  27. </form>
  29. </body>
  30. </html>

运行结果：
image.png

表单按钮

上述的submit和reset类型其实就是一个按钮，只是具有特殊的功能；当type设置为button时就是一个普通按钮，不能提交表单数据；但是如果type设置为image，那就是一个图片按钮，图片按钮可以提交表单信息。特别注意区别图片超链接，并且表单中的图片按钮要设置src（路径）。

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5. </head>
  6. <body>
  8. <h1>登录</h1>
  10. <form action="HTML01.html" method="post">
  11.     <p>账号：<input name="username" type="text"></p>
  12.     <p>密码：<input name="password" type="password"></p>
  13.     <p>性别：
  14.         <input type="radio" value="boy" name="sex">男
  15.         <input type="radio" value="girl" name="sex">女
  16.     </p>
  17.     <p>爱好
  18.         <input type="checkbox" value="sleep" name="hobby">睡觉
  19.         <input type="checkbox" value="eat" name="hobby">吃
  20.         <input type="checkbox" value="play" name="hobby">玩
  21.         <input type="checkbox" value="girl" name="hobby">女孩
  22.     </p>
  23.     <p>
  24.         按钮：<input type="button" name="btn01" value="点一下我啦">
  25.         图片按钮：<input type="image" src="xjj.jpg" width="50" height="50">
  26.     </p>
  27.     <p>
  28.         <input type="submit" value="登录">
  29.         <input type="reset">
  30.     </p>
  31. </form>
  33. </body>
  34. </html>

运行结果：
image.png

下拉框

下拉框的标签不再是input而是select：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5. </head>
  6. <body>
  8. <form action="HTML01.html" method="post">
  9.     <select name="x1">国家：
  10.         <option value="us">美国</option>
  11.         <option value="china" selected>中国</option><!--设置为默认选中-->
  12.         <option value="uk">英国</option>
  13.         <option value="yin_du">印度</option>
  14.     </select>
  15. </form>
  17. </body>
  18. </html>

运行结果：
image.png

文本域和文件域

文本域使用