HTML常用标签之form：登录框实例

作为干了多年网站开发的程序员，说句实在的，form标签真的是前端入门必学，也是工作中最常用的标签之一，没吃透它，做表单、登录、注册页都得卡壳。

很多新手刚学form，总觉得它复杂，其实说白了，它就是个“容器”，专门装输入框、按钮这些东西，让用户能提交信息，比如登录、注册、留言，都离不开它。

先说说form最常用的几个属性，不玩虚的，全是工作中天天用的。第一个action，就是用户点提交后，信息要发给哪个地址，比如登录信息要传给后端接口，这里就填接口地址，填错了信息就传丢了，踩过这坑的都懂。

然后是method，提交方式就两种，get和post，差别很大。get是把信息拼在网址上，肉眼能看到，适合传简单、不敏感的信息，比如搜索；post是隐藏信息，安全多了，登录、注册必须用这个，不然密码就暴露了，新手别搞混。

还有enctype，这个平时用得不多，但传文件（比如头像）时必须加，值填multipart/form-data，不然文件传不上去，我刚工作时就因为漏写这个，调试了半天，尴尬得不行。

另外还有target，控制提交后页面在哪打开，_self是当前页面，_blank是新窗口，一般登录用_self就够，不用瞎折腾。还有novalidate，加了这个就关闭浏览器自带的验证，比如密码为空时不提示，一般配合自定义验证用。

最后给大家整个登录框实例，直接复制就能用，注释写得明明白白，新手也能看懂：

<form action="/login" method="post" enctype="application/x-www-form-urlencoded">
  <!-- 用户名输入框 -->
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required placeholder="请输入用户名">
  
  <!-- 密码输入框，type="password"隐藏密码 -->
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required placeholder="请输入密码">
  
  <!-- 提交按钮和重置按钮 -->
  <button type="submit">登录</button>
  <button type="reset">重置</button>
</form>