html标签（2）

- form标签

• action：处理form信息的程序所在的URL

• method：
  post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
  get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。

  <form action="users？zzz=3" method="post">
          <label>用户名<input type="text" name="姓名"></label>
          <label>密码<input type="password" name="密码"></label>          
          <input type="submit" value="提交">
  </form>
  

补充：
* form标签中无提交按钮则无法提交表单
* file协议不支持post,a标签支持get，form标签get、post
* get默认把参数放入查询参数

* post默认把参数放入form data，可在action后加查询参数（例:？zzz=3）

- button标签

    <button>提交</button>
    <input type="submit" value="提交">    
    <button type="submit">提交 </button>      三种提交

补充：

• type按钮的类型。可能的值是：
  submit：该按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。
  reset：该按钮将所有控件重置为其初始值。
  button：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时触发。

• button标签未标注type，button会自动升级为submit
• <button>和<input type="button"> 的区别 在 button 元素内部，您可以放置内容，比如文本或图像。 这是该元素与使用 input 元素创建的按钮之间的不同之处

- input标签

    <input type="button" value="button">   不可提交，为普通按钮
    <input type="submit" value="提交">        可提交

---

     checkbox:复选框
     <input type="checkbox" id="xxx"><label for="xxx">橘子</label>
     <input type="checkbox" id="xxx"><label for="xxx">苹果</label>
      label标签的for属性与input标签的id属性搭配使用，可实现点击文字勾选

---

  radio实现单选：给多个选项设定同一name属性
    <label><input name="answer" type="radio" value="Yes">对</label>
    <label><input name="answer" type="radio" value="No">错</label>

补充 :
如果 input 不加 name属性，那么在表单提交时，input 的值就不会出现在请求里

---

- label标签

    <label>用户名<input type="text" name="姓名"></label>
    <label>密码<input type="password" name="密码"></label>
            label标签将input标签包围效果等同于属性绑定

image.png

- select标签

           <select name="group" multiple>
                    <option value="">-</option>
                    <option value="1">第一组</option>
                    <option value="2" disabled>第二组</option>
                    <option value="3" selected>第三组</option>
                </select>

补充：

• multiple属性可实现多选（按ctrl或shift）
• required属性规定select的值不能为空(布尔值)
• <option>
disabled不可选
  selected默认选择

- textarea标签

<textarea name="textarea" >Write something here</textarea>
<textarea name="textarea" style="resize:none; width:100px; height:50px; ">Write something here</textarea>   

补充：

• 可变大小的文本域，通过css设置固定大小