浏览器表单的基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单</title>
    <!-- 
        如同table一样，表单的使用也需要一个主体标签，就是form
        主要用于提交数据到远程服务端进行操作
        1.action表示动作，这里我们使用跳转操作，指向服务器的地址
        2.介绍几个input使用
            （1）限定input类型（type）
                -text文本框
                -password密码
                -radio单选
                -submit提交按钮
                -checkbox多选
                -select下拉菜单，下面必须跟option联合操作
            （2）限定参数提交（name）
                -通过name参数传入数据，数据以name的属性返回，类似于定义的变量
            （3）默认值（value）
                -传入给定的默认数值，一般用于单选、多选、下拉菜单
            （4）默认选项（checked、selected）
                -checked用于单选按钮默认选项
                -selected用于下拉菜单默认选项
        3.input是行内块元素，默认行排列，但可以设置大小宽度，所以一般用br标签分隔
        4.补充
            （1）自动获取焦点（autofocus），多用于光标第一手自动显示的位置
            （2）表单自动补全（autocomplete），决定表单弹出提示信息与否
            一次性只能设置一个框，但可以作用于form
                -on 开启
                -off 关闭
            （3）disabled，锁定不可修改，且值不会传递
            （4）readonly，锁定不可修改，只读，但值会传递
            （5）常用按钮
                -submit，提交按钮，会传递到服务端
                -reset，重置清空所有表单数据
                -button，普通按钮，可结合js设计多样操作
            （6）双标签按钮方式，可嵌套其它元素
                -button type=submit
                -button type=reset
                -button type=button
     -->
  </head>
  <body>
    <form action="table_long.html" autocomplete="off">
      账号<input type="text" name="username" />
      <br />
      密码<input type="password" name="password" autofocus />
      <p>性别</p>
      男<input type="radio" name="select_one" value="男" checked /> 
      女<input type="radio" name="select_one" value="女" />
      <p>喜欢的水果</p>
      西瓜<input type="checkbox" name="select_more" value="西瓜" /> 
      香蕉<input type="checkbox" name="select_more" value="香蕉" disabled />
      苹果<input type="checkbox" name="select_more" value="苹果" />
      <p>城市</p>
      <select name="selected">
        <option value="北京">北京</option>
        <option value="重庆" selected>重庆</option>
        <option value="上海">上海</option>
      </select>
      <br />
      <input type="submit" name="button" />
      <input type="reset" />
      <input type="button" value="普通按钮" />
      <br />
      <button type="submit" name="button">提交</button>
      <button type="reset">重置</button>
      <button type="button">普通按钮</button>
    </form>
  </body>
</html>