1 表单属性设置

标签 表示表单标签，定义整体的表单区域
action属性 设置表单数据提交地址
method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

2 表单元素属性设置

name属性 设置表单元素的名称，该名称是提交数据时的参数名
value属性 设置表单元素的值，该值是提交数据时参数名所对应的值

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>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 把数据提交给web服务器使用表单标签 -->
  10.     <form action="https://baidu.com" method="POST">
  11.         <p>
  12.             <!-- for:鼠标单击label时给指定id的标签设置焦点 -->
  13.             <label for="name">用户名:</label>
  14.             <input type="text" id="name" name="username">
  15.         </p>
  16.         <p>
  17.             <label>密码:</label>
  18.             <input type="password" name="password">
  19.         </p>
  20.         <p>
  21.             <label>性别:</label>
  22.             <input type="radio" name="sex" value="0">男
  23.             <input type="radio" name="sex" value="1">女
  24.         </p>
  25.         <p>
  26.             <label>爱好:</label>
  27.             <input type="checkbox" name="hobby" value="吃饭">吃饭
  28.             <input type="checkbox" name="hobby" value="睡觉">睡觉
  29.             <input type="checkbox" name="hobby" value="打豆豆">打豆豆
  30.         </p>
  31.         <p>
  32.             <label>照片:</label>
  33.             <input type="file" name="pic">
  34.         </p>
  35.         <p>
  36.             <label>个人描述:</label>
  37.             <textarea name="desc"></textarea>
  38.         </p>
  39.         <p>
  40.             <label>籍贯:</label>
  41.             <select name="place">
  42.                 <option value="1">北京</option>
  43.                 <option value="2">河北</option>
  44.                 <option value="3">深圳</option>
  45.                 <option value="4">云南</option>
  46.             </select>
  47.         </p>
  48.         <p>
  49.             <input type="submit" value="提交">
  50.             <input type="reset" value="重置">
  51.             <input type="button" value="按钮">
  52.         </p>
  53.     </form>
  54. </body>
  55. </html>

4 效果

(1) 若以GET方式提交

image.png

(2) 若以POST方式提交

image.png