表单是html页面收集用户信息的集合，并用于发送给服务器

  1. <body>
  2. <!--from标签是表单-->
  3. <!--i
  4. input是输入框(单标签)，type是输入类型
  5. input type=text是单行文本输入 value是默认值
  6. input type=password是密码输入 value是默认值
  7. input type=radio是单选，起名字给它分在一个组，实现单选功能，check=“check”表示默认勾选
  8. input type=checkbox是复选 check=“check”表示默认勾选
  9. input type=reset是重置 value是修改按钮上的文本
  10. input type=submit是提交 value是修改按钮上的文本
  11. input type=button是按钮 value是修改按钮上的文本
  12. input type=file是上传文件
  13. input type=hidden是隐藏域，当需要发送的信息不能给用户看见使使用
  15. select是下拉列表，option是选项 select=“select”是默认选中
  16. textarea是文本域 row设置行 cols设置每行可以显示多少个字符,<>这是默认值区域</>
  17.  -->
  19.                                   <!--表单的一些细节-->
  20.   <!--from标签是表单标签，action属性设置提交服务器的地址，method属性设置提交服务器的方式GET(默认值),POST-->
  21.   <!--表单提交的时候，数据没有发给服务器的三种情况：-->
  22.   <!--  1. 表单项没有name属性-->
  23.   <!--  2. 单选复选（下拉列表中的option标签都需要添加value属性）都需要添加value属性-->
  24.   <!--  3.表单项不在提交的from标签中-->
  25.                     <!--get请求的细节：-->
  26. <!--1. 浏览器地址栏格式：action属性+？+请求参数-->
  27. <!--请求参数格式：name=value&name=value-->
  28. <!--2. 不安全（密码可见）-->
  29. <!--3. 有数据长度限制-->
  30.                     <!--post请求的细节:-->
  31. <!--1. 只有action地址-->
  32. <!--2. 比get安全-->
  33. <!--3. 理论上无长度限制-->
  35. <form>
  36.   <font size="6" color="#32cd32">选科系统</font><br/>
  37.   用户姓名：<input type="text"/><br/>
  38.   学号：<input type="text"/><br/>
  39.   密码：<input type="password"/><br/>
  40.   性别：<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女<br/>
  41.   你选的学科：<input type="checkbox"/>物理 <input type="checkbox"/>化学 <input type="checkbox"/>生物 <input type="checkbox"/>地理<input type="checkbox"/>历史<input type="checkbox"/>政治<br/>
  42.   国籍：<select>
  43.     <option>--请选择国籍--</option>
  44.     <option>中国</option>
  45.     <option>美国</option>
  46.     <option>英国</option>
  47.     <option>日本</option>
  48.   </select><br/>
  49.   自我评价：<br/>
  50.   <textarea cols="30" rows="8"></textarea><br/>
  51.   一寸照片提交：<input type="file"/><br/>
  53.   <input type="reset" value="重置"><br/>
  54.   <input type="submit" value="提交">
  55. </form>
  57. </body>

image.png

下面进行优化：

  1. <form action="https://www.yuque.com/u21911226/ypfu0m/kpfgs7" method="post">
  2.   <h1 align="center"><font color="#5f9ea0">选科系统</font></h1>
  3.   <table>
  4.     <tr>
  5.       <td >用户姓名：</td>
  6.       <td><input type="text" name="username"/></td>
  7.     </tr>
  9.     <tr>
  10.       <td>学号:</td>
  11.       <td><input type="text" name="stunum"/></td>
  12.     </tr>
  14.     <tr>
  15.       <td>密码：</td>
  16.       <td><input type="password" name="password"/></td>
  17.     </tr>
  19.     <tr>
  20.       <td>性别：</td>
  21.       <td><input type="radio" name="sex" checked="checked" value="男"/>男 <input type="radio" name="sex" value="女"/>女</td>
  22.     </tr>
  24.     <tr>
  25.       <td>你选的学科：</td>
  26.       <td><input type="checkbox" value="wuli" name="suj"/>物理
  27.         <input type="checkbox" value="huaxue" name="suj"/>化学
  28.         <input type="checkbox" value="shengwu" name="suj"/>生物
  29.         <input type="checkbox" value="dili" name="suj"/>地理
  30.         <input type="checkbox" value="lishi" name="suj"/>历史
  31.         <input type="checkbox" value="zhengzhi" name="suj"/>政治
  32.       </td>
  33.     </tr>
  35.     <tr>
  36.       <td>国籍：</td>
  37.       <td><select name="country">
  38.         <option value="none">--请选择国籍--</option>
  39.         <option value="china">中国</option>
  40.         <option value="usa">美国</option>
  41.         <option value="uk">英国</option>
  42.         <option value="jp">日本</option>
  43.       </select></td>
  44.     </tr>
  46.     <tr>
  47.       <td>自我评价：</td>
  48.       <td><textarea cols="30" rows="8" name="text"></textarea></td>
  49.     </tr>
  51.     <tr>
  53.       <td>一寸照片提交：</td>
  54.       <td><input type="file" name="pic"/></td>
  55.     </tr>
  57.     <tr>
  58.       <td><input type="reset" value="重置"></td>
  59.       <td><input type="submit" value="提交"></td>
  60.     </tr>
  62.   </table>
  63. </form>

优化效果如下图：
image.png

提交

from标签是表单标签，action属性设置提交服务器的地址，method属性设置提交服务器的方式GET(默认值),POST