https://www.runoob.com/html/html-forms.html #review/前端/基础/html

储存表单数据

  • 通过input标签来获取值,input中的name属性就是变量名

数组

html表单里面相同的变量名被赋予多个值, 默认会合并成数组

提交表单

常规表单

  • 点击type=“submit”的input按钮会触发表单的提交
  • form 表单的action属性可以将表单数据传给另一个文件
    • 默认把表单数据传递给自己

单输入表单

W3C 标准定义:

当一个表单中只有一个单行文本输入字段时, 浏览器应当将在此字段中按下 Enter (回车键)的行为视为提交表单的请求。 

示例

<!DOCTYPE html>
<html>
<head>
    <title>简单表单示例</title>
</head>
<body>
<h2>注册表单</h2>
<form action="/submit_form" method="post">
    <!-- 文本框 -->
    <label for="fname">名字:</label><br>
    <input type="text" id="fname" name="fname"><br>
    
    <!-- 密码框 -->
    <label for="password">密码:</label><br>
    <input type="password" id="password" name="password"><br>
    
    <!-- 电子邮箱 -->
    <label for="email">电子邮箱:</label><br>
    <input type="email" id="email" name="email"><br>
    
    <!-- 单选按钮 -->
    <!-- 根据设定相同的name来产生互斥选项 -->
    <p>性别:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>
    
    <!-- 复选框 -->
    <p>你的爱好:</p>
    <input type="checkbox" id="hobby1" name="hobby1" value="Swimming">
    <label for="hobby1"> 游泳</label><br>
    <input type="checkbox" id="hobby2" name="hobby2" value="Reading">
    <label for="hobby2"> 阅读</label><br>
    
    <!-- 下拉列表 -->
    <label for="country">国家:</label><br>
    <select id="country" name="country">
      <option value="china">中国</option>
      <option value="japan">日本</option>
      <option value="korea">韩国</option>
    </select><br><br>
    
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>
</body>
</html>