简单介绍HTML表单的用法

• HTML表单是什么

HTML表单是一个网页提供给用户输入信息的地方，由 form 标签创建，其
输入框都放在 <form></form> 中

• HTML表单有哪些组成部分

  1. form 的主要属性：
     • action 指定表单提交到哪里
     • method 指定传输表单数据的方式，其值有 post / get 两种方式
  2. form 里的常用表单元素：
     • <input type="text"> --文本输入框
     • <input type="password"> --密码输入框
     • <input type="radio"> --单选框
     • <input type="checkbox"> --复选框
     • <input type="file"> --上传本地文件
     • <input type="submit"> --提交表单
     • <input type="reset"> --重置表单
     • <textarea></textarea> --文本区域
     • <select><option></option></select> --下拉菜单
     • <button></button> --按钮
     • <label></label> --为 input 元素定义标注，可通过 for 属性绑定 input 元素

• HTML表单的用法

创建一个简单的HTML表单，如下：

<form action="" method="post">
  <div class="username">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" placeholder="请输入您的用户名">
  </div>
   <div class="password">
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" placeholder="请输入您的密码">
  </div>
  <div class="sex">
    <label>性别：</label>
    <input type="radio" name="sex" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="sex" value="female" id="female">
    <label for="female">女</label>
  </div>
  <div class="hobby">
    <label>爱好：</label>
    <input type="checkbox" name="hobby" value="sport" id="sport">
    <label for="sport">运动</label>
    <input type="checkbox" name="hobby" value="read" id="read">
    <label for="read">阅读</label>
    <input type="checkbox" name="hobby" value="draw" id="draw">
    <label for="draw">画画</label>
  </div>
  <div class="comment">
    <label for="comment">评论：</label>
    <textarea id="comment" name="comment" rows="15" cols="30" placeholder="请输入您的评论"></textarea>
  </div>
  <div class="button-group">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
  </div>
</form>

注：按下提交按钮后，form 中的表单信息会被提交到服务器，而 form 外的表单信息则不会被提交