HTML表单提交的细节-CSDN博客

本文链接：https://blog.csdn.net/zhongshun0928/article/details/115310335

本文详细讲解了HTML表单的POST与GET提交方式，重点介绍了如何正确设置表单元素属性，包括必填项、多选与单选问题，以及不同请求的安全性和数据长度限制。通过实例演示了如何构造一个用户注册表单并提交到百度服务器。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单提交</title>
</head>
<body>

<!--
  form是表单标签
    action属性设置提交的服务器地址
    method属性设置提交的方式是GET（默认）或POST

https://www.baidu.com/?action=login&username=zhongshun&password=1234566&sex=boy&hobby=Java&hobby=Python&country=cn&desc=Hello

  https://www.baidu.com/
  ?
  action=login
  &username=zhongshun
  &password=1234566&sex=boy
  &hobby=Java
  &hobby=Python
  &country=cn
  &desc=Hello

    表单提交的时候，数据没有发送给服务器的三种情况：
      1、表单项没有name属性值
      2、单选、复选（下拉列表中的option标签）都要添加value属性，以便发送给服务器
      3、表单项不在提交的form标签中


    GET请求的特点:
      1、浏览器地址栏中的地址是action属性[+?+请求参数]
          请求参数的格式是：name=value&name=value
      2、不安全
      3、它有数据长度的限制

    POST请求的特点：
      1、浏览器地址栏中只有action属性值
      2、相对于GET请求要安全
      3、理论上没有数据长度的限制
-->

<form action="https://baidu.com" method="POST">
  <input type="hidden" name="action" value="login">
  <h1 align="center">用户注册</h1>
  <table align="center">
    <tr>
      <td>用户名称：</td>
      <td><input type="text" name="username" value="默认值"/></td>
    </tr>
    <tr>
      <td>用户密码：</td>
      <td><input name="password" type="password"/></td>
    </tr>
    <tr>
      <td>确认密码：</td>
      <td><input type="password"/></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td>
        <input type="radio" name="sex" checked="checked" value="boy"/>男
        <input type="radio" name="sex" value="girl"/>女
      </td>
    </tr>
    <tr>
      <td>兴趣爱好：</td>
      <td>
        <input name="hobby" type="checkbox" value="Java"/>Java
        <input name="hobby" type="checkbox" value="C++"/>C++
        <input name="hobby" type="checkbox" value="Python"/>Python
      </td>
    </tr>
    <tr>
      <td>国籍：</td>
      <td>
        <select name="country">
          <option value="none">--请选择国籍--</option>
          <option value="cn" selected="selected">中国</option>
          <option value="usa">美国</option>
          <option value="jp">日本</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>自我评价：</td>
      <td><textarea name="desc" rows="10" cols="20">默认值</textarea><br></td>
    </tr>
    <tr>
      <td><input type="reset" value="重置"/></td>
      <td align="center"><input type="submit" value="提交"/></td>
    </tr>

  </table>

</form>

</body>
</html>